george / wall-1177 / Demo transfer insufficient funds error

packages/api/types.ts

@@ -228,6 +228,28 @@ import type {
 } from '@deriv/api-types';
 import type { useMutation, useQuery } from '@tanstack/react-query';
 
+type TPrivateSocketEndpoints = {
+    trading_platform_accounts: {
+        request: {
+            platform: 'derivez' | 'dxtrade' | 'mt5';
+        };
+        response: {
+            trading_platform_accounts: {
+                account_id: string;
+                account_type: 'real' | 'demo';
+                balance: number;
+                country: string;
+                currency: string;
+                display_balance: string;
+                email: string;
+                enabled: 0 | 1;
+                error: unknown;
+                login: string;
+            }[];
+        };
+    };
+};
+
 type TSocketEndpoints = {
     active_symbols: {
         request: ActiveSymbolsRequest;
@@ -681,7 +703,7 @@ type TSocketEndpoints = {
         request: ServerStatusRequest;
         response: ServerStatusResponse;
     };
-};
+} & TPrivateSocketEndpoints;
 
 export type TSocketEndpointNames = keyof TSocketEndpoints;
 

packages/appstore/src/components/modals/wallet-modal/__tests__/wallet-modal-body.spec.tsx

@@ -16,11 +16,24 @@ describe('WalletModalBody', () => {
         mocked_props = {
             contentScrollHandler: jest.fn(),
             is_dark: false,
-            is_demo: true,
             is_mobile: false,
-            setIsWalletNameVisible: jest.fn(),
             is_wallet_name_visible: true,
-            wallet_type: 'demo',
+            setIsWalletNameVisible: jest.fn(),
+            wallet: {
+                balance: 1000,
+                currency: 'USD',
+                gradient_card_class: '',
+                gradient_header_class: '',
+                icon: '',
+                is_crypto: false,
+                is_demo: true,
+                is_disabled: false,
+                is_malta_wallet: false,
+                is_selected: true,
+                is_virtual: true,
+                landing_company_name: 'svg',
+                name: 'Demo USD Wallet',
+            },
         };
     });
 
@@ -46,7 +59,6 @@ describe('WalletModalBody', () => {
     });
 
     it('Should render proper content under the Transfer tab', () => {
-        mocked_props.wallet_type = 'real';
         const mocked_store = mockStore({
             traders_hub: {
                 active_modal_tab: 'Transfer',
@@ -61,11 +73,11 @@ describe('WalletModalBody', () => {
         const el_transfer_tab = screen.getByText('Transfer');
         userEvent.click(el_transfer_tab);
 
-        expect(screen.getByText('Transfer Real')).toBeInTheDocument();
+        expect(screen.getByText('WalletTransfer')).toBeInTheDocument();
     });
 
     it('Should trigger setWalletModalActiveTab callback when the user clicked on the tab', () => {
-        mocked_props.wallet_type = 'real';
+        mocked_props.wallet.is_demo = false;
         const mocked_store = mockStore({
             traders_hub: {
                 active_modal_tab: 'Deposit',
@@ -84,7 +96,7 @@ describe('WalletModalBody', () => {
     });
 
     it('Should trigger contentScrollHandler callback when the user scrolls the content', () => {
-        mocked_props.wallet_type = 'real';
+        mocked_props.wallet.is_demo = false;
         const mocked_store = mockStore({
             traders_hub: {
                 active_modal_tab: 'Deposit',

packages/appstore/src/components/modals/wallet-modal/__tests__/wallet-modal-header.spec.tsx

@@ -3,19 +3,34 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import WalletModalHeader from '../wallet-modal-header';
 
+jest.mock('@deriv/hooks', () => ({
+    useCurrencyConfig: () => ({ getConfig: () => ({ display_code: 'USD' }) }),
+}));
+
 describe('WalletModalHeader', () => {
     let mocked_props: React.ComponentProps<typeof WalletModalHeader>;
 
     beforeEach(() => {
         mocked_props = {
-            balance: 999,
             closeModal: jest.fn(),
-            currency: 'USD',
             is_dark: false,
-            is_demo: true,
             is_mobile: false,
             is_wallet_name_visible: true,
-            shortcode: 'SVG',
+            wallet: {
+                balance: 1000,
+                currency: 'USD',
+                gradient_card_class: '',
+                gradient_header_class: '',
+                icon: 'IcWalletIcon',
+                is_crypto: false,
+                is_demo: true,
+                is_disabled: false,
+                is_malta_wallet: false,
+                is_selected: true,
+                is_virtual: true,
+                landing_company_name: 'svg',
+                name: 'Demo USD Wallet',
+            },
         };
     });
 
@@ -24,8 +39,8 @@ describe('WalletModalHeader', () => {
 
         expect(screen.getByText('Demo USD Wallet')).toBeInTheDocument();
         expect(screen.getByText('Demo')).toBeInTheDocument();
-        expect(screen.getByText('999.00 USD')).toBeInTheDocument();
-        expect(screen.getByTestId('dt_currency_icon')).toBeInTheDocument();
+        expect(screen.getByText('1,000.00 USD')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_wallet_icon')).toBeInTheDocument();
         expect(screen.getByTestId('dt_close_icon')).toBeInTheDocument();
     });
 

packages/appstore/src/components/modals/wallet-modal/provider.tsx

@@ -22,7 +22,7 @@ export const getCashierOptions = (type: TWalletType) => {
                 {
                     icon: 'IcAccountTransfer',
                     label: localize('Transfer'),
-                    content: () => <p>Transfer Real</p>,
+                    content: (props: React.ComponentProps<typeof WalletTransfer>) => <WalletTransfer {...props} />,
                 },
                 {
                     icon: 'IcStatement',

packages/appstore/src/components/modals/wallet-modal/wallet-modal-body.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Tabs, ThemedScrollbars, Div100vhContainer } from '@deriv/components';
-import { getCashierOptions, TWalletType } from './provider';
+import { getCashierOptions } from './provider';
 import { observer, useStore } from '@deriv/stores';
+import type { TWalletAccount } from 'Types';
 
 type TWalletModalBodyProps = {
     contentScrollHandler: React.UIEventHandler<HTMLDivElement>;
     is_dark: boolean;
-    is_demo: boolean;
     is_mobile: boolean;
     setIsWalletNameVisible: (value: boolean) => void;
     is_wallet_name_visible: boolean;
-    wallet_type: TWalletType;
+    wallet: TWalletAccount;
 };
 
 const real_tabs = {
@@ -32,14 +32,15 @@ const WalletModalBody = observer(
     ({
         contentScrollHandler,
         is_dark,
-        is_demo,
         is_mobile,
         setIsWalletNameVisible,
         is_wallet_name_visible,
-        wallet_type,
+        wallet,
     }: TWalletModalBodyProps) => {
         const store = useStore();
 
+        const { is_demo } = wallet;
+
         const {
             traders_hub: { active_modal_tab, setWalletModalActiveTab },
         } = store;
@@ -58,7 +59,7 @@ const WalletModalBody = observer(
                 active_icon_color={is_dark ? 'var(--badge-white)' : ''}
                 active_index={tabs[active_modal_tab || 'Deposit']}
                 className={classNames('modal-body__tabs', {
-                    is_scrolled: !is_wallet_name_visible,
+                    is_scrolled: is_mobile && !is_wallet_name_visible,
                 })}
                 has_active_line={false}
                 has_bottom_line={false}
@@ -72,7 +73,7 @@ const WalletModalBody = observer(
                     setWalletModalActiveTab(tab_name);
                 }}
             >
-                {getCashierOptions(wallet_type).map(option => {
+                {getCashierOptions(is_demo ? 'demo' : 'real').map(option => {
                     return (
                         <div key={option.label} icon={option.icon} label={option.label}>
                             <ThemedScrollbars

packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx

@@ -1,51 +1,36 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Badge, Icon, Text } from '@deriv/components';
-import { formatMoney, getCurrencyDisplayCode } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { getWalletCurrencyIcon } from '@deriv/utils';
+import { Icon, Text, WalletJurisdictionBadge, WalletIcon } from '@deriv/components';
+import { formatMoney } from '@deriv/shared';
+import { getAccountName } from 'Constants/utils';
+import type { TWalletAccount } from 'Types';
 
 type TWalletModalHeaderProps = {
-    balance?: string | number;
-    currency: string;
+    closeModal: VoidFunction;
     is_dark: boolean;
-    is_demo: boolean;
     is_mobile: boolean;
-    shortcode: string;
-    closeModal: VoidFunction;
     is_wallet_name_visible: boolean;
-    gradient_class: string;
+    wallet: TWalletAccount;
 };
 
 const WalletModalHeader = ({
-    balance,
     closeModal,
-    currency,
     is_dark,
-    is_demo,
     is_mobile,
-    shortcode,
     is_wallet_name_visible,
-    gradient_class,
+    wallet,
 }: TWalletModalHeaderProps) => {
-    const header_class_name = 'modal-header';
+    const {
+        balance,
+        currency,
+        icon,
+        is_crypto,
+        is_demo,
+        gradient_header_class: gradient_class,
+        landing_company_name: shortcode,
+    } = wallet;
 
-    const wallet_title = React.useMemo(() => {
-        return `${is_demo ? localize('Demo') : ''} ${getCurrencyDisplayCode(currency)} ${localize('Wallet')}`;
-    }, [currency, is_demo]);
-
-    const getBadgeLabel = React.useCallback(() => {
-        if (is_demo) return localize('Demo');
-        switch (shortcode) {
-            case 'svg':
-                return shortcode.toUpperCase();
-            case 'malta':
-            case 'maltainvest':
-                return 'malta'.toUpperCase();
-            default:
-                return '';
-        }
-    }, [is_demo, shortcode]);
+    const header_class_name = 'modal-header';
 
     const getCloseIcon = React.useCallback(() => {
         if (is_demo && is_dark) return 'IcAppstoreCloseLight';
@@ -54,44 +39,21 @@ const WalletModalHeader = ({
         return 'IcAppstoreCloseLight';
     }, [is_dark, is_demo]);
 
-    const getStylesByClassName = React.useCallback(
-        (class_name: string) => {
-            return classNames(class_name, {
-                [`${class_name}-demo`]: is_demo,
-            });
-        },
-        [is_demo]
-    );
-
-    const getCurrencyIconSize = React.useCallback(() => {
-        // TODO: add p2p and payment_agent check
-        const is_square_icon =
-            ['btc', 'eth', 'ltc', 'usdt', 'eusdt', 'tusdt', 'ust', 'usdc', 'p2p', 'payment_agent'].includes(
-                currency.toLowerCase()
-            ) || is_demo;
-
-        const sizes = {
-            mobile: {
-                width: is_square_icon ? 64 : 48,
-                height: is_square_icon ? 40 : 48,
-            },
-            desktop: {
-                width: is_square_icon ? 128 : 64,
-                height: is_square_icon ? 80 : 64,
-            },
-        };
-
-        const size = is_mobile ? sizes.mobile : sizes.desktop;
-
-        return size;
-    }, [currency, is_demo, is_mobile]);
+    const getStylesByClassName = (class_name: string) => {
+        return classNames(class_name, {
+            [`${class_name}-demo`]: is_demo,
+        });
+    };
 
-    const getCurrencyIconProps = React.useCallback(() => {
-        const icon = getWalletCurrencyIcon(is_demo ? 'demo' : currency, is_dark, true);
-        const size = getCurrencyIconSize();
+    const getWalletIconType = (): React.ComponentProps<typeof WalletIcon>['type'] => {
+        if (is_demo) return 'demo';
+        return is_crypto ? 'crypto' : 'fiat';
+    };
 
-        return { icon, ...size };
-    }, [currency, getCurrencyIconSize, is_dark, is_demo]);
+    const getWalletIconSize = (): React.ComponentProps<typeof WalletIcon>['size'] => {
+        if (is_mobile) return is_demo || is_crypto ? 'large' : 'xlarge';
+        return 'xxlarge';
+    };
 
     return (
         <div className={`header-background ${gradient_class}`}>
@@ -107,26 +69,21 @@ const WalletModalHeader = ({
                             as='span'
                             className={getStylesByClassName(`${header_class_name}__title-wallet`)}
                         >
-                            {wallet_title}
+                            {getAccountName({ ...wallet, account_type: 'wallet' })}
                         </Text>
-                        {is_demo ? (
-                            <Badge type='contained' background_color='blue' label={getBadgeLabel()} />
-                        ) : (
-                            <Badge type='bordered' label={getBadgeLabel()} />
-                        )}
+                        <WalletJurisdictionBadge is_demo={is_demo} shortcode={shortcode} />
                     </div>
                     <Text
                         as='p'
                         size={is_mobile ? 'xsm' : 'm'}
                         weight='bold'
                         className={getStylesByClassName(`${header_class_name}__title-balance`)}
                     >
-                        {formatMoney(currency, balance, true)} {getCurrencyDisplayCode(currency)}
+                        {formatMoney(currency || '', balance, true)} {wallet.display_currency_code}
                     </Text>
                 </div>
-                {/* TODO: replace Icon with WalletIcon component  */}
                 <div className={classNames(`${header_class_name}__currency-icon icon-visibility`)}>
-                    <Icon {...getCurrencyIconProps()} data_testid='dt_currency_icon' />
+                    <WalletIcon icon={icon} type={getWalletIconType()} size={getWalletIconSize()} />
                 </div>
                 <div className={classNames(`${header_class_name}__close-icon`)}>
                     <Icon icon={getCloseIcon()} onClick={closeModal} data_testid='dt_close_icon' />