From 6d55f28c1dfe55157d426b381d7330a1092a0b0b Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Date: Wed, 3 May 2023 17:24:14 +0800 Subject: [PATCH 01/21] Farzin/94196/Console error when open staging (#8437) * fix(core): :bug: fix `is_low_risk_cr_eu_real` undefined console error * ci: :green_heart: trigger build --------- Co-authored-by: Farzin Mirzaie --- packages/core/src/Stores/client-store.js | 4 ++-- packages/shared/package.json | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 18565658a890..9588f4b75f5b 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -2661,14 +2661,14 @@ export default class ClientStore extends BaseStore { this.prev_account_type = acc_type; }; - /** @deprecated Use `useIsP2PEnabled` from `@deriv/stores` package instead. + /** @deprecated Use `useIsP2PEnabled` from `@deriv/hooks` package instead. * * This method is being used in `NotificationStore`, Once we get rid of the usage we can remove this method. * * Please `DO NOT` add the type for this method in `TCoreStores` as it is deprecated and shouldn't be used. * */ get is_p2p_enabled() { - const { is_low_risk_cr_eu_real } = this.root_store.traders_hub; + const is_low_risk_cr_eu_real = this.root_store?.traders_hub?.is_low_risk_cr_eu_real; const is_p2p_supported_currency = Boolean( this.website_status?.p2p_config?.supported_currencies.includes(this.currency.toLocaleLowerCase()) diff --git a/packages/shared/package.json b/packages/shared/package.json index 03527f3a9582..6e5da757327c 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -41,7 +41,6 @@ }, "dependencies": { "@deriv/api-types": "^1.0.94", - "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", "@types/js-cookie": "^3.0.1", "@types/react-loadable": "^5.5.6", From ddee41bd0ab8f6a5997abfe4f68f99ddda44ca62 Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi <125247833+farhan-nurzi-deriv@users.noreply.github.com> Date: Wed, 3 May 2023 19:30:52 +0800 Subject: [PATCH 02/21] FarhanNurzi/ is_p2p_disabled cookie doesn't get removed when user logs out (#8444) * fix: is_p2p_disabled doesnt get removed when user logs out * refactor: move p2p cookie setter --------- Co-authored-by: Sandeep Rajput <90243468+sandeep-deriv@users.noreply.github.com> --- packages/core/src/Stores/client-store.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 9588f4b75f5b..7171ea4bff47 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -23,7 +23,6 @@ import { setCurrencies, toMoment, urlForLanguage, - CookieStorage, } from '@deriv/shared'; import { WS, requestLogout } from 'Services'; import { action, computed, makeObservable, observable, reaction, runInAction, toJS, when } from 'mobx'; @@ -1190,6 +1189,9 @@ export default class ClientStore extends BaseStore { }; Cookies.set('region', getRegion(landing_company_shortcode, residence), { domain }); Cookies.set('client_information', client_information, { domain }); + // need to find other way to get the boolean value and set this cookie since `this.is_p2p_enabled` is deprecated and we can't use hooks here + Cookies.set('is_p2p_disabled', !this.is_p2p_enabled, { domain }); + this.has_cookie_account = true; } else { removeCookies('region', 'client_information', 'is_p2p_disabled'); @@ -2676,9 +2678,6 @@ export default class ClientStore extends BaseStore { const is_p2p_visible = is_p2p_supported_currency && !this.is_virtual && !is_low_risk_cr_eu_real; - const p2p_cookie = new CookieStorage('is_p2p_disabled'); - p2p_cookie.set('is_p2p_disabled', !is_p2p_visible); - return is_p2p_visible; } } From 5575c1374ca98121bbb450e50ac018ef426b22c6 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com> Date: Wed, 3 May 2023 14:52:54 +0300 Subject: [PATCH 03/21] Sergei / Livechat reinit without page refresh when user changes theme or language (#8447) * feat: revert back search_params * refactor: delete comments and unused imports --- .../App/Components/Elements/LiveChat/use-livechat.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index 0f211ee8d22d..b6d342a0dfce 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -1,20 +1,15 @@ import { useCallback, useEffect, useState } from 'react'; -import { useHistory, useParams } from 'react-router'; +import { useHistory } from 'react-router'; import { liveChatInitialization } from './live-chat'; import Cookies from 'js-cookie'; import { deriv_urls } from '@deriv/shared'; -type TQueryParams = { - lang: string; - dark: string; -}; - // Todo: Should break this into smaller hooks or utility functions. const useLiveChat = (has_cookie_account = false) => { const [isReady, setIsReady] = useState(false); const [reload, setReload] = useState(false); const history = useHistory(); - const { lang, dark } = useParams(); + const search_params = window.location.search; const widget = window.LiveChatWidget; const liveChatDeletion = () => @@ -110,7 +105,7 @@ const useLiveChat = (has_cookie_account = false) => { useEffect(() => { onHistoryChange(); - }, [lang, dark, onHistoryChange]); + }, [search_params, onHistoryChange]); useEffect(() => { if (isReady && !widget) { From 6fcae8abec58afe0dbb70b6a0521f15fb487b340 Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Date: Fri, 5 May 2023 05:11:55 +0300 Subject: [PATCH 04/21] fix: loader position in cashier onboarding (#8468) --- .../src/components/cashier-onboarding/cashier-onboarding.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.scss b/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.scss index f90566adff79..fb50d42cdb4e 100644 --- a/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.scss +++ b/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.scss @@ -7,7 +7,7 @@ } &__loader { - position: fixed; + position: relative; left: 0; } From f112837c36a0fb810ddaf62963966729b93e99e7 Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Date: Fri, 5 May 2023 05:35:33 +0300 Subject: [PATCH 05/21] fix: authorization order (#8466) Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> --- packages/core/src/Stores/common-store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/Stores/common-store.js b/packages/core/src/Stores/common-store.js index 0ad330441a12..7de96e0f436a 100644 --- a/packages/core/src/Stores/common-store.js +++ b/packages/core/src/Stores/common-store.js @@ -133,8 +133,8 @@ export default class CommonStore extends BaseStore { try { await changeLanguage(key, () => { this.changeCurrentLanguage(key); - this.root_store.client.setIsAuthorize(false); BinarySocket.closeAndOpenNewConnection(key); + this.root_store.client.setIsAuthorize(false); }); resolve(); } catch (e) { From 2aed3f538142c151f93621998dac8073e142cccc Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Date: Fri, 5 May 2023 12:02:37 +0800 Subject: [PATCH 06/21] Revert "Sergei / Livechat reinit without page refresh when user changes theme or language (#8447)" (#8472) This reverts commit 5575c1374ca98121bbb450e50ac018ef426b22c6. --- .../App/Components/Elements/LiveChat/use-livechat.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index b6d342a0dfce..0f211ee8d22d 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -1,15 +1,20 @@ import { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router'; +import { useHistory, useParams } from 'react-router'; import { liveChatInitialization } from './live-chat'; import Cookies from 'js-cookie'; import { deriv_urls } from '@deriv/shared'; +type TQueryParams = { + lang: string; + dark: string; +}; + // Todo: Should break this into smaller hooks or utility functions. const useLiveChat = (has_cookie_account = false) => { const [isReady, setIsReady] = useState(false); const [reload, setReload] = useState(false); const history = useHistory(); - const search_params = window.location.search; + const { lang, dark } = useParams(); const widget = window.LiveChatWidget; const liveChatDeletion = () => @@ -105,7 +110,7 @@ const useLiveChat = (has_cookie_account = false) => { useEffect(() => { onHistoryChange(); - }, [search_params, onHistoryChange]); + }, [lang, dark, onHistoryChange]); useEffect(() => { if (isReady && !widget) { From 8a4fec11065e74c86631583b19148d8c6c64b13b Mon Sep 17 00:00:00 2001 From: hirad-deriv Date: Fri, 5 May 2023 12:29:33 +0800 Subject: [PATCH 07/21] Revert "Sergei / 67781 / live chat color (#7619)" (#8473) This reverts commit 37e0d1845487d19209ca1290d15ab250a5bf4932. --- .../Elements/LiveChat/use-livechat.ts | 12 +--------- .../core/src/App/Containers/Routes/routes.jsx | 19 +++++++--------- packages/shared/src/utils/url/url.ts | 22 ------------------- 3 files changed, 9 insertions(+), 44 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index 0f211ee8d22d..6d52e1aab9aa 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -1,20 +1,14 @@ import { useCallback, useEffect, useState } from 'react'; -import { useHistory, useParams } from 'react-router'; +import { useHistory } from 'react-router'; import { liveChatInitialization } from './live-chat'; import Cookies from 'js-cookie'; import { deriv_urls } from '@deriv/shared'; -type TQueryParams = { - lang: string; - dark: string; -}; - // Todo: Should break this into smaller hooks or utility functions. const useLiveChat = (has_cookie_account = false) => { const [isReady, setIsReady] = useState(false); const [reload, setReload] = useState(false); const history = useHistory(); - const { lang, dark } = useParams(); const widget = window.LiveChatWidget; const liveChatDeletion = () => @@ -108,10 +102,6 @@ const useLiveChat = (has_cookie_account = false) => { }); }; - useEffect(() => { - onHistoryChange(); - }, [lang, dark, onHistoryChange]); - useEffect(() => { if (isReady && !widget) { onHistoryChange(); diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx index 2765c6f935f8..df30a7ad900d 100644 --- a/packages/core/src/App/Containers/Routes/routes.jsx +++ b/packages/core/src/App/Containers/Routes/routes.jsx @@ -4,7 +4,7 @@ import React from 'react'; import { withRouter } from 'react-router'; import Loadable from 'react-loadable'; import { UILoader } from '@deriv/components'; -import { urlSetQuery } from '@deriv/shared'; +import { urlForLanguage } from '@deriv/shared'; import { getLanguage } from '@deriv/translations'; import BinaryRoutes from 'App/Components/Routes'; import { connect } from 'Stores/connect'; @@ -23,7 +23,6 @@ const Routes = ({ error, has_error, history, - is_dark_mode_on, is_logged_in, is_logging_in, location, @@ -58,6 +57,8 @@ const Routes = ({ }, []); const lang = getLanguage(); + const lang_regex = /[?&]lang=/; + const has_lang = lang_regex.test(location.search); if (has_error) { return ; @@ -69,12 +70,10 @@ const Routes = ({ // non-supported language, the language still // shows up in the URL. This is not in sync // with the default language (EN), so we - // will remove it. (The same thing for dark_mode) - window.history.replaceState( - {}, - document.title, - urlSetQuery({ lang: lang.replace('EN', ''), dark: Number(is_dark_mode_on) }) - ); + // will remove it. + if ((!has_lang && lang !== 'EN') || (has_lang && lang === 'EN')) { + window.history.replaceState({}, document.title, urlForLanguage(lang)); + } return ; }; @@ -84,7 +83,6 @@ Routes.propTypes = { error: MobxPropTypes.objectOrObservableObject, has_error: PropTypes.bool, history: PropTypes.object, - is_dark_mode_on: PropTypes.bool, is_logged_in: PropTypes.bool, is_logging_in: PropTypes.bool, is_virtual: PropTypes.bool, @@ -97,8 +95,7 @@ Routes.propTypes = { // need to wrap withRouter around connect // to prevent updates on from being blocked export default withRouter( - connect(({ client, common, ui }) => ({ - is_dark_mode_on: ui.is_dark_mode_on, + connect(({ client, common }) => ({ is_logged_in: client.is_logged_in, is_logging_in: client.is_logging_in, error: common.error, diff --git a/packages/shared/src/utils/url/url.ts b/packages/shared/src/utils/url/url.ts index db6c0729df24..8b762438935a 100644 --- a/packages/shared/src/utils/url/url.ts +++ b/packages/shared/src/utils/url/url.ts @@ -9,11 +9,6 @@ type TOption = { language?: string; }; -type TQueryObj = { - dark: string; - lang: string; -}; - const default_domain = 'binary.com'; const host_map = { // the exceptions regarding updating the URLs @@ -40,23 +35,6 @@ export const urlForLanguage = (lang: string, url: string = window.location.href) return `${current_url}`; }; -export const urlSetQuery = (queryObj: TQueryObj, url: string = window.location.href) => { - const current_url = new URL(url); - - Object.entries(queryObj).forEach(element => { - const [key, value] = element; - if (value) { - current_url.searchParams.set(key, value); - } else { - current_url.searchParams.delete(key); - } - }); - - current_url.searchParams.sort(); - - return current_url.toString(); -}; - export const reset = () => { location_url = window?.location ?? location_url; }; From dd53ac72f1745bb3c25c4407afddc56df0310d35 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Fri, 5 May 2023 14:35:17 +0800 Subject: [PATCH 08/21] chore: remove secret from currency-selector --- .../__tests__/currency-selector.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx b/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx index cbaaa1a1fece..dd5fbd1d15bc 100644 --- a/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx +++ b/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx @@ -26,8 +26,8 @@ describe('', () => { is_virtual: 1, landing_company_shortcode: 'virtual', trading: {}, - token: 'a1-sLGGrhfYPkeEprxEop2T591cLKbuN', - email: 'test+qw@deriv.com', + token: '', + email: '', session_start: 1651059038, excluded_until: '', landing_company_name: 'virtual', @@ -273,8 +273,8 @@ describe('', () => { is_virtual: 1, landing_company_shortcode: 'svg', trading: {}, - token: 'a1-sLGGrhfYPkeEprxEop2T591cLKbuN', - email: 'test+qw@deriv.com', + token: '', + email: '', session_start: 1651059038, excluded_until: '', landing_company_name: 'svg', From 3c4cefccfff374112b128c503ec21c03d3aceaf9 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 5 May 2023 15:23:28 +0800 Subject: [PATCH 09/21] Ako/ use circleci CIRCLE_TAG as version in datadog (#8479) * feat: use CIRCLE_TAG as version in datadog * feat: update tag name to include the project name --- packages/core/build/constants.js | 1 + packages/core/src/Utils/Datadog/index.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/build/constants.js b/packages/core/build/constants.js index 66621d5fb059..0f5bd8ff1614 100644 --- a/packages/core/build/constants.js +++ b/packages/core/build/constants.js @@ -134,6 +134,7 @@ const plugins = ({ base, is_test_env }) => { process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE ), 'process.env.DATADOG_SESSION_SAMPLE_RATE': JSON.stringify(process.env.DATADOG_SESSION_SAMPLE_RATE), + 'process.env.CIRCLE_TAG': JSON.stringify(process.env.CIRCLE_TAG), }), new CleanWebpackPlugin(), new CopyPlugin(copyConfig(base)), diff --git a/packages/core/src/Utils/Datadog/index.ts b/packages/core/src/Utils/Datadog/index.ts index 96e3bab6ff0e..945809e6aa2d 100644 --- a/packages/core/src/Utils/Datadog/index.ts +++ b/packages/core/src/Utils/Datadog/index.ts @@ -4,6 +4,7 @@ const DATADOG_APP_ID = process.env.DATADOG_APPLICATION_ID ?? ''; const DATADOG_CLIENT_TOKEN = process.env.DATADOG_CLIENT_TOKEN ?? ''; const DATADOG_SESSION_SAMPLE_RATE = process.env.DATADOG_SESSION_SAMPLE_RATE ?? 10; const DATADOG_SESSION_REPLAY_SAMPLE_RATE = process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE ?? 1; +const CIRCLE_TAG = process.env.CIRCLE_TAG ?? 'NO_VERSION'; datadogRum.init({ applicationId: DATADOG_APP_ID, @@ -17,7 +18,7 @@ datadogRum.init({ trackResources: true, trackLongTasks: true, defaultPrivacyLevel: 'mask-user-input', - version: '1.0.0', + version: `deriv-app-${CIRCLE_TAG}`, trackFrustrations: true, enableExperimentalFeatures: ['clickmap'], }); From 7c1945c2607efe7e878792808ace5907313dfb22 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 5 May 2023 11:55:16 +0400 Subject: [PATCH 10/21] refactor: :pencil2: renames css variable --- .../appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- packages/shared/src/styles/themes.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 15131e226e09..abb104e0a7b1 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -46,7 +46,7 @@ height: 100%; } &-over-header { - background: var(--text-info-blue-bg); + background: var(--text-info-blue-background); height: 4rem; width: 100%; padding: 0.5rem; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 4d819864a8e7..25150eeaaf9d 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -536,7 +536,7 @@ height: 100%; } &-over-header { - background: var(--text-info-blue-bg); + background: var(--text-info-blue-background); height: 4rem; width: 100%; padding: 0.5rem; diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index ea9f9225c842..bb2fb2aa668d 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -90,7 +90,7 @@ --text-red: #{$color-red}; --text-blue: #{$color-blue-3}; --text-info-blue: #{$color-blue}; - --text-info-blue-bg: #{$color-blue-5}; + --text-info-blue-background: #{$color-blue-5}; --text-colored-background: #{$color-white}; --icon-light-background: #{$color-black-9}; --icon-dark-background: #{$color-white}; @@ -221,7 +221,7 @@ --text-red: #{$color-red}; --text-colored-background: #{$color-white}; --text-info-blue: #{$color-blue-6}; - --text-info-blue-bg: #{$color-blue-7}; + --text-info-blue-background: #{$color-blue-7}; --text-status-info-blue: #{$color-blue}; --text-hint: #{$color-grey}; --icon-light-background: #{$color-black-9}; From 3310b4a6025101f7d28c39cc9802a891d99d48ed Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Fri, 5 May 2023 16:00:23 +0800 Subject: [PATCH 11/21] chore: fix code smells issue --- .../jurisdiction-modal/__test__/jurisdiction-card.spec.tsx | 2 +- packages/cfd/src/Containers/props.types.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx index ef220ceb09c2..0aea6e5f5e17 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx @@ -26,7 +26,7 @@ describe('JurisdictionCard', () => { needs_verification: string[]; }; currency_config: { - [k: string]: { is_deposit_suspended?: 0 | 1 | undefined; is_withdrawal_suspended?: 0 | 1 | undefined }; + [k: string]: { is_deposit_suspended?: 0 | 1; is_withdrawal_suspended?: 0 | 1 }; }; p2p_status: 'none' | 'active' | 'temp_ban' | 'perm_ban'; prompt_client_to_authenticate: 0 | 1; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 84a8f73be3a7..63eadb4858c6 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -12,7 +12,6 @@ import { TTradingPlatformAvailableAccount, TExistingData, TJurisdictionCardSection, - TCardFlipStatus, TJurisdictionCardSectionTitleIndicators, TClickableDescription, TJurisdictionCardItems, From 171c00ad60af0344a87ed8244cc8944592801c29 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 5 May 2023 14:33:38 +0400 Subject: [PATCH 12/21] refactor: :pencil2: renames jurisdiction content getter funcs --- .../jurisdiction-bvi-contents.ts | 2 +- .../jurisdiction-contents.ts | 20 +++++++++---------- .../jurisdiction-labuan-contents.ts | 2 +- .../jurisdiction-svg-contents.ts | 2 +- .../jurisdiction-vanuatu-contents.ts | 2 +- .../jurisdiction_maltainvest_contents.ts | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts index a75a67d69638..546b1f32420c 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdictionBviContents = (): TJurisdictionCardItems => ({ +export const getJurisdictionBviContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('British Virgin Islands'), synthetic_contents: [ diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts index 1c98518d7af9..10501fda7175 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts @@ -1,9 +1,9 @@ import { TJurisdictionCardItems } from 'Components/props.types'; -import { jurisdictionBviContents } from './jurisdiction-bvi-contents'; -import { jurisdictionLabuanContents } from './jurisdiction-labuan-contents'; -import { jurisdictionSvgContents } from './jurisdiction-svg-contents'; -import { jurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents'; -import { jurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents'; +import { getJurisdictionBviContents } from './jurisdiction-bvi-contents'; +import { getJurisdictionLabuanContents } from './jurisdiction-labuan-contents'; +import { getJurisdictionSvgContents } from './jurisdiction-svg-contents'; +import { getJurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents'; +import { getJurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents'; type TJurisdictionContent = { svg: TJurisdictionCardItems; @@ -14,9 +14,9 @@ type TJurisdictionContent = { }; export const getJurisdictionContents = (): TJurisdictionContent => ({ - svg: jurisdictionSvgContents(), - bvi: jurisdictionBviContents(), - vanuatu: jurisdictionVanuatuContents(), - labuan: jurisdictionLabuanContents(), - maltainvest: jurisdictionMaltainvestContents(), + svg: getJurisdictionSvgContents(), + bvi: getJurisdictionBviContents(), + vanuatu: getJurisdictionVanuatuContents(), + labuan: getJurisdictionLabuanContents(), + maltainvest: getJurisdictionMaltainvestContents(), }); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts index 01e22390d7da..9e2bebe53711 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({ +export const getJurisdictionLabuanContents = (): TJurisdictionCardItems => ({ over_header: localize('Straight-through processing'), is_over_header_available: true, header: localize('Labuan'), diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts index 23541a6f3a5c..817db7c58847 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ +export const getJurisdictionSvgContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('St. Vincent & Grenadines'), synthetic_contents: [ diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts index 92950a0fe37e..a88dba78e813 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ +export const getJurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('Vanuatu'), synthetic_contents: [ diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts index d713dd64d65f..f3cbcf609de6 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ +export const getJurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('Malta'), synthetic_contents: [ From 8969de4fca13385736436a04b332ad0452810624 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 5 May 2023 14:54:03 +0400 Subject: [PATCH 13/21] refactor: :lipstick: uses BORDER_RADIUS constant in css --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index abb104e0a7b1..889cfa5fe8aa 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -1,7 +1,7 @@ .cfd-jurisdiction-card--synthetic, .cfd-jurisdiction-card--financial { border: solid 2px var(--border-normal); - border-radius: 1.6rem; + border-radius: $BORDER_RADIUS * 4; display: flex; justify-content: space-between; flex-direction: column; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 25150eeaaf9d..b6f61470cb45 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -490,7 +490,7 @@ .cfd-jurisdiction-card--synthetic, .cfd-jurisdiction-card--financial { border: solid 2px var(--border-normal); - border-radius: 1.6rem; + border-radius: $BORDER_RADIUS * 4; display: flex; justify-content: space-between; flex-direction: column; From e91936a3b50336217bb55a50edcb8eeed37b6581 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 5 May 2023 15:40:02 +0400 Subject: [PATCH 14/21] refactor: :art: uses react MouseEvent instead of SyntheticEvent --- .../Containers/jurisdiction-modal/jurisdiction-card.tsx | 4 ++-- packages/cfd/src/Containers/props.types.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index f4ba50fbcda7..642be60e68c6 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { SyntheticEvent, useState } from 'react'; +import React, { useState } from 'react'; import { getJurisdictionContents } from '../../Constants/jurisdiction-contents/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardBack from './jurisdiction-card-back'; @@ -27,7 +27,7 @@ const JurisdictionCard = ({ setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; - const toggleCardFlip = (event: SyntheticEvent) => { + const toggleCardFlip = (event: React.MouseEvent) => { event.stopPropagation(); setIsCardFlipped(!is_card_flipped); }; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 63eadb4858c6..3f9114c968ab 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -1,3 +1,4 @@ +import React from 'react'; import { DetailsOfEachMT5Loginid, GetAccountStatus, @@ -18,7 +19,6 @@ import { TJurisdictionCardItemVerification, } from '../Components/props.types'; import RootStore from '../Stores/index'; -import { SyntheticEvent } from 'react'; export type TCFDPersonalDetailsContainerProps = { account_settings: GetSettings; @@ -182,7 +182,7 @@ export type TJurisdictionCardProps = { export type TJurisdictionCardBackProps = { card_classname: string; is_card_selected: boolean; - toggleCardFlip: (event: SyntheticEvent) => void; + toggleCardFlip: (event: React.MouseEvent) => void; verification_docs: TJurisdictionCardItemVerification | undefined; }; @@ -196,7 +196,7 @@ export type TJurisdictionCardFrontProps = TJurisdictionCardBackProps & { export type TJurisdictionClickableDescriptionProps = { clickable_description: Array; - toggleCardFlip: (event: SyntheticEvent) => void; + toggleCardFlip: (event: React.MouseEvent) => void; }; export type TJurisdictionTitleIndicatorProps = { @@ -209,7 +209,7 @@ export type TJurisdictionTitleIndicatorProps = { export type TJurisdictionCardSectionProps = { account_status: GetAccountStatus; card_section_item: TJurisdictionCardSection; - toggleCardFlip: (event: SyntheticEvent) => void; + toggleCardFlip: (event: React.MouseEvent) => void; type_of_card: TJurisdictionCardType; verification_docs: TJurisdictionCardItemVerification | undefined; }; From b3d969bd125b3bfd70f0f533485e8d6fcb9b62ff Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 5 May 2023 15:48:37 +0400 Subject: [PATCH 15/21] refactor: :art: uses hook via React namespace --- .../src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 642be60e68c6..2584e1038e1a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { useState } from 'react'; +import React from 'react'; import { getJurisdictionContents } from '../../Constants/jurisdiction-contents/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardBack from './jurisdiction-card-back'; @@ -20,7 +20,7 @@ const JurisdictionCard = ({ const verification_docs = is_synthetic ? card_values?.synthetic_verification_docs : card_values?.financial_verification_docs; - const [is_card_flipped, setIsCardFlipped] = useState(false); + const [is_card_flipped, setIsCardFlipped] = React.useState(false); const is_card_selected = jurisdiction_selected_shortcode === type_of_card; const cardSelection = (cardType: string) => { From e7df8d271343f0e03224b6030a979691d5da89af Mon Sep 17 00:00:00 2001 From: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> Date: Mon, 8 May 2023 06:34:39 +0330 Subject: [PATCH 16/21] Niloofar Sadeghi / Bug - Getting "Sorry for interruption" error message while trying to open P2P page on responsive (#8467) * fix: data-list issue * fix: circle/ci issue * fix: onscroll issue * fix: circle/ci * fix: Trading Experience Assessment modal clicks --------- Co-authored-by: niloofar sadeghi --- .../src/components/data-list/data-list.tsx | 359 +++++++++--------- .../trading-assessment-existing-user.jsx | 13 + 2 files changed, 186 insertions(+), 186 deletions(-) diff --git a/packages/components/src/components/data-list/data-list.tsx b/packages/components/src/components/data-list/data-list.tsx index f32a326be2d1..4f0b0331069c 100644 --- a/packages/components/src/components/data-list/data-list.tsx +++ b/packages/components/src/components/data-list/data-list.tsx @@ -1,5 +1,5 @@ -import classNames from 'classnames'; import React from 'react'; +import classNames from 'classnames'; import { TransitionGroup } from 'react-transition-group'; import { List as _List, @@ -8,7 +8,6 @@ import { CellMeasurerProps, AutoSizer as _AutoSizer, type AutoSizerProps, - ScrollParams, ListProps, ListRowProps, } from 'react-virtualized'; @@ -26,7 +25,8 @@ export type TPassThrough = { isTopUp: (item: TRow) => boolean }; export type TRow = { [key: string]: string; }; -type DataListProps = { + +type TDataList = { className?: string; data_source: TRow[]; footer?: React.ReactNode; @@ -34,7 +34,7 @@ type DataListProps = { getRowSize?: (params: { index: number }) => number; keyMapper?: (row: TRow) => number | string; onRowsRendered?: () => void; - onScroll?: (ev: ScrollParams) => void; + onScroll?: React.UIEventHandler; passthrough?: TPassThrough; row_gap?: number; setListRef?: (ref: MeasuredCellParent) => void; @@ -44,196 +44,183 @@ type DataListProps = { }; type GetContentType = { measure?: () => void | undefined }; -const DataList = ({ - children, - className, - data_source, - footer, - getRowSize, - keyMapper, - onRowsRendered, - onScroll, - setListRef, - overscanRowCount, - rowRenderer: rowRendererProp, - row_gap, - getRowAction, - passthrough, -}: DataListProps) => { - const [is_loading, setLoading] = React.useState(true); - const [is_scrolling, setIsScrolling] = React.useState(false); - const [scroll_top, setScrollTop] = React.useState(0); - - const cache = React.useRef(); - const list_ref = React.useRef(null); - const items_transition_map_ref = React.useRef<{ [key: string]: boolean }>({}); - const data_source_ref = React.useRef(null); - data_source_ref.current = data_source; - - const is_dynamic_height = !getRowSize; - - const trackItemsForTransition = React.useCallback(() => { - data_source.forEach((item: TRow, index: number) => { - const row_key: string | number = keyMapper?.(item) || `${index}-0`; - items_transition_map_ref.current[row_key] = true; - }); - }, [data_source, keyMapper]); - - React.useEffect(() => { - if (is_dynamic_height) { - cache.current = new CellMeasurerCache({ - fixedWidth: true, - keyMapper: row_index => { - if (data_source_ref?.current && row_index < data_source_ref?.current.length) - return keyMapper?.(data_source_ref.current[row_index]) || row_index; - return row_index; - }, +const DataList = React.memo( + ({ + children, + className, + data_source, + footer, + getRowSize, + keyMapper, + onRowsRendered, + onScroll, + setListRef, + overscanRowCount, + ...other_props + }: TDataList) => { + const [is_loading, setLoading] = React.useState(true); + const [is_scrolling, setIsScrolling] = React.useState(false); + const [scroll_top, setScrollTop] = React.useState(0); + + const cache = React.useRef(); + const list_ref = React.useRef(null); + const items_transition_map_ref = React.useRef<{ [key: string]: boolean }>({}); + const data_source_ref = React.useRef(null); + data_source_ref.current = data_source; + + const is_dynamic_height = !getRowSize; + + const trackItemsForTransition = React.useCallback(() => { + data_source.forEach((item: TRow, index: number) => { + const row_key: string | number = keyMapper?.(item) || `${index}-0`; + items_transition_map_ref.current[row_key] = true; }); - } - trackItemsForTransition(); - setLoading(false); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - React.useEffect(() => { - if (is_dynamic_height) { - list_ref.current?.recomputeGridSize?.({ columnIndex: 0, rowIndex: 0 }); - } - trackItemsForTransition(); - }, [data_source, is_dynamic_height, trackItemsForTransition]); - - const footerRowRenderer = () => { - return {rowRendererProp({ row: footer, is_footer: true })}; - }; - - const rowRenderer = ({ style, index, key, parent }: ListRowProps) => { - const row = data_source[index]; - const action = getRowAction && getRowAction(row); - const destination_link = typeof action === 'string' ? action : undefined; - const action_desc = typeof action === 'object' ? action : undefined; - const row_key = keyMapper?.(row) || key; - - const getContent = ({ measure }: GetContentType = {}) => ( - - ); + }, [data_source, keyMapper]); + + React.useEffect(() => { + if (is_dynamic_height) { + cache.current = new CellMeasurerCache({ + fixedWidth: true, + keyMapper: row_index => { + if (data_source_ref?.current && row_index < data_source_ref?.current.length) + return keyMapper?.(data_source_ref.current[row_index]) || row_index; + return row_index; + }, + }); + } + trackItemsForTransition(); + setLoading(false); + }, []); // eslint-disable-line react-hooks/exhaustive-deps - return is_dynamic_height && cache.current ? ( - - {({ measure }) =>
{getContent({ measure })}
} - - ) : ( -
- {getContent()} -
- ); - }; - let timeout: ReturnType; - const handleScroll = (e: ScrollParams): void => { - const { scrollTop } = e; - - clearTimeout(timeout); - if (!is_scrolling) { - setIsScrolling(true); - } - timeout = setTimeout(() => { - if (!is_loading) { - setIsScrolling(false); + React.useEffect(() => { + if (is_dynamic_height) { + list_ref.current?.recomputeGridSize?.({ columnIndex: 0, rowIndex: 0 }); } - }, 200); + trackItemsForTransition(); + }, [data_source, is_dynamic_height, trackItemsForTransition]); + + const footerRowRenderer = () => { + return {other_props.rowRenderer({ row: footer, is_footer: true })}; + }; + + const rowRenderer = ({ style, index, key, parent }: ListRowProps) => { + const { getRowAction, passthrough, row_gap } = other_props; + const row = data_source[index]; + const action = getRowAction && getRowAction(row); + const destination_link = typeof action === 'string' ? action : undefined; + const action_desc = typeof action === 'object' ? action : undefined; + const row_key = keyMapper?.(row) || key; + + const getContent = ({ measure }: GetContentType = {}) => ( + + ); + + return is_dynamic_height && cache.current ? ( + + {({ measure }) =>
{getContent({ measure })}
} + + ) : ( +
+ {getContent()} +
+ ); + }; - setScrollTop(scrollTop); - onScroll?.(e); - }; + const handleScroll: React.UIEventHandler = ev => { + let timeout; - const setRef = (ref: MeasuredCellParent) => { - list_ref.current = ref; - setListRef?.(ref); - }; + clearTimeout(timeout); + if (!is_scrolling) { + setIsScrolling(true); + } + timeout = setTimeout(() => { + if (!is_loading) { + setIsScrolling(false); + } + }, 200); + + setScrollTop((ev.target as HTMLElement).scrollTop); + if (typeof onScroll === 'function') { + onScroll(ev); + } + }; - if (is_loading) { - return
; - } - return ( -
-
-
- - {({ width, height }) => ( - // Don't remove `TransitionGroup`. When `TransitionGroup` is removed, transition life cycle events like `onEntered` won't be fired sometimes on it's `CSSTransition` children - - { - const event = { - clientHeight: e.currentTarget.clientHeight, - clientWidth: e.currentTarget.clientWidth, - scrollHeight: e.currentTarget.scrollHeight, - scrollLeft: e.currentTarget.scrollLeft, - scrollTop: e.currentTarget.scrollTop, - scrollWidth: e.currentTarget.scrollWidth, - }; - handleScroll(event); - }} - autohide - is_bypassed={isMobile()} - > - setRef(ref)} - rowCount={data_source.length} - rowHeight={ - is_dynamic_height && cache?.current?.rowHeight - ? cache?.current?.rowHeight - : getRowSize || 0 - } - rowRenderer={rowRenderer} - scrollingResetTimeInterval={0} - width={width} - {...(isDesktop() - ? { scrollTop: scroll_top, autoHeight: true } - : { onScroll: target => handleScroll(target) })} - /> - - - )} - + const setRef = (ref: MeasuredCellParent) => { + list_ref.current = ref; + setListRef?.(ref); + }; + + if (is_loading) { + return
; + } + return ( +
+
+
+ + {({ width, height }) => ( + // Don't remove `TransitionGroup`. When `TransitionGroup` is removed, transition life cycle events like `onEntered` won't be fired sometimes on it's `CSSTransition` children + + + setRef(ref)} + rowCount={data_source.length} + rowHeight={ + is_dynamic_height && cache?.current?.rowHeight + ? cache?.current?.rowHeight + : getRowSize || 0 + } + rowRenderer={rowRenderer} + scrollingResetTimeInterval={0} + width={width} + {...(isDesktop() + ? { scrollTop: scroll_top, autoHeight: true } + : { onScroll: target => handleScroll({ target } as any) })} + /> + + + )} + +
+ {children}
- {children} + {footer && ( +
+ {footerRowRenderer()} +
+ )}
- {footer && ( -
- {footerRowRenderer()} -
- )} -
- ); -}; + ); + } +); DataList.displayName = 'DataList'; +(DataList as any).Cell = DataListCell; -DataList.Cell = DataListCell; -const genericMemo: (component: T) => T = React.memo; -export default genericMemo(DataList); +export default DataList; diff --git a/packages/core/src/App/Containers/Modals/trading-assessment-existing-user.jsx b/packages/core/src/App/Containers/Modals/trading-assessment-existing-user.jsx index 4b7048792615..114a70236f4b 100644 --- a/packages/core/src/App/Containers/Modals/trading-assessment-existing-user.jsx +++ b/packages/core/src/App/Containers/Modals/trading-assessment-existing-user.jsx @@ -17,6 +17,8 @@ const TradingAssessmentExistingUser = ({ setShouldShowAssessmentCompleteModal, setIsTradingAssessmentForExistingUserEnabled, setIsTradingAssessmentForNewUserEnabled, + setShouldShowTradingAssessmentModal, + setSubSectionIndex, }) => { // Get the Trading assessment questions and initial_value const [form_values, setFormValue] = React.useState({}); @@ -63,6 +65,11 @@ const TradingAssessmentExistingUser = ({ setShouldShowTradeAssessmentForm(true); }; + const handleCancel = () => { + setShouldShowTradingAssessmentModal(true); + setShouldShowTradeAssessmentForm(false); + }; + if (should_show_risk_warning_modal) { return ( @@ -112,6 +121,8 @@ const TradingAssessmentExistingUser = ({ assessment_questions={assessment_questions} form_value={form_values} onSubmit={handleSubmit} + onCancel={handleCancel} + setSubSectionIndex={setSubSectionIndex} class_name='trading-assessment--existing-user' should_move_to_next={should_move_to_next} /> @@ -135,4 +146,6 @@ export default connect(({ client, ui }) => ({ setIsTradingAssessmentForExistingUserEnabled: ui.setIsTradingAssessmentForExistingUserEnabled, active_account_landing_company: client.landing_company_shortcode, setIsTradingAssessmentForNewUserEnabled: ui.setIsTradingAssessmentForNewUserEnabled, + setSubSectionIndex: ui.setSubSectionIndex, + setShouldShowTradingAssessmentModal: ui.setShouldShowTradingAssessmentModal, }))(TradingAssessmentExistingUser); From c6ef3c466b1016d073de0d16c6f18ee8c2dc59ec Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 8 May 2023 14:38:33 +0800 Subject: [PATCH 17/21] chore: update code based on comments --- .../jurisdiction-title-indicator.spec.tsx | 119 +++++++++--------- .../jurisdiction-modal/jurisdiction-card.tsx | 2 +- packages/cfd/src/Containers/props.types.ts | 6 +- 3 files changed, 63 insertions(+), 64 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx index 62b6bd16aa28..271e3eb81aa2 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx @@ -1,49 +1,11 @@ import React from 'react'; import { screen, render } from '@testing-library/react'; import JurisdictionTitleIndicator from '../jurisdiction-title-indicator'; +import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionTitleIndicator', () => { - type TMockProps = { - title_indicators: { - type: 'displayText' | 'displayIcons'; - display_text?: string; - }; - type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; - account_status: { - authentication: { - document: { - status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; - }; - identity: { - services: { - idv: { - status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; - }; - onfido: { - status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; - }; - manual: { - status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; - }; - }; - }; - needs_verification: string[]; - }; - currency_config: { - [k: string]: { - is_deposit_suspended?: 0 | 1; - is_withdrawal_suspended?: 0 | 1; - }; - }; - p2p_status: 'none'; - prompt_client_to_authenticate: 0; - risk_classification: string; - status: string[]; - }; - verification_docs: ['document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable']; - }; - const mock_props: TMockProps = { + const mock_props: TJurisdictionTitleIndicatorProps = { title_indicators: { type: 'displayText', display_text: 'Test Display Text', @@ -96,9 +58,15 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant', () => { - mock_props.account_status.authentication.identity.services.idv.status = 'pending'; - mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; - mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + if (mock_props.account_status.authentication?.identity?.services?.idv?.status) { + mock_props.account_status.authentication.identity.services.idv.status = 'pending'; + } + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['document_number']; render(); @@ -106,9 +74,15 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant', () => { - mock_props.account_status.authentication.identity.services.idv.status = 'rejected'; - mock_props.account_status.authentication.identity.services.onfido.status = 'rejected'; - mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; + if (mock_props.account_status.authentication?.identity?.services?.idv?.status) { + mock_props.account_status.authentication.identity.services.idv.status = 'rejected'; + } + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'rejected'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['document_number']; render(); @@ -116,9 +90,15 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant', () => { - mock_props.account_status.authentication.identity.services.idv.status = 'verified'; - mock_props.account_status.authentication.identity.services.onfido.status = 'verified'; - mock_props.account_status.authentication.identity.services.manual.status = 'verified'; + if (mock_props.account_status.authentication?.identity?.services?.idv?.status) { + mock_props.account_status.authentication.identity.services.idv.status = 'verified'; + } + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'verified'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'verified'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['document_number']; render(); @@ -126,8 +106,12 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant with type_of_card to be Vanuatu', () => { - mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; - mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['selfie']; mock_props.type_of_card = Jurisdiction.VANUATU; @@ -136,8 +120,12 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant with type_of_card to be MaltaInvest', () => { - mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; - mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['identity_document']; mock_props.type_of_card = Jurisdiction.MALTA_INVEST; @@ -146,8 +134,12 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant with type_of_card to be Vanuatu', () => { - mock_props.account_status.authentication.identity.services.onfido.status = 'rejected'; - mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'rejected'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['selfie']; mock_props.type_of_card = Jurisdiction.VANUATU; @@ -156,8 +148,12 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant with type_of_card to be Vanuatu', () => { - mock_props.account_status.authentication.identity.services.onfido.status = 'verified'; - mock_props.account_status.authentication.identity.services.manual.status = 'verified'; + if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) { + mock_props.account_status.authentication.identity.services.onfido.status = 'verified'; + } + if (mock_props.account_status.authentication?.identity?.services?.manual?.status) { + mock_props.account_status.authentication.identity.services.manual.status = 'verified'; + } mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['selfie']; mock_props.type_of_card = Jurisdiction.VANUATU; @@ -166,7 +162,8 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant when verification_document is name_and_address and type_of_card to be svg', () => { - mock_props.account_status.authentication.document.status = 'pending'; + if (mock_props.account_status.authentication?.document?.status) + mock_props.account_status.authentication.document.status = 'pending'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['name_and_address']; mock_props.type_of_card = Jurisdiction.SVG; @@ -175,7 +172,8 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant when verification_document is name_and_address and type_of_card to be svg', () => { - mock_props.account_status.authentication.document.status = 'rejected'; + if (mock_props.account_status.authentication?.document?.status) + mock_props.account_status.authentication.document.status = 'rejected'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['name_and_address']; mock_props.type_of_card = Jurisdiction.SVG; @@ -184,7 +182,8 @@ describe('JurisdictionTitleIndicator', () => { }); it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant when verification_document is name_and_address and type_of_card to be svg', () => { - mock_props.account_status.authentication.document.status = 'verified'; + if (mock_props.account_status.authentication?.document?.status) + mock_props.account_status.authentication.document.status = 'verified'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['name_and_address']; mock_props.type_of_card = Jurisdiction.SVG; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 2584e1038e1a..5266c989d62e 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -27,7 +27,7 @@ const JurisdictionCard = ({ setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; - const toggleCardFlip = (event: React.MouseEvent) => { + const toggleCardFlip: React.MouseEventHandler = event => { event.stopPropagation(); setIsCardFlipped(!is_card_flipped); }; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 3f9114c968ab..2d44b8455445 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -182,7 +182,7 @@ export type TJurisdictionCardProps = { export type TJurisdictionCardBackProps = { card_classname: string; is_card_selected: boolean; - toggleCardFlip: (event: React.MouseEvent) => void; + toggleCardFlip: React.MouseEventHandler; verification_docs: TJurisdictionCardItemVerification | undefined; }; @@ -196,7 +196,7 @@ export type TJurisdictionCardFrontProps = TJurisdictionCardBackProps & { export type TJurisdictionClickableDescriptionProps = { clickable_description: Array; - toggleCardFlip: (event: React.MouseEvent) => void; + toggleCardFlip: React.MouseEventHandler; }; export type TJurisdictionTitleIndicatorProps = { @@ -209,7 +209,7 @@ export type TJurisdictionTitleIndicatorProps = { export type TJurisdictionCardSectionProps = { account_status: GetAccountStatus; card_section_item: TJurisdictionCardSection; - toggleCardFlip: (event: React.MouseEvent) => void; + toggleCardFlip: React.MouseEventHandler; type_of_card: TJurisdictionCardType; verification_docs: TJurisdictionCardItemVerification | undefined; }; From 9961ed0af97117174682552de3b32a78764ee314 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com> Date: Mon, 8 May 2023 12:23:42 +0400 Subject: [PATCH 18/21] fix: overlapping textarea values (#8451) Co-authored-by: Sandeep Rajput <90243468+sandeep-deriv@users.noreply.github.com> --- .../payment-methods-list/edit-payment-method-form.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx index d0abeaa3dce9..879aa3d5998c 100644 --- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx +++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx @@ -91,6 +91,8 @@ const EditPaymentMethodForm = () => { className={classNames({ 'add-payment-method-form__payment-method-field': !errors[payment_method_field[0]]?.length, + 'add-payment-method-form__payment-method-field--text-area': + payment_method_field[0] === 'instructions', })} onChange={handleChange} name={payment_method_field[0]} From 2bdbc5c5d5f4e5ee8a6e42966637f14b677e3d3f Mon Sep 17 00:00:00 2001 From: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Date: Tue, 9 May 2023 06:36:09 +0400 Subject: [PATCH 19/21] likhith/fix: :art: resolved incorrect CSS style (#8508) * fix: :art: resolved incorrect CSS style * fix: :art: resolved incorrect CSS style --- .../Modules/Trading/Components/Form/Purchase/contract-info.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx index f1a85f2412f8..26c0f77e3831 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -7,7 +7,7 @@ import { getCurrencyDisplayCode, getLocalizedBasis, isMobile, getGrowthRatePerce import CancelDealInfo from './cancel-deal-info.jsx'; const ValueMovement = ({ has_error_or_not_loaded, proposal_info, currency, has_increased, is_vanilla }) => ( -
+
{!has_error_or_not_loaded && ( Date: Tue, 9 May 2023 07:16:08 +0330 Subject: [PATCH 20/21] fix: style issue in the transfer tab in the cashier (#8509) Co-authored-by: niloofar sadeghi --- .../account-transfer-form/account-transfer-form.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss index 6e0f0071b91d..d80ff88994c9 100644 --- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss +++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss @@ -132,7 +132,6 @@ @include mobile { width: 100%; min-width: auto; - margin-bottom: 2.6rem !important; } } } From fc43eb82d117f4c04e4cf71f534ef4a1eab82515 Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Date: Tue, 9 May 2023 13:10:04 +0800 Subject: [PATCH 21/21] fix(core): :ambulance: call `setWebsocket` in `@deriv/core` (#8513) Co-authored-by: Farzin Mirzaie --- packages/core/src/App/app.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/core/src/App/app.jsx b/packages/core/src/App/app.jsx index ea4b8adda7ff..cd895aebfeab 100644 --- a/packages/core/src/App/app.jsx +++ b/packages/core/src/App/app.jsx @@ -5,7 +5,13 @@ import { BrowserRouter as Router } from 'react-router-dom'; // eslint-disable-next-line no-unused-vars import { withTranslation } from 'react-i18next'; import { DesktopWrapper } from '@deriv/components'; -import { setUrlLanguage, initFormErrorMessages, setSharedCFDText, useOnLoadTranslation } from '@deriv/shared'; +import { + setUrlLanguage, + initFormErrorMessages, + setSharedCFDText, + useOnLoadTranslation, + setWebsocket, +} from '@deriv/shared'; import { initializeTranslations, getLanguage } from '@deriv/translations'; import { CashierStore } from '@deriv/cashier'; import { CFDStore } from '@deriv/cfd'; @@ -66,6 +72,8 @@ const AppWithoutTranslation = ({ root_store }) => { WS, }; + setWebsocket(WS); + return ( <> {is_translation_loaded ? (