farabi/bot 444/highlight the tutorials tab (#9746)

* fix: higlighted tutorials on mobile onboarding and replaced gif with mp4 * fix: changes related to code review * fix: added width for mobile view of tour * fix: width for images and videos * fix: width adjustment on responsive * fix: disabled picture in picture and download for videos * fix: change step 5 video to updated one * fix: fix last step button * farzin/refactor(api): ♻️ clean-up (#9864) Co-authored-by: Farzin Mirzaie <farzin@deriv.com> * adrienne/feat: added svg bundling for wallets (#9871) * feat: added svg bundling for wallets * chore: removed assets folder in wallets --------- Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Co-authored-by: Farzin Mirzaie <farzin@deriv.com> Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
deriv-com · Aug 30, 2023 · da4638e · da4638e
1 parent daa0718
commit da4638e
Show file tree

Hide file tree

Showing 54 changed files with 196 additions and 159 deletions.
diff --git a/packages/api/src/hooks/index.ts b/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';
diff --git a/packages/api/src/hooks/useAccountTypes.ts b/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,
     };
 };

diff --git a/packages/api/src/hooks/useAllAvailableAccounts.ts b/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;
diff --git a/packages/api/src/hooks/useAvailableAccounts.ts b/packages/api/src/hooks/useAvailableAccounts.ts
diff --git a/packages/api/src/hooks/useCurrencyConfig.ts b/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');

diff --git a/packages/api/src/hooks/useGetAccountStatus.ts b/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,
     };

diff --git a/packages/api/src/hooks/useLandingCompany.ts b/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,
     };
 };

diff --git a/packages/api/src/hooks/useSettings.ts b/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,
     };

diff --git a/packages/appstore/webpack.config.js b/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,
                 },
             ],

diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.scss b/packages/bot-web-ui/src/components/dashboard/dashboard.scss
@@ -367,7 +367,7 @@
         }
     }
 
-    img {
+    video {
         width: 100%;
         margin-top: 1rem;
     }
@@ -455,6 +455,11 @@
         height: 100%;
     }
 
+    video {
+        width: 65%;
+        height: 100%;
+    }
+
     &__progress-bar {
         margin-bottom: 1.6rem;
     }