farzin/feat: add useTradingAccountsList, useActiveTradingAccount,…

… and `useActiveAccount` hooks (binary-com#9824)

* refactor(api): ♻️ clean-up

* feat(api): ✨ add `useTradingAccountsList`, `useActiveTradingAccount`, and `useActiveAccount` hooks

---------

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

packages/api/src/hooks/index.ts

@@ -1,11 +1,14 @@
 export { default as useAccountsList } from './useAccountsList';
-export { default as useActiveWalletAccounts } from './useActiveWalletAccounts';
+export { default as useActiveAccount } from './useActiveAccount';
+export { default as useActiveTradingAccount } from './useActiveTradingAccount';
+export { default as useActiveWalletAccount } from './useActiveWalletAccount';
 export { default as useAuthorize } from './useAuthorize';
 export { default as useBalance } from './useBalance';
 export { default as useCurrencyConfig } from './useCurrencyConfig';
 export { default as useGetAccountStatus } from './useGetAccountStatus';
 export { default as useLandingCompany } from './useLandingCompany';
 export { default as useMT5LoginList } from './useMT5LoginList';
 export { default as useSettings } from './useSettings';
+export { default as useTradingAccountsList } from './useTradingAccountsList';
 export { default as useTradingPlatformAccounts } from './useTradingPlatformAccounts';
 export { default as useWalletAccountsList } from './useWalletAccountsList';

packages/api/src/hooks/useAccountsList.ts

@@ -3,7 +3,7 @@ import useAuthorize from './useAuthorize';
 import useBalance from './useBalance';
 import useCurrencyConfig from './useCurrencyConfig';
 
-/** A custom hook that returns the list of accounts of the logged in user. */
+/** A custom hook that returns the list of accounts for the current user. */
 const useAccountsList = () => {
     const { data: authorize_data, ...rest } = useAuthorize();
     const { data: balance_data } = useBalance();
@@ -34,7 +34,7 @@ const useAccountsList = () => {
                 currency_config: account.currency ? getConfig(account.currency) : undefined,
             } as const;
         });
-    }, [authorize_data.account_list, authorize_data.loginid]);
+    }, [authorize_data.account_list, authorize_data.loginid, getConfig]);
 
     // Add balance to each account
     const modified_accounts_with_balance = useMemo(
@@ -48,7 +48,7 @@ const useAccountsList = () => {
     );
 
     return {
-        /** The list of accounts. */
+        /** The list of accounts for the current user. */
         data: modified_accounts_with_balance,
         ...rest,
     };

packages/api/src/hooks/useActiveAccount.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import useAccountsList from './useAccountsList';
+
+/** A custom hook that returns the account object for the current active account. */
+const useActiveAccount = () => {
+    const { data, ...rest } = useAccountsList();
+    const active_account = useMemo(() => data?.find(account => account.is_active), [data]);
+
+    return {
+        /** User's current active account. */
+        data: active_account,
+        ...rest,
+    };
+};
+
+export default useActiveAccount;

packages/api/src/hooks/useActiveTradingAccount.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import useTradingAccountsList from './useTradingAccountsList';
+
+/** A custom hook that returns the trading object for the current active trading. */
+const useActiveTradingAccount = () => {
+    const { data, ...rest } = useTradingAccountsList();
+    const active_trading = useMemo(() => data?.find(trading => trading.is_active), [data]);
+
+    return {
+        /** User's current active trading. */
+        data: active_trading,
+        ...rest,
+    };
+};
+
+export default useActiveTradingAccount;

packages/api/src/hooks/useAuthorize.ts

@@ -1,10 +1,9 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { getActiveAuthTokenIDFromLocalStorage } from '@deriv/utils';
 import useFetch from '../useFetch';
 
-/** A custom hook that authorize the user with the given token. If no token is given, it will use the current token.
- *
- * @param token {string} - The authentication token. If this is not provided, it will use the current token instead.
+/** A custom hook that authorize the user with the given token. If no token is given,
+ * it will use the current token from localStorage.
  */
 const useAuthorize = (token?: string) => {
     const current_token = getActiveAuthTokenIDFromLocalStorage();
@@ -17,6 +16,12 @@ const useAuthorize = (token?: string) => {
     // Add additional information to the authorize response.
     const modified_authorize = useMemo(() => ({ ...data?.authorize }), [data?.authorize]);
 
+    useEffect(() => {
+        if (current_token !== token) {
+            // Todo: Update the token in the localStorage since we are switching the current account.
+        }
+    }, [current_token, token]);
+
     return {
         /** The authorize response. */
         data: modified_authorize,

packages/api/src/hooks/useBalance.ts

@@ -4,16 +4,15 @@ import useFetch from '../useFetch';
 /** A custom hook that gets the balance for all the user accounts. */
 const useBalance = () => {
     const { data: balance_data, ...rest } = useFetch('balance', {
-        payload: { account: 'all' }, // For 'all' account payload, balance is not subscribe-able, but when passed loginid, it is subscribe-able
-        options: {
-            refetchInterval: 30000,
-        },
+        payload: { account: 'all' },
+        options: { refetchInterval: 30000 }, // Refetch every 30 seconds to simulate subscription.
     });
 
     // Add additional information to the balance data.
     const modified_balance = useMemo(() => ({ ...balance_data?.balance }), [balance_data?.balance]);
 
     return {
+        /** The balance response. */
         data: modified_balance,
         ...rest,
     };

packages/api/src/hooks/useCurrencyConfig.ts

@@ -3,21 +3,20 @@ import useFetch from '../useFetch';
 
 /** A custom hook to get the currency config information from `website_status` endpoint and `crypto_config` endpoint */
 const useCurrencyConfig = () => {
-    const { data: website_status_data } = useFetch('website_status');
+    const { data: website_status_data, ...rest } = useFetch('website_status');
     const { data: crypto_config_data } = useFetch('crypto_config');
 
-    const currencies_config = useMemo(() => {
+    // Add additional information to the currency config.
+    const modified_currencies_config = useMemo(() => {
         if (!website_status_data?.website_status?.currencies_config) return undefined;
 
         const website_status_currencies_config = website_status_data.website_status.currencies_config;
 
-        const modified_currencies_config = Object.keys(website_status_currencies_config).map(currency => {
+        return Object.keys(website_status_currencies_config).map(currency => {
             const currency_config = website_status_currencies_config[currency];
-            const crypto_config = crypto_config_data?.crypto_config?.currencies_config[currency];
 
             return {
                 ...currency_config,
-                ...crypto_config,
                 /** determine if the currency is a `crypto` currency */
                 is_crypto: currency_config?.type === 'crypto',
                 /** determine if the currency is a `fiat` currency */
@@ -66,20 +65,35 @@ const useCurrencyConfig = () => {
                 display_code: currency === 'UST' ? 'USDT' : currency,
             };
         });
+    }, [website_status_data?.website_status?.currencies_config]);
 
-        return modified_currencies_config.reduce<Record<string, typeof modified_currencies_config[number]>>(
+    // Add additional information to the crypto config.
+    const modified_crypto_config = useMemo(() => {
+        return modified_currencies_config?.map(currency_config => ({
+            ...currency_config,
+            ...crypto_config_data?.crypto_config?.currencies_config[currency_config.code],
+        }));
+    }, [crypto_config_data?.crypto_config?.currencies_config, modified_currencies_config]);
+
+    // Transform the currency config array into a record object.
+    const transformed_currencies_config = useMemo(() => {
+        return modified_crypto_config?.reduce<Record<string, typeof modified_crypto_config[number]>>(
             (previous, current) => ({ ...previous, [current.code]: current }),
             {}
         );
-    }, [crypto_config_data?.crypto_config?.currencies_config, website_status_data?.website_status?.currencies_config]);
+    }, [modified_crypto_config]);
 
-    const getConfig = useCallback((currency: string) => currencies_config?.[currency], [currencies_config]);
+    const getConfig = useCallback(
+        (currency: string) => transformed_currencies_config?.[currency],
+        [transformed_currencies_config]
+    );
 
     return {
+        /** Available currencies and their information */
+        data: transformed_currencies_config,
         /** Returns the currency config object for the given currency */
         getConfig,
-        /** Available currencies and their information */
-        currencies_config,
+        ...rest,
     };
 };
 

packages/api/src/hooks/useMT5LoginList.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
-import useActiveWalletAccounts from './useActiveWalletAccounts';
+import useActiveWalletAccount from './useActiveWalletAccount';
 import useFetch from '../useFetch';
 
 /** A custom hook that gets the list created MT5 accounts of the user. */
 const useMT5LoginList = () => {
-    const { data: wallet } = useActiveWalletAccounts();
+    const { data: wallet } = useActiveWalletAccount();
 
     const { data: mt5_accounts, ...mt5_accounts_rest } = useFetch('mt5_login_list');
 

packages/api/src/hooks/useTradingAccountsList.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import useAccountsList from './useAccountsList';
+
+/** A custom hook that gets the list of all trading accounts for the current user. */
+const useTradingAccountsList = () => {
+    const { data: account_list_data, ...rest } = useAccountsList();
+
+    // Filter out non-trading accounts.
+    const filtered_accounts = useMemo(
+        () => account_list_data?.filter(account => account.is_trading),
+        [account_list_data]
+    );
+
+    // Add additional information to each trading account.
+    const modified_accounts = useMemo(() => {
+        return filtered_accounts?.map(trading => ({ ...trading }));
+    }, [filtered_accounts]);
+
+    return {
+        /** The list of trading accounts for the current user. */
+        data: modified_accounts,
+        ...rest,
+    };
+};
+
+export default useTradingAccountsList;

packages/api/src/hooks/useWalletAccountsList.ts

@@ -44,7 +44,7 @@ const useWalletAccountsList = () => {
     }, [modified_accounts]);
 
     return {
-        /** List of all wallet accounts for the current user. */
+        /** The list of wallet accounts for the current user. */
         data: sorted_accounts,
         ...rest,
     };