[WALL-4360] migrate account creation to async flow (deriv-com#15599)

* feat: switch to async flow in adding wallet #1 * feat: migrated deriv apps account to async flow * feat: eslint quick fixes * feat: fixed linked accounts and premature invalidation * feat: eslints * feat: eslints * feat: jest * feat: eslint * feat: fixed eslint * feat: eslint * feat: test * feat: syntax cleanup
amina-deriv · Jun 12, 2024 · fb136b2 · fb136b2
1 parent 4d0ea97
commit fb136b2
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 119 deletions.
diff --git a/packages/api-v2/src/hooks/useCreateWallet.ts b/packages/api-v2/src/hooks/useCreateWallet.ts
@@ -11,6 +11,7 @@ const useCreateWallet = () => {
     const {
         data,
         mutate: _mutate,
+        mutateAsync: _mutateAsync,
         ...rest
     } = useMutation('new_account_wallet', {
         onSuccess: () => {
@@ -23,6 +24,10 @@ const useCreateWallet = () => {
         return _mutate({ payload: params });
     };
 
+    const mutateAsync = (params: Parameters<typeof _mutateAsync>[0]['payload']) => {
+        return _mutateAsync({ payload: params });
+    };
+
     const modified_data = useMemo(() => {
         if (!data?.new_account_wallet) return;
         const currencyConfig = getConfig(data?.new_account_wallet.currency || 'USD');
@@ -40,6 +45,7 @@ const useCreateWallet = () => {
         data: modified_data,
         /** A function to create new wallet */
         mutate,
+        mutateAsync,
         ...rest,
     };
 };

diff --git a/packages/api-v2/src/hooks/useDerivAccountsList.ts b/packages/api-v2/src/hooks/useDerivAccountsList.ts
@@ -22,6 +22,7 @@ const useDerivAccountsList = () => {
     const { data: balance_data } = useBalance();
     const { getConfig } = useCurrencyConfig();
 
+    const account_list = account_list_data?.account_list;
     // Add additional information to the authorize response.
     const modified_accounts = useMemo(() => {
         return getAccountListWithAuthToken(account_list_data?.account_list)?.map(account => {
@@ -55,7 +56,7 @@ const useDerivAccountsList = () => {
                 is_mf: account.loginid?.startsWith('MF'),
             } as const;
         });
-    }, [account_list_data?.account_list, authorize_data?.loginid, getConfig]);
+    }, [account_list_data, account_list, authorize_data?.loginid, getConfig]);
 
     // Add balance to each account
     const modified_accounts_with_balance = useMemo(

diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx
@@ -4,6 +4,7 @@ import {
     useActiveWalletAccount,
     useCreateNewRealAccount,
     useSettings,
+    useInvalidateQuery,
 } from '@deriv/api-v2';
 import { toMoment } from '@deriv/utils';
 import { CFDSuccess } from '../../features/cfd/screens/CFDSuccess';
@@ -19,24 +20,24 @@ const DerivAppsGetAccount: React.FC = () => {
     const { isDesktop } = useDevice();
     const { data: activeWallet } = useActiveWalletAccount();
     const {
-        data: newTradingAccountData,
         isLoading: isAccountCreationLoading,
         isSuccess: isAccountCreationSuccess,
-        mutate: createNewRealAccount,
+        mutateAsync: createNewRealAccount,
     } = useCreateNewRealAccount();
     const {
         data: { country_code: countryCode, date_of_birth: dateOfBirth, first_name: firstName, last_name: lastName },
     } = useSettings();
     const { addTradingAccountToLocalStorage } = useSyncLocalStorageClientAccounts();
+    const invalidate = useInvalidateQuery();
 
     const { data: activeLinkedToTradingAccount, isLoading: isActiveLinkedToTradingAccountLoading } =
         useActiveLinkedToTradingAccount();
 
     const landingCompanyName = activeWallet?.landing_company_name?.toLocaleUpperCase();
 
-    const createTradingAccount = () => {
+    const createTradingAccount = async () => {
         if (!activeWallet?.is_virtual) {
-            createNewRealAccount({
+            const createAccountResponse = await createNewRealAccount({
                 payload: {
                     currency: activeWallet?.currency_config?.display_code,
                     date_of_birth: toMoment(dateOfBirth).format('YYYY-MM-DD'),
@@ -45,13 +46,18 @@ const DerivAppsGetAccount: React.FC = () => {
                     residence: countryCode || '',
                 },
             });
+
+            const newAccountReal = createAccountResponse?.new_account_real;
+
+            if (!newAccountReal) return;
+
+            await addTradingAccountToLocalStorage(newAccountReal);
+
+            invalidate('account_list');
         }
     };
 
     useEffect(() => {
-        if (newTradingAccountData && isAccountCreationSuccess) {
-            addTradingAccountToLocalStorage(newTradingAccountData);
-        }
         if (isAccountCreationSuccess) {
             show(
                 <ModalStepWrapper
@@ -72,7 +78,7 @@ const DerivAppsGetAccount: React.FC = () => {
             );
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [addTradingAccountToLocalStorage, newTradingAccountData, isAccountCreationSuccess]);
+    }, [addTradingAccountToLocalStorage, isAccountCreationSuccess]);
 
     return (
         <div className='wallets-deriv-apps-section wallets-deriv-apps-section__get-account'>

diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
@@ -19,26 +19,12 @@ const WalletsAddMoreCardBanner: React.FC<TWalletCarouselItem> = ({
 }) => {
     const switchWalletAccount = useWalletAccountSwitcher();
 
-    const {
-        data,
-        error,
-        isLoading: isWalletCreationLoading,
-        isSuccess: isMutateSuccess,
-        mutate,
-        status,
-    } = useCreateWallet();
+    const { data, error, isLoading: isWalletCreationLoading, mutateAsync, status } = useCreateWallet();
     const { isMobile } = useDevice();
     const history = useHistory();
     const modal = useModal();
     const { addWalletAccountToLocalStorage } = useSyncLocalStorageClientAccounts();
 
-    useEffect(() => {
-        if (data && isMutateSuccess) {
-            addWalletAccountToLocalStorage(data);
-            switchWalletAccount(data?.client_id);
-        }
-    }, [addWalletAccountToLocalStorage, data, isMutateSuccess, switchWalletAccount]);
-
     useEffect(
         () => {
             if (status === 'error') {
@@ -80,9 +66,22 @@ const WalletsAddMoreCardBanner: React.FC<TWalletCarouselItem> = ({
                         <LabelPairedPlusMdFillIcon fill='#333333' />
                     )
                 }
-                onClick={e => {
+                onClick={async e => {
                     e.stopPropagation();
-                    currency && mutate({ account_type: isCrypto ? 'crypto' : 'doughflow', currency });
+
+                    if (!currency) return;
+
+                    const createAccountResponse = await mutateAsync({
+                        account_type: isCrypto ? 'crypto' : 'doughflow',
+                        currency,
+                    });
+
+                    const newAccountWallet = createAccountResponse?.new_account_wallet;
+
+                    if (!newAccountWallet) return;
+
+                    await addWalletAccountToLocalStorage({ ...newAccountWallet, display_balance: `0.00 ${currency}` });
+                    switchWalletAccount(newAccountWallet.client_id);
                 }}
                 size={isMobile ? 'sm' : 'lg'}
             >

diff --git a/...llets/src/components/WalletsAddMoreCardBanner/__tests__/WalletsAddMoreCardBanner.spec.tsx b/...llets/src/components/WalletsAddMoreCardBanner/__tests__/WalletsAddMoreCardBanner.spec.tsx
@@ -69,7 +69,7 @@ jest.mock('../../Base', () => ({
 }));
 
 describe('WalletsAddMoreCardBanner', () => {
-    const mockMutate = jest.fn();
+    const mockMutate = jest.fn().mockResolvedValue({ new_account_wallet: { client_id: '123', currency: 'USD' } });
     const mockHistoryPush = jest.fn();
     const mockSwitchWalletAccount = jest.fn();
     const mockAddWalletAccountToLocalStorage = jest.fn();
@@ -83,7 +83,7 @@ describe('WalletsAddMoreCardBanner', () => {
             data: undefined,
             error: null,
             isSuccess: false,
-            mutate: mockMutate,
+            mutateAsync: mockMutate,
             status: 'idle',
         });
 
@@ -222,7 +222,7 @@ describe('WalletsAddMoreCardBanner', () => {
             data: { client_id: '123', currency: 'USD' },
             error: null,
             isSuccess: true,
-            mutate: mockMutate,
+            mutateAsync: mockMutate,
             status: 'success',
         });
 
@@ -232,8 +232,14 @@ describe('WalletsAddMoreCardBanner', () => {
             </ModalProvider>
         );
 
+        fireEvent.click(screen.getByText('Add'));
+
         await waitFor(() => {
-            expect(mockAddWalletAccountToLocalStorage).toHaveBeenCalledWith({ client_id: '123', currency: 'USD' });
+            expect(mockAddWalletAccountToLocalStorage).toHaveBeenCalledWith({
+                client_id: '123',
+                currency: 'USD',
+                display_balance: '0.00 USD',
+            });
             expect(mockSwitchWalletAccount).toHaveBeenCalledWith('123');
         });
     });