Ashraf/74903/pre app store account

packages/appstore/src/assets/svgs/wallet/index.tsx

@@ -95,6 +95,9 @@ import WechatPayDark from 'Assets/svgs/wallet/wechat-pay-dark.svg';
 import WechatPayLight from 'Assets/svgs/wallet/wechat-pay-light.svg';
 import ZingpayDark from 'Assets/svgs/wallet/zingpay-dark.svg';
 import ZingpayLight from 'Assets/svgs/wallet/zingpay-light.svg';
+import CurrencyUSD from 'Assets/svgs/wallet/currency-usd.svg';
+import Demo from 'Assets/svgs/wallet/ic-brand-demo.svg';
+import DropDown from 'Assets/svgs/wallet/drop-down.svg';
 
 const Icons = {
     '1foryouDark': OneforyouDark,
@@ -193,6 +196,9 @@ const Icons = {
     WechatPayLight,
     ZingpayDark,
     ZingpayLight,
+    CurrencyUSD,
+    Demo,
+    DropDown,
 };
 
 const WalletIcon = ({ icon, className }: { icon: string; className?: string }) => {

packages/appstore/src/components/account/account.scss

@@ -0,0 +1,126 @@
+.account__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.4rem 0;
+    isolation: isolate;
+    position: relative;
+    width: 24rem;
+    height: 7.2rem;
+    background: $color-grey-2;
+    border-radius: 0.6rem 0.6rem 0 0;
+    @include mobile {
+        padding: 0.8rem;
+        gap: 0.4rem;
+        isolation: isolate;
+        width: 22rem;
+        height: 6.2rem;
+        background: linear-gradient(0deg, $color-grey-2, $color-grey-2), #ffffff;
+        border-radius: 0.4rem 0.4rem 0 0;
+    }
+    &--dropdown {
+        @include mobile {
+            height: 6rem;
+            position: absolute;
+            right: 0.8rem;
+            top: 3.3rem;
+        }
+    }
+    &--icon {
+        width: 6.4rem;
+        @include mobile {
+            width: 6.4rem;
+            height: 6rem;
+        }
+    }
+    &--account-details-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+        width: 13.3rem;
+        height: 5.6rem;
+        &--name-number {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            padding: 0;
+            width: 6.9rem;
+            height: 3.2rem;
+            &--name {
+                height: 1.8rem;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+                color: $color-black-1;
+                @include mobile {
+                    height: 1.4rem;
+                }
+            }
+            &--number {
+                width: 6.9rem;
+                height: 1.4rem;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 1rem;
+                line-height: 1.4rem;
+                color: $color-grey-1;
+                @include mobile {
+                    width: 5.4rem;
+                    height: 1.2rem;
+                    font-weight: 700;
+                    font-size: 0.8rem;
+                    line-height: 1.2rem;
+                }
+            }
+        }
+        &--balance {
+            width: 11.4rem;
+            height: 2.4rem;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 1.6rem;
+            line-height: 2.4rem;
+            color: $color-black-1;
+            @include mobile {
+                width: 9.9rem;
+                height: 2rem;
+                font-size: 1.4rem;
+                line-height: 2rem;
+            }
+        }
+    }
+    &--account-reset-button {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 0.3rem 0.8rem;
+        position: absolute;
+        width: 6rem;
+        height: 2.4rem;
+        right: 0.8rem;
+        top: 0.8rem;
+        border: 0.1rem solid $color-grey-1;
+        border-radius: 0.4rem;
+        @include mobile {
+            top: 0.8rem;
+            border: 0.1rem solid $color-grey-1;
+            border-radius: 0.4rem;
+            right: 3.8rem;
+        }
+        &--label {
+            width: 4.5rem;
+            height: 1.8rem;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 1.2rem;
+            line-height: 1.8rem;
+            text-align: center;
+            color: $color-black-1;
+        }
+    }
+}

packages/appstore/src/components/account/account.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import WalletIcon from 'Assets/svgs/wallet';
+import { getCurrencyDisplayCode } from '@deriv/shared';
+
+type TOptionsAccountprops = {
+    account_icon: string;
+    account_title?: string;
+    account_number?: string;
+    account_balance?: string;
+    account_button?: string;
+    currency?: string;
+};
+
+const OptionsAccount = ({
+    account_icon,
+    account_title,
+    account_number,
+    account_balance,
+    account_button,
+    currency,
+}: TOptionsAccountprops) => {
+    return (
+        <div className='account__container'>
+            <div className='account__container--icon'>
+                <WalletIcon icon={account_icon} />
+            </div>
+            <div className='account__container--account-details-wrapper'>
+                <div className='account__container--account-details-wrapper--name-number'>
+                    <Text className='account__container--account-details-wrapper--name-number--name' weight='bold'>
+                        <Localize i18n_default_text={account_title} />
+                    </Text>
+                    <Text className='account__container--account-details-wrapper--name-number--number'>
+                        <Localize i18n_default_text={account_number} />
+                    </Text>
+                </div>
+
+                <Text className='account__container--account-details-wrapper--balance'>
+                    <Localize i18n_default_text={account_balance} />
+                    {` ${getCurrencyDisplayCode(currency)}`}
+                </Text>
+            </div>
+            <div className='account__container--account-reset-button'>
+                <Text className='account__container--account-reset-button--label'>
+                    <Localize i18n_default_text={account_button} />
+                </Text>
+            </div>
+            <div className='account__container--dropdown'>
+                <WalletIcon icon={'DropDown'} />
+            </div>
+        </div>
+    );
+};
+
+export default OptionsAccount;

packages/appstore/src/components/account/index.ts

@@ -0,0 +1,4 @@
+import OptionsAccount from './account';
+import './account.scss';
+
+export default OptionsAccount;

packages/appstore/src/components/account/stories/accunt.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+import OptionsAccount from '../index';
+
+type OptionsAccountProps = Parameters<typeof OptionsAccount>[0];
+
+export default {
+    title: 'Account',
+} as Meta<OptionsAccountProps>;
+
+const Template: Story<OptionsAccountProps> = args => <OptionsAccount {...args} />;
+
+export const AccountDemo = Template.bind({});
+AccountDemo.args = {
+    account_icon: 'Demo',
+    account_title: 'Demo',
+    account_number: 'VRTC6501742',
+    account_balance: '10,000.00',
+    currency: 'USD',
+    account_button: 'Reset',
+};
+
+export const AccountUsdollar = Template.bind({});
+AccountUsdollar.args = {
+    account_icon: 'CurrencyUSD',
+    account_title: 'US Dollar',
+    account_number: 'CR2333683',
+    account_balance: '0.00',
+    currency: 'USD',
+    account_button: 'Deposit',
+};