Merge remote-tracking branch 'upstream/master' into test-coverage-dbot

.circleci/config.yml

@@ -78,6 +78,7 @@ commands:
             - "packages/translations/node_modules"
             - "packages/utils/node_modules"
             - "packages/analytics/node_modules"
+            - "packages/wallets/node_modules"
             # VERIFY_CACHE_FOLDERS_END (DO NOT REMOVE)
 
   build:
@@ -271,6 +272,9 @@ jobs:
       - run:
           name: "Check TypeScript for @deriv/stores"
           command: npx tsc --project packages/stores/tsconfig.json -noEmit
+      - run:
+          name: "Check TypeScript for @deriv/wallets"
+          command: npx tsc --project packages/wallets/tsconfig.json -noEmit
       # - run:
       #     name: "Check TypeScript for @deriv/cashier"
       #     command: npx tsc --project packages/cashier/tsconfig.json -noEmit

README.md

@@ -267,7 +267,7 @@ If preferable to use manual deployment, you can use [gh-pages](https://pages.git
 
     **A.** Just as installing, except the `npm` command you'd run would be `npm uninstall` (shortened to `npm un`). e.g.: `lerna exec --scope=@deriv/translations -- npm un i18next`.
 
-3. How do I run `npm ci` or equivalent (to add dependencies based on `package-lock.json`?
+3. How do I run `npm ci` or equivalent to add dependencies based on `package-lock.json`?
 
     **A.** You have two options:
 
@@ -280,15 +280,7 @@ If preferable to use manual deployment, you can use [gh-pages](https://pages.git
 
     If you face this issue, simply run `sudo chown -R $(whoami) .` from the root of the project.
 
-5. My build(s) fail and I can see it related to Node Sass (`node-sass`), what do I do?
-
-    **A.** This issue happens when your `node-sass` has its `binding.node` set to a version of node different from the current projects' one. Please try the following in order:
-
-    1. First run `npx lerna exec -- npm rebuild node-sass` and try building your packages again.
-    2. If that doesn't work, try `npm cache clean --force`, followed by `npm run clean`, and then `npm run bootstrap`.
-    3. And finally, if that doesn't work then you can read deeper into this [StackOverflow post](https://stackoverflow.com/questions/37986800).
-
-6. How can I regenerate `package-lock.json` file?
+5. How can I regenerate `package-lock.json` file?
 
     We have added `bootstrap:dev` to scripts. If you are updating or adding a package and you want to regenerate `package-lock.json` file, you should run this command
     `npm run bootstrap:dev`

packages/account/package.json

@@ -74,7 +74,7 @@
         "eslint-plugin-react-hooks": "^4.2.0",
         "history": "^5.0.0",
         "mini-css-extract-plugin": "^1.3.4",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/api/src/APIProvider.tsx

@@ -2,7 +2,23 @@ import React, { PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-const queryClient = new QueryClient();
+declare global {
+    interface Window {
+        ReactQueryClient: QueryClient;
+    }
+}
+
+// This is a temporary workaround to share a single `QueryClient` instance between all the packages.
+// Later once we have each package separated we won't need this anymore and can remove this.
+const getSharedQueryClientContext = (): QueryClient => {
+    if (!window.ReactQueryClient) {
+        window.ReactQueryClient = new QueryClient();
+    }
+
+    return window.ReactQueryClient;
+};
+
+const queryClient = getSharedQueryClientContext();
 
 const APIProvider = ({ children }: PropsWithChildren<unknown>) => (
     <QueryClientProvider client={queryClient}>

packages/api/src/hooks/index.ts

@@ -1,8 +1,16 @@
 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 useAllAvailableAccounts } from './useAllAvailableAccounts';
 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 useTradingPlatformAvailableAccounts } from './useTradingPlatformAvailableAccounts';
 export { default as useWalletAccountsList } from './useWalletAccountsList';

packages/api/src/hooks/useAccountTypes.ts

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

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/useAllAvailableAccounts.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import useAccountTypes from './useAccountTypes';
+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);
+
+    // 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/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.tsx → 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

@@ -1,23 +1,22 @@
 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 } = 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/useGetAccountStatus.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import useFetch from '../useFetch';
+
+/** 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 account status response.
+    const modified_account_status = useMemo(() => {
+        if (!get_account_status_data?.get_account_status) return;
+
+        return {
+            ...get_account_status_data.get_account_status,
+            /** Indicates whether the client should be prompted to authenticate their account. */
+            should_prompt_client_to_authenticate: Boolean(
+                get_account_status_data.get_account_status.prompt_client_to_authenticate
+            ),
+        };
+    }, [get_account_status_data?.get_account_status]);
+
+    return {
+        /** The account status response. */
+        data: modified_account_status,
+        ...rest,
+    };
+};
+
+export default useGetAccountStatus;

packages/api/src/hooks/useLandingCompany.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import useFetch from '../useFetch';
+import useSettings from './useSettings';
+
+/** A custom hook that returns the available landing companies of the user's country. */
+const useLandingCompany = () => {
+    const { data: settings_data } = useSettings();
+    const { data, ...rest } = useFetch('landing_company', {
+        payload: { landing_company: settings_data?.country_code || '' },
+        options: { enabled: Boolean(settings_data?.country_code) },
+    });
+
+    // Add additional information to the landing company response.
+    const modified_landing_company = useMemo(() => {
+        if (!data?.landing_company) return;
+
+        return { ...data.landing_company };
+    }, [data?.landing_company]);
+
+    return {
+        /** The landing company response. */
+        data: modified_landing_company,
+        ...rest,
+    };
+};
+
+export default useLandingCompany;