From c4c70de9481af88fbe7d1dafe9f7163e69baa032 Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Mon, 4 Sep 2023 16:03:09 +0800 Subject: [PATCH] thisyahlen/chore: update ui for wallet header (#9870) * chore: update ui for wallet header * chore: add more styles * chore: add more styles v2 * fix: lint errors * chore: split components * chore: split v2 * chore: split v3 * chore: add svg for header button actions * fix: format balance and css styles * fix: landing company name uppercase * fix: comments * chore: split moreeeee * fix: rename css * fix: lint styles * fix: styles * fix: comments * fix: comments v3 * fix: comments v4 * fix: comments v5 --- packages/api/src/hooks/useAccountsList.ts | 22 +++++-- packages/wallets/src/AppContent.scss | 19 ++++++ packages/wallets/src/AppContent.tsx | 17 +++--- packages/wallets/src/app-content.scss | 6 -- .../DesktopWalletsList/DesktopWalletsList.tsx | 19 ++++++ .../components/DesktopWalletsList/index.ts | 1 + .../src/components/WalletList/WalletList.scss | 34 ----------- .../src/components/WalletList/WalletList.tsx | 27 --------- .../src/components/WalletList/index.ts | 4 -- .../WalletListCard/WalletListCard.scss | 33 +++++++++++ .../WalletListCard/WalletListCard.tsx | 30 ++++++++++ .../src/components/WalletListCard/index.ts | 1 + .../WalletListCardBadge.scss | 21 +++++++ .../WalletListCardBadge.tsx | 18 ++++++ .../components/WalletListCardBadge/index.ts | 1 + .../WalletListCardIActions.scss | 18 ++++++ .../WalletListCardIActions.tsx | 59 +++++++++++++++++++ .../WalletListCardIActions/index.ts | 1 + .../WalletListCardIBalance.scss | 31 ++++++++++ .../WalletListCardIBalance.tsx | 20 +++++++ .../WalletListCardIBalance/index.ts | 1 + .../WalletListCardIDetails.scss | 17 ++++++ .../WalletListCardIDetails.tsx | 26 ++++++++ .../WalletListCardIDetails/index.ts | 1 + .../WalletListCardIcon.scss | 17 ++++++ .../WalletListCardIcon/WalletListCardIcon.tsx | 12 ++++ .../components/WalletListCardIcon/index.ts | 1 + .../WalletListCardTitle.scss | 12 ++++ .../WalletListCardTitle.tsx | 12 ++++ .../components/WalletListCardTitle/index.ts | 1 + packages/wallets/src/components/index.ts | 9 ++- .../src/public/images/ic-cashier-deposit.svg | 10 ++++ .../public/images/ic-cashier-statement.svg | 10 ++++ .../src/public/images/ic-cashier-transfer.svg | 10 ++++ .../public/images/ic-cashier-withdrawal.svg | 10 ++++ .../wallets/src/public/images/ic-dropdown.svg | 3 + 36 files changed, 447 insertions(+), 87 deletions(-) create mode 100644 packages/wallets/src/AppContent.scss delete mode 100644 packages/wallets/src/app-content.scss create mode 100644 packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx create mode 100644 packages/wallets/src/components/DesktopWalletsList/index.ts delete mode 100644 packages/wallets/src/components/WalletList/WalletList.scss delete mode 100644 packages/wallets/src/components/WalletList/WalletList.tsx delete mode 100644 packages/wallets/src/components/WalletList/index.ts create mode 100644 packages/wallets/src/components/WalletListCard/WalletListCard.scss create mode 100644 packages/wallets/src/components/WalletListCard/WalletListCard.tsx create mode 100644 packages/wallets/src/components/WalletListCard/index.ts create mode 100644 packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss create mode 100644 packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx create mode 100644 packages/wallets/src/components/WalletListCardBadge/index.ts create mode 100644 packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.scss create mode 100644 packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.tsx create mode 100644 packages/wallets/src/components/WalletListCardIActions/index.ts create mode 100644 packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss create mode 100644 packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx create mode 100644 packages/wallets/src/components/WalletListCardIBalance/index.ts create mode 100644 packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.scss create mode 100644 packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx create mode 100644 packages/wallets/src/components/WalletListCardIDetails/index.ts create mode 100644 packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.scss create mode 100644 packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.tsx create mode 100644 packages/wallets/src/components/WalletListCardIcon/index.ts create mode 100644 packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.scss create mode 100644 packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx create mode 100644 packages/wallets/src/components/WalletListCardTitle/index.ts create mode 100644 packages/wallets/src/public/images/ic-cashier-deposit.svg create mode 100644 packages/wallets/src/public/images/ic-cashier-statement.svg create mode 100644 packages/wallets/src/public/images/ic-cashier-transfer.svg create mode 100644 packages/wallets/src/public/images/ic-cashier-withdrawal.svg create mode 100644 packages/wallets/src/public/images/ic-dropdown.svg diff --git a/packages/api/src/hooks/useAccountsList.ts b/packages/api/src/hooks/useAccountsList.ts index 93093e9438b4..5fb71625cd65 100644 --- a/packages/api/src/hooks/useAccountsList.ts +++ b/packages/api/src/hooks/useAccountsList.ts @@ -39,12 +39,22 @@ const useAccountsList = () => { // Add balance to each account const modified_accounts_with_balance = useMemo( () => - modified_accounts?.map(account => ({ - ...account, - /** The balance of the account. */ - balance: balance_data?.accounts?.[account.loginid]?.balance || 0, - })), - [balance_data?.accounts, modified_accounts] + modified_accounts?.map(account => { + const balance = balance_data?.accounts?.[account.loginid]?.balance || 0; + + return { + ...account, + /** The balance of the account. */ + balance, + /** The balance of the account in currency format. */ + display_balance: Intl.NumberFormat(authorize_data?.preferred_language || 'en-US', { + minimumFractionDigits: account.currency_config?.fractional_digits || 2, + maximumFractionDigits: account.currency_config?.fractional_digits || 2, + minimumIntegerDigits: 1, + }).format(balance), + }; + }), + [balance_data?.accounts, modified_accounts, authorize_data?.preferred_language] ); return { diff --git a/packages/wallets/src/AppContent.scss b/packages/wallets/src/AppContent.scss new file mode 100644 index 000000000000..e414f2ac88d0 --- /dev/null +++ b/packages/wallets/src/AppContent.scss @@ -0,0 +1,19 @@ +.wallets-app { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + padding: 40px; + width: 100%; + height: 100%; + align-self: stretch; + background: var(--system-light-7-secondary-background, #f2f3f4); + + &__content { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + } +} diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx index 2a4d4b9c9b21..e1a1cb028668 100644 --- a/packages/wallets/src/AppContent.tsx +++ b/packages/wallets/src/AppContent.tsx @@ -1,16 +1,15 @@ import React from 'react'; -import WalletList from './components/WalletList'; -import WalletsCarousel from './components/WalletsCarousel'; -import IcBrandDerivGo from './public/ic-brand-derivgo.svg'; -import './app-content.scss'; +import { DesktopWalletsList } from './components'; +// import WalletsCarousel from './components/WalletCarousel'; +import './AppContent.scss'; const AppContent: React.FC = () => { return ( -
-
- - - +
+
+ +
+ {/* */}
); }; diff --git a/packages/wallets/src/app-content.scss b/packages/wallets/src/app-content.scss deleted file mode 100644 index 93bd8b22837e..000000000000 --- a/packages/wallets/src/app-content.scss +++ /dev/null @@ -1,6 +0,0 @@ -.wallets-app-content-icon { - width: 100px; - height: 100px; - background-image: url('./public/ic-appstore-deriv-logo.svg'); - background-size: cover; -} diff --git a/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx new file mode 100644 index 000000000000..9c17ce323ec2 --- /dev/null +++ b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { useWalletAccountsList } from '@deriv/api'; +import WalletListCard from '../WalletListCard/WalletListCard'; + +const DesktopWalletsList: React.FC = () => { + const { data } = useWalletAccountsList(); + + if (!data.length) return

No wallets found

; + + return ( + + {data?.map(account => { + return ; + })} + + ); +}; + +export default DesktopWalletsList; diff --git a/packages/wallets/src/components/DesktopWalletsList/index.ts b/packages/wallets/src/components/DesktopWalletsList/index.ts new file mode 100644 index 000000000000..9cdccd013dba --- /dev/null +++ b/packages/wallets/src/components/DesktopWalletsList/index.ts @@ -0,0 +1 @@ +export { default as DesktopWalletsList } from './DesktopWalletsList'; diff --git a/packages/wallets/src/components/WalletList/WalletList.scss b/packages/wallets/src/components/WalletList/WalletList.scss deleted file mode 100644 index 6849375ff6f5..000000000000 --- a/packages/wallets/src/components/WalletList/WalletList.scss +++ /dev/null @@ -1,34 +0,0 @@ -.wallets-list-account-list { - display: flex; - flex-direction: column; - gap: 20px; - justify-content: space-between; - align-items: center; - padding-top: 2rem; -} - -.wallets-list-title, -.wallets-list-currency, -.wallets-list-balance, -.wallets-list-account-category { - font-size: 3rem; -} - -.wallets-list-account-item { - border: 1px solid #ccc; - padding: 10px; - border-radius: 5px; - background-color: #f5f5f5; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - display: flex; - justify-content: space-between; - width: 90%; -} - -.wallets-list-currency { - font-weight: bold; -} - -.wallets-list-account-category { - font-style: italic; -} diff --git a/packages/wallets/src/components/WalletList/WalletList.tsx b/packages/wallets/src/components/WalletList/WalletList.tsx deleted file mode 100644 index 019c7b4fcc5d..000000000000 --- a/packages/wallets/src/components/WalletList/WalletList.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { useWalletAccountsList } from '@deriv/api'; -import './WalletList.scss'; - -const WalletList: React.FC = () => { - const { data } = useWalletAccountsList(); - - if (!data.length) return

No wallets found

; - - return ( -
- {data?.map(account => { - return ( -
-
{account.currency}
-
-
{account.landing_company_name}
-
-
{account.balance}
-
- ); - })} -
- ); -}; - -export default WalletList; diff --git a/packages/wallets/src/components/WalletList/index.ts b/packages/wallets/src/components/WalletList/index.ts deleted file mode 100644 index 8c637c815aa3..000000000000 --- a/packages/wallets/src/components/WalletList/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import WalletList from './WalletList'; -import './WalletList.scss'; - -export default WalletList; diff --git a/packages/wallets/src/components/WalletListCard/WalletListCard.scss b/packages/wallets/src/components/WalletListCard/WalletListCard.scss new file mode 100644 index 000000000000..58e49881da52 --- /dev/null +++ b/packages/wallets/src/components/WalletListCard/WalletListCard.scss @@ -0,0 +1,33 @@ +.wallets-list-header { + &__card_container { + flex: 1; + display: flex; + padding: 24px; + align-items: flex-start; + width: 100%; + border-radius: 16px; + background: var(--system-light-8-primary-background, #fff); + } + + &__content { + flex: 1; + display: flex; + flex-direction: row; + align-items: center; + gap: 24px; + align-self: stretch; + } + + &__details-container { + display: flex; + flex: 1; + align-items: center; + gap: 24px; + align-self: stretch; + border-radius: 16px; + } + + &__dropdown { + cursor: pointer; + } +} diff --git a/packages/wallets/src/components/WalletListCard/WalletListCard.tsx b/packages/wallets/src/components/WalletListCard/WalletListCard.tsx new file mode 100644 index 000000000000..2c70de9d6fe9 --- /dev/null +++ b/packages/wallets/src/components/WalletListCard/WalletListCard.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { useWalletAccountsList } from '@deriv/api'; +import IcDropdown from '../../public/images/ic-dropdown.svg'; +import WalletListCardIBalance from '../WalletListCardIBalance/WalletListCardIBalance'; +import WalletListCardIcon from '../WalletListCardIcon/WalletListCardIcon'; +import WalletListCardIDetails from '../WalletListCardIDetails/WalletListCardIDetails'; +import './WalletListCard.scss'; + +type TProps = { + account: NonNullable['data']>[number]; +}; + +const WalletListCard: React.FC = ({ account }) => { + return ( +
+
+
+ + +
+ +
+ +
+
+
+ ); +}; + +export default WalletListCard; diff --git a/packages/wallets/src/components/WalletListCard/index.ts b/packages/wallets/src/components/WalletListCard/index.ts new file mode 100644 index 000000000000..d99155c38e78 --- /dev/null +++ b/packages/wallets/src/components/WalletListCard/index.ts @@ -0,0 +1 @@ +export { default as WalletListCard } from './WalletListCard'; diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss new file mode 100644 index 000000000000..9330413cf15a --- /dev/null +++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss @@ -0,0 +1,21 @@ +.wallets-list-card { + &__badge { + display: flex; + padding: 0px 4px; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 2px; + border: 1px solid var(--system-light-1-prominent-text, #333); + } + &__name { + color: var(--system-light-1-prominent-text, #333); + + /* desktop/extra small/XS - bold */ + font-family: 'IBM Plex Sans'; + font-size: 10px; + font-style: normal; + font-weight: 700; + line-height: 14px; /* 140% */ + } +} diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx new file mode 100644 index 000000000000..5fbdd4acefc5 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './WalletListCardBadge.scss'; + +type TProps = { + label: string; +}; + +const WalletListCardBadge: React.FC = ({ label }) => { + return ( +
+
+

{label.toUpperCase()}

+
+
+ ); +}; + +export default WalletListCardBadge; diff --git a/packages/wallets/src/components/WalletListCardBadge/index.ts b/packages/wallets/src/components/WalletListCardBadge/index.ts new file mode 100644 index 000000000000..3be53c3019fc --- /dev/null +++ b/packages/wallets/src/components/WalletListCardBadge/index.ts @@ -0,0 +1 @@ +export { default as WalletListCardBadge } from './WalletListCardBadge'; diff --git a/packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.scss b/packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.scss new file mode 100644 index 000000000000..6d206c5d8182 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.scss @@ -0,0 +1,18 @@ +.wallets-header { + &__actions { + display: flex; + align-items: center; + gap: 8px; + } + + &__button { + display: flex; + height: 32px; + padding: 6px 16px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 64px; + border: 1px solid var(--system-light-3-less-prominent-text, #999); + } +} diff --git a/packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.tsx b/packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.tsx new file mode 100644 index 000000000000..596dc18b8d86 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { useWalletAccountsList } from '@deriv/api'; +import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg'; +import IcCashierStatement from '../../public/images/ic-cashier-statement.svg'; +import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg'; +import IcCashierWithdrawal from '../../public/images/ic-cashier-withdrawal.svg'; +import './WalletListCardIActions.scss'; + +const getWalletHeaderButtons = (is_demo: boolean, handleAction?: () => void) => { + const buttons = [ + { + name: 'Deposit', + text: is_demo ? 'Reset balance' : 'Deposit', + icon: , + }, + { + name: 'Withdraw', + text: 'Withdraw', + icon: , + }, + { + name: 'Transfer', + text: 'Transfer', + icon: , + }, + { + name: 'Transactions', + text: 'Transactions', + icon: , + }, + ]; + + // Filter out the "Withdraw" button when is_demo is true + const filteredButtons = is_demo ? buttons.filter(button => button.name !== 'Withdraw') : buttons; + + return filteredButtons.map(button => ({ + ...button, + action: () => handleAction?.(), + })); +}; + +type TProps = { + account: NonNullable['data']>[number]; +}; + +const WalletListCardIActions: React.FC = ({ account }) => { + const is_demo = account.is_virtual; + return ( +
+ {getWalletHeaderButtons(is_demo).map(button => ( + + ))} +
+ ); +}; + +export default WalletListCardIActions; diff --git a/packages/wallets/src/components/WalletListCardIActions/index.ts b/packages/wallets/src/components/WalletListCardIActions/index.ts new file mode 100644 index 000000000000..70a8920d2462 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIActions/index.ts @@ -0,0 +1 @@ +export { default as WalletListCardIActions } from './WalletListCardIActions'; diff --git a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss new file mode 100644 index 000000000000..d217edc52849 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss @@ -0,0 +1,31 @@ +.wallets-balance { + &__container { + display: flex; + flex-direction: column; + align-items: flex-end; + } + + &__title { + color: var(--system-light-3-less-prominent-text, #999); + text-align: right; + + /* desktop/small/S - regular */ + font-family: 'IBM Plex Sans'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 150% */ + } + + &__value { + color: var(--system-light-1-prominent-text, #333); + text-align: right; + + /* desktop/subtitle/Sub 1 - bold */ + font-family: 'IBM Plex Sans'; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 36px; /* 150% */ + } +} diff --git a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx new file mode 100644 index 000000000000..6c7406642a11 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { useWalletAccountsList } from '@deriv/api'; +import './WalletListCardIBalance.scss'; + +type TProps = { + account: NonNullable['data']>[number]; +}; + +const WalletListCardIBalance: React.FC = ({ account }) => { + return ( +
+
Wallet balance
+
+ {account.display_balance} {account?.currency} +
+
+ ); +}; + +export default WalletListCardIBalance; diff --git a/packages/wallets/src/components/WalletListCardIBalance/index.ts b/packages/wallets/src/components/WalletListCardIBalance/index.ts new file mode 100644 index 000000000000..577f6a58c57d --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIBalance/index.ts @@ -0,0 +1 @@ +export { default as WalletListCardIBalance } from './WalletListCardIBalance'; diff --git a/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.scss b/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.scss new file mode 100644 index 000000000000..3c6669fc5fd4 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.scss @@ -0,0 +1,17 @@ +.wallets-list-details { + &__action-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 8px; + flex: 1 0 0; + } + + &__elements { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; + } +} diff --git a/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx b/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx new file mode 100644 index 000000000000..35056470084f --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { useWalletAccountsList } from '@deriv/api'; +import WalletListCardBadge from '../WalletListCardBadge/WalletListCardBadge'; +import WalletListCardIActions from '../WalletListCardIActions/WalletListCardIActions'; +import WalletListCardTitle from '../WalletListCardTitle/WalletListCardTitle'; +import './WalletListCardIDetails.scss'; + +type TProps = { + account: NonNullable['data']>[number]; +}; + +const WalletListCardIDetails: React.FC = ({ account }) => { + const { currency_config, landing_company_name } = account; + + return ( +
+
+ {currency_config?.display_code && } + {landing_company_name && } +
+ +
+ ); +}; + +export default WalletListCardIDetails; diff --git a/packages/wallets/src/components/WalletListCardIDetails/index.ts b/packages/wallets/src/components/WalletListCardIDetails/index.ts new file mode 100644 index 000000000000..40f0dd509e73 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIDetails/index.ts @@ -0,0 +1 @@ +export { default as WalletListCardIDetails } from './WalletListCardIDetails'; diff --git a/packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.scss b/packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.scss new file mode 100644 index 000000000000..211b5324d427 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.scss @@ -0,0 +1,17 @@ +.wallets-card { + &__icon { + display: flex; + width: 128px; + height: 80px; + justify-content: center; + align-items: center; + flex-shrink: 0; + border-radius: 4px; + background: linear-gradient( + 90deg, + rgba(131, 58, 180, 1) 0%, + rgba(253, 29, 29, 1) 50%, + rgba(252, 176, 69, 1) 100% + ); + } +} diff --git a/packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.tsx b/packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.tsx new file mode 100644 index 000000000000..39eb36da3405 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIcon/WalletListCardIcon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './WalletListCardIcon.scss'; + +const WalletListCardIcon: React.FC = () => { + return ( +
+

Icon (Placeholder)

+
+ ); +}; + +export default WalletListCardIcon; diff --git a/packages/wallets/src/components/WalletListCardIcon/index.ts b/packages/wallets/src/components/WalletListCardIcon/index.ts new file mode 100644 index 000000000000..d318b273a3dd --- /dev/null +++ b/packages/wallets/src/components/WalletListCardIcon/index.ts @@ -0,0 +1 @@ +export { default as WalletListCardIcon } from './WalletListCardIcon'; diff --git a/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.scss b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.scss new file mode 100644 index 000000000000..3bda1f935ee7 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.scss @@ -0,0 +1,12 @@ +.wallets-currency { + &__title { + color: var(--system-light-1-prominent-text, #333); + + /* desktop/subtitle/Sub 2 - bold */ + font-family: 'IBM Plex Sans'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 30px; /* 150% */ + } +} diff --git a/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx new file mode 100644 index 000000000000..2febdc25eb99 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './WalletListCardTitle.scss'; + +type TProps = { + currency: string; +}; + +const WalletListCardTitle: React.FC = ({ currency }) => { + return
{currency} Wallet
; +}; + +export default WalletListCardTitle; diff --git a/packages/wallets/src/components/WalletListCardTitle/index.ts b/packages/wallets/src/components/WalletListCardTitle/index.ts new file mode 100644 index 000000000000..1e554588a337 --- /dev/null +++ b/packages/wallets/src/components/WalletListCardTitle/index.ts @@ -0,0 +1 @@ +export { default as WalletListCardTitle } from './WalletListCardTitle'; diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts index 4bd3f066e8c3..bd6784a158c3 100644 --- a/packages/wallets/src/components/index.ts +++ b/packages/wallets/src/components/index.ts @@ -1,3 +1,10 @@ +export * from './DesktopWalletsList'; +export * from './WalletListCardIBalance'; +export * from './WalletListCardIcon'; +export * from './WalletListCardTitle'; +export * from './WalletListCardBadge'; +export * from './WalletListCardIActions'; +export * from './WalletListCard'; +export * from './WalletListCardIDetails'; export * from './AccountsList'; export * from './WalletsCarousel'; -export * from './WalletList'; diff --git a/packages/wallets/src/public/images/ic-cashier-deposit.svg b/packages/wallets/src/public/images/ic-cashier-deposit.svg new file mode 100644 index 000000000000..96e631d331cc --- /dev/null +++ b/packages/wallets/src/public/images/ic-cashier-deposit.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/wallets/src/public/images/ic-cashier-statement.svg b/packages/wallets/src/public/images/ic-cashier-statement.svg new file mode 100644 index 000000000000..1ae020809cb9 --- /dev/null +++ b/packages/wallets/src/public/images/ic-cashier-statement.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/wallets/src/public/images/ic-cashier-transfer.svg b/packages/wallets/src/public/images/ic-cashier-transfer.svg new file mode 100644 index 000000000000..ab3cd5863cf2 --- /dev/null +++ b/packages/wallets/src/public/images/ic-cashier-transfer.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/wallets/src/public/images/ic-cashier-withdrawal.svg b/packages/wallets/src/public/images/ic-cashier-withdrawal.svg new file mode 100644 index 000000000000..e472b92440ea --- /dev/null +++ b/packages/wallets/src/public/images/ic-cashier-withdrawal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/wallets/src/public/images/ic-dropdown.svg b/packages/wallets/src/public/images/ic-dropdown.svg new file mode 100644 index 000000000000..7bb0e7fab909 --- /dev/null +++ b/packages/wallets/src/public/images/ic-dropdown.svg @@ -0,0 +1,3 @@ + + +