From a2d8af5256b7f703040b238c5ccb9a34baaeca43 Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:18:15 +0800 Subject: [PATCH 1/3] thisyahlen/chore: update wallet loginids (#9866) --- packages/core/src/Stores/client-store.js | 4 ++-- packages/core/src/Stores/traders-hub-store.js | 6 +++--- packages/shared/src/utils/config/config.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index acf157b19c89..f662ca739bb2 100644 --- a/packages/core/src/Stores/client-store.js +++ b/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); diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index df7c15a03599..387de6b13465 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -137,8 +137,8 @@ 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) { @@ -146,7 +146,7 @@ export default class TradersHubStore extends BaseStore { } 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(); } ); diff --git a/packages/shared/src/utils/config/config.ts b/packages/shared/src/utils/config/config.ts index 2ae3304762b4..665cb4042345 100644 --- a/packages/shared/src/utils/config/config.ts +++ b/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`; From acb0a6980a4d19c6af6bc6934eace5d28090e910 Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:21:27 +0800 Subject: [PATCH 2/3] farzin/refactor(api): :recycle: clean-up (#9864) Co-authored-by: Farzin Mirzaie --- packages/api/src/hooks/index.ts | 4 +- packages/api/src/hooks/useAccountTypes.ts | 12 ++--- .../api/src/hooks/useAllAvailableAccounts.ts | 24 ++++++++++ .../api/src/hooks/useAvailableAccounts.ts | 47 ------------------- packages/api/src/hooks/useCurrencyConfig.ts | 2 +- packages/api/src/hooks/useGetAccountStatus.ts | 6 +-- packages/api/src/hooks/useLandingCompany.ts | 17 +++---- packages/api/src/hooks/useSettings.ts | 16 +++---- 8 files changed, 50 insertions(+), 78 deletions(-) create mode 100644 packages/api/src/hooks/useAllAvailableAccounts.ts delete mode 100644 packages/api/src/hooks/useAvailableAccounts.ts diff --git a/packages/api/src/hooks/index.ts b/packages/api/src/hooks/index.ts index a24c15779d19..b9a906787650 100644 --- 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 index e39f960c196a..aa0fb603e690 100644 --- a/packages/api/src/hooks/useAccountTypes.ts +++ b/packages/api/src/hooks/useAccountTypes.ts @@ -2,20 +2,19 @@ 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, @@ -23,7 +22,8 @@ const useAccountTypes = (landing_company?: string) => { }, [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 new file mode 100644 index 000000000000..56cc45b69e5b --- /dev/null +++ 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 deleted file mode 100644 index d5ee1bfef14d..000000000000 --- a/packages/api/src/hooks/useAvailableAccounts.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { useMemo } from 'react'; -import useAccountTypes from './useAccountTypes'; -import useLandingCompany from './useLandingCompany'; - -/** A custom hook to get available accounts for every landing companies */ -const useAvailableAccounts = () => { - const { data: landing_company_data } = useLandingCompany(); - const { data: available_financial_accounts } = useAccountTypes(landing_company_data?.financial_company_shortcode); - const { data: available_virtual_accounts } = useAccountTypes(landing_company_data?.virtual_company_shortcode); - - // memoize the available financial accounts - const financial_accounts = useMemo(() => { - if (!available_financial_accounts) return; - - return { - ...available_financial_accounts, - }; - }, [available_financial_accounts]); - - // memoize the available virtual accounts - const virtual_accounts = useMemo(() => { - if (!available_virtual_accounts) return; - - return { - ...available_virtual_accounts, - }; - }, [available_virtual_accounts]); - - // memoize the combined available accounts - const available_accounts = useMemo(() => { - if (!available_financial_accounts && !available_virtual_accounts) return; - - return { - /** List of available financial accounts */ - financial_accounts, - /** List of available virtual accounts */ - virtual_accounts, - }; - }, [available_financial_accounts, available_virtual_accounts]); - - return { - /** List of available accounts */ - data: available_accounts, - }; -}; - -export default useAvailableAccounts; diff --git a/packages/api/src/hooks/useCurrencyConfig.ts b/packages/api/src/hooks/useCurrencyConfig.ts index f97ecb11fec8..ab5b0922eaaa 100644 --- 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 index 4af2eb55e148..e4adc73345bb 100644 --- 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 index 03d1990f21cd..58dbaf4ce198 100644 --- 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 index d51820815b01..44bc0b470b97 100644 --- a/packages/api/src/hooks/useSettings.ts +++ b/packages/api/src/hooks/useSettings.ts @@ -7,23 +7,23 @@ type TSetSettingsPayload = NonNullable< NonNullable>['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, }; From 0fff88df973382576f5151750c204c8b6e5a8bd0 Mon Sep 17 00:00:00 2001 From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:28:24 +0800 Subject: [PATCH 3/3] adrienne/feat: added svg bundling for wallets (#9871) * feat: added svg bundling for wallets * chore: removed assets folder in wallets --- packages/appstore/webpack.config.js | 21 +++++++++++++++++-- packages/wallets/src/AppContent.tsx | 4 ++++ packages/wallets/src/app-content.scss | 6 ++++++ .../src/public/ic-appstore-deriv-logo.svg | 1 + .../public/ic-appstore-deriv-trading-logo.svg | 1 + .../wallets/src/public/ic-brand-derivgo.svg | 1 + 6 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 packages/wallets/src/app-content.scss create mode 100644 packages/wallets/src/public/ic-appstore-deriv-logo.svg create mode 100644 packages/wallets/src/public/ic-appstore-deriv-trading-logo.svg create mode 100644 packages/wallets/src/public/ic-brand-derivgo.svg diff --git a/packages/appstore/webpack.config.js b/packages/appstore/webpack.config.js index 120afce6e79b..69e9bbcafea4 100644 --- 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/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx index 362923fad06e..bde18fd550ca 100644 --- a/packages/wallets/src/AppContent.tsx +++ b/packages/wallets/src/AppContent.tsx @@ -1,10 +1,14 @@ import React from 'react'; import WalletList from './components/WalletList'; import WalletsCarousel from './components/WalletCarousel'; +import IcBrandDerivGo from './public/ic-brand-derivgo.svg'; +import './app-content.scss'; const AppContent: React.FC = () => { return (
+
+
diff --git a/packages/wallets/src/app-content.scss b/packages/wallets/src/app-content.scss new file mode 100644 index 000000000000..69bb50e7165e --- /dev/null +++ b/packages/wallets/src/app-content.scss @@ -0,0 +1,6 @@ +.icon { + width: 100px; + height: 100px; + background-image: url('./public/ic-appstore-deriv-logo.svg'); + background-size: cover; +} diff --git a/packages/wallets/src/public/ic-appstore-deriv-logo.svg b/packages/wallets/src/public/ic-appstore-deriv-logo.svg new file mode 100644 index 000000000000..101a7bf1136b --- /dev/null +++ b/packages/wallets/src/public/ic-appstore-deriv-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/wallets/src/public/ic-appstore-deriv-trading-logo.svg b/packages/wallets/src/public/ic-appstore-deriv-trading-logo.svg new file mode 100644 index 000000000000..6409c1045406 --- /dev/null +++ b/packages/wallets/src/public/ic-appstore-deriv-trading-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/wallets/src/public/ic-brand-derivgo.svg b/packages/wallets/src/public/ic-brand-derivgo.svg new file mode 100644 index 000000000000..ab1c69faaf53 --- /dev/null +++ b/packages/wallets/src/public/ic-brand-derivgo.svg @@ -0,0 +1 @@ + \ No newline at end of file