From e485ea5b354ce84cf66a50cf277440f9c0911d0d Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:59:31 +0800 Subject: [PATCH 01/65] chore: initial setup --- packages/shared/src/utils/routes/routes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/utils/routes/routes.ts b/packages/shared/src/utils/routes/routes.ts index 9c9a132661e1..2fa5468aacfb 100644 --- a/packages/shared/src/utils/routes/routes.ts +++ b/packages/shared/src/utils/routes/routes.ts @@ -42,7 +42,7 @@ export const routes = { settings: '/settings', statement: '/reports/statement', token: '/settings/token', - trade: '/', + trade: '/dtrader', bot: '/bot', cashier: '/cashier', cashier_deposit: '/cashier/deposit', From b16ebde35003dc0d97e1bfb4483d3a431ab36962 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 16 Apr 2024 09:25:51 +0800 Subject: [PATCH 02/65] chore: test case fix --- .../Routes/__tests__/binary-link.spec.tsx | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx b/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx index c37ff374e150..a89cdf398afc 100644 --- a/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx +++ b/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; -import { BrowserRouter } from 'react-router-dom'; +import { cleanup, render, screen } from '@testing-library/react'; +import { BrowserRouter, Link, Route } from 'react-router-dom'; import { BinaryLink } from '../index'; +import userEvent from '@testing-library/user-event'; type TMockBinaryLink = { to?: string; @@ -16,23 +17,33 @@ const MockBinaryLink = ({ to }: TMockBinaryLink) => ( ); describe('BinaryLink component', () => { + beforeEach(() => cleanup()); it('should render "children" when passed in', () => { - render(); + render(); expect(screen.getByTestId('dt_child')).toBeInTheDocument(); }); it('should have "active_class" when passed in', () => { - render(); - expect(screen.getByTestId('dt_binary_link')).toHaveClass('active_class'); + render(); + userEvent.click(screen.getByTestId('dt_binary_link')); + const link = screen.getByTestId('dt_binary_link'); + expect(link).toHaveClass('active_class'); }); - it('should render "NavLink" when "to" property is passed', () => { - render(); + it('should render "NavLink" when valid "to" property is passed', () => { + render(); expect(screen.getByTestId('dt_binary_link')).toBeInTheDocument(); }); - it('should render "a" element whe property "to" is not passed', () => { - render(); - expect(screen.getByTestId('dt_binary_link')).toBeInTheDocument(); + it('throws an error for an invalid route', () => { + const viewComponent = () => render(); + expect(viewComponent).toThrowError('Route not found: /invalid'); }); + + // There is no active path right now and there will be when tradershub become the default page. + // That's when we can run this test case + // it('should render "a" element when property "to" is not passed', () => { + // render(); + // expect(screen.getByTestId('dt_binary_link')).toBeInTheDocument(); + // }); }); From 6077f48395964f2929bb04266e65bc08849111d5 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 16 Apr 2024 10:46:27 +0800 Subject: [PATCH 03/65] chore: fixing test cases --- .../__test__/multi-action-button-group.spec.tsx | 9 +++------ packages/stores/types.ts | 2 +- .../src/App/Constants/__tests__/routes-config.spec.tsx | 4 ++-- packages/trader/src/App/Containers/Routes/routes.tsx | 2 +- .../__tests__/trade-footer-extensions.spec.tsx | 2 +- 5 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/appstore/src/components/multi-action-button-group/__test__/multi-action-button-group.spec.tsx b/packages/appstore/src/components/multi-action-button-group/__test__/multi-action-button-group.spec.tsx index d7071ce40418..d3fe3b906116 100644 --- a/packages/appstore/src/components/multi-action-button-group/__test__/multi-action-button-group.spec.tsx +++ b/packages/appstore/src/components/multi-action-button-group/__test__/multi-action-button-group.spec.tsx @@ -7,7 +7,7 @@ import { createBrowserHistory } from 'history'; import { routes } from '@deriv/shared'; const mock_props = { - link_to: routes.trader, + link_to: routes.trade, onAction: jest.fn(), is_buttons_disabled: false, is_real: true, @@ -64,15 +64,12 @@ describe('Test Cases for Multi Action Button Group:', () => { it('should redirect to Trade page after "Open" button is clicked', () => { const history = createBrowserHistory(); + render( ); - - const open_btn = screen.getByText('Open'); - userEvent.click(open_btn); - - expect(history.location.pathname).toBe(routes.trade); + expect(screen.getByRole('link')).toHaveAttribute('href', '/dtrader'); }); }); diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 7e5a3b3e46bd..4ced967010bc 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -66,7 +66,7 @@ type TRoutes = | '/reports/positions' | '/reports/profit' | '/reports' - | '/' + | '/dtrader' | '/redirect' | '/settings' | '/reports/statement' diff --git a/packages/trader/src/App/Constants/__tests__/routes-config.spec.tsx b/packages/trader/src/App/Constants/__tests__/routes-config.spec.tsx index 106188e63030..7d3a2ec6a817 100644 --- a/packages/trader/src/App/Constants/__tests__/routes-config.spec.tsx +++ b/packages/trader/src/App/Constants/__tests__/routes-config.spec.tsx @@ -62,11 +62,11 @@ describe('Routes Config', () => { it('should return routes with trade route', async () => { const routes = getRoutesConfig(); - expect(routes?.[1]?.path).toBe('/'); + expect(routes?.[1]?.path).toBe('/dtrader'); expect(routes?.[1]?.getTitle?.()).toBe('Trader'); expect(routes?.[1]?.exact).toBe(true); const history = createMemoryHistory(); - history.push('/'); + history.push('/dtrader'); render(); await waitFor(() => { expect(screen.getByText('Trader')).toBeInTheDocument(); diff --git a/packages/trader/src/App/Containers/Routes/routes.tsx b/packages/trader/src/App/Containers/Routes/routes.tsx index 76f9130024f7..457d8f4b9a68 100644 --- a/packages/trader/src/App/Containers/Routes/routes.tsx +++ b/packages/trader/src/App/Containers/Routes/routes.tsx @@ -20,7 +20,7 @@ type TTradePageMountingMiddlewareParams = { path_to: string; }; -export const checkRoutingMatch = (route_list: Array, path = '') => { +export const checkRoutingMatch = (route_list: Array, path = '/dtrader') => { return route_list.some(route => !!matchPath(path, { path: route, exact: true })); }; diff --git a/packages/trader/src/App/Containers/__tests__/trade-footer-extensions.spec.tsx b/packages/trader/src/App/Containers/__tests__/trade-footer-extensions.spec.tsx index c39e637b94b7..2df1ff84c1fa 100644 --- a/packages/trader/src/App/Containers/__tests__/trade-footer-extensions.spec.tsx +++ b/packages/trader/src/App/Containers/__tests__/trade-footer-extensions.spec.tsx @@ -41,7 +41,7 @@ describe('', () => { mock_store.client.is_logged_in = true; router_prop = { location: { - pathname: '/', + pathname: '/dtrader', }, }; renderTraderFooterExtensions(router_prop); From e1d057388364f12e4828afba793bdff0e7989329 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 16 Apr 2024 10:50:51 +0800 Subject: [PATCH 04/65] chore: fixing test cases --- .../App/Components/Routes/__tests__/binary-link.spec.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx b/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx index a89cdf398afc..bb2c74d876f1 100644 --- a/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx +++ b/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx @@ -39,11 +39,4 @@ describe('BinaryLink component', () => { const viewComponent = () => render(); expect(viewComponent).toThrowError('Route not found: /invalid'); }); - - // There is no active path right now and there will be when tradershub become the default page. - // That's when we can run this test case - // it('should render "a" element when property "to" is not passed', () => { - // render(); - // expect(screen.getByTestId('dt_binary_link')).toBeInTheDocument(); - // }); }); From 4a315151b0bd31e5b73e187d9d76c05bccb2a282 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 16 Apr 2024 11:07:24 +0800 Subject: [PATCH 05/65] chore: binary link fix --- .../src/App/Components/Routes/__tests__/binary-link.spec.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx b/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx index bb2c74d876f1..470566eb8bfa 100644 --- a/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx +++ b/packages/trader/src/App/Components/Routes/__tests__/binary-link.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { cleanup, render, screen } from '@testing-library/react'; -import { BrowserRouter, Link, Route } from 'react-router-dom'; +import { render, screen } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; import { BinaryLink } from '../index'; import userEvent from '@testing-library/user-event'; @@ -17,7 +17,6 @@ const MockBinaryLink = ({ to }: TMockBinaryLink) => ( ); describe('BinaryLink component', () => { - beforeEach(() => cleanup()); it('should render "children" when passed in', () => { render(); expect(screen.getByTestId('dt_child')).toBeInTheDocument(); From 5191fce3a9e77c8ed9080f336c9d2eb4037c0392 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 16 Apr 2024 14:57:49 +0800 Subject: [PATCH 06/65] chore: add root route / --- packages/stores/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 4ced967010bc..ba7a96fa4ed4 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -66,6 +66,7 @@ type TRoutes = | '/reports/positions' | '/reports/profit' | '/reports' + | '/' | '/dtrader' | '/redirect' | '/settings' From dc63769ced76219f0b4170b5a6181e62a9c0b2ec Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Fri, 19 Apr 2024 16:03:18 +0300 Subject: [PATCH 07/65] feat: started --- .../appstore/src/components/routes/routes.tsx | 10 ++- .../__tests__/index.spec.tsx | 66 ++++++++++++++ .../modules/traders-hub-logged-out/index.tsx | 3 + .../traders-hub-logged-out.scss | 88 +++++++++++++++++++ .../traders-hub-logged-out.tsx | 13 +++ .../core/src/App/Constants/routes-config.js | 8 +- packages/shared/src/utils/routes/routes.ts | 2 +- 7 files changed, 186 insertions(+), 4 deletions(-) create mode 100644 packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx create mode 100644 packages/appstore/src/modules/traders-hub-logged-out/index.tsx create mode 100644 packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss create mode 100644 packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx index 0750017182ea..b2ed4ddb261f 100644 --- a/packages/appstore/src/components/routes/routes.tsx +++ b/packages/appstore/src/components/routes/routes.tsx @@ -6,6 +6,7 @@ import { localize } from '@deriv/translations'; import { routes } from '@deriv/shared'; import Onboarding from 'Modules/onboarding'; import TradersHub from 'Modules/traders-hub'; +import TradersHubLoggedOut from 'Modules/traders-hub-logged-out'; import { Switch, useHistory } from 'react-router-dom'; import RouteWithSubroutes from './route-with-sub-routes.jsx'; @@ -24,12 +25,17 @@ const Routes: React.FC = observer(() => { }> localize('Deriv App')} + /> + localize("Trader's Hub")} /> localize('Onboarding')} /> diff --git a/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx b/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx new file mode 100644 index 000000000000..c5d4487ad079 --- /dev/null +++ b/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import { render, screen } from '@testing-library/react'; +import TradersHubLoggedOut from '..'; + +jest.mock('Components/modals/modal-manager', () => jest.fn(() => 'mockedModalManager')); +jest.mock('Components/main-title-bar', () => jest.fn(() => 'mockedMainTitleBar')); +jest.mock('Components/cfds-listing', () => jest.fn(() => 'mockedCFDsListing')); +jest.mock('Components/options-multipliers-listing', () => jest.fn(() => 'mocked')); +jest.mock('../../tour-guide/tour-guide', () => jest.fn(() => 'mocked')); + +describe('TradersHub', () => { + const render_container = (mock_store_override = {}) => { + const mock_store = mockStore(mock_store_override); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + return render(, { + wrapper, + }); + }; + + it('should display the component', () => { + const { container } = render_container({ client: { is_logged_in: true } }); + expect(container).toBeInTheDocument(); + }); + + it('should display both CFDs and Multipliers section', () => { + render_container({ client: { is_logged_in: true, is_mt5_allowed: true } }); + const dashboard_sections = screen.getByTestId('dt_traders_hub'); + expect(dashboard_sections?.textContent?.match(/Multipliers/)).not.toBeNull(); + expect(dashboard_sections?.textContent?.match(/CFDs/)).not.toBeNull(); + }); + + it('should display Multipliers section if there is no MT5 accounts availble for country of residence', () => { + render_container({ client: { is_logged_in: true, is_mt5_allowed: false } }); + const dashboard_sections = screen.getByTestId('dt_traders_hub'); + expect(dashboard_sections?.textContent?.match(/Multipliers/)).not.toBeNull(); + expect(dashboard_sections?.textContent?.match(/CFDs/)).toBeNull(); + }); + + it('should display Multipliers and CFDs section in order if the user is non eu', () => { + render_container({ + client: { is_logged_in: true }, + traders_hub: { is_eu_user: false }, + }); + const dashboard_sections = screen.getByTestId('dt_traders_hub'); + expect(dashboard_sections).not.toHaveClass('traders-hub__main-container-reversed'); + }); + + it('should display Multipliers and CFDs section in reverse order if the user is eu', () => { + render_container({ client: { is_logged_in: true }, traders_hub: { is_eu_user: true } }); + const dashboard_sections = screen.getByTestId('dt_traders_hub'); + expect(dashboard_sections).toHaveClass('traders-hub__main-container-reversed'); + }); + + it('should display disclaimer if the user is from low risk eu country', () => { + render_container({ + client: { is_logged_in: true }, + traders_hub: { is_eu_user: true }, + }); + const disclaimer = screen.getByTestId('dt_traders_hub_disclaimer'); + expect(disclaimer).toBeInTheDocument(); + }); +}); diff --git a/packages/appstore/src/modules/traders-hub-logged-out/index.tsx b/packages/appstore/src/modules/traders-hub-logged-out/index.tsx new file mode 100644 index 000000000000..d554a7a23180 --- /dev/null +++ b/packages/appstore/src/modules/traders-hub-logged-out/index.tsx @@ -0,0 +1,3 @@ +import TradersHubLoggedOut from './traders-hub-logged-out'; + +export default TradersHubLoggedOut; diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss new file mode 100644 index 000000000000..6fe97477fd60 --- /dev/null +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss @@ -0,0 +1,88 @@ +.traders-hub-logged-out { + max-width: 123.2rem; + margin: auto; + padding: 5rem 0; + + &:has(.wallets-banner__container) { + padding-top: 0; + } + + @include mobile { + padding: 2rem; + width: 100%; + } + + &__main-container { + display: flex; + flex-direction: column; + gap: 2.4rem; + &-reversed { + flex-direction: column-reverse; + } + } + + &--eu-user { + @include mobile { + min-height: 650px; + } + + &-without-mt5 { + @include mobile { + min-height: 540px; + } + } + } + + &__button-toggle { + margin-top: 3rem; + border-radius: $BORDER_RADIUS; + padding: 0.4rem; + background-color: var(--general-section-1); + } + + &--mobile { + overflow: scroll !important; + + &::-webkit-scrollbar { + display: none; + } + } + &--mt5-not-allowed { + margin-top: 2rem; + } +} + +.disclaimer { + position: fixed; + bottom: 3.6rem; + width: 100%; + min-height: 5rem; + z-index: 3; + display: flex; + align-items: center; + backface-visibility: hidden; + background: var(--icon-grey-background); + + @include mobile { + min-height: 8rem; + border: 1px solid var(--icon-grey-background); + } + + &-text { + padding: 0 3rem; + + @include mobile { + padding: 0 1.5rem; + } + } + + &__bottom-plug { + position: fixed; + bottom: 0; + width: 100%; + height: 3.6rem; + z-index: 3; + backface-visibility: hidden; + background: var(--general-main-1); + } +} diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx new file mode 100644 index 000000000000..ae638077879b --- /dev/null +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { observer } from '@deriv/stores'; +import './traders-hub-logged-out.scss'; + +const TradersHubLoggedOut = observer(() => { + return ( + +

Its logged out version of TH

+ + ); +}); + +export default TradersHubLoggedOut; diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js index 3cdb2396d366..2d760da21562 100644 --- a/packages/core/src/App/Constants/routes-config.js +++ b/packages/core/src/App/Constants/routes-config.js @@ -428,7 +428,7 @@ const getModules = () => { ], }, { - path: routes.root, + path: routes.trade, component: Trader, getTitle: () => localize('Trader'), routes: [ @@ -441,6 +441,12 @@ const getModules = () => { { path: routes.error404, component: Trader, getTitle: () => localize('Error 404') }, ], }, + { + path: routes.root, + component: AppStore, + is_authenticated: false, + getTitle: () => localize('Deriv App'), + }, ]; return modules; diff --git a/packages/shared/src/utils/routes/routes.ts b/packages/shared/src/utils/routes/routes.ts index cbedeee0aba5..d976d5005539 100644 --- a/packages/shared/src/utils/routes/routes.ts +++ b/packages/shared/src/utils/routes/routes.ts @@ -43,7 +43,7 @@ export const routes = { settings: '/settings', statement: '/reports/statement', token: '/settings/token', - trade: '/', + trade: '/dtrader', bot: '/bot', cashier: '/cashier', cashier_deposit: '/cashier/deposit', From 39b2004dbb119fd2592e570a315b626cff0ecc9e Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Mon, 22 Apr 2024 16:01:32 +0300 Subject: [PATCH 08/65] feat: intermediate result --- .../appstore/src/components/routes/routes.tsx | 10 +- .../traders-hub-logged-out.scss | 9 +- .../traders-hub-logged-out.tsx | 142 +++++++++++++++++- 3 files changed, 146 insertions(+), 15 deletions(-) diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx index b2ed4ddb261f..e2c04191a607 100644 --- a/packages/appstore/src/components/routes/routes.tsx +++ b/packages/appstore/src/components/routes/routes.tsx @@ -24,11 +24,6 @@ const Routes: React.FC = observer(() => { return ( }> - localize('Deriv App')} - /> { component={Onboarding} getTitle={() => localize('Onboarding')} /> + localize('Deriv App')} + /> ); diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss index 6fe97477fd60..1d882058bfeb 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss @@ -1,11 +1,8 @@ .traders-hub-logged-out { - max-width: 123.2rem; + // max-width: 123.2rem; + max-width: 120rem; margin: auto; - padding: 5rem 0; - - &:has(.wallets-banner__container) { - padding-top: 0; - } + padding: 4rem; @include mobile { padding: 2rem; diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx index ae638077879b..0347947e6261 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx @@ -1,13 +1,147 @@ import React from 'react'; -import { observer } from '@deriv/stores'; +import { Redirect } from 'react-router-dom'; +import classNames from 'classnames'; +import { observer, useStore } from '@deriv/stores'; +import { ButtonToggle, Div100vhContainer, DesktopWrapper, MobileWrapper, Text, Loading } from '@deriv/components'; +import { Localize, localize } from '@deriv/translations'; +import { ContentFlag, routes } from '@deriv/shared'; +import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader'; +import OptionsAndMultipliersListing from 'Components/options-multipliers-listing'; +import CFDsListing from 'Components/cfds-listing'; import './traders-hub-logged-out.scss'; const TradersHubLoggedOut = observer(() => { + const { traders_hub, client, ui } = useStore(); + const { openRealAccountSignup, is_from_signup_account, is_desktop, is_mobile, setIsFromSignupAccount } = ui; + const { + is_landing_company_loaded, + is_logged_in, + is_switching, + is_logging_in, + is_account_setting_loaded, + is_mt5_allowed, + has_active_real_account, + website_status, + } = client; + const { selected_platform_type, setTogglePlatformType, is_tour_open, content_flag, is_eu_user } = traders_hub; + const traders_hub_ref = React.useRef(null); + + React.useEffect(() => { + if (is_eu_user) setTogglePlatformType('cfd'); + if ( + !has_active_real_account && + is_logged_in && + is_from_signup_account && + content_flag === ContentFlag.EU_DEMO + ) { + openRealAccountSignup('maltainvest'); + setIsFromSignupAccount(false); + } + }, [ + content_flag, + has_active_real_account, + is_eu_user, + is_from_signup_account, + is_logged_in, + openRealAccountSignup, + setIsFromSignupAccount, + setTogglePlatformType, + ]); + + const eu_title = content_flag === ContentFlag.EU_DEMO || content_flag === ContentFlag.EU_REAL || is_eu_user; + + const getPlatformToggleOptions = () => [ + { text: eu_title ? localize('Multipliers') : localize('Options & Multipliers'), value: 'options' }, + { text: localize('CFDs'), value: 'cfd' }, + ]; + const platform_toggle_options = getPlatformToggleOptions(); + const platform_toggle_options_eu = getPlatformToggleOptions().reverse(); + + const platformTypeChange = (event: { + target: { + value: string; + name: string; + }; + }) => { + setTogglePlatformType(event.target.value); + }; + + const OrderedPlatformSections = ({ is_cfd_visible = true, is_options_and_multipliers_visible = true }) => { + return ( +
+ {is_options_and_multipliers_visible && } + {is_cfd_visible && } +
+ ); + }; + + const getOrderedPlatformSections = (isDesktop = false) => { + if (is_mt5_allowed) { + return isDesktop ? ( + + ) : ( + + ); + } + return ; + }; + + if (!website_status) return ; + + if (is_logged_in) return ; + return ( - -

Its logged out version of TH

- + +
+ {getOrderedPlatformSections(true)} + + {is_mt5_allowed && + (is_landing_company_loaded ? ( + + ) : ( + + ))} + {!is_mt5_allowed && ( +
+ + + +
+ )} + {getOrderedPlatformSections()} + +
+ ); + + // return ( + // + //

Its logged out version of TH

+ // + // ); }); export default TradersHubLoggedOut; From 39d40c2478a0b75ed753f123269758c4781317ca Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Mon, 22 Apr 2024 18:00:46 +0300 Subject: [PATCH 09/65] feat: intermediate result 2 --- .../appstore/src/helpers/account-helper.ts | 5 + .../traders-hub-logged-out.scss | 41 +--- .../traders-hub-logged-out.tsx | 196 ++++++++---------- 3 files changed, 98 insertions(+), 144 deletions(-) diff --git a/packages/appstore/src/helpers/account-helper.ts b/packages/appstore/src/helpers/account-helper.ts index c6bb35281385..74edd72e0b77 100644 --- a/packages/appstore/src/helpers/account-helper.ts +++ b/packages/appstore/src/helpers/account-helper.ts @@ -57,3 +57,8 @@ export const getSwapFreeAccount = (): TAccountType => ({ 'Trade swap-free CFDs on MT5 with forex, stocks, stock indices, commodities cryptocurrencies, ETFs and synthetic indices.' ), }); + +export const getPlatformToggleOptions = (is_eu_title: boolean) => [ + { text: is_eu_title ? localize('Multipliers') : localize('Options & Multipliers'), value: 'options' }, + { text: localize('CFDs'), value: 'cfd' }, +]; diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss index 1d882058bfeb..6458537743d7 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss @@ -18,7 +18,7 @@ } } - &--eu-user { + &__eu-user { @include mobile { min-height: 650px; } @@ -37,49 +37,14 @@ background-color: var(--general-section-1); } - &--mobile { + &__mobile { overflow: scroll !important; &::-webkit-scrollbar { display: none; } } - &--mt5-not-allowed { + &__mt5-not-allowed { margin-top: 2rem; } } - -.disclaimer { - position: fixed; - bottom: 3.6rem; - width: 100%; - min-height: 5rem; - z-index: 3; - display: flex; - align-items: center; - backface-visibility: hidden; - background: var(--icon-grey-background); - - @include mobile { - min-height: 8rem; - border: 1px solid var(--icon-grey-background); - } - - &-text { - padding: 0 3rem; - - @include mobile { - padding: 0 1.5rem; - } - } - - &__bottom-plug { - position: fixed; - bottom: 0; - width: 100%; - height: 3.6rem; - z-index: 3; - backface-visibility: hidden; - background: var(--general-main-1); - } -} diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx index 0347947e6261..98703db7b7cb 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx @@ -3,59 +3,60 @@ import { Redirect } from 'react-router-dom'; import classNames from 'classnames'; import { observer, useStore } from '@deriv/stores'; import { ButtonToggle, Div100vhContainer, DesktopWrapper, MobileWrapper, Text, Loading } from '@deriv/components'; -import { Localize, localize } from '@deriv/translations'; -import { ContentFlag, routes } from '@deriv/shared'; -import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader'; +import { Localize } from '@deriv/translations'; +import { routes, isEuCountry } from '@deriv/shared'; import OptionsAndMultipliersListing from 'Components/options-multipliers-listing'; import CFDsListing from 'Components/cfds-listing'; +import { getPlatformToggleOptions } from '../../helpers'; import './traders-hub-logged-out.scss'; -const TradersHubLoggedOut = observer(() => { - const { traders_hub, client, ui } = useStore(); - const { openRealAccountSignup, is_from_signup_account, is_desktop, is_mobile, setIsFromSignupAccount } = ui; - const { - is_landing_company_loaded, - is_logged_in, - is_switching, - is_logging_in, - is_account_setting_loaded, - is_mt5_allowed, - has_active_real_account, - website_status, - } = client; - const { selected_platform_type, setTogglePlatformType, is_tour_open, content_flag, is_eu_user } = traders_hub; - const traders_hub_ref = React.useRef(null); +const GetOrderedPlatformSections = observer(({ isDesktop = false }: { isDesktop?: boolean }) => { + const { traders_hub, client } = useStore(); + const { is_mt5_allowed } = client; + const { selected_platform_type } = traders_hub; - React.useEffect(() => { - if (is_eu_user) setTogglePlatformType('cfd'); - if ( - !has_active_real_account && - is_logged_in && - is_from_signup_account && - content_flag === ContentFlag.EU_DEMO - ) { - openRealAccountSignup('maltainvest'); - setIsFromSignupAccount(false); - } - }, [ - content_flag, - has_active_real_account, - is_eu_user, - is_from_signup_account, - is_logged_in, - openRealAccountSignup, - setIsFromSignupAccount, - setTogglePlatformType, - ]); + if (is_mt5_allowed) { + return isDesktop ? ( + + ) : ( + + ); + } + return ; +}); + +const OrderedPlatformSections = ({ + is_cfd_visible = true, + is_options_and_multipliers_visible = true, + is_eu_user = false, +}: { + is_cfd_visible?: boolean; + is_options_and_multipliers_visible?: boolean; + is_eu_user?: boolean; +}) => ( +
+ {is_options_and_multipliers_visible && } + {is_cfd_visible && } +
+); + +const TabsOrTitle = observer(() => { + const { traders_hub, client } = useStore(); + const { is_mt5_allowed, clients_country } = client; + const { selected_platform_type, setTogglePlatformType } = traders_hub; - const eu_title = content_flag === ContentFlag.EU_DEMO || content_flag === ContentFlag.EU_REAL || is_eu_user; + const is_eu_user = isEuCountry(clients_country); - const getPlatformToggleOptions = () => [ - { text: eu_title ? localize('Multipliers') : localize('Options & Multipliers'), value: 'options' }, - { text: localize('CFDs'), value: 'cfd' }, - ]; - const platform_toggle_options = getPlatformToggleOptions(); - const platform_toggle_options_eu = getPlatformToggleOptions().reverse(); + const platform_toggle_options = getPlatformToggleOptions(is_eu_user); + const platform_toggle_options_eu = getPlatformToggleOptions(is_eu_user).reverse(); const platformTypeChange = (event: { target: { @@ -66,82 +67,65 @@ const TradersHubLoggedOut = observer(() => { setTogglePlatformType(event.target.value); }; - const OrderedPlatformSections = ({ is_cfd_visible = true, is_options_and_multipliers_visible = true }) => { - return ( -
- {is_options_and_multipliers_visible && } - {is_cfd_visible && } -
- ); - }; + return is_mt5_allowed ? ( + + ) : ( +
+ + + +
+ ); +}); - const getOrderedPlatformSections = (isDesktop = false) => { - if (is_mt5_allowed) { - return isDesktop ? ( - - ) : ( - - ); - } - return ; - }; +const TradersHubLoggedOut = observer(() => { + const { traders_hub, client, ui } = useStore(); + const { is_desktop } = ui; + const { + is_logged_in, + is_mt5_allowed, + // website_status, + clients_country, + } = client; + const { setTogglePlatformType } = traders_hub; + + const is_eu_user = isEuCountry(clients_country); - if (!website_status) return ; + React.useEffect(() => { + if (is_eu_user) setTogglePlatformType('cfd'); + }, [is_eu_user]); if (is_logged_in) return ; + if (!clients_country) return ; + return ( - +
- {getOrderedPlatformSections(true)} + + + - {is_mt5_allowed && - (is_landing_company_loaded ? ( - - ) : ( - - ))} - {!is_mt5_allowed && ( -
- - - -
- )} - {getOrderedPlatformSections()} + +
); - - // return ( - // - //

Its logged out version of TH

- // - // ); }); export default TradersHubLoggedOut; From 954c69ff137de84c577875824474217a99fd82a3 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Mon, 22 Apr 2024 18:13:39 +0300 Subject: [PATCH 10/65] feat: add 1st test case --- .../__tests__/index.spec.tsx | 42 +------------------ 1 file changed, 2 insertions(+), 40 deletions(-) diff --git a/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx b/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx index c5d4487ad079..217f7ce8a839 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx +++ b/packages/appstore/src/modules/traders-hub-logged-out/__tests__/index.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { StoreProvider, mockStore } from '@deriv/stores'; -import { render, screen } from '@testing-library/react'; +import { render } from '@testing-library/react'; import TradersHubLoggedOut from '..'; jest.mock('Components/modals/modal-manager', () => jest.fn(() => 'mockedModalManager')); @@ -22,45 +22,7 @@ describe('TradersHub', () => { }; it('should display the component', () => { - const { container } = render_container({ client: { is_logged_in: true } }); + const { container } = render_container(); expect(container).toBeInTheDocument(); }); - - it('should display both CFDs and Multipliers section', () => { - render_container({ client: { is_logged_in: true, is_mt5_allowed: true } }); - const dashboard_sections = screen.getByTestId('dt_traders_hub'); - expect(dashboard_sections?.textContent?.match(/Multipliers/)).not.toBeNull(); - expect(dashboard_sections?.textContent?.match(/CFDs/)).not.toBeNull(); - }); - - it('should display Multipliers section if there is no MT5 accounts availble for country of residence', () => { - render_container({ client: { is_logged_in: true, is_mt5_allowed: false } }); - const dashboard_sections = screen.getByTestId('dt_traders_hub'); - expect(dashboard_sections?.textContent?.match(/Multipliers/)).not.toBeNull(); - expect(dashboard_sections?.textContent?.match(/CFDs/)).toBeNull(); - }); - - it('should display Multipliers and CFDs section in order if the user is non eu', () => { - render_container({ - client: { is_logged_in: true }, - traders_hub: { is_eu_user: false }, - }); - const dashboard_sections = screen.getByTestId('dt_traders_hub'); - expect(dashboard_sections).not.toHaveClass('traders-hub__main-container-reversed'); - }); - - it('should display Multipliers and CFDs section in reverse order if the user is eu', () => { - render_container({ client: { is_logged_in: true }, traders_hub: { is_eu_user: true } }); - const dashboard_sections = screen.getByTestId('dt_traders_hub'); - expect(dashboard_sections).toHaveClass('traders-hub__main-container-reversed'); - }); - - it('should display disclaimer if the user is from low risk eu country', () => { - render_container({ - client: { is_logged_in: true }, - traders_hub: { is_eu_user: true }, - }); - const disclaimer = screen.getByTestId('dt_traders_hub_disclaimer'); - expect(disclaimer).toBeInTheDocument(); - }); }); From 63e95b6204b097e23ffbf029dba2897cbb10ff6e Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 23 Apr 2024 11:42:01 +0800 Subject: [PATCH 11/65] chore: review fix --- .../account-v2/src/modules/src/POAForm/POAFormContainer.tsx | 2 +- .../poa/continue-trading-button/continue-trading-button.tsx | 2 +- packages/core/src/Stores/client-store.js | 2 +- packages/tradershub/src/constants/constants.tsx | 2 +- packages/wallets/src/constants/constants.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/account-v2/src/modules/src/POAForm/POAFormContainer.tsx b/packages/account-v2/src/modules/src/POAForm/POAFormContainer.tsx index 4d959093a6ad..e06e90822efe 100644 --- a/packages/account-v2/src/modules/src/POAForm/POAFormContainer.tsx +++ b/packages/account-v2/src/modules/src/POAForm/POAFormContainer.tsx @@ -49,7 +49,7 @@ export const POAFormContainer = () => { return !isRedirectedFromPlatform ? ( diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsNoDataState/__tests__/TransactionNoDataState.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsNoDataState/__tests__/TransactionNoDataState.spec.tsx index 03a19a60a1b1..9d04d710b4a7 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsNoDataState/__tests__/TransactionNoDataState.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsNoDataState/__tests__/TransactionNoDataState.spec.tsx @@ -30,7 +30,7 @@ describe('TransactionsNoDataState', () => { fireEvent.click(screen.getByText('Transfer funds')); - expect(pushMock).toHaveBeenCalledWith('/wallets/cashier/transfer'); + expect(pushMock).toHaveBeenCalledWith('/wallet/account-transfer'); }); test('should navigate to deposit page on click of "Deposit funds" button', () => { @@ -41,6 +41,6 @@ describe('TransactionsNoDataState', () => { fireEvent.click(screen.getByText('Deposit funds')); - expect(pushMock).toHaveBeenCalledWith('/wallets/cashier/deposit'); + expect(pushMock).toHaveBeenCalledWith('/wallet/deposit'); }); }); diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx index 9615e98249a8..bd8f5c350f39 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx @@ -50,9 +50,9 @@ const TransferFormDropdown: React.FC = ({ fieldName, mobileAccountsListR const { location } = useHistory(); const toAccountLoginId = - location.pathname === '/wallets/cashier/transfer' ? location.state?.toAccountLoginId : undefined; + location.pathname === '/wallet/account-transfer' ? location.state?.toAccountLoginId : undefined; const shouldDefaultUSDWallet = - location.pathname === '/wallets/cashier/transfer' ? location.state?.shouldSelectDefaultWallet : false; + location.pathname === '/wallet/account-transfer' ? location.state?.shouldSelectDefaultWallet : false; const toDefaultAccount = useMemo( () => toAccountList.walletAccounts.find(wallet => wallet.currency === 'USD'), diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx index 8b68435d3eb0..14ac6ba84e01 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx @@ -40,7 +40,7 @@ const WithdrawalCryptoReceipt: React.FC = ({ onClose, withdrawalReceipt
history.push('/wallets/cashier/transactions')} + onClick={() => history.push('/wallet/transactions')} size='lg' variant='outlined' > diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/__tests__/WithdrawalCryptoReceipt.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/__tests__/WithdrawalCryptoReceipt.spec.tsx index 01d06b0729cb..2634a7d2125c 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/__tests__/WithdrawalCryptoReceipt.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/__tests__/WithdrawalCryptoReceipt.spec.tsx @@ -60,6 +60,6 @@ describe('WithdrawalCryptoReceipt', () => { fireEvent.click(screen.getByText('View transactions')); - expect(mockPush).toHaveBeenCalledWith('/wallets/cashier/transactions'); + expect(mockPush).toHaveBeenCalledWith('/wallet/transactions'); }); }); diff --git a/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx b/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx index 8596c555f9ee..b266cd4957cb 100644 --- a/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx +++ b/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx @@ -28,7 +28,7 @@ const getMessage = ({ return { actionButton: () => ( - history.push('/wallets')} size='lg'> + history.push('/')} size='lg'> Back to Trader's hub ), @@ -44,7 +44,7 @@ const getMessage = ({ const description = isVirtual ? 'Please reset the balance of your Demo Wallet to make a transfer.' : `Please make a deposit to your ${currency} Wallet to make a transfer.`; - const locationPathName = `/wallets/cashier/${isVirtual ? 'reset-balance' : 'deposit'}` as const; + const locationPathName = `/wallet/${isVirtual ? 'reset-balance' : 'deposit'}` as const; const buttonText = isVirtual ? 'Reset balance' : 'Deposit'; return { diff --git a/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx b/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx index 60fd69c4ef3f..bbee25723a48 100644 --- a/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx +++ b/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx @@ -17,7 +17,7 @@ const WithdrawalNoBalance: React.FC = ({ activeWallet descriptionSize='md' icon={} renderButtons={() => ( - history.push('/wallets/cashier/deposit')} size='lg'> + history.push('/wallet/deposit')} size='lg'> Add funds )} diff --git a/packages/wallets/src/features/cfd/CFDPlatformsList.tsx b/packages/wallets/src/features/cfd/CFDPlatformsList.tsx index 1a299c4f4c4c..589c245b1c3d 100644 --- a/packages/wallets/src/features/cfd/CFDPlatformsList.tsx +++ b/packages/wallets/src/features/cfd/CFDPlatformsList.tsx @@ -39,7 +39,7 @@ const CFDPlatformsList: React.FC = ({ onMT5PlatformListLoaded }) => { { - history.push('/wallets/compare-accounts'); + history.push('/compare-accounts'); }} size='sm' textSize='sm' @@ -56,7 +56,7 @@ const CFDPlatformsList: React.FC = ({ onMT5PlatformListLoaded }) => { { - history.push('/wallets/compare-accounts'); + history.push('/compare-accounts'); }} size='sm' variant='ghost' diff --git a/packages/wallets/src/features/cfd/CFDPlatformsListEmptyState.tsx b/packages/wallets/src/features/cfd/CFDPlatformsListEmptyState.tsx index 36b431f78fc5..ec09ed04df07 100644 --- a/packages/wallets/src/features/cfd/CFDPlatformsListEmptyState.tsx +++ b/packages/wallets/src/features/cfd/CFDPlatformsListEmptyState.tsx @@ -23,7 +23,7 @@ const CFDPlatformsListEmptyState = () => { - history.push('/wallets/cashier/transfer', { + history.push('/wallet/account-transfer', { shouldSelectDefaultWallet: true, }) } diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx index f801d5ff549d..2fe585c8d2eb 100644 --- a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx +++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx @@ -30,7 +30,7 @@ const CTraderSuccessModalButtons = ({ hide, isDemo }: TCTraderSuccessModalButton { hide(); - history.push('/wallets/cashier/transfer'); + history.push('/wallet/account-transfer'); }} size={isMobile ? 'lg' : 'md'} > diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index ff44e7f20815..8ad03bc8396c 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -68,7 +68,7 @@ const DxtradeEnterPasswordModal = () => { { hide(); - history.push('/wallets/cashier/transfer'); + history.push('/wallet/account-transfer'); }} size={isMobile ? 'lg' : 'md'} > diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx index 5fda93bbca35..4e5048b5f6fa 100644 --- a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx @@ -55,7 +55,7 @@ const MT5AccountAdded: FC = ({ account, marketType, platform }) => { { hide(); - history.push(`/wallets/cashier/transfer`, { toAccountLoginId: addedAccount?.loginid }); + history.push('/wallet/account-transfer', { toAccountLoginId: addedAccount?.loginid }); }} size={isMobile ? 'lg' : 'md'} > diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx index 8859f3bce329..f9cc22210204 100644 --- a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx @@ -126,7 +126,7 @@ describe('MT5AccountAdded', () => { expect(transferFundsButton).toBeInTheDocument(); expect(transferFundsButton).toBeEnabled(); transferFundsButton.click(); - expect(history.location.pathname).toEqual('/wallets/cashier/transfer'); + expect(history.location.pathname).toEqual('/wallet/account-transfer'); }); it('should render the onfido verification pending message if document is not verified', () => { diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx index 03d83527b873..97a1ec3e40ec 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx @@ -19,7 +19,7 @@ export const SuccessModalFooter = ({ isDemo }: Pick) => { const handleOnClickReal = () => { hide(); - history.push('/wallets/cashier/transfer'); + history.push('/wallet/account-transfer'); }; if (isDemo) { diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx index cf02debb9e80..bebd2e202417 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx @@ -26,7 +26,7 @@ const CompareAccountsHeader = ({ isDemo, isEuRegion }: TCompareAccountsHeader) = { - history.push('/wallets'); + history.push('/'); }} />
diff --git a/packages/wallets/src/public/images/no-wallet.svg b/packages/wallets/src/public/images/no-wallet.svg deleted file mode 100644 index 1775e7f8e911..000000000000 --- a/packages/wallets/src/public/images/no-wallet.svg +++ /dev/null @@ -1,1048 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/wallets/src/routes/Router.tsx b/packages/wallets/src/routes/Router.tsx index 88bd2c7f1672..982046899325 100644 --- a/packages/wallets/src/routes/Router.tsx +++ b/packages/wallets/src/routes/Router.tsx @@ -1,51 +1,40 @@ import React, { lazy } from 'react'; import { Route, Switch } from 'react-router-dom'; -import { useWalletAccountsList } from '@deriv/api-v2'; import { Loader } from '../components/Loader'; -const LazyWalletsNotFoundState = lazy( - () => - import( - /* webpackChunkName: "wallets-not-found-route" */ '../components/WalletNoWalletFoundState/WalletNoWalletFoundState' - ) -); - const LazyWalletsListingRoute = lazy( () => import(/* webpackChunkName: "wallets-listing-route" */ './WalletsListingRoute/WalletsListingRoute') ); const LazyCashierModalRoute = lazy( () => import(/* webpackChunkName: "cashier-modal-route" */ './CashierModalRoute/CashierModalRoute') ); - const LazyCompareAccountsRoute = lazy( () => import(/* webpackChunkName: "compare-accounts-route" */ './CompareAccountsRoute/CompareAccountsRoute') ); -const walletsPrefix = '/wallets'; - type TWalletsRoute = - | '' - | '/cashier' - | '/cashier/deposit' - | '/cashier/on-ramp' - | '/cashier/reset-balance' - | '/cashier/transactions' - | '/cashier/transfer' - | '/cashier/withdraw' - | '/compare-accounts'; - -export type TRoute = '/endpoint' | `?${string}` | `${typeof walletsPrefix}${TWalletsRoute}`; + | '/' + | '/compare-accounts' + | '/wallet' + | '/wallet/account-transfer' + | '/wallet/deposit' + | '/wallet/on-ramp' + | '/wallet/reset-balance' + | '/wallet/transactions' + | '/wallet/withdrawal'; + +export type TRoute = '/endpoint' | `?${string}` | `${TWalletsRoute}`; // wallets routes which have their states interface WalletsRouteState { - '/cashier/transactions': { showPending: boolean; transactionType: 'deposit' | 'withdrawal' }; - '/cashier/transfer': { shouldSelectDefaultWallet: boolean; toAccountLoginId: string }; + '/wallet/account-transfer': { shouldSelectDefaultWallet: boolean; toAccountLoginId: string }; + '/wallet/transactions': { showPending: boolean; transactionType: 'deposit' | 'withdrawal' }; } -type TStatefulRoute = TRoute & `${typeof walletsPrefix}${keyof WalletsRouteState}`; +type TStatefulRoute = TRoute & `${keyof WalletsRouteState}`; type TRouteState = { - [T in TStatefulRoute]: T extends `${typeof walletsPrefix}${infer R extends keyof WalletsRouteState}` + [T in TStatefulRoute]: T extends `${infer R extends keyof WalletsRouteState}` ? Partial : never; }; @@ -70,24 +59,10 @@ declare module 'react-router-dom' { } const Router: React.FC = () => { - const { data: walletAccounts, isLoading } = useWalletAccountsList(); - - if ((!walletAccounts || !walletAccounts.length) && !isLoading) - return ( - ( - }> - - - )} - /> - ); - return ( ( }> @@ -95,7 +70,7 @@ const Router: React.FC = () => { )} /> ( }> @@ -103,7 +78,7 @@ const Router: React.FC = () => { )} /> ( }> From bcfbd607de025b7d6470c080cecbf13cd2293ea6 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Fri, 17 May 2024 11:35:59 +0400 Subject: [PATCH 49/65] fix: change route order to fix old TH route redirect --- packages/core/src/App/Constants/routes-config.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js index 01fbe5d92052..8690420fcd48 100644 --- a/packages/core/src/App/Constants/routes-config.js +++ b/packages/core/src/App/Constants/routes-config.js @@ -410,6 +410,12 @@ const getModules = () => { { path: routes.error404, component: Trader, getTitle: () => localize('Error 404') }, ], }, + { + path: routes.old_traders_hub, + component: RedirectToNewTradersHub, + is_authenticated: false, + getTitle: () => localize("Trader's Hub"), + }, { path: routes.traders_hub, component: AppStore, @@ -424,12 +430,6 @@ const getModules = () => { }, ], }, - { - path: routes.old_traders_hub, - component: RedirectToNewTradersHub, - is_authenticated: false, - getTitle: () => localize("Trader's Hub"), - }, ]; return modules; From 34dfb2a7f45f0ee10abfc547b06a8c0b7b78c842 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Fri, 17 May 2024 13:12:45 +0300 Subject: [PATCH 50/65] feat: add redirection to dtrader --- packages/core/src/Stores/client-store.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 84c9cffd00ea..84d89505dcc1 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -1548,6 +1548,11 @@ export default class ClientStore extends BaseStore { '_filteredParams', ]; + // redirect to the DTrader of there is needed query params + if (!window.location.pathname.endsWith(routes.trade) && /chart_type|interval|symbol|trade_type/.test(search)) { + window.history.replaceState({}, document.title, routes.trade + search); + } + const authorize_response = await this.setUserLogin(login_new_user); if (action_param === 'signup') { From 0b151583aa0ef9f8f08b346759e4721f0860d91a Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Fri, 17 May 2024 15:28:20 +0400 Subject: [PATCH 51/65] fix: wallet_transfer route in shared --- packages/shared/src/utils/routes/routes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/utils/routes/routes.ts b/packages/shared/src/utils/routes/routes.ts index 448e864cf9da..e1d4ee7d5da4 100644 --- a/packages/shared/src/utils/routes/routes.ts +++ b/packages/shared/src/utils/routes/routes.ts @@ -80,7 +80,7 @@ export const routes = { wallets: '/wallet', wallets_deposit: '/wallet/deposit', wallets_withdrawal: '/wallet/withdrawal', - wallets_transfer: 'wallet/account-transfer', + wallets_transfer: '/wallet/account-transfer', wallets_transactions: '/wallet/transactions', wallets_compare_accounts: '/compare-accounts', wallets_on_ramp: '/wallet/on-ramp', From 737a23538f1af4dc1abd09438e29d94da73b525f Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Fri, 17 May 2024 16:05:25 +0400 Subject: [PATCH 52/65] chore: code clean-up --- .../src/components/routes/route-with-sub-routes.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/appstore/src/components/routes/route-with-sub-routes.jsx b/packages/appstore/src/components/routes/route-with-sub-routes.jsx index cb24747d84c7..270980a20d84 100644 --- a/packages/appstore/src/components/routes/route-with-sub-routes.jsx +++ b/packages/appstore/src/components/routes/route-with-sub-routes.jsx @@ -4,10 +4,20 @@ import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title import { getLanguage } from '@deriv/translations'; import Page404 from 'Modules/Page404'; +const wallet_routes = [ + routes.wallets, + routes.wallets_deposit, + routes.wallets_withdrawal, + routes.wallets_transfer, + routes.wallets_transactions, + routes.wallets_compare_accounts, + routes.wallets_on_ramp, + routes.wallets_reset_balance, +]; const RouteWithSubRoutes = route => { const validateRoute = pathname => { if (pathname === '') return true; - return route.path === pathname || !!pathname.includes('wallet') || !!pathname.includes('compare-accounts'); + return route.path === pathname || wallet_routes.some(route => route == pathname); }; const renderFactory = props => { From 454d84b2eeb8a20795b2f13d42f2faf9d9374cde Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Fri, 17 May 2024 18:30:18 +0400 Subject: [PATCH 53/65] chore: more code clean-up --- packages/appstore/src/components/routes/routes.tsx | 3 +-- .../src/App/Components/Layout/Header/toggle-menu-drawer.jsx | 6 ++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx index c33d10bc6eb2..33d0acb35178 100644 --- a/packages/appstore/src/components/routes/routes.tsx +++ b/packages/appstore/src/components/routes/routes.tsx @@ -22,8 +22,7 @@ const Routes: React.FC = observer(() => { const componentToRender = () => { if (is_logged_in || is_logging_in) { - if (has_wallet) return Wallets; - return TradersHub; + return has_wallet ? Wallets : TradersHub; } return TradersHubLoggedOut; }; diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx index c3a9c564491f..d33d5c603a8b 100644 --- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx +++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx @@ -107,10 +107,8 @@ const ToggleMenuDrawer = observer(({ platform_config }) => { const location = window.location.pathname; - if (has_wallet && location === is_trading_hub_category) { - primary_routes = [routes.reports, routes.account]; - } else if (location === is_trading_hub_category) { - primary_routes = [routes.account, routes.cashier]; + if (location === is_trading_hub_category) { + primary_routes = has_wallet ? [routes.reports, routes.account] : [routes.account, routes.cashier]; } else { primary_routes = [routes.reports, routes.account, routes.cashier]; } From 185d2fbd1c858c7587b3bb953d4f5a13abd2ed24 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Mon, 20 May 2024 18:31:33 +0400 Subject: [PATCH 54/65] fix: move wallets check out of appstore Co-authored-by: Aum --- .../routes/route-with-sub-routes.jsx | 19 +------ .../appstore/src/components/routes/routes.tsx | 9 ++-- .../src/containers/routes/binary-routes.tsx | 10 +++- .../core/src/App/Constants/routes-config.js | 18 +------ .../src/App/Containers/RootComponent/index.js | 3 ++ .../RootComponent/root-component.jsx | 26 ++++++++++ packages/wallets/src/AppContent.scss | 2 +- .../src/components/Page404/Page404.scss | 5 ++ .../src/components/Page404/Page404.tsx | 49 +++++++++++++++++++ .../wallets/src/components/Page404/index.ts | 1 + .../CompareAccountsRoute.scss | 1 - packages/wallets/src/routes/Router.tsx | 4 ++ .../WalletsListingRoute.scss | 1 - 13 files changed, 106 insertions(+), 42 deletions(-) create mode 100644 packages/core/src/App/Containers/RootComponent/index.js create mode 100644 packages/core/src/App/Containers/RootComponent/root-component.jsx create mode 100644 packages/wallets/src/components/Page404/Page404.scss create mode 100644 packages/wallets/src/components/Page404/Page404.tsx create mode 100644 packages/wallets/src/components/Page404/index.ts diff --git a/packages/appstore/src/components/routes/route-with-sub-routes.jsx b/packages/appstore/src/components/routes/route-with-sub-routes.jsx index 270980a20d84..371656e8a19b 100644 --- a/packages/appstore/src/components/routes/route-with-sub-routes.jsx +++ b/packages/appstore/src/components/routes/route-with-sub-routes.jsx @@ -2,29 +2,12 @@ import React from 'react'; import { Redirect, Route } from 'react-router-dom'; import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title } from '@deriv/shared'; import { getLanguage } from '@deriv/translations'; -import Page404 from 'Modules/Page404'; -const wallet_routes = [ - routes.wallets, - routes.wallets_deposit, - routes.wallets_withdrawal, - routes.wallets_transfer, - routes.wallets_transactions, - routes.wallets_compare_accounts, - routes.wallets_on_ramp, - routes.wallets_reset_balance, -]; const RouteWithSubRoutes = route => { - const validateRoute = pathname => { - if (pathname === '') return true; - return route.path === pathname || wallet_routes.some(route => route == pathname); - }; - const renderFactory = props => { let result = null; const pathname = removeBranchName(location.pathname); - const is_valid_route = validateRoute(pathname); if (route.component instanceof Redirect) { let to = route.to; @@ -50,7 +33,7 @@ const RouteWithSubRoutes = route => { result = ( {has_default_subroute && pathname === route.path && } - {is_valid_route ? : } + {} ); } diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx index 33d0acb35178..5e9773354107 100644 --- a/packages/appstore/src/components/routes/routes.tsx +++ b/packages/appstore/src/components/routes/routes.tsx @@ -11,18 +11,18 @@ const TradersHub = React.lazy(() => import(/* webpackChunkName: "modules-traders const TradersHubLoggedOut = React.lazy( () => import(/* webpackChunkName: "modules-traders-hub-logged-out" */ 'Modules/traders-hub-logged-out') ); -const Wallets = React.lazy(() => import(/* webpackChunkName: "wallets" */ '@deriv/wallets')); +const Page404 = React.lazy(() => import(/* */ 'Modules/Page404')); const Routes: React.FC = observer(() => { const { client } = useStore(); - const { is_logged_in, is_logging_in, has_wallet } = client; + const { is_logged_in, is_logging_in } = client; const title_TH = localize("Trader's Hub"); const title_TH_logged_out = localize('Deriv App'); const componentToRender = () => { if (is_logged_in || is_logging_in) { - return has_wallet ? Wallets : TradersHub; + return TradersHub; } return TradersHubLoggedOut; }; @@ -32,14 +32,17 @@ const Routes: React.FC = observer(() => { (is_logged_in || is_logging_in ? title_TH : title_TH_logged_out)} /> localize('Onboarding')} /> + localize('Deriv App')} /> ); diff --git a/packages/cashier/src/containers/routes/binary-routes.tsx b/packages/cashier/src/containers/routes/binary-routes.tsx index b9aaad547a30..a72047a6c75b 100644 --- a/packages/cashier/src/containers/routes/binary-routes.tsx +++ b/packages/cashier/src/containers/routes/binary-routes.tsx @@ -1,10 +1,12 @@ import React, { useEffect } from 'react'; import { Switch } from 'react-router-dom'; +import { useFeatureFlags } from '@deriv/hooks'; +import { routes } from '@deriv/shared'; +import { useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; +import Page404 from 'Components/page-404'; import getRoutesConfig from 'Constants/routes-config'; import RouteWithSubRoutes from './route-with-sub-routes'; -import { useFeatureFlags } from '@deriv/hooks'; -import { routes } from '@deriv/shared'; type TBinaryRoutesProps = { is_logged_in: boolean; @@ -30,6 +32,8 @@ const cashierV2RoutesConfig = { const BinaryRoutes = (props: TBinaryRoutesProps) => { const { is_p2p_v2_enabled } = useFeatureFlags(); const [routesConfig, setRoutesConfig] = React.useState(getRoutesConfig()); + const { client } = useStore(); + const { has_wallet } = client; useEffect(() => { const isRouteAdded = (routePath: string) => routesConfig[0].routes?.some(route => route.path === routePath); @@ -43,6 +47,8 @@ const BinaryRoutes = (props: TBinaryRoutesProps) => { } }, [is_p2p_v2_enabled, routesConfig]); + if (has_wallet) return ; + return ( }> diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js index 8690420fcd48..9666e6e43a51 100644 --- a/packages/core/src/App/Constants/routes-config.js +++ b/packages/core/src/App/Constants/routes-config.js @@ -4,6 +4,7 @@ import { makeLazyLoader, routes, moduleLoader } from '@deriv/shared'; import { Loading } from '@deriv/components'; import { localize } from '@deriv/translations'; import Redirect from 'App/Containers/Redirect'; +import RootComponent from 'App/Containers/RootComponent'; import Endpoint from 'Modules/Endpoint'; const CFDCompareAccounts = React.lazy(() => @@ -53,13 +54,6 @@ const Bot = React.lazy(() => }) ); -const AppStore = React.lazy(() => - moduleLoader(() => { - // eslint-disable-next-line import/no-unresolved - return import(/* webpackChunkName: "appstore" */ '@deriv/appstore'); - }) -); - const TradersHub = React.lazy(() => moduleLoader(() => { // eslint-disable-next-line import/no-unresolved @@ -418,17 +412,9 @@ const getModules = () => { }, { path: routes.traders_hub, - component: AppStore, + component: RootComponent, is_authenticated: false, getTitle: () => localize("Trader's Hub"), - routes: [ - { - path: routes.onboarding, - component: AppStore, - is_authenticated: true, - getTitle: () => localize("Trader's Hub"), - }, - ], }, ]; diff --git a/packages/core/src/App/Containers/RootComponent/index.js b/packages/core/src/App/Containers/RootComponent/index.js new file mode 100644 index 000000000000..d807a1fc3997 --- /dev/null +++ b/packages/core/src/App/Containers/RootComponent/index.js @@ -0,0 +1,3 @@ +import RootComponent from './root-component.jsx'; + +export default RootComponent; diff --git a/packages/core/src/App/Containers/RootComponent/root-component.jsx b/packages/core/src/App/Containers/RootComponent/root-component.jsx new file mode 100644 index 000000000000..8a46dac2ed87 --- /dev/null +++ b/packages/core/src/App/Containers/RootComponent/root-component.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { moduleLoader } from '@deriv/shared'; +import { observer, useStore } from '@deriv/stores'; + +const AppStore = React.lazy(() => + moduleLoader(() => { + // eslint-disable-next-line import/no-unresolved + return import(/* webpackChunkName: "appstore" */ '@deriv/appstore'); + }) +); + +const Wallets = React.lazy(() => + moduleLoader(() => { + // eslint-disable-next-line import/no-unresolved + return import(/* webpackChunkName: "wallets" */ '@deriv/wallets'); + }) +); + +const RootComponent = observer(props => { + const { client } = useStore(); + const { has_wallet } = client; + + return has_wallet ? : ; +}); + +export default RootComponent; diff --git a/packages/wallets/src/AppContent.scss b/packages/wallets/src/AppContent.scss index e7855a5e5a3d..471a0417d705 100644 --- a/packages/wallets/src/AppContent.scss +++ b/packages/wallets/src/AppContent.scss @@ -5,7 +5,7 @@ gap: 2.4rem; width: 100%; align-self: stretch; - background: var(--system-light-7-secondary-background, #f2f3f4); + background-color: var(--general-main-1, #ffffff); min-height: calc(100vh - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer) @include mobile { diff --git a/packages/wallets/src/components/Page404/Page404.scss b/packages/wallets/src/components/Page404/Page404.scss new file mode 100644 index 000000000000..5cef58c4a322 --- /dev/null +++ b/packages/wallets/src/components/Page404/Page404.scss @@ -0,0 +1,5 @@ +.wallets-page-404 { + display: flex; + align-items: center; + height: calc(100vh - 8.4rem); +} diff --git a/packages/wallets/src/components/Page404/Page404.tsx b/packages/wallets/src/components/Page404/Page404.tsx new file mode 100644 index 000000000000..0f516223f761 --- /dev/null +++ b/packages/wallets/src/components/Page404/Page404.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { Trans } from 'react-i18next'; +import { useHistory } from 'react-router-dom'; +import useDevice from '../../hooks/useDevice'; +import { WalletButton, WalletText } from '../Base'; +import { WalletsActionScreen } from '../WalletsActionScreen'; +import './Page404.scss'; + +const Page404 = () => { + const { isMobile } = useDevice(); + const titleSize = isMobile ? 'md' : '2xl'; + const descriptionSize = isMobile ? 'sm' : 'md'; + const buttonSize = isMobile ? 'lg' : 'md'; + const buttonTextSize = isMobile ? 'md' : 'sm'; + + const history = useHistory(); + + const errorImage = isMobile ? ( + {'404'} + ) : ( + {'404'} + ); + + return ( +
+ ( + { + history.push('/'); + }} + size={buttonSize} + > + + + + + )} + title="We couldn't find that page" + titleSize={titleSize} + /> +
+ ); +}; + +export default Page404; diff --git a/packages/wallets/src/components/Page404/index.ts b/packages/wallets/src/components/Page404/index.ts new file mode 100644 index 000000000000..2cdfcb114cb8 --- /dev/null +++ b/packages/wallets/src/components/Page404/index.ts @@ -0,0 +1 @@ +export { default as Page404 } from './Page404'; diff --git a/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss b/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss index 8ed1dff5d080..2d9d38c31d07 100644 --- a/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss +++ b/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss @@ -1,5 +1,4 @@ .wallets-compare-accounts-route { - background-color: #ffffff; width: 100%; height: 100vh; overflow-x: hidden; diff --git a/packages/wallets/src/routes/Router.tsx b/packages/wallets/src/routes/Router.tsx index 982046899325..ec1bfed30c8b 100644 --- a/packages/wallets/src/routes/Router.tsx +++ b/packages/wallets/src/routes/Router.tsx @@ -1,6 +1,7 @@ import React, { lazy } from 'react'; import { Route, Switch } from 'react-router-dom'; import { Loader } from '../components/Loader'; +import { Page404 } from '../components/Page404'; const LazyWalletsListingRoute = lazy( () => import(/* webpackChunkName: "wallets-listing-route" */ './WalletsListingRoute/WalletsListingRoute') @@ -62,6 +63,7 @@ const Router: React.FC = () => { return ( ( }> @@ -78,6 +80,7 @@ const Router: React.FC = () => { )} /> ( }> @@ -85,6 +88,7 @@ const Router: React.FC = () => { )} /> + } /> ); }; diff --git a/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.scss b/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.scss index a67c934bf29b..ef36f24ba547 100644 --- a/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.scss +++ b/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.scss @@ -6,7 +6,6 @@ flex-direction: column; align-items: center; justify-content: center; - background-color: var(--general-main-1, #ffffff); padding: 0 4rem; @include mobile { From 03522fa8be46803a12678e952ca56414dc2830ff Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Mon, 20 May 2024 18:34:26 +0400 Subject: [PATCH 55/65] chore: reset file to base branch --- .../appstore/src/components/routes/route-with-sub-routes.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/appstore/src/components/routes/route-with-sub-routes.jsx b/packages/appstore/src/components/routes/route-with-sub-routes.jsx index 371656e8a19b..f70de7445d92 100644 --- a/packages/appstore/src/components/routes/route-with-sub-routes.jsx +++ b/packages/appstore/src/components/routes/route-with-sub-routes.jsx @@ -7,8 +7,6 @@ const RouteWithSubRoutes = route => { const renderFactory = props => { let result = null; - const pathname = removeBranchName(location.pathname); - if (route.component instanceof Redirect) { let to = route.to; @@ -29,11 +27,12 @@ const RouteWithSubRoutes = route => { {} ); const has_default_subroute = !isEmptyObject(default_subroute); + const pathname = removeBranchName(location.pathname); result = ( {has_default_subroute && pathname === route.path && } - {} + ); } From 66033c3510284be3d7ef33c33e41ce58dc536a34 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Mon, 20 May 2024 19:36:06 +0400 Subject: [PATCH 56/65] fix: compare account route height and hover shadow clipping --- .../CompareAccountsCarousel/CompareAccountsCarousel.scss | 1 + .../src/routes/CompareAccountsRoute/CompareAccountsRoute.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss index b0c9941458aa..c3ce848b922e 100644 --- a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss +++ b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss @@ -15,5 +15,6 @@ max-height: auto; margin-left: calc(var(--slide-spacing) * -1); transition: transform 0s ease-in-out; + padding-bottom: 0.8rem; } } diff --git a/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss b/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss index 2d9d38c31d07..9629bafe61b6 100644 --- a/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss +++ b/packages/wallets/src/routes/CompareAccountsRoute/CompareAccountsRoute.scss @@ -1,5 +1,5 @@ .wallets-compare-accounts-route { width: 100%; - height: 100vh; + height: calc(100vh - 8.4rem); overflow-x: hidden; } From dd561e221dace0ca6424b19d1fdef1cd118caa62 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Tue, 21 May 2024 10:45:10 +0300 Subject: [PATCH 57/65] chore: remove unused import --- .../App/Containers/Layout/header/traders-hub-header-wallets.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/App/Containers/Layout/header/traders-hub-header-wallets.tsx b/packages/core/src/App/Containers/Layout/header/traders-hub-header-wallets.tsx index 811ea292f3e7..9df90855b50f 100644 --- a/packages/core/src/App/Containers/Layout/header/traders-hub-header-wallets.tsx +++ b/packages/core/src/App/Containers/Layout/header/traders-hub-header-wallets.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import classNames from 'classnames'; import { DesktopWrapper, Icon, MobileWrapper, Popover, StaticUrl } from '@deriv/components'; -import { routes, platforms, formatMoney } from '@deriv/shared'; +import { routes, platforms } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { Localize } from '@deriv/translations'; import { MenuLinks } from 'App/Components/Layout/Header'; From 514cb57c2357cd4769491bd254550ab5d8c1a226 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Tue, 21 May 2024 11:19:17 +0300 Subject: [PATCH 58/65] fix: repair wallet tests --- .../modules/Transactions/__tests__/Transactions.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/__tests__/Transactions.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/__tests__/Transactions.spec.tsx index a000150559d5..e79466843d22 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/__tests__/Transactions.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/__tests__/Transactions.spec.tsx @@ -55,7 +55,7 @@ describe('Transactions', () => { }); (useCurrencyConfig as jest.Mock).mockReturnValue({ isLoading: false }); (useHistory as jest.Mock).mockReturnValue({ - location: { pathname: '/wallets/cashier/transactions' }, + location: { pathname: '/wallet/transactions' }, }); render(); @@ -70,7 +70,7 @@ describe('Transactions', () => { }); (useCurrencyConfig as jest.Mock).mockReturnValue({ isLoading: false }); (useHistory as jest.Mock).mockReturnValue({ - location: { pathname: '/wallets/cashier/transactions', state: { showPending: true } }, + location: { pathname: '/wallet/transactions', state: { showPending: true } }, }); render(); @@ -125,7 +125,7 @@ describe('Transactions', () => { (useCurrencyConfig as jest.Mock).mockReturnValue({ isLoading: false }); (useHistory as jest.Mock).mockReturnValue({ location: { - pathname: '/wallets/cashier/transactions', + pathname: '/wallet/transactions', state: { showPending: true, transactionType: 'invalidFilter' }, }, }); @@ -146,7 +146,7 @@ describe('Transactions', () => { (useCurrencyConfig as jest.Mock).mockReturnValue({ isLoading: false }); (useHistory as jest.Mock).mockReturnValue({ location: { - pathname: '/wallets/cashier/transactions', + pathname: '/wallet/transactions', state: { showPending: false, transactionType: 'invalidFilter' }, }, }); From 7a67227099b165be907b0dc7c6f348c62e534bf4 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Wed, 22 May 2024 13:32:32 +0300 Subject: [PATCH 59/65] fix: add logged_in_app_platform and logged_out_app_platform --- .../src/components/containers/trading-app-card.tsx | 9 +++++++-- .../options-multipliers-listing-logged-out.tsx | 3 +-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index a8fc0eba04c8..84565c4597a1 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -49,14 +49,19 @@ const TradingAppCard = ({ const { is_eu_user, is_real, selected_account_type } = traders_hub; const { current_language } = common; const { is_account_being_created } = cfd; - const { account_status: { authentication } = {} } = client; + const { account_status: { authentication } = {}, is_logged_in } = client; const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false); const available_platforms = getAvailablePlatforms(); const demo_label = localize('Demo'); - const app_platform = available_platforms.includes('options') ? getAppstorePlatforms() : getMFAppstorePlatforms(); + const logged_in_app_platform = available_platforms.includes('options') + ? getAppstorePlatforms() + : getMFAppstorePlatforms(); + const logged_out_app_platform = is_eu_user ? getMFAppstorePlatforms() : getAppstorePlatforms(); + + const app_platform = is_logged_in ? logged_in_app_platform : logged_out_app_platform; const { app_desc, link_to, is_external, new_tab } = app_platform.find(config => config.name === name) || { app_desc: description, diff --git a/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx b/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx index d263a59617c8..db72a05de2ab 100644 --- a/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx +++ b/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react-lite'; -import { useStore } from '@deriv/stores'; +import { useStore, observer } from '@deriv/stores'; import ListingContainer from 'Components/containers/listing-container'; import TradingAppCard from 'Components/containers/trading-app-card'; import OptionsDescription from 'Components/elements/options-description'; From 77ca35f4b3ba65754606fd9cde9457803fb6a051 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Wed, 22 May 2024 15:22:37 +0300 Subject: [PATCH 60/65] feat: show content for incognito --- .../options-multipliers-listing-logged-out.tsx | 10 ++++++++-- packages/core/src/Stores/traders-hub-store.js | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx b/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx index db72a05de2ab..3389cefcd389 100644 --- a/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx +++ b/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx @@ -6,18 +6,24 @@ import OptionsDescription from 'Components/elements/options-description'; import OptionsTitle from 'Components/elements/options-title'; import { BrandConfig } from 'Constants/platform-config'; import { getHasDivider } from 'Constants/utils'; +import { isEuCountry } from '@deriv/shared'; import './options-multipliers-listing-logged-out.scss'; const OptionsAndMultipliersListingLoggedOut = observer(() => { - const { traders_hub } = useStore(); + const { traders_hub, client } = useStore(); + const { clients_country } = client; const { available_platforms, is_eu_user } = traders_hub; + const logged_out_available_platforms = isEuCountry(clients_country) + ? available_platforms.filter(platform => ['EU', 'All'].some(region => region === platform.availability)) + : available_platforms.filter(platform => ['Non-EU', 'All'].some(region => region === platform.availability)); + return ( } description={} > - {available_platforms.map((available_platform: BrandConfig, index: number) => ( + {logged_out_available_platforms.map((available_platform: BrandConfig, index: number) => ( Date: Wed, 22 May 2024 16:43:01 +0400 Subject: [PATCH 61/65] chore: refactor routes.ts for better readability --- packages/shared/src/utils/routes/routes.ts | 43 +++++++++++++--------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/shared/src/utils/routes/routes.ts b/packages/shared/src/utils/routes/routes.ts index e1d4ee7d5da4..105e70633ad1 100644 --- a/packages/shared/src/utils/routes/routes.ts +++ b/packages/shared/src/utils/routes/routes.ts @@ -1,7 +1,23 @@ import { getUrlSmartTrader, getUrlBinaryBot } from '../url/helpers'; export const routes = { + reset_password: '/', error404: '/404', + index: '/index', + redirect: '/redirect', + endpoint: '/endpoint', + complaints_policy: '/complaints-policy', + contract: '/contract/:contract_id', + + // platforms + mt5: '/mt5', + dxtrade: '/derivx', + bot: '/bot', + trade: '/dtrader', + smarttrader: getUrlSmartTrader(), + binarybot: getUrlBinaryBot(), + + // account account: '/account', trading_assessment: '/account/trading-assessment', languages: '/account/languages', @@ -22,28 +38,26 @@ export const routes = { login_history: '/account/login-history', two_factor_authentication: '/account/two-factor-authentication', self_exclusion: '/account/self-exclusion', + + // settings + settings: '/settings', account_password: '/settings/account_password', apps: '/settings/apps', cashier_password: '/settings/cashier_password', - contract: '/contract/:contract_id', exclusion: '/settings/exclusion', financial: '/settings/financial', history: '/settings/history', - index: '/index', limits: '/settings/limits', - mt5: '/mt5', - dxtrade: '/derivx', + token: '/settings/token', personal: '/settings/personal', + + // reports + reports: '/reports', positions: '/reports/positions', profit: '/reports/profit', - reports: '/reports', - reset_password: '/', - redirect: '/redirect', - settings: '/settings', statement: '/reports/statement', - token: '/settings/token', - trade: '/dtrader', - bot: '/bot', + + // cashier cashier: '/cashier', cashier_deposit: '/cashier/deposit', cashier_withdrawal: '/cashier/withdrawal', @@ -54,6 +68,7 @@ export const routes = { cashier_onramp: '/cashier/on-ramp', cashier_p2p: '/cashier/p2p', cashier_p2p_v2: '/cashier/p2p-v2', + cashier_pa_transfer: '/cashier/payment-agent-transfer', // P2P p2p_verification: '/cashier/p2p/verification', @@ -64,12 +79,6 @@ export const routes = { p2p_advertiser_page: '/cashier/p2p/advertiser', p2p_v2_inner: '/cashier/p2p-v2/inner', - cashier_pa_transfer: '/cashier/payment-agent-transfer', - smarttrader: getUrlSmartTrader(), - binarybot: getUrlBinaryBot(), - endpoint: '/endpoint', - complaints_policy: '/complaints-policy', - // Appstore old_traders_hub: '/appstore/traders-hub', traders_hub: '/', From 66037f426126a1e3dfe027b7f85b58c82e739ae3 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Wed, 22 May 2024 16:46:40 +0400 Subject: [PATCH 62/65] fix: insufficient balance modal button routing --- .../__tests__/default-mobile-links.spec.tsx | 3 +- .../insufficient-balance-modal.spec.tsx | 43 +++++++++------- .../insufficient-balance-modal.tsx | 4 +- .../insufficient-balance-modal.spec.tsx | 49 ++++++++++++------- .../insufficient-balance-modal.tsx | 4 +- 5 files changed, 65 insertions(+), 38 deletions(-) diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx index 64088d668d13..bf9dfec47eb7 100644 --- a/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx +++ b/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx @@ -4,6 +4,7 @@ import { BrowserHistory, createBrowserHistory } from 'history'; import { Router } from 'react-router'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { routes } from '@deriv/shared'; import DefaultMobileLinks from '../default-mobile-links'; import { useIsRealAccountNeededForCashier } from '@deriv/hooks'; @@ -72,6 +73,6 @@ describe('DefaultMobileLinks', () => { render(, { wrapper }); const cashierButton = screen.getByRole('button', { name: 'Cashier' }); userEvent.click(cashierButton); - expect(history.location.pathname).toBe('/cashier/deposit'); + expect(history.location.pathname).toBe(routes.cashier_deposit); }); }); diff --git a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx index fe4cdde3c975..9db5a1c8c48b 100644 --- a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx +++ b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx @@ -3,6 +3,7 @@ import { screen, render } from '@testing-library/react'; import InsufficientBalanceModal from '../insufficient-balance-modal'; import { createBrowserHistory } from 'history'; import { Router } from 'react-router-dom'; +import { StoreProvider, mockStore } from '@deriv/stores'; import { routes } from '@deriv/shared'; import userEvent from '@testing-library/user-event'; @@ -19,16 +20,6 @@ type TModal = React.FC<{ }>; }; -jest.mock('@deriv/stores', () => ({ - ...jest.requireActual('@deriv/stores'), - observer: jest.fn(x => x), - useStore: jest.fn(() => ({ - ui: { - is_mobile: false, - }, - })), -})); - jest.mock('@deriv/components', () => { const original_module = jest.requireActual('@deriv/components'); const Modal: TModal = jest.fn(({ children, is_open, title }) => { @@ -58,35 +49,51 @@ describe('', () => { message: 'test', toggleModal: jest.fn(), }; + let mock_store: ReturnType; + + beforeEach(() => { + mock_store = mockStore({ + client: { has_wallet: false }, + ui: { + is_mobile: false, + }, + }); + }); const history = createBrowserHistory(); - const renderWithRouter = (component: React.ReactElement) => { - return render({component}); + + const wrapper = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); }; it('modal title, and modal description should be rendered', () => { - renderWithRouter(); + render(, { wrapper }); expect(screen.getByText(/insufficient balance/i)).toBeInTheDocument(); expect(screen.getByText(/test/i)).toBeInTheDocument(); }); it('button text should be OK if is_virtual is true and toggleModal should be called if user clicks on the button', () => { - renderWithRouter(); + render(, { wrapper }); const button = screen.getByText(/ok/i); expect(button).toBeInTheDocument(); userEvent.click(button); expect(mocked_props.toggleModal).toHaveBeenCalled(); }); - it('button text should be "Deposit now" if is_virtual is false and should navigate to bla bla if you click on the button', () => { + it('button text should be "Deposit now" if is_virtual is false and should navigate to wallets overlay deposit tab if client has CRW account and click on the button', () => { mocked_props.is_virtual = false; - renderWithRouter(); + mock_store.client.has_wallet = true; + render(, { wrapper }); const button = screen.getByText(/deposit now/i); expect(button).toBeInTheDocument(); userEvent.click(button); - expect(history.location.pathname).toBe(routes.cashier_deposit); + expect(history.location.pathname).toBe(routes.wallets_deposit); }); it('should return null when is_visible is false', () => { mocked_props.is_visible = false; - const { container } = renderWithRouter(); + const { container } = render(, { wrapper }); expect(container).toBeEmptyDOMElement(); }); }); diff --git a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx index 349ec805ad09..613a80d9c015 100644 --- a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx +++ b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx @@ -16,7 +16,9 @@ const InsufficientBalanceModal = observer( ({ history, is_virtual, is_visible, message, toggleModal }: TInsufficientBalanceModal) => { const { ui: { is_mobile }, + client, } = useStore(); + const { has_wallet } = client; return ( { if (!is_virtual) { - history?.push?.(routes.cashier_deposit); + history?.push?.(has_wallet ? routes.wallets_deposit : routes.cashier_deposit); } else { toggleModal(); } diff --git a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx index fe4cdde3c975..22091acaddd1 100644 --- a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx +++ b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx @@ -3,6 +3,7 @@ import { screen, render } from '@testing-library/react'; import InsufficientBalanceModal from '../insufficient-balance-modal'; import { createBrowserHistory } from 'history'; import { Router } from 'react-router-dom'; +import { StoreProvider, mockStore } from '@deriv/stores'; import { routes } from '@deriv/shared'; import userEvent from '@testing-library/user-event'; @@ -19,16 +20,6 @@ type TModal = React.FC<{ }>; }; -jest.mock('@deriv/stores', () => ({ - ...jest.requireActual('@deriv/stores'), - observer: jest.fn(x => x), - useStore: jest.fn(() => ({ - ui: { - is_mobile: false, - }, - })), -})); - jest.mock('@deriv/components', () => { const original_module = jest.requireActual('@deriv/components'); const Modal: TModal = jest.fn(({ children, is_open, title }) => { @@ -58,35 +49,59 @@ describe('', () => { message: 'test', toggleModal: jest.fn(), }; + let mock_store: ReturnType; + + beforeEach(() => { + mock_store = mockStore({ + client: { has_wallet: false }, + ui: { + is_mobile: false, + }, + }); + }); const history = createBrowserHistory(); - const renderWithRouter = (component: React.ReactElement) => { - return render({component}); + + const wrapper = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); }; it('modal title, and modal description should be rendered', () => { - renderWithRouter(); + render(, { wrapper }); expect(screen.getByText(/insufficient balance/i)).toBeInTheDocument(); expect(screen.getByText(/test/i)).toBeInTheDocument(); }); it('button text should be OK if is_virtual is true and toggleModal should be called if user clicks on the button', () => { - renderWithRouter(); + render(, { wrapper }); const button = screen.getByText(/ok/i); expect(button).toBeInTheDocument(); userEvent.click(button); expect(mocked_props.toggleModal).toHaveBeenCalled(); }); - it('button text should be "Deposit now" if is_virtual is false and should navigate to bla bla if you click on the button', () => { + it('button text should be "Deposit now" if is_virtual is false and should navigate to cashier deposit page if client has CR account and click on the button', () => { mocked_props.is_virtual = false; - renderWithRouter(); + render(, { wrapper }); const button = screen.getByText(/deposit now/i); expect(button).toBeInTheDocument(); userEvent.click(button); expect(history.location.pathname).toBe(routes.cashier_deposit); }); + it('button text should be "Deposit now" if is_virtual is false and should navigate to wallets overlay deposit tab if client has CRW account and click on the button', () => { + mocked_props.is_virtual = false; + mock_store.client.has_wallet = true; + render(, { wrapper }); + const button = screen.getByText(/deposit now/i); + expect(button).toBeInTheDocument(); + userEvent.click(button); + expect(history.location.pathname).toBe(routes.wallets_deposit); + }); it('should return null when is_visible is false', () => { mocked_props.is_visible = false; - const { container } = renderWithRouter(); + const { container } = render(, { wrapper }); expect(container).toBeEmptyDOMElement(); }); }); diff --git a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx index f4fe48a7c416..9d76b3bee56b 100644 --- a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx +++ b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx @@ -16,7 +16,9 @@ const InsufficientBalanceModal = observer( ({ history, is_virtual, is_visible, message, toggleModal }: TInsufficientBalanceModal) => { const { ui: { is_mobile }, + client, } = useStore(); + const { has_wallet } = client; return ( { if (!is_virtual) { - history?.push?.(routes.cashier_deposit); + history?.push?.(has_wallet ? routes.wallets_deposit : routes.cashier_deposit); } else { toggleModal(); } From 7f632d7c9b70c39effbc45f08b26d755f0aaa945 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Wed, 22 May 2024 16:48:34 +0400 Subject: [PATCH 63/65] fix: routing to contract page giving 404 --- packages/core/src/App/Constants/routes-config.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js index 9666e6e43a51..1f800b8d8f59 100644 --- a/packages/core/src/App/Constants/routes-config.js +++ b/packages/core/src/App/Constants/routes-config.js @@ -394,15 +394,12 @@ const getModules = () => { path: routes.trade, component: Trader, getTitle: () => localize('Trader'), - routes: [ - { - path: routes.contract, - component: Trader, - getTitle: () => localize('Contract Details'), - is_authenticated: true, - }, - { path: routes.error404, component: Trader, getTitle: () => localize('Error 404') }, - ], + }, + { + path: routes.contract, + component: Trader, + getTitle: () => localize('Contract Details'), + is_authenticated: true, }, { path: routes.old_traders_hub, From f75ba341cc2f998ee9cc8ecd9a00bef86f996a40 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Thu, 23 May 2024 16:59:14 +0300 Subject: [PATCH 64/65] feat: change options & multipliers to options --- packages/appstore/src/helpers/account-helper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/appstore/src/helpers/account-helper.ts b/packages/appstore/src/helpers/account-helper.ts index 340d0dfe630a..9a939d6e6157 100644 --- a/packages/appstore/src/helpers/account-helper.ts +++ b/packages/appstore/src/helpers/account-helper.ts @@ -38,6 +38,6 @@ export const getSortedAccountList = (account_list: TAccountProps, accounts: TAcc }; export const getPlatformToggleOptions = (is_eu_title: boolean) => [ - { text: is_eu_title ? localize('Multipliers') : localize('Options & Multipliers'), value: 'options' }, + { text: is_eu_title ? localize('Multipliers') : localize('Options'), value: 'options' }, { text: localize('CFDs'), value: 'cfd' }, ]; From 9b7a194cada8bcf3640d52de6451b84e09fd684a Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Fri, 24 May 2024 12:05:07 +0300 Subject: [PATCH 65/65] feat: update mobile header --- .../App/Components/Layout/Header/menu-link.tsx | 3 +-- .../Layout/Header/toggle-menu-drawer.jsx | 16 +++++++--------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/core/src/App/Components/Layout/Header/menu-link.tsx b/packages/core/src/App/Components/Layout/Header/menu-link.tsx index 99d1ab8d6643..4aa7f32b9dde 100644 --- a/packages/core/src/App/Components/Layout/Header/menu-link.tsx +++ b/packages/core/src/App/Components/Layout/Header/menu-link.tsx @@ -134,7 +134,7 @@ const MenuLink = observer( className={is_trade_text ? '' : 'header__menu-mobile-link-text'} as='h3' size='xs' - weight={window.location.pathname === '/' && is_trade_text ? 'bold' : undefined} + weight={window.location.pathname === routes.trade && is_trade_text ? 'bold' : undefined} > {text} @@ -150,7 +150,6 @@ const MenuLink = observer( 'header__menu-mobile-link--disabled': is_disabled, 'header__menu-mobile-link--active': is_active, })} - active_class='header__menu-mobile-link--active' onClick={onClickLink} data-testid={data_testid} > diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx index d33d5c603a8b..77ad377ddcdc 100644 --- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx +++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx @@ -310,7 +310,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
- {!is_trading_hub_category && ( + { { setTogglePlatformType={setTogglePlatformType} /> - )} - + } +
{ icon={TradersHubIcon} text={localize("Trader's Hub")} onClickLink={toggleDrawer} + is_active={route === routes.traders_hub} /> )} - {!is_trading_hub_category && ( + { - )} + } {primary_routes_config.map((route_config, idx) => getRoutesWithSubMenu(route_config, idx) )}