Merge pull request #166 from ahmed-deriv/ahmed/DAPI-775/fix--currency-on-account-switcher

Ahmed/dapi 775/fix  currency on account switcher

Author: sandeep-deriv

src/components/AccountSwitcher/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { InputDropdown } from '@deriv-com/quill-ui';
 import { translate } from '@docusaurus/Translate';
 import useAuthContext from '@site/src/hooks/useAuthContext';
@@ -15,10 +15,39 @@ interface AccountSwitcherProps {
 const AccountSwitcher = ({ onChange }: AccountSwitcherProps) => {
   const { onSelectAccount } = useAccountSelector();
   const [isToggleDropdown, setToggleDropdown] = useState(false);
-  const { loginAccounts, currentLoginAccount } = useAuthContext();
+  const {
+    loginAccounts,
+    currentLoginAccount,
+    userAccounts,
+    updateCurrentLoginAccount,
+    updateLoginAccounts,
+  } = useAuthContext();
   const dropdownRef = useRef(null);
   useOnClickOutside(dropdownRef, () => setToggleDropdown(false));
 
+  const handleLoginAccounts = useCallback(() => {
+    const isNonCurrencyAccounts = loginAccounts.filter((account) => account.currency === '');
+    if (isNonCurrencyAccounts.length > 0) {
+      const updatedAccountList = loginAccounts.map((account) => {
+        const userAccount = userAccounts.find(
+          (userAccount) => userAccount.loginid === account.name,
+        );
+        if (userAccount) {
+          const updatedAccountItem = { ...account, currency: userAccount.currency };
+          if (currentLoginAccount.name === account.name)
+            updateCurrentLoginAccount(updatedAccountItem, false);
+          return updatedAccountItem;
+        }
+        return account;
+      });
+      updateLoginAccounts(updatedAccountList, false);
+    }
+  }, [userAccounts]);
+
+  React.useEffect(() => {
+    handleLoginAccounts();
+  }, [handleLoginAccounts]);
+
   const options = loginAccounts.map((accountItem) => ({
     text: (
       <div

src/contexts/auth/auth.context.tsx

@@ -14,9 +14,9 @@ export interface IAuthContext {
   is_logged_in: boolean;
   is_authorized: boolean;
   loginAccounts: IUserLoginAccount[];
-  updateLoginAccounts: (userAccounts: IUserLoginAccount[]) => void;
+  updateLoginAccounts: (userAccounts: IUserLoginAccount[], updateCurrentAccount?: boolean) => void;
   currentLoginAccount: IUserLoginAccount;
-  updateCurrentLoginAccount: (userAccount: IUserLoginAccount) => void;
+  updateCurrentLoginAccount: (userAccount: IUserLoginAccount, isValidateAccount?: boolean) => void;
   userAccounts: IUserAccounts;
   user: IUser;
 }

src/contexts/auth/auth.provider.tsx

@@ -66,8 +66,11 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
   }, [is_authorized, is_connected, updateAuthorize]);
 
   const updateLoginAccounts = useCallback(
-    (loginAccounts: IUserLoginAccount[]) => {
+    (loginAccounts: IUserLoginAccount[], updateCurrentAccount = true) => {
+
       setLoginAccounts(loginAccounts);
+      if (!updateCurrentAccount) return;
+
       if (loginAccounts.length) {
         const virtualAccount = findVirtualAccount(loginAccounts);
         if (virtualAccount) {
@@ -81,9 +84,11 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
   );
 
   const updateCurrentLoginAccount = useCallback(
-    (account: IUserLoginAccount) => {
-      setIsAuthorized(false);
-      setisSwitchingAccount(true);
+    (account: IUserLoginAccount, isValidateAccount = true) => {
+      if (isValidateAccount) {
+        setIsAuthorized(false);
+        setisSwitchingAccount(true);
+      }
       setCurrentLoginAccount(account);
     },
     [setCurrentLoginAccount],

src/utils/__tests__/utils.test.ts

@@ -126,33 +126,8 @@ describe('Get Accounts from Search Params', () => {
       },
     ]);
   });
-
-  it('Should not create account object for malformed query params', () => {
-    const test_search_params =
-      '?acct1=CR111111&token1=first_token&cur1=USD&acct2=CR2222222&token2=second_token';
-    const accounts = getAccountsFromSearchParams(test_search_params);
-    expect(accounts.length).toBe(1);
-    expect(accounts).not.toStrictEqual([
-      {
-        currency: 'USD',
-        name: 'CR111111',
-        token: 'first_token',
-      },
-      {
-        currency: 'ETH',
-        name: 'CR2222222',
-        token: 'second_token',
-      },
-    ]);
-    expect(accounts).toStrictEqual([
-      {
-        currency: 'USD',
-        name: 'CR111111',
-        token: 'first_token',
-      },
-    ]);
-  });
 });
+
 describe('Get Server Config', () => {
   afterEach(() => {
     jest.clearAllMocks();

src/utils/index.ts

@@ -120,13 +120,12 @@ export const getAccountsFromSearchParams = (searchParams: string) => {
     // we should check each account in the search params, this is some kind of validation for the URL search params
     if (
       params.has(`acct${queryIndex}`) &&
-      params.has(`token${queryIndex}`) &&
-      params.has(`cur${queryIndex}`)
+      params.has(`token${queryIndex}`)
     ) {
       accounts.push({
         name: params.get(`acct${queryIndex}`),
         token: params.get(`token${queryIndex}`),
-        currency: params.get(`cur${queryIndex}`),
+        currency: params.get(`cur${queryIndex}`) || '',
       });
     }
   }