thisyahlen/chore: update ui for wallet header (binary-com#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

@@ -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 {

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;
+    }
+}

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 (
-        <div>
-            <div className='wallets-app-content-icon' />
-            <IcBrandDerivGo width={25} height={25} />
-            <WalletList />
-            <WalletsCarousel />
+        <div className='wallets-app'>
+            <div className='wallets-app__content'>
+                <DesktopWalletsList />
+            </div>
+            {/* <WalletsCarousel /> */}
         </div>
     );
 };

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 <h1>No wallets found</h1>;
+
+    return (
+        <React.Fragment>
+            {data?.map(account => {
+                return <WalletListCard account={account} key={account.loginid} />;
+            })}
+        </React.Fragment>
+    );
+};
+
+export default DesktopWalletsList;

packages/wallets/src/components/DesktopWalletsList/index.ts

@@ -0,0 +1 @@
+export { default as DesktopWalletsList } from './DesktopWalletsList';

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;
+    }
+}

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<ReturnType<typeof useWalletAccountsList>['data']>[number];
+};
+
+const WalletListCard: React.FC<TProps> = ({ account }) => {
+    return (
+        <div className='wallets-list-header__card_container'>
+            <div className='wallets-list-header__content'>
+                <div className='wallets-list-header__details-container'>
+                    <WalletListCardIcon />
+                    <WalletListCardIDetails account={account} />
+                </div>
+                <WalletListCardIBalance account={account} />
+                <div className='wallets-list-header__dropdown'>
+                    <IcDropdown />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WalletListCard;

packages/wallets/src/components/WalletListCard/index.ts

@@ -0,0 +1 @@
+export { default as WalletListCard } from './WalletListCard';

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% */
+    }
+}

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<TProps> = ({ label }) => {
+    return (
+        <div className='wallets-list-card__badge'>
+            <div className='wallets-list-card__name'>
+                <p>{label.toUpperCase()}</p>
+            </div>
+        </div>
+    );
+};
+
+export default WalletListCardBadge;

packages/wallets/src/components/WalletListCardBadge/index.ts

@@ -0,0 +1 @@
+export { default as WalletListCardBadge } from './WalletListCardBadge';

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);
+    }
+}

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: <IcCashierAdd />,
+        },
+        {
+            name: 'Withdraw',
+            text: 'Withdraw',
+            icon: <IcCashierWithdrawal />,
+        },
+        {
+            name: 'Transfer',
+            text: 'Transfer',
+            icon: <IcCashierTransfer />,
+        },
+        {
+            name: 'Transactions',
+            text: 'Transactions',
+            icon: <IcCashierStatement />,
+        },
+    ];
+
+    // 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<ReturnType<typeof useWalletAccountsList>['data']>[number];
+};
+
+const WalletListCardIActions: React.FC<TProps> = ({ account }) => {
+    const is_demo = account.is_virtual;
+    return (
+        <div className='wallets-header__actions'>
+            {getWalletHeaderButtons(is_demo).map(button => (
+                <button key={button.name} className='wallets-header__button' onClick={button.action}>
+                    {button.icon}
+                </button>
+            ))}
+        </div>
+    );
+};
+
+export default WalletListCardIActions;

packages/wallets/src/components/WalletListCardIActions/index.ts

@@ -0,0 +1 @@
+export { default as WalletListCardIActions } from './WalletListCardIActions';

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% */
+    }
+}