add currency account component

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

@@ -100,6 +100,8 @@ import BinaryBot from 'Assets/svgs/wallet/ic-brand-binarybot.svg';
 import DBot from 'Assets/svgs/wallet/ic-brand-dbot.svg';
 import DTrader from 'Assets/svgs/wallet/ic-brand-dtrader.svg';
 import SmartTrader from 'Assets/svgs/wallet/ic-brand-smarttrader.svg';
+import Demo from 'Assets/svgs/wallet/ic-brand-demo.svg';
+import CurrencyUSD from 'Assets/svgs/wallet/currency-usd.svg';
 
 const Icons = {
     '1foryouDark': OneforyouDark,
@@ -203,6 +205,8 @@ const Icons = {
     DBot,
     DTrader,
     SmartTrader,
+    Demo,
+    CurrencyUSD,
 };
 
 const WalletIcon = ({ icon, className }: { icon: string; className?: string }) => {

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

@@ -0,0 +1,153 @@
+.account__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 0px;
+    isolation: isolate;
+    position: relative;
+    width: 240px;
+    height: 72px;
+    background: #f2f3f4;
+    border-radius: 6px 6px 0px 0px;
+    @include mobile {
+        padding: 8px 16px 8px 8px;
+        gap: 4px;
+        isolation: isolate;
+        width: 190px;
+        height: 62px;
+        background: linear-gradient(0deg, #f2f3f4, #f2f3f4), #ffffff;
+        border-radius: 4px 4px 0px 0px;
+    }
+    &--icon {
+        width: 64px;
+        @include mobile {
+            width: 64px;
+            height: 60px;
+        }
+    }
+    &--account-details-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0px;
+
+        width: 133px;
+        height: 56px;
+        &--name-number {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            padding: 0px;
+
+            width: 69px;
+            height: 32px;
+            &--name {
+                height: 18px;
+
+                /* desktop/small/S - bold */
+                font-style: normal;
+                font-weight: 700;
+                font-size: 12px;
+                line-height: 18px;
+                /* identical to box height, or 150% */
+
+                /* system/light/1 - prominent (text) */
+
+                color: #333333;
+                @include mobile {
+                    width: 28px;
+                    height: 14px;
+                }
+            }
+            &--number {
+                width: 69px;
+                height: 14px;
+
+                /* desktop/extra small/XS - regular */
+                font-style: normal;
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 14px;
+                /* identical to box height, or 140% */
+
+                /* system/light/3 - less prominent (text) */
+
+                color: #999999;
+                @include mobile {
+                    width: 54px;
+                    height: 12px;
+                    font-weight: 700;
+                    font-size: 8px;
+                    line-height: 12px;
+                }
+            }
+        }
+        &--balance {
+            width: 114px;
+            height: 24px;
+
+            /* desktop/paragraph/P1 - bold */
+            font-style: normal;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 24px;
+            /* identical to box height, or 150% */
+
+            /* system/light/2 - general (text) */
+
+            color: #333333;
+            @include mobile {
+                width: 99px;
+                height: 20px;
+                font-size: 14px;
+                line-height: 20px;
+            }
+        }
+    }
+    &--account-reset-button {
+        box-sizing: border-box;
+
+        /* Auto layout */
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 3px 8px;
+
+        position: absolute;
+        width: 60px;
+        height: 24px;
+        right: 8px;
+        top: 8px;
+
+        /* light/3 - less prominent (text) */
+
+        border: 1px solid #999999;
+        border-radius: 4px;
+        @include mobile {
+            top: 8px;
+            border: 1px solid #999999;
+            border-radius: 4px;
+        }
+        &--label {
+            width: 45px;
+            height: 18px;
+
+            /* desktop/small/S - bold */
+
+            font-style: normal;
+            font-weight: 700;
+            font-size: 12px;
+            line-height: 18px;
+            /* identical to box height, or 150% */
+
+            text-align: center;
+
+            /* light/1 - prominent (text) */
+
+            color: #333333;
+        }
+    }
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import WalletIcon from 'Assets/svgs/wallet';
+
+type TOptionsAccountprops = {
+    account_icon: string;
+    account_title?: string;
+    account_number?: string;
+    account_balance?: string;
+    account_button?: string;
+};
+
+const OptionsAccount = ({
+    account_icon,
+    account_title,
+    account_number,
+    account_balance,
+    account_button,
+}: 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} />
+                </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>
+    );
+};
+
+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,29 @@
+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 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 USD',
+    account_button: 'Deposit',
+};