Merge branch 'master' of github.com:binary-com/deriv-app into ci-wallets

packages/api/src/hooks/index.ts

@@ -2,8 +2,8 @@ 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 useBalance } from './useBalance';
 export { default as useCurrencyConfig } from './useCurrencyConfig';
 export { default as useGetAccountStatus } from './useGetAccountStatus';
@@ -12,5 +12,5 @@ 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/useAccountTypes.ts

@@ -2,28 +2,28 @@ 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 { 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,
     };
 };

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/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/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,
     };

packages/appstore/webpack.config.js

@@ -108,7 +108,7 @@ module.exports = function (env) {
                         {
                             loader: 'css-loader',
                             options: {
-                                url: false,
+                                url: (_, resourcePath) => resourcePath.includes('packages/wallets'),
                             },
                         },
                         {
@@ -139,7 +139,24 @@ module.exports = function (env) {
                 },
                 {
                     test: /\.svg$/,
-                    exclude: /node_modules|public\//,
+                    issuer: /\/packages\/wallets\/.*(\/)?.*.scss/,
+                    exclude: /node_modules/,
+                    include: /public\//,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'appstore/wallets/public/[name].[contenthash][ext]',
+                    },
+                },
+                {
+                    test: /\.svg$/,
+                    issuer: /\/packages\/wallets\/.*(\/)?.*.tsx/,
+                    exclude: /node_modules/,
+                    include: /public\//,
+                    use: svg_loaders,
+                },
+                {
+                    test: /\.svg$/,
+                    exclude: [/node_modules|public\//],
                     use: svg_loaders,
                 },
             ],

packages/core/src/Stores/client-store.js

@@ -815,7 +815,7 @@ export default class ClientStore extends BaseStore {
 
     get is_valid_login() {
         if (!this.is_logged_in) return true;
-        const valid_login_ids_regex = new RegExp('^(MX|MF|VRTC|MLT|CR|FOG)[0-9]+$', 'i');
+        const valid_login_ids_regex = new RegExp('^(MX|MF|MFW|VRTC|VRW|MLT|CR|CRW|FOG)[0-9]+$', 'i');
         return this.all_loginids.every(id => valid_login_ids_regex.test(id));
     }
 
@@ -1561,7 +1561,7 @@ export default class ClientStore extends BaseStore {
         this.setIsLoggingIn(true);
         this.root_store.notifications.removeNotifications(true);
         this.root_store.notifications.removeAllNotificationMessages(true);
-        if (!this.is_virtual && /VRTC/.test(loginid)) {
+        if (!this.is_virtual && /VRTC|VRW/.test(loginid)) {
             this.setPrevRealAccountLoginid(this.loginid);
         }
         this.setSwitched(loginid);

packages/core/src/Stores/traders-hub-store.js

@@ -137,16 +137,16 @@ export default class TradersHubStore extends BaseStore {
             () => [this.root_store.client.loginid, this.root_store.client.residence],
             () => {
                 const residence = this.root_store.client.residence;
-                const active_demo = /^VRT/.test(this.root_store.client.loginid);
-                const active_real_mf = /^MF/.test(this.root_store.client.loginid);
+                const active_demo = /^VRT|VRW/.test(this.root_store.client.loginid);
+                const active_real_mf = /^MF|MFW/.test(this.root_store.client.loginid);
 
                 const default_region = () => {
                     if (((active_demo || active_real_mf) && isEuCountry(residence)) || active_real_mf) {
                         return 'EU';
                     }
                     return 'Non-EU';
                 };
-                this.selected_account_type = !/^VRT/.test(this.root_store.client.loginid) ? 'real' : 'demo';
+                this.selected_account_type = !/^VRT|VRW/.test(this.root_store.client.loginid) ? 'real' : 'demo';
                 this.selected_region = default_region();
             }
         );

packages/shared/src/utils/config/config.ts

@@ -91,7 +91,7 @@ export const getSocketURL = () => {
     }
 
     const loginid = window.localStorage.getItem('active_loginid') || active_loginid_from_url;
-    const is_real = loginid && !/^VRT/.test(loginid);
+    const is_real = loginid && !/^(VRT|VRW)/.test(loginid);
 
     const server = is_real ? 'green' : 'blue';
     const server_url = `${server}.binaryws.com`;

packages/wallets/src/AppContent.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import WalletsCarousel from './components/WalletCarousel';
 import WalletList from './components/WalletList';
+import IcBrandDerivGo from './public/ic-brand-derivgo.svg';
+import './app-content.scss';
 
 const AppContent: React.FC = () => {
     return (
         <div>
+            <div className='icon' />
+            <IcBrandDerivGo width={25} height={25} />
             <WalletList />
             <WalletsCarousel />
         </div>

packages/wallets/src/app-content.scss

@@ -0,0 +1,6 @@
+.wallets-icon {
+    width: 100px;
+    height: 100px;
+    background-image: url('./public/ic-appstore-deriv-logo.svg');
+    background-size: cover;
+}