From b579168ef34e14ffc641bbd4b7594128c48080a3 Mon Sep 17 00:00:00 2001 From: ashrafali-v Date: Fri, 2 Sep 2022 15:40:30 +0800 Subject: [PATCH] add currency account component --- .../src/assets/svgs/wallet/currency-usd.svg | 1 + .../src/assets/svgs/wallet/ic-brand-demo.svg | 1 + .../appstore/src/assets/svgs/wallet/index.tsx | 4 + .../src/components/account/account.scss | 153 ++++++++++++++++++ .../src/components/account/account.tsx | 49 ++++++ .../appstore/src/components/account/index.ts | 4 + .../account/stories/accunt.stories.tsx | 29 ++++ 7 files changed, 241 insertions(+) create mode 100644 packages/appstore/src/assets/svgs/wallet/currency-usd.svg create mode 100644 packages/appstore/src/assets/svgs/wallet/ic-brand-demo.svg create mode 100644 packages/appstore/src/components/account/account.scss create mode 100644 packages/appstore/src/components/account/account.tsx create mode 100644 packages/appstore/src/components/account/index.ts create mode 100644 packages/appstore/src/components/account/stories/accunt.stories.tsx diff --git a/packages/appstore/src/assets/svgs/wallet/currency-usd.svg b/packages/appstore/src/assets/svgs/wallet/currency-usd.svg new file mode 100644 index 000000000000..b2d6c2787c53 --- /dev/null +++ b/packages/appstore/src/assets/svgs/wallet/currency-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/appstore/src/assets/svgs/wallet/ic-brand-demo.svg b/packages/appstore/src/assets/svgs/wallet/ic-brand-demo.svg new file mode 100644 index 000000000000..2c435cd1f236 --- /dev/null +++ b/packages/appstore/src/assets/svgs/wallet/ic-brand-demo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/appstore/src/assets/svgs/wallet/index.tsx b/packages/appstore/src/assets/svgs/wallet/index.tsx index ddaa657360c6..ca916ea46409 100644 --- a/packages/appstore/src/assets/svgs/wallet/index.tsx +++ b/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 }) => { diff --git a/packages/appstore/src/components/account/account.scss b/packages/appstore/src/components/account/account.scss new file mode 100644 index 000000000000..ed7a918ee1c4 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/appstore/src/components/account/account.tsx b/packages/appstore/src/components/account/account.tsx new file mode 100644 index 000000000000..3f03b24e7451 --- /dev/null +++ b/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 ( +
+
+ +
+
+
+ + + + + + +
+ + + + +
+
+ + + +
+
+ ); +}; + +export default OptionsAccount; diff --git a/packages/appstore/src/components/account/index.ts b/packages/appstore/src/components/account/index.ts new file mode 100644 index 000000000000..1ba2e838153f --- /dev/null +++ b/packages/appstore/src/components/account/index.ts @@ -0,0 +1,4 @@ +import OptionsAccount from './account'; +import './account.scss'; + +export default OptionsAccount; diff --git a/packages/appstore/src/components/account/stories/accunt.stories.tsx b/packages/appstore/src/components/account/stories/accunt.stories.tsx new file mode 100644 index 000000000000..6cdee8bb8d26 --- /dev/null +++ b/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[0]; + +export default { + title: 'Account', +} as Meta; + +const Template: Story = 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', +};