From 1ca88873d827d69fa4d834c102ba2e588a64c29b Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Tue, 19 Nov 2024 17:59:05 +0800 Subject: [PATCH 1/8] fix: initial commit --- .../App/Containers/Layout/app-contents.jsx | 7 +- .../core/src/Stores/contract-replay-store.js | 9 +- packages/core/src/Stores/contract-store.js | 6 +- packages/core/src/Stores/portfolio-store.js | 9 +- packages/hooks/src/useDtraderV2Flag.ts | 30 +++-- .../reports/src/Containers/profit-table.tsx | 3 +- packages/reports/src/Containers/reports.tsx | 15 +-- .../src/utils/helpers/dtrader-v2-helpers.ts | 14 -- .../shared/src/utils/platform/platform.ts | 24 +++- packages/stores/src/mockStore.ts | 3 +- .../stores/src/stores/FeatureFlagsStore.ts | 3 +- .../Contract/Containers/contract-replay.tsx | 3 - .../Contract/Containers/replay-chart.tsx | 8 +- .../src/Modules/Trading/Containers/trade.tsx | 2 - .../Modules/Trading/Actions/contract-type.ts | 5 +- .../Modules/Trading/Helpers/contract-type.ts | 12 +- .../src/Stores/Modules/Trading/trade-store.ts | 127 ++++++++++-------- packages/trader/src/index.tsx | 8 +- 18 files changed, 153 insertions(+), 135 deletions(-) diff --git a/packages/core/src/App/Containers/Layout/app-contents.jsx b/packages/core/src/App/Containers/Layout/app-contents.jsx index 45c2851f7426..bc666c275778 100644 --- a/packages/core/src/App/Containers/Layout/app-contents.jsx +++ b/packages/core/src/App/Containers/Layout/app-contents.jsx @@ -42,9 +42,12 @@ const AppContents = observer(({ children }) => { const scroll_ref = React.useRef(null); const child_ref = React.useRef(null); - const [dtrader_v2_enabled] = useGrowthbookGetFeatureValue({ + const [dtrader_v2_enabled_mobile] = useGrowthbookGetFeatureValue({ featureFlag: 'dtrader_v2_enabled', }); + const [dtrader_v2_enabled_desktop] = useGrowthbookGetFeatureValue({ + featureFlag: 'dtrader_v2_desktop', + }); React.useEffect(() => { if (scroll_ref.current) setAppContentsScrollRef(scroll_ref); @@ -119,7 +122,7 @@ const AppContents = observer(({ children }) => { 'app-contents--is-scrollable': is_cfd_page || is_cashier_visible, 'app-contents--is-hidden': platforms[platform], 'app-contents--is-onboarding': window.location.pathname === routes.onboarding, - 'app-contents--is-dtrader-v2': dtrader_v2_enabled, + 'app-contents--is-dtrader-v2': dtrader_v2_enabled_mobile || dtrader_v2_enabled_desktop, })} ref={scroll_ref} > diff --git a/packages/core/src/Stores/contract-replay-store.js b/packages/core/src/Stores/contract-replay-store.js index 10d3374d6f43..4a336e0341de 100644 --- a/packages/core/src/Stores/contract-replay-store.js +++ b/packages/core/src/Stores/contract-replay-store.js @@ -1,7 +1,8 @@ import { action, observable, makeObservable, override } from 'mobx'; import { routes, - isDtraderV2Enabled, + isDtraderV2MobileEnabled, + isDtraderV2DesktopEnabled, isEmptyObject, isForwardStarting, WS, @@ -237,7 +238,8 @@ export default class ContractReplayStore extends BaseStore { ...response.error, }, // Temporary switching off old snackbar for DTrader-V2 - isDtraderV2Enabled(this.root_store.ui.is_mobile) + isDtraderV2MobileEnabled(this.root_store.ui.is_mobile) || + isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop) ); } else { this.root_store.notifications.addNotificationMessage(contractCancelled()); @@ -264,7 +266,8 @@ export default class ContractReplayStore extends BaseStore { ...response.error, }, // Temporary switching off old snackbar for DTrader-V2 - isDtraderV2Enabled(this.root_store.ui.is_mobile) + isDtraderV2MobileEnabled(this.root_store.ui.is_mobile) || + isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop) ); } else if (!response.error && response.sell) { this.is_sell_requested = false; diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js index ae2c8984e4dd..912fbdef84be 100644 --- a/packages/core/src/Stores/contract-store.js +++ b/packages/core/src/Stores/contract-store.js @@ -3,7 +3,8 @@ import { ChartBarrierStore, isAccumulatorContract, isDigitContract, - isDtraderV2Enabled, + isDtraderV2DesktopEnabled, + isDtraderV2MobileEnabled, isEnded, isEqualObject, isMultiplierContract, @@ -391,7 +392,8 @@ export default class ContractStore extends BaseStore { ...response.error, }, // Temporary switching off old snackbar for DTrader-V2 - isDtraderV2Enabled(this.root_store.ui.is_mobile) + isDtraderV2MobileEnabled(this.root_store.ui.is_mobile) || + isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop) ); return; } diff --git a/packages/core/src/Stores/portfolio-store.js b/packages/core/src/Stores/portfolio-store.js index e2fe447645ca..cfd9b4638fd1 100644 --- a/packages/core/src/Stores/portfolio-store.js +++ b/packages/core/src/Stores/portfolio-store.js @@ -18,7 +18,8 @@ import { getEndTime, getTradeNotificationMessage, isAccumulatorContract, - isDtraderV2Enabled, + isDtraderV2DesktopEnabled, + isDtraderV2MobileEnabled, isEmptyObject, isEnded, isValidToSell, @@ -320,7 +321,8 @@ export default class PortfolioStore extends BaseStore { ...response.error, }, // Temporary switching off old snackbar for DTrader-V2 - isDtraderV2Enabled(this.root_store.ui.is_mobile) + isDtraderV2MobileEnabled(this.root_store.ui.is_mobile) || + isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop) ); } else if (window.location.pathname !== routes.trade || !this.root_store.ui.is_mobile) { this.root_store.notifications.addNotificationMessage(contractCancelled()); @@ -354,7 +356,8 @@ export default class PortfolioStore extends BaseStore { ...response.error, }, // Temporary switching off old snackbar for dTrader-V2 - isDtraderV2Enabled(this.root_store.ui.is_mobile) + isDtraderV2MobileEnabled(this.root_store.ui.is_mobile) || + isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop) ); } } else if (!response.error && response.sell) { diff --git a/packages/hooks/src/useDtraderV2Flag.ts b/packages/hooks/src/useDtraderV2Flag.ts index 72651d7085f3..500c24127615 100644 --- a/packages/hooks/src/useDtraderV2Flag.ts +++ b/packages/hooks/src/useDtraderV2Flag.ts @@ -1,28 +1,32 @@ -import { useState, useEffect } from 'react'; -import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded'; -import { isDTraderV2, routes } from '@deriv/shared'; +import { useEffect, useState } from 'react'; + +import { isDtraderV2DesktopEnabled, isDtraderV2MobileEnabled } from '@deriv/shared'; import { useDevice } from '@deriv-com/ui'; -import { Analytics } from '@deriv-com/analytics'; + +import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded'; const useDtraderV2Flag = () => { const { isGBLoaded: is_growthbook_loaded, isGBAvailable: is_gb_available } = useIsGrowthbookIsLoaded(); const load_dtrader_module = is_growthbook_loaded || !is_gb_available; - const is_dtrader_v2 = isDTraderV2(); - const { isMobile: is_mobile } = useDevice(); - const is_feature_flag_active = Boolean(Analytics?.getFeatureValue('dtrader_v2_enabled', false)); - const is_trade_or_contract_path = - location.pathname.startsWith(routes.trade) || location.pathname.startsWith('/contract/'); + const { isMobile: is_mobile, isDesktop: is_desktop } = useDevice(); + const is_dtrader_v2_mobile = isDtraderV2MobileEnabled(is_mobile); + const is_dtrader_v2_desktop = isDtraderV2DesktopEnabled(is_desktop); + + const [dtrader_v2_enabled_mobile, setDtraderV2EnabledMobile] = useState(false); + const [dtrader_v2_enabled_desktop, setDtraderV2EnabledDesktop] = useState(false); - const [dtrader_v2_enabled, setDTraderV2Enabled] = useState(false); useEffect(() => { - if (is_growthbook_loaded || isDTraderV2()) { - setDTraderV2Enabled((is_dtrader_v2 || is_feature_flag_active) && is_mobile && is_trade_or_contract_path); + if (is_growthbook_loaded || is_dtrader_v2_mobile) { + setDtraderV2EnabledMobile(is_dtrader_v2_mobile); + } + if (is_growthbook_loaded || is_dtrader_v2_desktop) { + setDtraderV2EnabledDesktop(is_dtrader_v2_desktop); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [is_mobile, is_growthbook_loaded]); - return { dtrader_v2_enabled, load_dtrader_module }; + return { dtrader_v2_enabled_mobile, dtrader_v2_enabled_desktop, load_dtrader_module }; }; export default useDtraderV2Flag; diff --git a/packages/reports/src/Containers/profit-table.tsx b/packages/reports/src/Containers/profit-table.tsx index 37ece3399541..2a519f7ae759 100644 --- a/packages/reports/src/Containers/profit-table.tsx +++ b/packages/reports/src/Containers/profit-table.tsx @@ -164,8 +164,7 @@ const ProfitTable = observer(({ component_icon }: TProfitTable) => { ); }; - // TODO: Uncomment and update this when DTrader 2.0 development starts: - // if (useFeatureFlags().is_dtrader_v2_enabled) return I am Profit Table for DTrader 2.0.; + return ( diff --git a/packages/reports/src/Containers/reports.tsx b/packages/reports/src/Containers/reports.tsx index 6491a90e9261..4e4edd4a6e01 100644 --- a/packages/reports/src/Containers/reports.tsx +++ b/packages/reports/src/Containers/reports.tsx @@ -75,20 +75,7 @@ const Reports = observer(({ history, location, routes }: TReports) => { if (!is_logged_in && is_logging_in) { return ; } - // TODO: Uncomment and update this when DTrader 2.0 development starts: - // if (useFeatureFlags().is_dtrader_v2_enabled) - // return ( - // - // - // Hello! I am Reports page for DTrader 2.0. - // - //
- // {selected_route?.component && ( - // - // )} - //
- // - // ); + return (
diff --git a/packages/shared/src/utils/helpers/dtrader-v2-helpers.ts b/packages/shared/src/utils/helpers/dtrader-v2-helpers.ts index 901851a40ad5..94af3d0a17a4 100644 --- a/packages/shared/src/utils/helpers/dtrader-v2-helpers.ts +++ b/packages/shared/src/utils/helpers/dtrader-v2-helpers.ts @@ -1,7 +1,5 @@ /* TODO: remove this component after /trader package is separated into its own repo. It's used to keep dtrader_v2 utils that are currently shared between various packages. */ - -import { Analytics } from '@deriv-com/analytics'; import { extractInfoFromShortcode, isHighLow } from '../shortcode'; import { getMarketName, getTradeTypeName } from './market-underlying'; @@ -28,18 +26,6 @@ export const getPositionsV2TabIndexFromURL = () => { return 0; }; -export const isDTraderV2Width = () => window.innerWidth < 600; - -export const isDTraderV2 = () => { - const dtrader_v2_enabled_gb = Analytics?.getFeatureValue('dtrader_v2_enabled', false); - - return ( - Boolean( - !!JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2 || dtrader_v2_enabled_gb - ) && isDTraderV2Width() - ); -}; - export const getTradeNotificationMessage = (shortcode: string) => { const extracted_info_from_shortcode = extractInfoFromShortcode(shortcode); const symbol = getMarketName(extracted_info_from_shortcode.underlying); diff --git a/packages/shared/src/utils/platform/platform.ts b/packages/shared/src/utils/platform/platform.ts index ae5323c0580c..30247776477f 100644 --- a/packages/shared/src/utils/platform/platform.ts +++ b/packages/shared/src/utils/platform/platform.ts @@ -167,15 +167,27 @@ export const isNavigationFromExternalPlatform = (routing_history: TRoutingHistor return false; }; -export const isDtraderV2Enabled = (is_mobile: boolean) => { - const dtrader_v2_enabled_growthbook = Analytics?.getFeatureValue('dtrader_v2_enabled', false); - const is_dtrader_v2 = - JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2 || - dtrader_v2_enabled_growthbook; +export const isDtraderV2MobileEnabled = (is_mobile: boolean) => { + const dtrader_v2_enabled_gb = Analytics?.getFeatureValue('dtrader_v2_enabled', false); + const is_dtrader_v2_mobile = + JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2_mobile || dtrader_v2_enabled_gb; return ( - is_dtrader_v2 && + is_dtrader_v2_mobile && is_mobile && (window.location.pathname.startsWith(routes.trade) || window.location.pathname.startsWith('/contract/')) ); }; + +export const isDtraderV2DesktopEnabled = (is_desktop: boolean) => { + const dtrader_v2_desktop_gb = Analytics?.getFeatureValue('dtrader_v2_desktop', false); + const is_dtrader_v2_desktop = + JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2_desktop || + dtrader_v2_desktop_gb; + + return ( + is_dtrader_v2_desktop && + is_desktop && + (window.location.pathname.startsWith(routes.trade) || window.location.pathname.startsWith('/contract/')) + ); +}; diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index 55324c0d3a40..ddbf2e82f9ec 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -749,7 +749,8 @@ const mock = (): TStores & { is_mock: boolean } => { has_stop_loss: false, has_take_profit: false, is_accumulator: false, - is_dtrader_v2_enabled: false, + is_dtrader_v2_mobile: false, + is_dtrader_v2_desktop: false, is_equal: 0, is_mobile_digit_view_selected: false, is_multiplier: false, diff --git a/packages/stores/src/stores/FeatureFlagsStore.ts b/packages/stores/src/stores/FeatureFlagsStore.ts index a2ad41196b43..2bee751e81b4 100644 --- a/packages/stores/src/stores/FeatureFlagsStore.ts +++ b/packages/stores/src/stores/FeatureFlagsStore.ts @@ -1,7 +1,8 @@ import BaseStore from './BaseStore'; const FLAGS = { - dtrader_v2: false, + dtrader_v2_mobile: false, + dtrader_v2_desktop: false, next_qs: false, sharkfin: false, wallet: false, diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.tsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.tsx index 31eedab34c9d..6785d5b9dce5 100644 --- a/packages/trader/src/Modules/Contract/Containers/contract-replay.tsx +++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.tsx @@ -108,9 +108,6 @@ const ContractReplay = observer(({ contract_id }: { contract_id: number }) => { /> ); - // TODO: Uncomment and update this when DTrader 2.0 development starts: - // if (useFeatureFlags().is_dtrader_v2_enabled) return Hello! I am Contract Details page for DTrader 2.0.; - if (isMobile) { return ( : ChartTopWidgets} + topWidgets={is_dtrader_v2_enabled ? () => : ChartTopWidgets} isConnectionOpened={is_socket_opened} isStaticChart={ // forcing chart reload when start_epoch changes to an earlier epoch for ACCU closed contract: diff --git a/packages/trader/src/Modules/Trading/Containers/trade.tsx b/packages/trader/src/Modules/Trading/Containers/trade.tsx index a15086893ee2..17cf6b3097a9 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade.tsx +++ b/packages/trader/src/Modules/Trading/Containers/trade.tsx @@ -179,8 +179,6 @@ const Trade = observer(() => { return '259px'; }, [is_turbos, is_accumulator]); - // TODO: Uncomment and update this when DTrader 2.0 development starts: - // if (useFeatureFlags().is_dtrader_v2_enabled) return Hello! I am DTrader 2.0.; return (
{ - const is_dtrader_v2_enabled = isDtraderV2Enabled(root_store?.ui.is_mobile); + const is_dtrader_v2_enabled = + isDtraderV2MobileEnabled(root_store?.ui.is_mobile) || isDtraderV2DesktopEnabled(root_store.ui.is_desktop); const list = is_dtrader_v2_enabled ? contract_types_list_v2 : contract_types_list; return ContractType.getContractType(list, contract_type); }; diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts index 43ba9ae59a88..97557e305293 100644 --- a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts +++ b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts @@ -19,7 +19,8 @@ import { getLocalizedBasis, TTradeTypesCategories, TRADE_TYPES, - isDTraderV2, + isDtraderV2MobileEnabled, + isDtraderV2DesktopEnabled, } from '@deriv/shared'; import ServerTime from '_common/base/server_time'; import { localize } from '@deriv/translations'; @@ -185,6 +186,7 @@ export const ContractType = (() => { long_barriers, strike_price_choices, v2_params_initial_values, + root_store, } = store; if (!contract_type) return {}; @@ -200,7 +202,9 @@ export const ContractType = (() => { case 'Call': case 'Put': stored_barriers_data = - v2_params_initial_values?.strike && isDTraderV2() + v2_params_initial_values?.strike && + (isDtraderV2MobileEnabled(root_store.ui.is_mobile) || + isDtraderV2DesktopEnabled(root_store.ui.is_desktop)) ? ({ ...strike_price_choices, barrier: v2_params_initial_values.strike, @@ -252,7 +256,7 @@ export const ContractType = (() => { .reduce((k, l) => [...k, ...(list[l].categories as TTextValueStrings[]).map(ct => ct.value)], []) .filter( type => - !unsupported_contract_types_list.includes(type as typeof unsupported_contract_types_list[number]) + !unsupported_contract_types_list.includes(type as (typeof unsupported_contract_types_list)[number]) ); const sortedList = getSortedTradeTypes(filteredList); @@ -401,7 +405,7 @@ export const ContractType = (() => { }; const buildMoment = (date: string | number | null, time?: string | null) => { - const [hour, minute] = isTimeValid(time ?? '') ? time?.split(':') ?? [] : [0, 0]; + const [hour, minute] = isTimeValid(time ?? '') ? (time?.split(':') ?? []) : [0, 0]; return toMoment(date || ServerTime.get()) .hour(+hour) .minute(+minute); diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.ts b/packages/trader/src/Stores/Modules/Trading/trade-store.ts index 3bc5bb12c17a..1fed84e7bfe7 100644 --- a/packages/trader/src/Stores/Modules/Trading/trade-store.ts +++ b/packages/trader/src/Stores/Modules/Trading/trade-store.ts @@ -1,81 +1,87 @@ -import * as Symbol from './Actions/symbol'; +import debounce from 'lodash.debounce'; +import { action, computed, makeObservable, observable, override, reaction, runInAction, toJS, when } from 'mobx'; + import { - WS, + ActiveSymbols, + ActiveSymbolsRequest, + Buy, + BuyContractResponse, + History, + PriceProposalRequest, + PriceProposalResponse, + ServerTimeRequest, + TicksHistoryRequest, + TicksHistoryResponse, + TickSpotData, + TicksStreamResponse, + TradingTimesRequest, +} from '@deriv/api-types'; +import { + BARRIER_COLORS, + BARRIER_LINE_STYLES, ChartBarrierStore, cloneObject, + CONTRACT_TYPES, convertDurationLimit, extractInfoFromShortcode, findFirstOpenMarket, + formatMoney, getBarrierPipSize, + getCardLabelsV2, + getContractPath, + getContractSubtype, + getCurrencyDisplayCode, getMinPayout, getPlatformSettings, getPropertyValue, - getContractSubtype, getTradeNotificationMessage, - isBarrierSupported, + getTradeURLParams, + hasBarrier, isAccumulatorContract, + isBarrierSupported, isCryptocurrency, + isDtraderV2DesktopEnabled, + isDtraderV2MobileEnabled, isEmptyObject, + isHighLow, isMarketClosed, isMultiplierContract, + isTouchContract, isTurbosContract, - isVanillaFxContract, isVanillaContract, + isVanillaFxContract, pickDefaultSymbol, resetEndTimeOnVolatilityIndices, + routes, setLimitOrderBarriers, + setTradeURLParams, showDigitalOptionsUnavailableError, showUnavailableLocationError, - getCurrencyDisplayCode, - BARRIER_COLORS, - BARRIER_LINE_STYLES, TRADE_TYPES, - hasBarrier, - isHighLow, - CONTRACT_TYPES, - setTradeURLParams, - getTradeURLParams, - isTouchContract, - getCardLabelsV2, - formatMoney, - getContractPath, - routes, - isDtraderV2Enabled, + WS, } from '@deriv/shared'; -import { Analytics } from '@deriv-com/analytics'; -import type { TEvents } from '@deriv-com/analytics'; import { localize } from '@deriv/translations'; -import { getValidationRules, getMultiplierValidationRules } from 'Stores/Modules/Trading/Constants/validation-rules'; -import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type'; +import { safeParse } from '@deriv/utils'; +import type { TEvents } from '@deriv-com/analytics'; +import { Analytics } from '@deriv-com/analytics'; + import { isDigitContractType, isDigitTradeType } from 'Modules/Trading/Helpers/digits'; -import ServerTime from '_common/base/server_time'; +import { getMultiplierValidationRules, getValidationRules } from 'Stores/Modules/Trading/Constants/validation-rules'; +import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type'; +import { TContractTypesList, TRootStore, TTextValueNumber, TTextValueStrings } from 'Types'; + +import { sendDtraderPurchaseToAnalytics } from '../../../Analytics'; +import BaseStore from '../../base-store'; + import { processPurchase } from './Actions/purchase'; +import * as Symbol from './Actions/symbol'; import { getUpdatedTicksHistoryStats } from './Helpers/accumulator'; +import { getHoveredColor } from './Helpers/barrier-utils'; +import { getChartAnalyticsData, STATE_TYPES, TPayload } from './Helpers/chart'; import { processTradeParams } from './Helpers/process'; -import { action, computed, makeObservable, observable, override, reaction, runInAction, toJS, when } from 'mobx'; import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal'; -import { getHoveredColor } from './Helpers/barrier-utils'; -import BaseStore from '../../base-store'; -import { TContractTypesList, TRootStore, TTextValueNumber, TTextValueStrings } from 'Types'; -import debounce from 'lodash.debounce'; -import { - ActiveSymbols, - ActiveSymbolsRequest, - Buy, - BuyContractResponse, - History, - PriceProposalRequest, - PriceProposalResponse, - ServerTimeRequest, - TickSpotData, - TicksHistoryRequest, - TicksHistoryResponse, - TicksStreamResponse, - TradingTimesRequest, -} from '@deriv/api-types'; -import { STATE_TYPES, TPayload, getChartAnalyticsData } from './Helpers/chart'; -import { safeParse } from '@deriv/utils'; -import { sendDtraderPurchaseToAnalytics } from '../../../Analytics'; + +import ServerTime from '_common/base/server_time'; type TBarriers = Array< ChartBarrierStore & { @@ -442,7 +448,8 @@ export default class TradeStore extends BaseStore { is_accumulator: computed, is_chart_loading: observable, is_digits_widget_active: observable, - is_dtrader_v2_enabled: computed, + is_dtrader_v2_mobile: computed, + is_dtrader_v2_desktop: computed, is_equal: observable, is_market_closed: observable, is_mobile_digit_view_selected: observable, @@ -568,7 +575,7 @@ export default class TradeStore extends BaseStore { when( () => !isEmptyObject(this.contract_types_list_v2), () => { - if (!this.contract_types_list_v2 || !this.is_dtrader_v2_enabled) return; + if (!this.contract_types_list_v2 || !this.is_dtrader_v2_mobile || !this.is_dtrader_v2_desktop) return; const searchParams = new URLSearchParams(window.location.search); const urlContractType = searchParams.get('trade_type'); const tradeStoreString = sessionStorage.getItem('trade_store'); @@ -594,7 +601,7 @@ export default class TradeStore extends BaseStore { when( () => this.has_symbols_for_v2, () => { - if (!this.contract_types_list_v2 || !this.is_dtrader_v2_enabled) return; + if (!this.contract_types_list_v2 || !this.is_dtrader_v2_mobile || !this.is_dtrader_v2_desktop) return; const searchParams = new URLSearchParams(window.location.search); const urlSymbol = searchParams.get('symbol'); const tradeStoreString = sessionStorage.getItem('trade_store'); @@ -766,7 +773,7 @@ export default class TradeStore extends BaseStore { }; async loadActiveSymbols(should_set_default_symbol = true, should_show_loading = true) { - if (this.is_dtrader_v2_enabled) { + if (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop) { await when(() => this.has_symbols_for_v2); return; } @@ -854,7 +861,7 @@ export default class TradeStore extends BaseStore { } async setContractTypes() { - if (this.is_dtrader_v2_enabled) { + if (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop) { return; } @@ -1106,7 +1113,7 @@ export default class TradeStore extends BaseStore { type: response.msg_type, ...response.error, }, - this.is_dtrader_v2_enabled + this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop ); // Clear purchase info on mobile after toast box error disappears (mobile_toast_timeout = 3500) @@ -1342,7 +1349,7 @@ export default class TradeStore extends BaseStore { if (has_currency_changed && should_reset_stake) { obj_new_values.amount = obj_new_values.amount || getMinPayout(obj_new_values.currency ?? ''); - if (this.is_dtrader_v2_enabled) + if (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop) this.setV2ParamsInitialValues({ value: obj_new_values.amount ?? '', name: 'stake', @@ -1363,7 +1370,7 @@ export default class TradeStore extends BaseStore { // Set stake to default one (from contracts_for) on symbol or contract type switch. // On contract type we also additionally reset take profit - if (this.default_stake && this.is_dtrader_v2_enabled) { + if (this.default_stake && (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop)) { const has_symbol_changed = obj_new_values.symbol && this.symbol && this.symbol !== obj_new_values.symbol; const has_contract_type_changed = obj_new_values.contract_type && @@ -1374,7 +1381,7 @@ export default class TradeStore extends BaseStore { const is_crypto = isCryptocurrency(this.currency ?? ''); const default_crypto_value = getMinPayout(this.currency ?? '') ?? ''; this.setV2ParamsInitialValues({ - value: is_crypto ? default_crypto_value : this.default_stake ?? '', + value: is_crypto ? default_crypto_value : (this.default_stake ?? ''), name: 'stake', }); obj_new_values.amount = is_crypto ? default_crypto_value : this.default_stake; @@ -1427,8 +1434,12 @@ export default class TradeStore extends BaseStore { } } - get is_dtrader_v2_enabled() { - return isDtraderV2Enabled(this.root_store.ui.is_mobile); + get is_dtrader_v2_mobile() { + return isDtraderV2MobileEnabled(this.root_store.ui.is_mobile); + } + + get is_dtrader_v2_desktop() { + return isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop); } get is_synthetics_available() { diff --git a/packages/trader/src/index.tsx b/packages/trader/src/index.tsx index 1cbce9c3e3bb..572306685790 100644 --- a/packages/trader/src/index.tsx +++ b/packages/trader/src/index.tsx @@ -30,9 +30,13 @@ const AppV2Loader = makeLazyLoader( )() as React.ComponentType; const App = ({ passthrough }: Apptypes) => { - const { dtrader_v2_enabled, load_dtrader_module } = useDtraderV2Flag(); + const { dtrader_v2_enabled_desktop, dtrader_v2_enabled_mobile, load_dtrader_module } = useDtraderV2Flag(); if (load_dtrader_module) { - return dtrader_v2_enabled ? : ; + return dtrader_v2_enabled_desktop || dtrader_v2_enabled_mobile ? ( + + ) : ( + + ); } return ; }; From c6c35f34dccd1b9efea7a1254171a5b16ba890e5 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 20 Nov 2024 10:31:49 +0800 Subject: [PATCH 2/8] feat: separate commit --- packages/core/src/App/Components/Routes/binary-routes.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/App/Components/Routes/binary-routes.jsx b/packages/core/src/App/Components/Routes/binary-routes.jsx index e664ff6d0e1c..26cca56a4b65 100644 --- a/packages/core/src/App/Components/Routes/binary-routes.jsx +++ b/packages/core/src/App/Components/Routes/binary-routes.jsx @@ -12,7 +12,7 @@ const BinaryRoutes = observer(props => { const { promptFn, prompt_when } = ui; const { pushDataLayer } = gtm; const location = useLocation(); - const { dtrader_v2_enabled } = useDtraderV2Flag(); + const { dtrader_v2_enabled_mobile, dtrader_v2_enabled_desktop } = useDtraderV2Flag(); React.useEffect(() => { pushDataLayer({ event: 'page_load' }); @@ -20,7 +20,7 @@ const BinaryRoutes = observer(props => { }, [location]); const getLoader = () => { - if (dtrader_v2_enabled) + if (dtrader_v2_enabled_mobile || dtrader_v2_enabled_desktop) return ( Date: Wed, 20 Nov 2024 11:54:07 +0800 Subject: [PATCH 3/8] chore: fix tests --- .../src/__tests__/useDtraderV2Flag.spec.tsx | 31 ++++++++++++++-- .../__tests__/dtrader-v2-helpers.spec.ts | 37 +------------------ .../Modules/Trading/Actions/contract-type.ts | 2 +- .../Helpers/__tests__/contract-type.spec.ts | 7 +++- .../Modules/Trading/Helpers/contract-type.ts | 4 +- 5 files changed, 37 insertions(+), 44 deletions(-) diff --git a/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx b/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx index b9af3182c6cf..194576da3bbc 100644 --- a/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx +++ b/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx @@ -3,6 +3,7 @@ import { useDtraderV2Flag } from '..'; import useIsGrowthbookIsLoaded from '../useIsGrowthbookLoaded'; import { useDevice } from '@deriv-com/ui'; import { Analytics } from '@deriv-com/analytics'; +import { isDtraderV2DesktopEnabled, isDtraderV2MobileEnabled } from '@deriv/shared'; jest.mock('@deriv-com/analytics', () => ({ Analytics: { @@ -16,8 +17,21 @@ jest.mock('@deriv-com/ui', () => ({ jest.mock('../useIsGrowthbookLoaded'); +jest.mock('@deriv/shared', () => ({ + ...jest.requireActual('@deriv/shared'), + isDtraderV2MobileEnabled: jest.fn(), + isDtraderV2DesktopEnabled: jest.fn(), +})); + describe('useDtraderV2Flag', () => { const originalLocation = window.location; + + beforeEach(() => { + jest.clearAllMocks(); + (isDtraderV2MobileEnabled as jest.Mock).mockReturnValue(true); + (isDtraderV2DesktopEnabled as jest.Mock).mockReturnValue(true); + }); + beforeAll(() => { const mockLocation = { ...originalLocation, @@ -39,16 +53,27 @@ describe('useDtraderV2Flag', () => { it('should initially set load_dtrader_module and dtrader_v2_enabled to false', () => { (useIsGrowthbookIsLoaded as jest.Mock).mockReturnValue({ isGBLoaded: false, isGBAvailable: true }); + (isDtraderV2MobileEnabled as jest.Mock).mockReturnValue(false); const { result } = renderHook(() => useDtraderV2Flag()); expect(result.current.load_dtrader_module).toBe(false); - expect(result.current.dtrader_v2_enabled).toBe(false); + expect(result.current.dtrader_v2_enabled_mobile).toBe(false); }); - it('should set load_dtrader_module and dtrader_v2_enabled to true when dtrader is enabled', () => { + it('should set load_dtrader_module and dtrader_v2_enabled_mobile to true when dtrader is enabled', () => { (useIsGrowthbookIsLoaded as jest.Mock).mockReturnValue({ isGBLoaded: true, isGBAvailable: true }); (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true }); (Analytics.getFeatureValue as jest.Mock).mockReturnValue(true); + (isDtraderV2MobileEnabled as jest.Mock).mockReturnValue(true); + const { result } = renderHook(() => useDtraderV2Flag()); + expect(result.current.dtrader_v2_enabled_mobile).toBe(true); + }); + + it('should set load_dtrader_module and dtrader_v2_enabled_mobile to true when dtrader is enabled', () => { + (useIsGrowthbookIsLoaded as jest.Mock).mockReturnValue({ isGBLoaded: true, isGBAvailable: true }); + (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true }); + (Analytics.getFeatureValue as jest.Mock).mockReturnValue(true); + (isDtraderV2DesktopEnabled as jest.Mock).mockReturnValue(true); const { result } = renderHook(() => useDtraderV2Flag()); - expect(result.current.dtrader_v2_enabled).toBe(true); + expect(result.current.dtrader_v2_enabled_desktop).toBe(true); }); }); diff --git a/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts b/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts index 5bd1cb63d68e..96a9d61ac5d4 100644 --- a/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts +++ b/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts @@ -1,8 +1,8 @@ +import { describe, beforeEach, afterEach, it, expect } from '@jest/globals'; import { routes } from '../../routes'; import { getPositionsV2TabIndexFromURL, getTradeNotificationMessage, - isDTraderV2, POSITIONS_V2_TAB_NAME, } from '../dtrader-v2-helpers'; @@ -51,41 +51,6 @@ describe('getPositionsV2TabIndexFromURL', () => { }); }); -describe('isDTraderV2', () => { - const data = { - dtrader_v2: true, - p2p_v2: false, - sharkfin: false, - wallet: false, - }; - const feature_flags_with_dtrader_v2_on = { data }; - const feature_flags_with_dtrader_v2_off = { data: { ...data, dtrader_v2: false } }; - - it('should return true if dtrader_v2 flag in localStorage is true and window.innerWidth is less than 600', () => { - window.innerWidth = 599; - window.localStorage.setItem('FeatureFlagsStore', JSON.stringify(feature_flags_with_dtrader_v2_on)); - expect(isDTraderV2()).toBe(true); - }); - - it('should return false if window.innerWidth is equal to 600', () => { - window.innerWidth = 600; - window.localStorage.setItem('FeatureFlagsStore', JSON.stringify(feature_flags_with_dtrader_v2_on)); - expect(isDTraderV2()).toBe(false); - }); - - it('should return false if dtrader_v2 flag in localStorage is false', () => { - window.innerWidth = 599; - window.localStorage.setItem('FeatureFlagsStore', JSON.stringify(feature_flags_with_dtrader_v2_off)); - expect(isDTraderV2()).toBe(false); - }); - - it('should return false if FeatureFlagsStore is missing from localStorage', () => { - window.innerWidth = 599; - window.localStorage.clear(); - expect(isDTraderV2()).toBe(false); - }); -}); - describe('getTradeNotificationMessage', () => { it('should return correct trade notification message based on passed shortcode', () => { expect(getTradeNotificationMessage('ACCU_1HZ100V_10.00_0_0.03_1_0.000379665263_1722518733_0')).toBe( diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.ts b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.ts index 4876732455d1..8695e8e5e1e1 100644 --- a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.ts +++ b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.ts @@ -9,7 +9,7 @@ export const onChangeContractTypeList = ({ contract_type, }: TTradeStore) => { const is_dtrader_v2_enabled = - isDtraderV2MobileEnabled(root_store?.ui.is_mobile) || isDtraderV2DesktopEnabled(root_store.ui.is_desktop); + isDtraderV2MobileEnabled(root_store?.ui.is_mobile) || isDtraderV2DesktopEnabled(root_store?.ui.is_desktop); const list = is_dtrader_v2_enabled ? contract_types_list_v2 : contract_types_list; return ContractType.getContractType(list, contract_type); }; diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts index d66fcb4d7ed6..a97ed716b84f 100644 --- a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts +++ b/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts @@ -197,7 +197,8 @@ jest.mock('@deriv/shared', () => ({ }) ), }, - isDTraderV2: jest.fn().mockReturnValue(true), + isDtraderV2MobileEnabled: jest.fn().mockReturnValue(true), + isDtraderV2DesktopEnabled: jest.fn().mockReturnValue(true), })); jest.mock('_common/base/server_time', () => ({ @@ -299,10 +300,12 @@ describe('ContractType.getContractValues', () => { has_cancellation: false, }); }); - it('should use strike value from v2_params_initial_values for Vanillas contract as barrier_1 if isDTraderV2 === true', async () => { + it('should use strike value from v2_params_initial_values for Vanillas contract as barrier_1 if isDtraderV2MobileEnabled or isDtraderV2DesktopEnabled === true', async () => { const symbol = '1HZ100V'; trade_store.contract_type = 'vanillalongcall'; trade_store.v2_params_initial_values = { strike: '+1.80' }; + // trade_store.root_store.ui.is_mobile = true; + // trade_store.root_store.ui.is_desktop = true; await ContractType.buildContractTypesConfig(symbol); const result = ContractType.getContractValues(trade_store); diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts index 97557e305293..c9cb8f7f3dce 100644 --- a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts +++ b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts @@ -203,8 +203,8 @@ export const ContractType = (() => { case 'Put': stored_barriers_data = v2_params_initial_values?.strike && - (isDtraderV2MobileEnabled(root_store.ui.is_mobile) || - isDtraderV2DesktopEnabled(root_store.ui.is_desktop)) + (isDtraderV2MobileEnabled(root_store?.ui.is_mobile) || + isDtraderV2DesktopEnabled(root_store?.ui.is_desktop)) ? ({ ...strike_price_choices, barrier: v2_params_initial_values.strike, From 298a4c17525be1c5655ef46e75a563a2332b590d Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 20 Nov 2024 16:36:49 +0800 Subject: [PATCH 4/8] fix: change feature flag name --- packages/shared/src/utils/platform/platform.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/utils/platform/platform.ts b/packages/shared/src/utils/platform/platform.ts index 30247776477f..0f4ebf88cf6a 100644 --- a/packages/shared/src/utils/platform/platform.ts +++ b/packages/shared/src/utils/platform/platform.ts @@ -180,10 +180,10 @@ export const isDtraderV2MobileEnabled = (is_mobile: boolean) => { }; export const isDtraderV2DesktopEnabled = (is_desktop: boolean) => { - const dtrader_v2_desktop_gb = Analytics?.getFeatureValue('dtrader_v2_desktop', false); + const dtrader_v2_enabled_desktop_gb = Analytics?.getFeatureValue('dtrader_v2_enabled_desktop', false); const is_dtrader_v2_desktop = JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2_desktop || - dtrader_v2_desktop_gb; + dtrader_v2_enabled_desktop_gb; return ( is_dtrader_v2_desktop && From 0f90fdbd05acea6e89d1bcdcd537fc9fdb184dd9 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 20 Nov 2024 16:45:08 +0800 Subject: [PATCH 5/8] fix: change feature flag name --- packages/core/src/App/Containers/Layout/app-contents.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/App/Containers/Layout/app-contents.jsx b/packages/core/src/App/Containers/Layout/app-contents.jsx index bc666c275778..b0bc16395899 100644 --- a/packages/core/src/App/Containers/Layout/app-contents.jsx +++ b/packages/core/src/App/Containers/Layout/app-contents.jsx @@ -46,7 +46,7 @@ const AppContents = observer(({ children }) => { featureFlag: 'dtrader_v2_enabled', }); const [dtrader_v2_enabled_desktop] = useGrowthbookGetFeatureValue({ - featureFlag: 'dtrader_v2_desktop', + featureFlag: 'dtrader_v2_enabled_desktop', }); React.useEffect(() => { From 504102fc754409c11f7f91f09c289a22a1357081 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 20 Nov 2024 17:21:49 +0800 Subject: [PATCH 6/8] fix: resolve comments --- packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx | 4 ++-- packages/hooks/src/useDtraderV2Flag.ts | 2 +- .../src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx b/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx index 194576da3bbc..2140a0209e88 100644 --- a/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx +++ b/packages/hooks/src/__tests__/useDtraderV2Flag.spec.tsx @@ -51,7 +51,7 @@ describe('useDtraderV2Flag', () => { }); }); - it('should initially set load_dtrader_module and dtrader_v2_enabled to false', () => { + it('should initially set load_dtrader_module and dtrader_v2_enabled_mobile to false', () => { (useIsGrowthbookIsLoaded as jest.Mock).mockReturnValue({ isGBLoaded: false, isGBAvailable: true }); (isDtraderV2MobileEnabled as jest.Mock).mockReturnValue(false); const { result } = renderHook(() => useDtraderV2Flag()); @@ -68,7 +68,7 @@ describe('useDtraderV2Flag', () => { expect(result.current.dtrader_v2_enabled_mobile).toBe(true); }); - it('should set load_dtrader_module and dtrader_v2_enabled_mobile to true when dtrader is enabled', () => { + it('should set load_dtrader_module and dtrader_v2_enabled_desktop to true when dtrader is enabled', () => { (useIsGrowthbookIsLoaded as jest.Mock).mockReturnValue({ isGBLoaded: true, isGBAvailable: true }); (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true }); (Analytics.getFeatureValue as jest.Mock).mockReturnValue(true); diff --git a/packages/hooks/src/useDtraderV2Flag.ts b/packages/hooks/src/useDtraderV2Flag.ts index 500c24127615..a0ab7196f9c7 100644 --- a/packages/hooks/src/useDtraderV2Flag.ts +++ b/packages/hooks/src/useDtraderV2Flag.ts @@ -24,7 +24,7 @@ const useDtraderV2Flag = () => { setDtraderV2EnabledDesktop(is_dtrader_v2_desktop); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [is_mobile, is_growthbook_loaded]); + }, [is_mobile, is_growthbook_loaded, is_desktop]); return { dtrader_v2_enabled_mobile, dtrader_v2_enabled_desktop, load_dtrader_module }; }; diff --git a/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts b/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts index 96a9d61ac5d4..beb79078dfbd 100644 --- a/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts +++ b/packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts @@ -1,4 +1,3 @@ -import { describe, beforeEach, afterEach, it, expect } from '@jest/globals'; import { routes } from '../../routes'; import { getPositionsV2TabIndexFromURL, From de39699d7631669f3706c9e572b9cc0365ac08bc Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 20 Nov 2024 17:24:45 +0800 Subject: [PATCH 7/8] chore: remove commented code --- .../Modules/Trading/Helpers/__tests__/contract-type.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts index a97ed716b84f..c5aea46c32f2 100644 --- a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts +++ b/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/contract-type.spec.ts @@ -304,8 +304,6 @@ describe('ContractType.getContractValues', () => { const symbol = '1HZ100V'; trade_store.contract_type = 'vanillalongcall'; trade_store.v2_params_initial_values = { strike: '+1.80' }; - // trade_store.root_store.ui.is_mobile = true; - // trade_store.root_store.ui.is_desktop = true; await ContractType.buildContractTypesConfig(symbol); const result = ContractType.getContractValues(trade_store); From 0493d7300f2206f39ade77448f0337aa948a52b3 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 20 Nov 2024 17:52:25 +0800 Subject: [PATCH 8/8] chore: refactor --- packages/stores/src/mockStore.ts | 1 + .../src/Stores/Modules/Trading/trade-store.ts | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index ddbf2e82f9ec..f7173cae6d73 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -749,6 +749,7 @@ const mock = (): TStores & { is_mock: boolean } => { has_stop_loss: false, has_take_profit: false, is_accumulator: false, + is_dtrader_v2: false, is_dtrader_v2_mobile: false, is_dtrader_v2_desktop: false, is_equal: 0, diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.ts b/packages/trader/src/Stores/Modules/Trading/trade-store.ts index 1fed84e7bfe7..53c56bb4679c 100644 --- a/packages/trader/src/Stores/Modules/Trading/trade-store.ts +++ b/packages/trader/src/Stores/Modules/Trading/trade-store.ts @@ -448,6 +448,7 @@ export default class TradeStore extends BaseStore { is_accumulator: computed, is_chart_loading: observable, is_digits_widget_active: observable, + is_dtrader_v2: computed, is_dtrader_v2_mobile: computed, is_dtrader_v2_desktop: computed, is_equal: observable, @@ -575,7 +576,7 @@ export default class TradeStore extends BaseStore { when( () => !isEmptyObject(this.contract_types_list_v2), () => { - if (!this.contract_types_list_v2 || !this.is_dtrader_v2_mobile || !this.is_dtrader_v2_desktop) return; + if (!this.contract_types_list_v2 || !this.is_dtrader_v2) return; const searchParams = new URLSearchParams(window.location.search); const urlContractType = searchParams.get('trade_type'); const tradeStoreString = sessionStorage.getItem('trade_store'); @@ -601,7 +602,7 @@ export default class TradeStore extends BaseStore { when( () => this.has_symbols_for_v2, () => { - if (!this.contract_types_list_v2 || !this.is_dtrader_v2_mobile || !this.is_dtrader_v2_desktop) return; + if (!this.contract_types_list_v2 || !this.is_dtrader_v2) return; const searchParams = new URLSearchParams(window.location.search); const urlSymbol = searchParams.get('symbol'); const tradeStoreString = sessionStorage.getItem('trade_store'); @@ -773,7 +774,7 @@ export default class TradeStore extends BaseStore { }; async loadActiveSymbols(should_set_default_symbol = true, should_show_loading = true) { - if (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop) { + if (this.is_dtrader_v2) { await when(() => this.has_symbols_for_v2); return; } @@ -861,7 +862,7 @@ export default class TradeStore extends BaseStore { } async setContractTypes() { - if (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop) { + if (this.is_dtrader_v2) { return; } @@ -1113,7 +1114,7 @@ export default class TradeStore extends BaseStore { type: response.msg_type, ...response.error, }, - this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop + this.is_dtrader_v2 ); // Clear purchase info on mobile after toast box error disappears (mobile_toast_timeout = 3500) @@ -1349,7 +1350,7 @@ export default class TradeStore extends BaseStore { if (has_currency_changed && should_reset_stake) { obj_new_values.amount = obj_new_values.amount || getMinPayout(obj_new_values.currency ?? ''); - if (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop) + if (this.is_dtrader_v2) this.setV2ParamsInitialValues({ value: obj_new_values.amount ?? '', name: 'stake', @@ -1370,7 +1371,7 @@ export default class TradeStore extends BaseStore { // Set stake to default one (from contracts_for) on symbol or contract type switch. // On contract type we also additionally reset take profit - if (this.default_stake && (this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop)) { + if (this.default_stake && this.is_dtrader_v2) { const has_symbol_changed = obj_new_values.symbol && this.symbol && this.symbol !== obj_new_values.symbol; const has_contract_type_changed = obj_new_values.contract_type && @@ -1442,6 +1443,10 @@ export default class TradeStore extends BaseStore { return isDtraderV2DesktopEnabled(this.root_store.ui.is_desktop); } + get is_dtrader_v2() { + return this.is_dtrader_v2_mobile || this.is_dtrader_v2_desktop; + } + get is_synthetics_available() { return !!this.active_symbols?.find(item => item.market === 'synthetic_index'); }