[WALL] Jim | Aum /WALL-4459/eliminate balance prop drilling using obs…

…erver (deriv-com#15767)

* chore: rename hook

* chore: check for initial render and refetch and add mocks to component tests

* chore: add usd as the fallback cyrrency

* style: fix typo

* chore: address review comments

* ci: fix eslint error

* ci: trigger build

.github/workflows/test.yml

@@ -35,8 +35,6 @@ jobs:
       run: npx tsc --project packages/stores/tsconfig.json -noEmit
     - name: Check TypeScript for @deriv/wallets
       run: npx tsc --project packages/wallets/tsconfig.json -noEmit
-    - name: Check TypeScript for @deriv/cashier-v2
-      run: npx tsc --project packages/cashier-v2/tsconfig.json -noEmit
     - name: Check ESLint for @deriv/wallets
       run: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets
     - name: Check ESLint for @deriv/cashier-v2

packages/api-v2/src/hooks/useDerivAccountsList.ts

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 import useAuthorize from './useAuthorize';
-import useBalance from './useBalance';
 import useCurrencyConfig from './useCurrencyConfig';
-import { displayMoney } from '../utils';
 import useAuthorizedQuery from '../useAuthorizedQuery';
 import { getAccountListWithAuthToken } from '@deriv/utils';
 
@@ -18,8 +16,6 @@ const useDerivAccountsList = () => {
             staleTime: Infinity,
         }
     );
-
-    const { data: balance_data } = useBalance();
     const { getConfig } = useCurrencyConfig();
 
     const account_list = account_list_data?.account_list;
@@ -58,29 +54,9 @@ const useDerivAccountsList = () => {
         });
     }, [account_list_data, account_list, authorize_data?.loginid, getConfig]);
 
-    // Add balance to each account
-    const modified_accounts_with_balance = useMemo(
-        () =>
-            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: displayMoney(balance, account.currency_config?.display_code || 'USD', {
-                        fractional_digits: account.currency_config?.fractional_digits,
-                        preferred_language: authorize_data?.preferred_language,
-                    }),
-                };
-            }),
-        [balance_data?.accounts, modified_accounts, authorize_data?.preferred_language]
-    );
-
     return {
         /** The list of accounts for the current user. */
-        data: modified_accounts_with_balance,
+        data: modified_accounts,
         ...rest,
     };
 };

packages/api-v2/src/hooks/useWalletAccountsList.ts

@@ -1,13 +1,10 @@
 import { useMemo } from 'react';
 import useAuthorize from './useAuthorize';
-import useBalance from './useBalance';
 import useCurrencyConfig from './useCurrencyConfig';
-import { displayMoney } from '../utils';
 
 /** A custom hook that gets the list of all wallet accounts for the current user. */
 const useWalletAccountsList = () => {
     const { data: authorize_data, ...rest } = useAuthorize();
-    const { data: balance_data } = useBalance();
     const { getConfig } = useCurrencyConfig();
 
     // Filter out non-wallet accounts.
@@ -57,31 +54,11 @@ const useWalletAccountsList = () => {
         });
     }, [filtered_accounts, getConfig]);
 
-    // Add balance to each wallet account
-    const modified_accounts_with_balance = useMemo(
-        () =>
-            modified_accounts?.map(wallet => {
-                const balance = balance_data?.accounts?.[wallet.loginid]?.balance || 0;
-
-                return {
-                    ...wallet,
-                    /** The balance of the wallet account. */
-                    balance,
-                    /** The balance of the wallet account in currency format. */
-                    display_balance: displayMoney(balance, wallet.currency_config?.display_code || 'USD', {
-                        fractional_digits: wallet.currency_config?.fractional_digits,
-                        preferred_language: authorize_data?.preferred_language,
-                    }),
-                };
-            }),
-        [balance_data?.accounts, modified_accounts, authorize_data?.preferred_language]
-    );
-
     // Sort wallet accounts alphabetically by fiat, crypto, then virtual.
     const sorted_accounts = useMemo(() => {
-        if (!modified_accounts_with_balance) return;
+        if (!modified_accounts) return;
 
-        return [...modified_accounts_with_balance].sort((a, b) => {
+        return [...modified_accounts].sort((a, b) => {
             if (a.is_virtual !== b.is_virtual) {
                 return a.is_virtual ? 1 : -1;
             } else if (a.currency_config?.is_crypto !== b.currency_config?.is_crypto) {
@@ -90,7 +67,7 @@ const useWalletAccountsList = () => {
 
             return (a.currency || 'USD').localeCompare(b.currency || 'USD');
         });
-    }, [modified_accounts_with_balance]);
+    }, [modified_accounts]);
 
     return {
         /** The list of wallet accounts for the current user. */

packages/api-v2/src/utils/display-money.ts

@@ -5,8 +5,8 @@ type TCurrency = NonNullable<ReturnType<typeof useAuthorize>['data']['currency']
 type TPreferredLanguage = ReturnType<typeof useAuthorize>['data']['preferred_language'];
 
 export const displayMoney = (
-    amount: number,
-    currency: TCurrency,
+    amount = 0,
+    currency: TCurrency = '',
     options?: {
         fractional_digits?: number;
         preferred_language?: TPreferredLanguage;

packages/wallets/component-tests/crypto-payment-redirection.spec.tsx

@@ -6,6 +6,7 @@ import { mockCryptoWithdraw } from './mocks/mockCryptoWithdraw';
 import { mockGetAccountTypes } from './mocks/mockGetAccountTypes';
 import { mockProposalOpenContract } from './mocks/mockProposalOpenContract';
 import mockWalletsAuthorize, { DEFAULT_WALLET_ACCOUNTS } from './mocks/mockWalletsAuthorize';
+import { mockAccountList } from './mocks/mockAccountList';
 
 test.describe('Wallets - Crypto withdrawal', () => {
     test.beforeEach(async ({ baseURL, page }) => {
@@ -20,6 +21,7 @@ test.describe('Wallets - Crypto withdrawal', () => {
                 mockCryptoConfig,
                 mockProposalOpenContract,
                 mockBalance,
+                mockAccountList,
             ],
             page,
             state: {

packages/wallets/component-tests/menu.spec.tsx

@@ -5,6 +5,7 @@ import { mockCryptoConfig } from './mocks/mockCryptoConfig';
 import { mockGetAccountTypes } from './mocks/mockGetAccountTypes';
 import { mockProposalOpenContract } from './mocks/mockProposalOpenContract';
 import mockWalletsAuthorize, { DEFAULT_WALLET_ACCOUNTS } from './mocks/mockWalletsAuthorize';
+import { mockAccountList } from './mocks/mockAccountList';
 
 test.describe('Wallets - Traders Hub', () => {
     test('render USD wallet balance', async ({ baseURL, page }) => {
@@ -18,6 +19,7 @@ test.describe('Wallets - Traders Hub', () => {
                 mockCryptoConfig,
                 mockProposalOpenContract,
                 mockBalance,
+                mockAccountList,
             ],
             page,
             state: {

packages/wallets/component-tests/mocks/mockAccountList.ts

@@ -0,0 +1,66 @@
+import { Context } from '@deriv/integration/src/utils/mocks/mocks';
+
+const TEMP_ACCOUNT_LIST = [
+    {
+        account_category: 'trading',
+        account_type: 'standard',
+        broker: 'CR',
+        created_at: 1720591930,
+        currency: 'USD',
+        currency_type: 'fiat',
+        is_disabled: 0,
+        is_virtual: 0,
+        landing_company_name: 'svg',
+        linked_to: [
+            {
+                loginid: 'CRW1003',
+                platform: 'dwallet',
+            },
+        ],
+        loginid: 'CR90000243',
+    },
+    {
+        account_category: 'wallet',
+        account_type: 'doughflow',
+        broker: 'CRW',
+        created_at: 1720591899,
+        currency: 'USD',
+        currency_type: 'fiat',
+        is_disabled: 0,
+        is_virtual: 0,
+        landing_company_name: 'svg',
+        linked_to: [
+            {
+                loginid: 'CR90000243',
+                platform: 'dtrade',
+            },
+        ],
+        loginid: 'CRW1003',
+    },
+    {
+        account_category: 'wallet',
+        account_type: 'virtual',
+        broker: 'VRW',
+        created_at: 1720591899,
+        currency: 'USD',
+        currency_type: 'fiat',
+        is_disabled: 0,
+        is_virtual: 1,
+        landing_company_name: 'virtual',
+        linked_to: [],
+        loginid: 'VRW1004',
+    },
+];
+
+export function mockAccountList(context: Context) {
+    if (!('account_list' in context.request)) {
+        return;
+    }
+
+    context.response = {
+        account_list: TEMP_ACCOUNT_LIST,
+        echo_req: context.request,
+        msg_type: 'account_list',
+        req_id: context.req_id,
+    };
+}

packages/wallets/component-tests/wallets-carousel-content.spec.tsx

@@ -5,6 +5,7 @@ import { mockGetAccountTypes } from './mocks/mockGetAccountTypes';
 import { mockProposalOpenContract } from './mocks/mockProposalOpenContract';
 import mockWalletsAuthorize, { DEFAULT_WALLET_ACCOUNTS } from './mocks/mockWalletsAuthorize';
 import mockWalletsLoggedIn from './mocks/mockWalletsLoggedIn';
+import { mockAccountList } from './mocks/mockAccountList';
 
 const CAROUSEL_SELECTOR = '.wallets-carousel-content__cards .wallets-card:nth-child(1)';
 
@@ -47,6 +48,7 @@ test.describe('Wallets - Mobile carousel', () => {
                 mockGetAccountTypes,
                 mockCryptoConfig,
                 mockProposalOpenContract,
+                mockAccountList,
             ],
             page: mobilePage,
             state: {

packages/wallets/src/AppContent.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDerivAccountsList } from '@deriv/api-v2';
 import { Analytics } from '@deriv-com/analytics';
+import useAllBalanceSubscription from './hooks/useAllBalanceSubscription';
 import { defineViewportHeight } from './utils/utils';
 import { WalletLanguageSidePanel } from './components';
 import { Router } from './routes';
@@ -9,6 +11,19 @@ import './AppContent.scss';
 const AppContent: React.FC = () => {
     const [isPanelOpen, setIsPanelOpen] = useState(false);
     const { i18n } = useTranslation();
+    const { isSubscribed, subscribeToAllBalance, unsubscribeFromAllBalance } = useAllBalanceSubscription();
+    const { data: derivAccountList, isRefetching } = useDerivAccountsList();
+
+    useEffect(() => {
+        if ((derivAccountList?.length ?? 0) > 0 && !isRefetching && !isSubscribed) {
+            subscribeToAllBalance();
+        }
+        return () => {
+            if (isSubscribed) {
+                unsubscribeFromAllBalance();
+            }
+        };
+    }, [derivAccountList?.length, isRefetching, isSubscribed, subscribeToAllBalance, unsubscribeFromAllBalance]);
 
     useEffect(() => {
         const handleShortcutKey = (event: globalThis.KeyboardEvent) => {

packages/wallets/src/components/AccountsList/AccountsList.tsx

@@ -3,19 +3,17 @@ import { useTranslation } from 'react-i18next';
 import { Divider, Tab, Tabs } from '@deriv-com/ui';
 import { CFDPlatformsList } from '../../features';
 import useDevice from '../../hooks/useDevice';
-import { TSubscribedBalance } from '../../types';
 import { OptionsAndMultipliersListing } from '../OptionsAndMultipliersListing';
 import './AccountsList.scss';
 
 const tabs = ['CFDs', 'Options'];
 
 type TProps = {
     accountsActiveTabIndex?: number;
-    balance: TSubscribedBalance['balance'];
     onTabClickHandler?: React.Dispatch<React.SetStateAction<number>>;
 };
 
-const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, balance, onTabClickHandler }) => {
+const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, onTabClickHandler }) => {
     const { isMobile } = useDevice();
     const { t } = useTranslation();
 
@@ -34,7 +32,7 @@ const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, balance, onTabClickH
                     <Divider color='var(--wallets-banner-border-color)' />
                 </Tab>
                 <Tab className='wallets-accounts-list__tab' title={t('Options')}>
-                    <OptionsAndMultipliersListing balance={balance} />
+                    <OptionsAndMultipliersListing />
                     <Divider color='var(--wallets-banner-border-color)' />
                 </Tab>
             </Tabs>
@@ -47,7 +45,7 @@ const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, balance, onTabClickH
                 <Divider color='var(--border-divider)' height={2} />
                 <CFDPlatformsList />
                 <Divider color='var(--border-divider)' height={2} />
-                <OptionsAndMultipliersListing balance={balance} />
+                <OptionsAndMultipliersListing />
             </div>
         </div>
     );