thisyahlen/chore: add useAvailableWallets in deriv/api

packages/api/src/hooks/index.ts

@@ -4,9 +4,11 @@ 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 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';

packages/api/src/hooks/useAllAvailableAccounts.ts

@@ -1,11 +1,13 @@
 import { useMemo } from 'react';
-import useAccountTypes from './useAccountTypes';
+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 } = useAccountTypes(landing_company_data?.financial_company?.shortcode);
+    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(() => {

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/useAccountTypes.ts → packages/api/src/hooks/useGetAccountTypes.ts

@@ -4,7 +4,7 @@ import useFetch from '../useFetch';
 /**
  * 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) },
@@ -28,4 +28,4 @@ const useAccountTypes = (landing_company?: string) => {
     };
 };
 
-export default useAccountTypes;
+export default useGetAccountTypes;