thisyahlen/chore: add useAvailableWallets in deriv/api

packages/api/src/hooks/index.ts

@@ -2,15 +2,18 @@ export { default as useAccountsList } from './useAccountsList';
 export { default as useActiveAccount } from './useActiveAccount';
 export { default as useActiveTradingAccount } from './useActiveTradingAccount';
 export { default as useActiveWalletAccount } from './useActiveWalletAccount';
+export { default as useAllAvailableAccounts } from './useAllAvailableAccounts';
 export { default as useAuthorize } from './useAuthorize';
-export { default as useAvailableAccounts } from './useAvailableAccounts';
+export { default as useAvailableAccounts } from './useAllAvailableAccounts';
+export { default as useAvailableWallets } from './useAvailableWallets';
 export { default as useBalance } from './useBalance';
 export { default as useCurrencyConfig } from './useCurrencyConfig';
 export { default as useGetAccountStatus } from './useGetAccountStatus';
+export { default as useGetAccountTypes } from './useGetAccountTypes';
 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';
 export { default as useTradingPlatformAvailableAccounts } from './useTradingPlatformAvailableAccounts';
+export { default as useWalletAccountsList } from './useWalletAccountsList';

packages/api/src/hooks/useAllAvailableAccounts.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import useGetAccountTypes from './useGetAccountTypes';
+import useLandingCompany from './useLandingCompany';
+
+/** A custom hook to get all available accounts that user can have. */
+const useAllAvailableAccounts = () => {
+    const { data: landing_company_data } = useLandingCompany();
+    const { data: account_types_data, ...rest } = useGetAccountTypes(
+        landing_company_data?.financial_company?.shortcode
+    );
+
+    // Add additional information to the account types response.
+    const modified_account_types_data = useMemo(() => {
+        if (!account_types_data) return;
+
+        return { ...account_types_data };
+    }, [account_types_data]);
+
+    return {
+        /** The account types response. */
+        data: modified_account_types_data,
+        ...rest,
+    };
+};
+
+export default useAllAvailableAccounts;

packages/api/src/hooks/useAvailableWallets.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import useWalletAccountsList from './useWalletAccountsList';
+import useCurrencyConfig from './useCurrencyConfig';
+import useAllAvailableAccounts from './useAllAvailableAccounts';
+
+const useAvailableWallets = () => {
+    const { data: account_type_data } = useAllAvailableAccounts();
+
+    const { data: added_wallets } = useWalletAccountsList();
+    const { getConfig } = useCurrencyConfig();
+
+    const sortedWallets = React.useMemo(() => {
+        if (!account_type_data) return undefined;
+        const { crypto, doughflow } = account_type_data?.wallet;
+        const crypto_currencies = crypto?.currencies;
+        const fiat_currencies = doughflow?.currencies;
+
+        if (!crypto_currencies || !fiat_currencies) return [];
+        const available_currencies = [...fiat_currencies, ...crypto_currencies];
+        const non_virtual_wallets = added_wallets?.filter(wallet => !wallet.is_virtual);
+
+        const modified_wallets = non_virtual_wallets?.map(wallet => ({
+            currency: wallet.currency,
+            landing_company_name: wallet.landing_company_name,
+            is_added: true,
+        }));
+
+        const available_wallets = available_currencies
+            .filter(currency => !modified_wallets?.some(wallet => wallet.currency === currency))
+            .map(currency => ({
+                currency,
+                landing_company_name: account_type_data?.landing_company,
+                is_added: false,
+            }));
+
+        const getConfigIsCrypto = (currency: string) => getConfig(currency)?.is_crypto;
+
+        // Sort the unadded wallets alphabetically by fiat, crypto, then virtual
+        available_wallets.sort((a, b) => {
+            const a_config = getConfigIsCrypto(a.currency);
+            const b_config = getConfigIsCrypto(b.currency);
+
+            if (a_config !== b_config) return a.currency ? 1 : -1;
+
+            return (a.currency || 'USD').localeCompare(b.currency || 'USD');
+        });
+
+        // Sort the added wallets alphabetically by fiat, crypto, then virtual (if any)
+        if (Array.isArray(modified_wallets)) {
+            modified_wallets?.sort((a, b) => {
+                const a_config = getConfigIsCrypto(a.currency || 'BTC');
+                const b_config = getConfigIsCrypto(b.currency || 'BTC');
+                if (a_config !== b_config) return a_config ? 1 : -1;
+
+                return (a.currency || 'USD').localeCompare(b.currency || 'USD');
+            });
+        }
+
+        return [...available_wallets];
+    }, [account_type_data, added_wallets, getConfig]);
+
+    return {
+        /** Sorted available wallets */
+        data: sortedWallets,
+    };
+};
+
+export default useAvailableWallets;

packages/api/src/hooks/useCurrencyConfig.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import useFetch from '../useFetch';
 
-/** A custom hook to get the currency config information from `website_status` endpoint and `crypto_config` endpoint */
+/** A custom hook to get the currency config information from `website_status` endpoint and `crypto_config` endpoint. */
 const useCurrencyConfig = () => {
     const { data: website_status_data, ...rest } = useFetch('website_status');
     const { data: crypto_config_data } = useFetch('crypto_config');

packages/api/src/hooks/useGetAccountStatus.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 import useFetch from '../useFetch';
 
-/** A hook that retrieves the account status   */
+/** A custom hook to retrieves the account status for the current user. */
 const useGetAccountStatus = () => {
     const { data: get_account_status_data, ...rest } = useFetch('get_account_status');
 
-    // Add additional information to the authorize response.
+    // Add additional information to the account status response.
     const modified_account_status = useMemo(() => {
         if (!get_account_status_data?.get_account_status) return;
 
@@ -19,7 +19,7 @@ const useGetAccountStatus = () => {
     }, [get_account_status_data?.get_account_status]);
 
     return {
-        /** Account status details. */
+        /** The account status response. */
         data: modified_account_status,
         ...rest,
     };

packages/api/src/hooks/useAccountTypes.ts → packages/api/src/hooks/useGetAccountTypes.ts

@@ -2,30 +2,30 @@ import { useMemo } from 'react';
 import useFetch from '../useFetch';
 
 /**
- * A custom hook to get available account types for a specific landing company
- *
- *  @param landing_company {string} - The landing company shortcode
+ * A custom hook to get available account types for a specific landing company.
  */
-const useAccountTypes = (landing_company?: string) => {
+const useGetAccountTypes = (landing_company?: string) => {
     const { data, ...rest } = useFetch('get_account_types', {
         payload: { company: landing_company },
+        options: { enabled: Boolean(landing_company) },
     });
 
-    const modified_data = useMemo(() => {
+    // Add additional information to the account types response.
+    const modified_account_types = useMemo(() => {
         if (!data?.get_account_types) return;
 
         return {
-            /** List of available account types */
             ...data.get_account_types,
             /** Landing company for the account types */
             landing_company,
         };
     }, [data?.get_account_types, landing_company]);
 
     return {
-        data: modified_data,
+        /** The account types response. */
+        data: modified_account_types,
         ...rest,
     };
 };
 
-export default useAccountTypes;
+export default useGetAccountTypes;

packages/api/src/hooks/useLandingCompany.ts

@@ -10,21 +10,16 @@ const useLandingCompany = () => {
         options: { enabled: Boolean(settings_data?.country_code) },
     });
 
-    const modified_data = useMemo(() => {
+    // Add additional information to the landing company response.
+    const modified_landing_company = useMemo(() => {
         if (!data?.landing_company) return;
-        const { financial_company, virtual_company } = data.landing_company;
-        return {
-            ...data.landing_company,
-            /** Short code of financial landing company */
-            financial_company_shortcode: financial_company?.shortcode,
-            /** Short code of virtual landing company */
-            virtual_company_shortcode: virtual_company,
-        };
+
+        return { ...data.landing_company };
     }, [data?.landing_company]);
 
     return {
-        /** List of available landing companies */
-        data: modified_data,
+        /** The landing company response. */
+        data: modified_landing_company,
         ...rest,
     };
 };

packages/api/src/hooks/useSettings.ts

@@ -7,23 +7,23 @@ type TSetSettingsPayload = NonNullable<
     NonNullable<NonNullable<Parameters<ReturnType<typeof useRequest<'set_settings'>>['mutate']>>[0]>['payload']
 >;
 
-/** A custom hook to get user settings (email, date of birth, address etc) */
+/** A custom hook to get and update the user settings. */
 const useSettings = () => {
     const { data, ...rest } = useFetch('get_settings');
+    const { mutate, ...mutate_rest } = useRequest('set_settings', { onSuccess: () => invalidate('get_settings') });
     const invalidate = useInvalidateQuery();
-    const { mutate, ...mutate_rest } = useRequest('set_settings', {
-        onSuccess: () => invalidate('get_settings'),
-    });
 
-    const update = useCallback((values: TSetSettingsPayload) => mutate({ payload: { ...values } }), [mutate]);
+    const update = useCallback((payload: TSetSettingsPayload) => mutate({ payload }), [mutate]);
 
-    const modified_data = useMemo(() => ({ ...data?.get_settings }), [data?.get_settings]);
+    // Add additional information to the settings response.
+    const modified_settings = useMemo(() => ({ ...data?.get_settings }), [data?.get_settings]);
 
     return {
-        /** User information and settings */
-        data: modified_data,
+        /** The settings response. */
+        data: modified_settings,
         /** Function to update user settings */
         update,
+        /** The mutation related information */
         mutation: mutate_rest,
         ...rest,
     };