thisyahlen/chore: update ui for wallet header

packages/api/src/hooks/useCurrencyConfig.ts

@@ -63,6 +63,13 @@ const useCurrencyConfig = () => {
                 code: currency,
                 /** Currency display code */
                 display_code: currency === 'UST' ? 'USDT' : currency,
+                /** Format the balance */
+                formatBalance: (amount: number) => {
+                    return new Intl.NumberFormat('en-US', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                    }).format(amount);
+                },
             };
         });
     }, [website_status_data?.website_status?.currencies_config]);

packages/api/src/hooks/useWalletAccountsList.ts

@@ -21,7 +21,7 @@ const useWalletAccountsList = () => {
                 /** Returns the wallet's currency type. ex: `Demo`, `USD`, etc. */
                 wallet_currency_type,
                 /** Landing company shortcode the account belongs to. */
-                landing_company_name: wallet.landing_company_name?.replace('maltainvest', 'malta'),
+                landing_company_name: wallet.landing_company_name?.replace('maltainvest', 'malta').toUpperCase(),
                 /** Indicating whether the wallet is a maltainvest wallet. */
                 is_malta_wallet: wallet.landing_company_name === 'malta',
             } as const;

packages/wallets/src/AppContent.scss

@@ -0,0 +1,19 @@
+.app-content {
+    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/WalletCarousel';
-import IcBrandDerivGo from './public/ic-brand-derivgo.svg';
-import './app-content.scss';
+import { WalletHeader } from './components';
+// import WalletsCarousel from './components/WalletCarousel';
+import './AppContent.scss';
 
 const AppContent: React.FC = () => {
     return (
-        <div>
-            <div className='icon' />
-            <IcBrandDerivGo width={25} height={25} />
-            <WalletList />
-            <WalletsCarousel />
+        <div className='app-content'>
+            <div className='app-content__content'>
+                <WalletHeader />
+            </div>
+            {/* <WalletsCarousel /> */}
         </div>
     );
 };

packages/wallets/src/components/WalletBalance/WalletBalance.scss

@@ -0,0 +1,31 @@
+.wallet-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% */
+    }
+}

packages/wallets/src/components/WalletBalance/WalletBalance.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import './WalletBalance.scss';
+
+const WalletBalance = ({
+    account,
+}: {
+    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+}) => {
+    return (
+        <div className='wallet-balance__container'>
+            <div className='wallet-balance__title'>Wallet balance</div>
+            <div className='wallet-balance__value'>
+                {account.currency_config?.formatBalance(account?.balance)} {account?.currency}
+            </div>
+        </div>
+    );
+};
+
+export default WalletBalance;

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

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

packages/wallets/src/components/WalletCardIcon/WalledCardIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './WalletCardIcon.scss';
+
+const WalletCardIcon: React.FC = () => {
+    return (
+        <div className='wallet-card__icon'>
+            <p> Icon (Placeholder)</p>
+        </div>
+    );
+};
+
+export default WalletCardIcon;

packages/wallets/src/components/WalletCardIcon/WalletCardIcon.scss

@@ -0,0 +1,17 @@
+.wallet-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%
+        );
+    }
+}

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

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

packages/wallets/src/components/WalletCurrencyTitle/WalletCurrencyTitle.scss

@@ -0,0 +1,12 @@
+.wallet-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% */
+    }
+}

packages/wallets/src/components/WalletCurrencyTitle/WalletCurrencyTitle.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import './WalletCurrencyTitle.scss';
+
+type TProps = {
+    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+};
+
+const WalletCurrencyTitle: React.FC<TProps> = ({ account }) => {
+    return <div className='wallet-currency__title'>{account.currency_config?.display_code} Wallet</div>;
+};
+
+export default WalletCurrencyTitle;

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

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

packages/wallets/src/components/WalletHeaderActions/WalletHeaderActions.scss

@@ -0,0 +1,18 @@
+.wallet-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/WalletHeaderActions/WalletHeaderActions.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import './WalletHeaderActions.scss';
+import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg';
+import IcCashierWithdrawal from '../../public/images/ic-cashier-withdrawal.svg';
+import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg';
+import IcCashierStatement from '../../public/images/ic-cashier-statement.svg';
+import { useWalletAccountsList } from '@deriv/api';
+
+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?.(),
+    }));
+};
+
+const WalletHeaderActions = ({
+    account,
+}: {
+    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+}) => {
+    const is_demo = account.is_virtual;
+    return (
+        <div className='wallet-header__actions'>
+            {getWalletHeaderButtons(is_demo).map(button => (
+                <button key={button.name} className='wallet-header__button' onClick={button.action}>
+                    {button.icon}
+                </button>
+            ))}
+        </div>
+    );
+};
+
+export default WalletHeaderActions;

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

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

packages/wallets/src/components/WalletHeaderList/WalletHeader.scss

@@ -0,0 +1,49 @@
+.wallet-list {
+    &__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;
+    }
+
+    &__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;
+    }
+
+    &__dropdown {
+        cursor: pointer;
+    }
+}

packages/wallets/src/components/WalletHeaderList/WalletHeader.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import WalletBalance from '../WalletBalance/WalletBalance';
+import WalletCardIcon from '../WalletCardIcon/WalledCardIcon';
+import WalletCurrencyTitle from '../WalletCurrencyTitle/WalletCurrencyTitle';
+import WalletLandingCompanyBadge from '../WalletLandingCompanyBadge/WalletLandingCompanyBadge';
+import WalletHeaderActions from '../WalletHeaderActions/WalletHeaderActions';
+import IcDropdown from '../../public/images/ic-dropdown.svg';
+import './WalletHeader.scss';
+
+const WalletHeader: React.FC = () => {
+    const { data } = useWalletAccountsList();
+
+    if (!data.length) return <h1>No wallets found</h1>;
+
+    return (
+        <React.Fragment>
+            {data?.map(account => {
+                return (
+                    <div className='wallet-list__card_container' key={account.loginid}>
+                        <div className='wallet-list__content'>
+                            <div className='wallet-list__details-container'>
+                                <WalletCardIcon />
+                                <div className='wallet-list__action-container'>
+                                    <div className='wallet-list__elements'>
+                                        <WalletCurrencyTitle account={account} />
+                                        <WalletLandingCompanyBadge account={account} />
+                                    </div>
+                                    <WalletHeaderActions account={account} />
+                                </div>
+                            </div>
+                            <WalletBalance account={account} />
+                            <div className='wallet-list__dropdown'>
+                                <IcDropdown />
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </React.Fragment>
+    );
+};
+
+export default WalletHeader;

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

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

packages/wallets/src/components/WalletLandingCompanyBadge/WalletLandingCompanyBadge.scss

@@ -0,0 +1,21 @@
+.wallet-landing-company {
+    &__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% */
+    }
+}