From ebd3aa0812cc2260ed035a944be7c61ca710f9d9 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 29 Oct 2024 16:45:30 +0800 Subject: [PATCH 1/4] chore: loader added for is_switching --- packages/trader/src/AppV2/Containers/Trade/trade.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.tsx b/packages/trader/src/AppV2/Containers/Trade/trade.tsx index 54ca0e090a47..6e1e4d4b65ea 100644 --- a/packages/trader/src/AppV2/Containers/Trade/trade.tsx +++ b/packages/trader/src/AppV2/Containers/Trade/trade.tsx @@ -2,7 +2,7 @@ import React from 'react'; import clsx from 'clsx'; import { observer } from 'mobx-react'; import { useStore } from '@deriv/stores'; -import { Loading } from '@deriv/components'; +import { Loading, Skeleton } from '@deriv/components'; import { useLocalStorageData } from '@deriv/hooks'; import ClosedMarketMessage from 'AppV2/Components/ClosedMarketMessage'; import { useTraderStore } from 'Stores/useTraderStores'; @@ -24,7 +24,7 @@ const Trade = observer(() => { const [is_minimized_params_visible, setIsMinimizedParamsVisible] = React.useState(false); const chart_ref = React.useRef(null); const { - client: { is_logged_in }, + client: { is_logged_in, is_switching }, ui: { is_dark_mode_on }, } = useStore(); const { @@ -84,7 +84,7 @@ const Trade = observer(() => { return ( - {symbols.length && trade_types.length ? ( + {symbols.length && trade_types.length && !is_switching ? (
Date: Tue, 29 Oct 2024 16:51:34 +0800 Subject: [PATCH 2/4] chore: test added --- .../AppV2/Containers/Trade/__tests__/trade.spec.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx index f557f5d82bbf..ed2183b24bf3 100644 --- a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx +++ b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx @@ -116,7 +116,7 @@ describe('Trade', () => { ], }, }, - client: { is_logged_in: true }, + client: { is_logged_in: true, is_switching: false }, common: { resetServicesError: jest.fn() }, }); (useSignupTrigger as jest.Mock).mockReturnValue({ handleSignup: jest.fn() }); @@ -144,6 +144,14 @@ describe('Trade', () => { expect(screen.getByTestId('dt_trade_loader')).toBeInTheDocument(); }); + it('should show loader if we are switching from demo to real account', () => { + default_mock_store.client.is_switching = true; + default_mock_store = mockStore({}); + render(mockTrade()); + + expect(screen.getByTestId('dt_trade_loader')).toBeInTheDocument(); + }); + it('should render trading page with all necessary components', () => { render(mockTrade()); From f17e74f68dcb3df4b445119d01c27877a2af045a Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 29 Oct 2024 18:54:59 +0800 Subject: [PATCH 3/4] chore: fix --- .../trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx index ed2183b24bf3..5219087426ff 100644 --- a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx +++ b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx @@ -146,7 +146,6 @@ describe('Trade', () => { it('should show loader if we are switching from demo to real account', () => { default_mock_store.client.is_switching = true; - default_mock_store = mockStore({}); render(mockTrade()); expect(screen.getByTestId('dt_trade_loader')).toBeInTheDocument(); From 0ed87f1766325436318c8ed752260d75726f7433 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Fri, 8 Nov 2024 14:13:54 +0800 Subject: [PATCH 4/4] chore: fix --- .../AppV2/Containers/Trade/__tests__/trade.spec.tsx | 1 + packages/trader/src/AppV2/Containers/Trade/trade.tsx | 11 +++++++++-- .../trader/src/AppV2/Hooks/useContractsForCompany.ts | 6 +++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx index a8f214f76d7d..e046bed06fa0 100644 --- a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx +++ b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx @@ -67,6 +67,7 @@ jest.mock('AppV2/Hooks/useContractsForCompany', () => ({ default: jest.fn(() => ({ is_fetching_ref: { current: false }, trade_types: mock_contract_data.contracts_for_company.available, + resetTradeTypes: jest.fn(), })), })); diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.tsx b/packages/trader/src/AppV2/Containers/Trade/trade.tsx index 66aa70dc6ab0..301f373edf0d 100644 --- a/packages/trader/src/AppV2/Containers/Trade/trade.tsx +++ b/packages/trader/src/AppV2/Containers/Trade/trade.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import clsx from 'clsx'; import { observer } from 'mobx-react'; import { useStore } from '@deriv/stores'; @@ -39,7 +39,7 @@ const Trade = observer(() => { onChange, onUnmount, } = useTraderStore(); - const { trade_types } = useContractsForCompany(); + const { trade_types, resetTradeTypes } = useContractsForCompany(); const [guide_dtrader_v2] = useLocalStorageData>('guide_dtrader_v2', { trade_types_selection: false, trade_page: false, @@ -88,6 +88,13 @@ const Trade = observer(() => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + if (is_switching) { + resetTradeTypes(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [is_switching]); + return ( {symbols.length && trade_types.length && !is_switching ? ( diff --git a/packages/trader/src/AppV2/Hooks/useContractsForCompany.ts b/packages/trader/src/AppV2/Hooks/useContractsForCompany.ts index dfc9f62eddc8..bce320535fbb 100644 --- a/packages/trader/src/AppV2/Hooks/useContractsForCompany.ts +++ b/packages/trader/src/AppV2/Hooks/useContractsForCompany.ts @@ -184,7 +184,11 @@ const useContractsForCompany = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [response]); - return { trade_types, contract_types_list, available_contract_types, is_fetching_ref }; + const resetTradeTypes = () => { + setTradeTypes([]); + }; + + return { trade_types, contract_types_list, available_contract_types, is_fetching_ref, resetTradeTypes }; }; export default useContractsForCompany;