From cd70197c34fb1ec35650247f46f93916377f90e6 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 28 Jun 2023 15:53:45 +0300 Subject: [PATCH 1/5] refactor: remove duplicated file --- packages/core/src/Constants/contract.js | 238 --------- .../constants/__tests__/contract.spec.ts | 91 ++++ .../shared/src/utils/constants/contract.ts | 488 ++++++++++++++++++ .../shared/src/utils/constants/contract.tsx | 482 ----------------- .../ContractDrawer/contract-drawer-card.jsx | 10 +- .../PositionsDrawer/positions-modal-card.jsx | 11 +- .../progress-slider-stream.jsx | 3 +- packages/trader/src/Constants/contract.js | 294 ----------- packages/trader/src/Constants/index.js | 1 - .../Contract/Components/Digits/digits.jsx | 3 +- .../Components/Elements/purchase-button.tsx | 7 +- .../Trading/Containers/contract-type.jsx | 3 +- .../Modules/Trading/Containers/purchase.tsx | 19 +- .../src/Utils/Helpers/market-underlying.ts | 2 +- 14 files changed, 615 insertions(+), 1037 deletions(-) delete mode 100644 packages/core/src/Constants/contract.js create mode 100644 packages/shared/src/utils/constants/__tests__/contract.spec.ts create mode 100644 packages/shared/src/utils/constants/contract.ts delete mode 100644 packages/shared/src/utils/constants/contract.tsx delete mode 100644 packages/trader/src/Constants/contract.js diff --git a/packages/core/src/Constants/contract.js b/packages/core/src/Constants/contract.js deleted file mode 100644 index 578efc82df9e..000000000000 --- a/packages/core/src/Constants/contract.js +++ /dev/null @@ -1,238 +0,0 @@ -import { localize } from '@deriv/translations'; - -export const getMarketNamesMap = () => ({ - FRXAUDCAD: localize('AUD/CAD'), - FRXAUDCHF: localize('AUD/CHF'), - FRXAUDJPY: localize('AUD/JPY'), - FRXAUDNZD: localize('AUD/NZD'), - FRXAUDPLN: localize('AUD/PLN'), - FRXAUDUSD: localize('AUD/USD'), - FRXBROUSD: localize('Oil/USD'), - FRXEURAUD: localize('EUR/AUD'), - FRXEURCAD: localize('EUR/CAD'), - FRXEURCHF: localize('EUR/CHF'), - FRXEURGBP: localize('EUR/GBP'), - FRXEURJPY: localize('EUR/JPY'), - FRXEURNZD: localize('EUR/NZD'), - FRXEURUSD: localize('EUR/USD'), - FRXGBPAUD: localize('GBP/AUD'), - FRXGBPCAD: localize('GBP/CAD'), - FRXGBPCHF: localize('GBP/CHF'), - FRXGBPJPY: localize('GBP/JPY'), - FRXGBPNOK: localize('GBP/NOK'), - FRXGBPUSD: localize('GBP/USD'), - FRXNZDJPY: localize('NZD/JPY'), - FRXNZDUSD: localize('NZD/USD'), - FRXUSDCAD: localize('USD/CAD'), - FRXUSDCHF: localize('USD/CHF'), - FRXUSDJPY: localize('USD/JPY'), - FRXUSDNOK: localize('USD/NOK'), - FRXUSDPLN: localize('USD/PLN'), - FRXUSDSEK: localize('USD/SEK'), - FRXXAGUSD: localize('Silver/USD'), - FRXXAUUSD: localize('Gold/USD'), - FRXXPDUSD: localize('Palladium/USD'), - FRXXPTUSD: localize('Platinum/USD'), - OTC_AEX: localize('Netherlands 25'), - OTC_AS51: localize('Australia 200'), - OTC_DJI: localize('Wall Street 30'), - OTC_FCHI: localize('France 40'), - OTC_FTSE: localize('UK 100'), - OTC_GDAXI: localize('Germany 40'), - OTC_HSI: localize('Hong Kong 50'), - OTC_IBEX35: localize('Spanish Index'), - OTC_N225: localize('Japan 225'), - OTC_NDX: localize('US Tech 100'), - OTC_SPC: localize('US 500'), - OTC_SSMI: localize('Swiss 20'), - OTC_SX5E: localize('Euro 50'), - R_10: localize('Volatility 10 Index'), - R_25: localize('Volatility 25 Index'), - R_50: localize('Volatility 50 Index'), - R_75: localize('Volatility 75 Index'), - R_100: localize('Volatility 100 Index'), - BOOM300N: localize('Boom 300 Index'), - BOOM500: localize('Boom 500 Index'), - BOOM1000: localize('Boom 1000 Index'), - CRASH300N: localize('Crash 300 Index'), - CRASH500: localize('Crash 500 Index'), - CRASH1000: localize('Crash 1000 Index'), - RDBEAR: localize('Bear Market Index'), - RDBULL: localize('Bull Market Index'), - STPRNG: localize('Step Index'), - WLDAUD: localize('AUD Basket'), - WLDEUR: localize('EUR Basket'), - WLDGBP: localize('GBP Basket'), - WLDXAU: localize('Gold Basket'), - WLDUSD: localize('USD Basket'), - '1HZ10V': localize('Volatility 10 (1s) Index'), - '1HZ100V': localize('Volatility 100 (1s) Index'), - '1HZ150V': localize('Volatility 150 (1s) Index'), - '1HZ200V': localize('Volatility 200 (1s) Index'), - '1HZ250V': localize('Volatility 250 (1s) Index'), - '1HZ300V': localize('Volatility 300 (1s) Index'), - JD10: localize('Jump 10 Index'), - JD25: localize('Jump 25 Index'), - JD50: localize('Jump 50 Index'), - JD75: localize('Jump 75 Index'), - JD100: localize('Jump 100 Index'), - JD150: localize('Jump 150 Index'), - JD200: localize('Jump 200 Index'), - CRYBCHUSD: localize('BCH/USD'), - CRYBNBUSD: localize('BNB/USD'), - CRYBTCLTC: localize('BTC/LTC'), - CRYIOTUSD: localize('IOT/USD'), - CRYNEOUSD: localize('NEO/USD'), - CRYOMGUSD: localize('OMG/USD'), - CRYTRXUSD: localize('TRX/USD'), - CRYBTCETH: localize('BTC/ETH'), - CRYZECUSD: localize('ZEC/USD'), - CRYXMRUSD: localize('ZMR/USD'), - CRYXMLUSD: localize('XLM/USD'), - CRYXRPUSD: localize('XRP/USD'), - CRYBTCUSD: localize('BTC/USD'), - CRYDSHUSD: localize('DSH/USD'), - CRYETHUSD: localize('ETH/USD'), - CRYEOSUSD: localize('EOS/USD'), - CRYLTCUSD: localize('LTC/USD'), -}); - -export const getUnsupportedContracts = () => ({ - EXPIRYMISS: { - name: localize('Ends Outside'), - position: 'top', - }, - EXPIRYRANGE: { - name: localize('Ends Between'), - position: 'bottom', - }, - RANGE: { - name: localize('Stays Between'), - position: 'top', - }, - UPORDOWN: { - name: localize('Goes Outside'), - position: 'bottom', - }, - RESETCALL: { - name: localize('Reset Call'), - position: 'top', - }, - RESETPUT: { - name: localize('Reset Put'), - position: 'bottom', - }, - TICKHIGH: { - name: localize('High Tick'), - position: 'top', - }, - TICKLOW: { - name: localize('Low Tick'), - position: 'bottom', - }, - ASIANU: { - name: localize('Asian Up'), - position: 'top', - }, - ASIAND: { - name: localize('Asian Down'), - position: 'bottom', - }, - LBFLOATCALL: { - name: localize('Close-Low'), - position: 'top', - }, - LBFLOATPUT: { - name: localize('High-Close'), - position: 'top', - }, - LBHIGHLOW: { - name: localize('High-Low'), - position: 'top', - }, - CALLSPREAD: { - name: localize('Call Spread'), - position: 'top', - }, - PUTSPREAD: { - name: localize('Put Spread'), - position: 'bottom', - }, - RUNHIGH: { - name: localize('Only Ups'), - position: 'top', - }, - RUNLOW: { - name: localize('Only Downs'), - position: 'bottom', - }, -}); - -export const getSupportedContracts = is_high_low => ({ - ACCU: { - button_name: localize('Buy'), - name: localize('Accumulator'), - position: 'top', - }, - CALL: { - name: is_high_low ? localize('Higher') : localize('Rise'), - position: 'top', - }, - PUT: { - name: is_high_low ? localize('Lower') : localize('Fall'), - position: 'bottom', - }, - CALLE: { - name: localize('Rise'), - position: 'top', - }, - PUTE: { - name: localize('Fall'), - position: 'bottom', - }, - DIGITMATCH: { - name: localize('Matches'), - position: 'top', - }, - DIGITDIFF: { - name: localize('Differs'), - position: 'bottom', - }, - DIGITEVEN: { - name: localize('Even'), - position: 'top', - }, - DIGITODD: { - name: localize('Odd'), - position: 'bottom', - }, - DIGITOVER: { - name: localize('Over'), - position: 'top', - }, - DIGITUNDER: { - name: localize('Under'), - position: 'bottom', - }, - ONETOUCH: { - name: localize('Touch'), - position: 'top', - }, - NOTOUCH: { - name: localize('No Touch'), - position: 'bottom', - }, -}); - -export const getContractConfig = is_high_low => ({ - ...getSupportedContracts(is_high_low), - ...getUnsupportedContracts(), -}); - -export const getContractTypeDisplay = (type, is_high_low = false, show_button_name = false) => { - const contract_config = getContractConfig(is_high_low)[type]; - return (show_button_name && contract_config.button_name) || contract_config.name || ''; -}; - -export const getContractTypePosition = (type, is_high_low = false) => - getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type.toUpperCase()].position : 'top'; diff --git a/packages/shared/src/utils/constants/__tests__/contract.spec.ts b/packages/shared/src/utils/constants/__tests__/contract.spec.ts new file mode 100644 index 000000000000..f918a7328aaf --- /dev/null +++ b/packages/shared/src/utils/constants/__tests__/contract.spec.ts @@ -0,0 +1,91 @@ +import { localize } from '@deriv/translations'; +import { + getCardLabels, + getMarketNamesMap, + getUnsupportedContracts, + getSupportedContracts, + getContractConfig, + getContractTypeDisplay, + getContractTypePosition, +} from '../contract'; + +type TTest = Parameters[0]; +const card_label = localize('Apply'); +const markets_name = localize('AUD/CAD'); +const unsupported_contract = { + name: localize('Ends Outside'), + position: 'top', +}; +const supported_high_low = { + name: localize('Higher'), + position: 'top', +}; +const not_supported_high_low = { + name: localize('Rise'), + position: 'top', +}; + +describe('getCardLabels', () => { + it('should return an object with card labels, e.g. such as Apply', () => { + expect(getCardLabels().APPLY).toEqual(card_label); + }); +}); + +describe('getMarketNamesMap', () => { + it('should return an object with markets names, e.g. such as AUD/CAD', () => { + expect(getMarketNamesMap().FRXAUDCAD).toEqual(markets_name); + }); +}); + +describe('getUnsupportedContracts', () => { + it('should return an object with unsupported contracts, e.g. such as Ends Outside', () => { + expect(getUnsupportedContracts().EXPIRYMISS).toEqual(unsupported_contract); + }); +}); + +describe('getSupportedContracts', () => { + it('should return an object with specific supported contracts if is_high_low === true', () => { + expect(getSupportedContracts(true).CALL).toEqual(supported_high_low); + }); + + it('should return an object with specific supported contracts if is_high_low === false', () => { + expect(getSupportedContracts(false).CALL).toEqual(not_supported_high_low); + }); +}); + +describe('getContractConfig', () => { + it('should return an object with specific contracts if is_high_low === true', () => { + expect(getContractConfig(true).CALL).toEqual(supported_high_low); + }); + + it('should return object with specific contracts if is_high_low === false', () => { + expect(getContractConfig(false).CALL).toEqual(not_supported_high_low); + }); +}); + +describe('getContractTypeDisplay', () => { + it('should return a specific button name if show_button_name === true and contract_config has a button_name field', () => { + expect(getContractTypeDisplay('ACCU', false, true)).toEqual(localize('Buy')); + }); + it('should return a specific contract name if show_button_name === false but contract_config has a button_name field', () => { + expect(getContractTypeDisplay('ACCU')).toEqual(localize('Accumulator')); + }); + it('should return a specific contract name if show_button_name === true but contract_config has no button_name field', () => { + expect(getContractTypeDisplay('MULTDOWN', true, true)).toEqual(localize('Down')); + }); + it('should return an empty string if show_button_name === false and contract_config has no name field', () => { + expect(getContractTypeDisplay('TEST' as TTest, true, false)).toBe(''); + }); + it('should return an empty string if show_button_name === true and contract_config has no name field and no button_name', () => { + expect(getContractTypeDisplay('TEST' as TTest, true, true)).toBe(''); + }); +}); + +describe('getContractTypePosition', () => { + it('should return a specific button position if such type exist', () => { + expect(getContractTypePosition('NOTOUCH')).toBe('bottom'); + }); + it('should return a top position if such type does not exist', () => { + expect(getContractTypePosition('TEST' as TTest)).toBe('top'); + }); +}); diff --git a/packages/shared/src/utils/constants/contract.ts b/packages/shared/src/utils/constants/contract.ts new file mode 100644 index 000000000000..0ff8f20099f1 --- /dev/null +++ b/packages/shared/src/utils/constants/contract.ts @@ -0,0 +1,488 @@ +import React from 'react'; +import { localize } from '@deriv/translations'; +import { shouldShowCancellation, shouldShowExpiration } from '../contract'; + +export const getLocalizedBasis = () => + ({ + accumulator: localize('Accumulator'), + payout: localize('Payout'), + stake: localize('Stake'), + multiplier: localize('Multiplier'), + } as const); + +/** + * components can be undef or an array containing any of: 'start_date', 'barrier', 'last_digit' + * ['duration', 'amount'] are omitted, as they're available in all contract types + */ +type TContractTypesConfig = { + title: string; + trade_types: string[]; + basis: string[]; + components: string[]; + barrier_count?: number; + config?: { hide_duration?: boolean; should_override?: boolean }; +}; + +type TGetContractTypesConfig = (symbol: string) => Record; + +type TContractConfig = { + button_name?: React.ReactNode; + name: React.ReactNode; + position: string; +}; + +type TGetSupportedContracts = keyof ReturnType; + +export const getContractTypesConfig: TGetContractTypesConfig = symbol => ({ + rise_fall: { + title: localize('Rise/Fall'), + trade_types: ['CALL', 'PUT'], + basis: ['stake', 'payout'], + components: ['start_date'], + barrier_count: 0, + }, + rise_fall_equal: { + title: localize('Rise/Fall'), + trade_types: ['CALLE', 'PUTE'], + basis: ['stake', 'payout'], + components: ['start_date'], + barrier_count: 0, + }, + high_low: { + title: localize('Higher/Lower'), + trade_types: ['CALL', 'PUT'], + basis: ['stake', 'payout'], + components: ['barrier'], + barrier_count: 1, + }, + touch: { + title: localize('Touch/No Touch'), + trade_types: ['ONETOUCH', 'NOTOUCH'], + basis: ['stake', 'payout'], + components: ['barrier'], + }, + end: { + title: localize('Ends In/Ends Out'), + trade_types: ['EXPIRYMISS', 'EXPIRYRANGE'], + basis: ['stake', 'payout'], + components: ['barrier'], + }, + stay: { + title: localize('Stays In/Goes Out'), + trade_types: ['RANGE', 'UPORDOWN'], + basis: ['stake', 'payout'], + components: ['barrier'], + }, + asian: { + title: localize('Asian Up/Asian Down'), + trade_types: ['ASIANU', 'ASIAND'], + basis: ['stake', 'payout'], + components: [], + }, + match_diff: { + title: localize('Matches/Differs'), + trade_types: ['DIGITMATCH', 'DIGITDIFF'], + basis: ['stake', 'payout'], + components: ['last_digit'], + }, + even_odd: { + title: localize('Even/Odd'), + trade_types: ['DIGITODD', 'DIGITEVEN'], + basis: ['stake', 'payout'], + components: [], + }, + over_under: { + title: localize('Over/Under'), + trade_types: ['DIGITOVER', 'DIGITUNDER'], + basis: ['stake', 'payout'], + components: ['last_digit'], + }, + // TODO: update the rest of these contracts config + lb_call: { title: localize('Close-to-Low'), trade_types: ['LBFLOATCALL'], basis: ['multiplier'], components: [] }, + lb_put: { title: localize('High-to-Close'), trade_types: ['LBFLOATPUT'], basis: ['multiplier'], components: [] }, + lb_high_low: { title: localize('High-to-Low'), trade_types: ['LBHIGHLOW'], basis: ['multiplier'], components: [] }, + tick_high_low: { + title: localize('High Tick/Low Tick'), + trade_types: ['TICKHIGH', 'TICKLOW'], + basis: [], + components: [], + }, + run_high_low: { + title: localize('Only Ups/Only Downs'), + trade_types: ['RUNHIGH', 'RUNLOW'], + basis: [], + components: [], + }, + reset: { + title: localize('Reset Up/Reset Down'), + trade_types: ['RESETCALL', 'RESETPUT'], + basis: [], + components: [], + }, + callputspread: { + title: localize('Spread Up/Spread Down'), + trade_types: ['CALLSPREAD', 'PUTSPREAD'], + basis: [], + components: [], + }, + accumulator: { + title: localize('Accumulator'), + trade_types: ['ACCU'], + basis: ['stake'], + components: ['take_profit', 'accumulator', 'accu_info_display'], + barrier_count: 2, + config: { hide_duration: true }, + }, + multiplier: { + title: localize('Multipliers'), + trade_types: ['MULTUP', 'MULTDOWN'], + basis: ['stake'], + components: [ + 'take_profit', + 'stop_loss', + ...(shouldShowCancellation(symbol) ? ['cancellation'] : []), + ...(shouldShowExpiration(symbol) ? ['expiration'] : []), + ], + config: { hide_duration: true }, + }, // hide Duration for Multiplier contracts for now + vanilla: { + title: localize('Call/Put'), + trade_types: ['VANILLALONGCALL', 'VANILLALONGPUT'], + basis: ['stake'], + components: ['duration', 'strike', 'amount', 'vanilla_trade_type'], + barrier_count: 1, + config: { should_override: true }, + }, +}); + +// Config for rendering trade options +export const getContractCategoriesConfig = () => + ({ + Multipliers: { name: localize('Multipliers'), categories: ['multiplier'] }, + 'Ups & Downs': { + name: localize('Ups & Downs'), + categories: ['rise_fall', 'rise_fall_equal', 'run_high_low', 'reset', 'asian', 'callputspread'], + }, + 'Highs & Lows': { name: localize('Highs & Lows'), categories: ['high_low', 'touch', 'tick_high_low'] }, + 'Ins & Outs': { name: localize('Ins & Outs'), categories: ['end', 'stay'] }, + 'Look Backs': { name: localize('Look Backs'), categories: ['lb_high_low', 'lb_put', 'lb_call'] }, + Digits: { name: localize('Digits'), categories: ['match_diff', 'even_odd', 'over_under'] }, + Vanillas: { name: localize('Vanillas'), categories: ['vanilla'] }, + Accumulators: { name: localize('Accumulators'), categories: ['accumulator'] }, + } as const); + +export const unsupported_contract_types_list = [ + // TODO: remove these once all contract types are supported + 'callputspread', + 'run_high_low', + 'reset', + 'asian', + 'tick_high_low', + 'end', + 'stay', + 'lb_call', + 'lb_put', + 'lb_high_low', +]; + +export const getCardLabels = () => + ({ + APPLY: localize('Apply'), + BUY_PRICE: localize('Buy price:'), + CANCEL: localize('Cancel'), + CLOSE: localize('Close'), + CONTRACT_VALUE: localize('Contract value:'), + CURRENT_STAKE: localize('Current stake:'), + DAY: localize('day'), + DAYS: localize('days'), + DEAL_CANCEL_FEE: localize('Deal cancel. fee:'), + DECREMENT_VALUE: localize('Decrement value'), + DONT_SHOW_THIS_AGAIN: localize("Don't show this again"), + ENTRY_SPOT: localize('Entry spot:'), + INCREMENT_VALUE: localize('Increment value'), + NOT_AVAILABLE: localize('N/A'), + RESALE_NOT_OFFERED: localize('Resale not offered'), + SELL: localize('Sell'), + STAKE: localize('Stake:'), + STOP_LOSS: localize('Stop loss:'), + STRIKE: localize('Strike:'), + TICK: localize('Tick '), + TICKS: localize('Ticks'), + TOTAL_PROFIT_LOSS: localize('Total profit/loss:'), + PROFIT_LOSS: localize('Profit/Loss:'), + POTENTIAL_PROFIT_LOSS: localize('Potential profit/loss:'), + INDICATIVE_PRICE: localize('Indicative price:'), + INITIAL_STAKE: localize('Initial stake:'), + LOST: localize('Lost'), + PAYOUT: localize('Sell price:'), + PURCHASE_PRICE: localize('Buy price:'), + POTENTIAL_PAYOUT: localize('Payout limit:'), + TAKE_PROFIT: localize('Take profit:'), + TAKE_PROFIT_LOSS_NOT_AVAILABLE: localize( + 'Take profit and/or stop loss are not available while deal cancellation is active.' + ), + WON: localize('Won'), + } as const); + +export const getMarketNamesMap = () => + ({ + FRXAUDCAD: localize('AUD/CAD'), + FRXAUDCHF: localize('AUD/CHF'), + FRXAUDJPY: localize('AUD/JPY'), + FRXAUDNZD: localize('AUD/NZD'), + FRXAUDPLN: localize('AUD/PLN'), + FRXAUDUSD: localize('AUD/USD'), + FRXBROUSD: localize('Oil/USD'), + FRXEURAUD: localize('EUR/AUD'), + FRXEURCAD: localize('EUR/CAD'), + FRXEURCHF: localize('EUR/CHF'), + FRXEURGBP: localize('EUR/GBP'), + FRXEURJPY: localize('EUR/JPY'), + FRXEURNZD: localize('EUR/NZD'), + FRXEURUSD: localize('EUR/USD'), + FRXGBPAUD: localize('GBP/AUD'), + FRXGBPCAD: localize('GBP/CAD'), + FRXGBPCHF: localize('GBP/CHF'), + FRXGBPJPY: localize('GBP/JPY'), + FRXGBPNOK: localize('GBP/NOK'), + FRXGBPUSD: localize('GBP/USD'), + FRXNZDJPY: localize('NZD/JPY'), + FRXNZDUSD: localize('NZD/USD'), + FRXUSDCAD: localize('USD/CAD'), + FRXUSDCHF: localize('USD/CHF'), + FRXUSDJPY: localize('USD/JPY'), + FRXUSDNOK: localize('USD/NOK'), + FRXUSDPLN: localize('USD/PLN'), + FRXUSDSEK: localize('USD/SEK'), + FRXXAGUSD: localize('Silver/USD'), + FRXXAUUSD: localize('Gold/USD'), + FRXXPDUSD: localize('Palladium/USD'), + FRXXPTUSD: localize('Platinum/USD'), + OTC_AEX: localize('Netherlands 25'), + OTC_AS51: localize('Australia 200'), + OTC_DJI: localize('Wall Street 30'), + OTC_FCHI: localize('France 40'), + OTC_FTSE: localize('UK 100'), + OTC_GDAXI: localize('Germany 40'), + OTC_HSI: localize('Hong Kong 50'), + OTC_IBEX35: localize('Spanish Index'), + OTC_N225: localize('Japan 225'), + OTC_NDX: localize('US Tech 100'), + OTC_SPC: localize('US 500'), + OTC_SSMI: localize('Swiss 20'), + OTC_SX5E: localize('Euro 50'), + R_10: localize('Volatility 10 Index'), + R_25: localize('Volatility 25 Index'), + R_50: localize('Volatility 50 Index'), + R_75: localize('Volatility 75 Index'), + R_100: localize('Volatility 100 Index'), + BOOM300N: localize('Boom 300 Index'), + BOOM500: localize('Boom 500 Index'), + BOOM1000: localize('Boom 1000 Index'), + CRASH300N: localize('Crash 300 Index'), + CRASH500: localize('Crash 500 Index'), + CRASH1000: localize('Crash 1000 Index'), + RDBEAR: localize('Bear Market Index'), + RDBULL: localize('Bull Market Index'), + STPRNG: localize('Step Index'), + WLDAUD: localize('AUD Basket'), + WLDEUR: localize('EUR Basket'), + WLDGBP: localize('GBP Basket'), + WLDXAU: localize('Gold Basket'), + WLDUSD: localize('USD Basket'), + '1HZ10V': localize('Volatility 10 (1s) Index'), + '1HZ100V': localize('Volatility 100 (1s) Index'), + '1HZ150V': localize('Volatility 150 (1s) Index'), + '1HZ200V': localize('Volatility 200 (1s) Index'), + '1HZ250V': localize('Volatility 250 (1s) Index'), + '1HZ300V': localize('Volatility 300 (1s) Index'), + JD10: localize('Jump 10 Index'), + JD25: localize('Jump 25 Index'), + JD50: localize('Jump 50 Index'), + JD75: localize('Jump 75 Index'), + JD100: localize('Jump 100 Index'), + JD150: localize('Jump 150 Index'), + JD200: localize('Jump 200 Index'), + CRYBCHUSD: localize('BCH/USD'), + CRYBNBUSD: localize('BNB/USD'), + CRYBTCLTC: localize('BTC/LTC'), + CRYIOTUSD: localize('IOT/USD'), + CRYNEOUSD: localize('NEO/USD'), + CRYOMGUSD: localize('OMG/USD'), + CRYTRXUSD: localize('TRX/USD'), + CRYBTCETH: localize('BTC/ETH'), + CRYZECUSD: localize('ZEC/USD'), + CRYXMRUSD: localize('ZMR/USD'), + CRYXMLUSD: localize('XLM/USD'), + CRYXRPUSD: localize('XRP/USD'), + CRYBTCUSD: localize('BTC/USD'), + CRYDSHUSD: localize('DSH/USD'), + CRYETHUSD: localize('ETH/USD'), + CRYEOSUSD: localize('EOS/USD'), + CRYLTCUSD: localize('LTC/USD'), + } as const); + +export const getUnsupportedContracts = () => + ({ + EXPIRYMISS: { + name: localize('Ends Outside'), + position: 'top', + }, + EXPIRYRANGE: { + name: localize('Ends Between'), + position: 'bottom', + }, + RANGE: { + name: localize('Stays Between'), + position: 'top', + }, + UPORDOWN: { + name: localize('Goes Outside'), + position: 'bottom', + }, + RESETCALL: { + name: localize('Reset Call'), + position: 'top', + }, + RESETPUT: { + name: localize('Reset Put'), + position: 'bottom', + }, + TICKHIGH: { + name: localize('High Tick'), + position: 'top', + }, + TICKLOW: { + name: localize('Low Tick'), + position: 'bottom', + }, + ASIANU: { + name: localize('Asian Up'), + position: 'top', + }, + ASIAND: { + name: localize('Asian Down'), + position: 'bottom', + }, + LBFLOATCALL: { + name: localize('Close-to-Low'), + position: 'top', + }, + LBFLOATPUT: { + name: localize('High-to-Close'), + position: 'top', + }, + LBHIGHLOW: { + name: localize('High-to-Low'), + position: 'top', + }, + CALLSPREAD: { + name: localize('Spread Up'), + position: 'top', + }, + PUTSPREAD: { + name: localize('Spread Down'), + position: 'bottom', + }, + RUNHIGH: { + name: localize('Only Ups'), + position: 'top', + }, + RUNLOW: { + name: localize('Only Downs'), + position: 'bottom', + }, + } as const); + +export const getSupportedContracts = (is_high_low?: boolean) => + ({ + ACCU: { + button_name: localize('Buy'), + name: localize('Accumulator'), + position: 'top', + }, + CALL: { + name: is_high_low ? localize('Higher') : localize('Rise'), + position: 'top', + }, + PUT: { + name: is_high_low ? localize('Lower') : localize('Fall'), + position: 'bottom', + }, + CALLE: { + name: localize('Rise'), + position: 'top', + }, + PUTE: { + name: localize('Fall'), + position: 'bottom', + }, + DIGITMATCH: { + name: localize('Matches'), + position: 'top', + }, + DIGITDIFF: { + name: localize('Differs'), + position: 'bottom', + }, + DIGITEVEN: { + name: localize('Even'), + position: 'top', + }, + DIGITODD: { + name: localize('Odd'), + position: 'bottom', + }, + DIGITOVER: { + name: localize('Over'), + position: 'top', + }, + DIGITUNDER: { + name: localize('Under'), + position: 'bottom', + }, + ONETOUCH: { + name: localize('Touch'), + position: 'top', + }, + NOTOUCH: { + name: localize('No Touch'), + position: 'bottom', + }, + MULTUP: { + name: localize('Up'), + position: 'top', + }, + MULTDOWN: { + name: localize('Down'), + position: 'bottom', + }, + VANILLALONGCALL: { + name: localize('Call'), + position: 'top', + }, + VANILLALONGPUT: { + name: localize('Put'), + position: 'bottom', + }, + } as const); + +export const getContractConfig = (is_high_low?: boolean) => ({ + ...getSupportedContracts(is_high_low), + ...getUnsupportedContracts(), +}); + +/* +// TODO we can combine getContractTypeDisplay and getContractTypePosition functions. +the difference between these two functions is just the property they return. (name/position) +*/ +export const getContractTypeDisplay = (type: TGetSupportedContracts, is_high_low = false, show_button_name = false) => { + const contract_config = getContractConfig(is_high_low)[type] as TContractConfig; + return (show_button_name && contract_config?.button_name) || contract_config?.name || ''; +}; + +export const getContractTypePosition = (type: TGetSupportedContracts, is_high_low = false) => + getContractConfig(is_high_low)?.[type]?.position || 'top'; + +export const isCallPut = (trade_type: 'rise_fall' | 'rise_fall_equal' | 'high_low'): boolean => + trade_type === 'rise_fall' || trade_type === 'rise_fall_equal' || trade_type === 'high_low'; diff --git a/packages/shared/src/utils/constants/contract.tsx b/packages/shared/src/utils/constants/contract.tsx deleted file mode 100644 index f3e162df7878..000000000000 --- a/packages/shared/src/utils/constants/contract.tsx +++ /dev/null @@ -1,482 +0,0 @@ -import React from 'react'; -import { localize, Localize } from '@deriv/translations'; -import { shouldShowCancellation, shouldShowExpiration } from '../contract'; - -export const getLocalizedBasis = () => ({ - accumulator: localize('Accumulator'), - payout: localize('Payout'), - stake: localize('Stake'), - multiplier: localize('Multiplier'), -}); - -/** - * components can be undef or an array containing any of: 'start_date', 'barrier', 'last_digit' - * ['duration', 'amount'] are omitted, as they're available in all contract types - */ -type TContractTypesConfig = { - title: string; - trade_types: string[]; - basis: string[]; - components: string[]; - barrier_count?: number; - config?: { hide_duration?: boolean; should_override?: boolean }; -}; - -type TGetContractTypesConfig = (symbol: string) => Record; - -type TContractConfig = { - button_name?: React.ReactNode; - name: React.ReactNode; - position: string; -}; - -type TGetSupportedContracts = keyof ReturnType; - -export const getContractTypesConfig: TGetContractTypesConfig = symbol => ({ - rise_fall: { - title: localize('Rise/Fall'), - trade_types: ['CALL', 'PUT'], - basis: ['stake', 'payout'], - components: ['start_date'], - barrier_count: 0, - }, - rise_fall_equal: { - title: localize('Rise/Fall'), - trade_types: ['CALLE', 'PUTE'], - basis: ['stake', 'payout'], - components: ['start_date'], - barrier_count: 0, - }, - high_low: { - title: localize('Higher/Lower'), - trade_types: ['CALL', 'PUT'], - basis: ['stake', 'payout'], - components: ['barrier'], - barrier_count: 1, - }, - touch: { - title: localize('Touch/No Touch'), - trade_types: ['ONETOUCH', 'NOTOUCH'], - basis: ['stake', 'payout'], - components: ['barrier'], - }, - end: { - title: localize('Ends In/Ends Out'), - trade_types: ['EXPIRYMISS', 'EXPIRYRANGE'], - basis: ['stake', 'payout'], - components: ['barrier'], - }, - stay: { - title: localize('Stays In/Goes Out'), - trade_types: ['RANGE', 'UPORDOWN'], - basis: ['stake', 'payout'], - components: ['barrier'], - }, - asian: { - title: localize('Asian Up/Asian Down'), - trade_types: ['ASIANU', 'ASIAND'], - basis: ['stake', 'payout'], - components: [], - }, - match_diff: { - title: localize('Matches/Differs'), - trade_types: ['DIGITMATCH', 'DIGITDIFF'], - basis: ['stake', 'payout'], - components: ['last_digit'], - }, - even_odd: { - title: localize('Even/Odd'), - trade_types: ['DIGITODD', 'DIGITEVEN'], - basis: ['stake', 'payout'], - components: [], - }, - over_under: { - title: localize('Over/Under'), - trade_types: ['DIGITOVER', 'DIGITUNDER'], - basis: ['stake', 'payout'], - components: ['last_digit'], - }, - // TODO: update the rest of these contracts config - lb_call: { title: localize('Close-to-Low'), trade_types: ['LBFLOATCALL'], basis: ['multiplier'], components: [] }, - lb_put: { title: localize('High-to-Close'), trade_types: ['LBFLOATPUT'], basis: ['multiplier'], components: [] }, - lb_high_low: { title: localize('High-to-Low'), trade_types: ['LBHIGHLOW'], basis: ['multiplier'], components: [] }, - tick_high_low: { - title: localize('High Tick/Low Tick'), - trade_types: ['TICKHIGH', 'TICKLOW'], - basis: [], - components: [], - }, - run_high_low: { - title: localize('Only Ups/Only Downs'), - trade_types: ['RUNHIGH', 'RUNLOW'], - basis: [], - components: [], - }, - reset: { - title: localize('Reset Up/Reset Down'), - trade_types: ['RESETCALL', 'RESETPUT'], - basis: [], - components: [], - }, - callputspread: { - title: localize('Spread Up/Spread Down'), - trade_types: ['CALLSPREAD', 'PUTSPREAD'], - basis: [], - components: [], - }, - accumulator: { - title: localize('Accumulator'), - trade_types: ['ACCU'], - basis: ['stake'], - components: ['take_profit', 'accumulator', 'accu_info_display'], - barrier_count: 2, - config: { hide_duration: true }, - }, - multiplier: { - title: localize('Multipliers'), - trade_types: ['MULTUP', 'MULTDOWN'], - basis: ['stake'], - components: [ - 'take_profit', - 'stop_loss', - ...(shouldShowCancellation(symbol) ? ['cancellation'] : []), - ...(shouldShowExpiration(symbol) ? ['expiration'] : []), - ], - config: { hide_duration: true }, - }, // hide Duration for Multiplier contracts for now - vanilla: { - title: localize('Call/Put'), - trade_types: ['VANILLALONGCALL', 'VANILLALONGPUT'], - basis: ['stake'], - components: ['duration', 'strike', 'amount', 'vanilla_trade_type'], - barrier_count: 1, - config: { should_override: true }, - }, -}); - -// Config for rendering trade options -export const getContractCategoriesConfig = () => ({ - Multipliers: { name: localize('Multipliers'), categories: ['multiplier'] }, - 'Ups & Downs': { - name: localize('Ups & Downs'), - categories: ['rise_fall', 'rise_fall_equal', 'run_high_low', 'reset', 'asian', 'callputspread'], - }, - 'Highs & Lows': { name: localize('Highs & Lows'), categories: ['high_low', 'touch', 'tick_high_low'] }, - 'Ins & Outs': { name: localize('Ins & Outs'), categories: ['end', 'stay'] }, - 'Look Backs': { name: localize('Look Backs'), categories: ['lb_high_low', 'lb_put', 'lb_call'] }, - Digits: { name: localize('Digits'), categories: ['match_diff', 'even_odd', 'over_under'] }, - Vanillas: { name: localize('Vanillas'), categories: ['vanilla'] }, - Accumulators: { name: localize('Accumulators'), categories: ['accumulator'] }, -}); - -export const unsupported_contract_types_list = [ - // TODO: remove these once all contract types are supported - 'callputspread', - 'run_high_low', - 'reset', - 'asian', - 'tick_high_low', - 'end', - 'stay', - 'lb_call', - 'lb_put', - 'lb_high_low', -]; - -export const getCardLabels = () => ({ - APPLY: localize('Apply'), - BUY_PRICE: localize('Buy price:'), - CANCEL: localize('Cancel'), - CLOSE: localize('Close'), - CONTRACT_VALUE: localize('Contract value:'), - CURRENT_STAKE: localize('Current stake:'), - DAY: localize('day'), - DAYS: localize('days'), - DEAL_CANCEL_FEE: localize('Deal cancel. fee:'), - DECREMENT_VALUE: localize('Decrement value'), - DONT_SHOW_THIS_AGAIN: localize("Don't show this again"), - ENTRY_SPOT: localize('Entry spot:'), - INCREMENT_VALUE: localize('Increment value'), - NOT_AVAILABLE: localize('N/A'), - RESALE_NOT_OFFERED: localize('Resale not offered'), - SELL: localize('Sell'), - STAKE: localize('Stake:'), - STOP_LOSS: localize('Stop loss:'), - STRIKE: localize('Strike:'), - TICK: localize('Tick '), - TICKS: localize('Ticks'), - TOTAL_PROFIT_LOSS: localize('Total profit/loss:'), - PROFIT_LOSS: localize('Profit/Loss:'), - POTENTIAL_PROFIT_LOSS: localize('Potential profit/loss:'), - INDICATIVE_PRICE: localize('Indicative price:'), - INITIAL_STAKE: localize('Initial stake:'), - LOST: localize('Lost'), - PAYOUT: localize('Sell price:'), - PURCHASE_PRICE: localize('Buy price:'), - POTENTIAL_PAYOUT: localize('Payout limit:'), - TAKE_PROFIT: localize('Take profit:'), - TAKE_PROFIT_LOSS_NOT_AVAILABLE: localize( - 'Take profit and/or stop loss are not available while deal cancellation is active.' - ), - WON: localize('Won'), -}); - -export const getMarketNamesMap = () => ({ - FRXAUDCAD: localize('AUD/CAD'), - FRXAUDCHF: localize('AUD/CHF'), - FRXAUDJPY: localize('AUD/JPY'), - FRXAUDNZD: localize('AUD/NZD'), - FRXAUDPLN: localize('AUD/PLN'), - FRXAUDUSD: localize('AUD/USD'), - FRXBROUSD: localize('Oil/USD'), - FRXEURAUD: localize('EUR/AUD'), - FRXEURCAD: localize('EUR/CAD'), - FRXEURCHF: localize('EUR/CHF'), - FRXEURGBP: localize('EUR/GBP'), - FRXEURJPY: localize('EUR/JPY'), - FRXEURNZD: localize('EUR/NZD'), - FRXEURUSD: localize('EUR/USD'), - FRXGBPAUD: localize('GBP/AUD'), - FRXGBPCAD: localize('GBP/CAD'), - FRXGBPCHF: localize('GBP/CHF'), - FRXGBPJPY: localize('GBP/JPY'), - FRXGBPNOK: localize('GBP/NOK'), - FRXGBPUSD: localize('GBP/USD'), - FRXNZDJPY: localize('NZD/JPY'), - FRXNZDUSD: localize('NZD/USD'), - FRXUSDCAD: localize('USD/CAD'), - FRXUSDCHF: localize('USD/CHF'), - FRXUSDJPY: localize('USD/JPY'), - FRXUSDNOK: localize('USD/NOK'), - FRXUSDPLN: localize('USD/PLN'), - FRXUSDSEK: localize('USD/SEK'), - FRXXAGUSD: localize('Silver/USD'), - FRXXAUUSD: localize('Gold/USD'), - FRXXPDUSD: localize('Palladium/USD'), - FRXXPTUSD: localize('Platinum/USD'), - OTC_AEX: localize('Netherlands 25'), - OTC_AS51: localize('Australia 200'), - OTC_DJI: localize('Wall Street 30'), - OTC_FCHI: localize('France 40'), - OTC_FTSE: localize('UK 100'), - OTC_GDAXI: localize('Germany 40'), - OTC_HSI: localize('Hong Kong 50'), - OTC_IBEX35: localize('Spanish Index'), - OTC_N225: localize('Japan 225'), - OTC_NDX: localize('US Tech 100'), - OTC_SPC: localize('US 500'), - OTC_SSMI: localize('Swiss 20'), - OTC_SX5E: localize('Euro 50'), - R_10: localize('Volatility 10 Index'), - R_25: localize('Volatility 25 Index'), - R_50: localize('Volatility 50 Index'), - R_75: localize('Volatility 75 Index'), - R_100: localize('Volatility 100 Index'), - BOOM300N: localize('Boom 300 Index'), - BOOM500: localize('Boom 500 Index'), - BOOM1000: localize('Boom 1000 Index'), - CRASH300N: localize('Crash 300 Index'), - CRASH500: localize('Crash 500 Index'), - CRASH1000: localize('Crash 1000 Index'), - RDBEAR: localize('Bear Market Index'), - RDBULL: localize('Bull Market Index'), - STPRNG: localize('Step Index'), - WLDAUD: localize('AUD Basket'), - WLDEUR: localize('EUR Basket'), - WLDGBP: localize('GBP Basket'), - WLDXAU: localize('Gold Basket'), - WLDUSD: localize('USD Basket'), - '1HZ10V': localize('Volatility 10 (1s) Index'), - '1HZ100V': localize('Volatility 100 (1s) Index'), - '1HZ150V': localize('Volatility 150 (1s) Index'), - '1HZ200V': localize('Volatility 200 (1s) Index'), - '1HZ250V': localize('Volatility 250 (1s) Index'), - '1HZ300V': localize('Volatility 300 (1s) Index'), - JD10: localize('Jump 10 Index'), - JD25: localize('Jump 25 Index'), - JD50: localize('Jump 50 Index'), - JD75: localize('Jump 75 Index'), - JD100: localize('Jump 100 Index'), - JD150: localize('Jump 150 Index'), - JD200: localize('Jump 200 Index'), - CRYBCHUSD: localize('BCH/USD'), - CRYBNBUSD: localize('BNB/USD'), - CRYBTCLTC: localize('BTC/LTC'), - CRYIOTUSD: localize('IOT/USD'), - CRYNEOUSD: localize('NEO/USD'), - CRYOMGUSD: localize('OMG/USD'), - CRYTRXUSD: localize('TRX/USD'), - CRYBTCETH: localize('BTC/ETH'), - CRYZECUSD: localize('ZEC/USD'), - CRYXMRUSD: localize('ZMR/USD'), - CRYXMLUSD: localize('XLM/USD'), - CRYXRPUSD: localize('XRP/USD'), - CRYBTCUSD: localize('BTC/USD'), - CRYDSHUSD: localize('DSH/USD'), - CRYETHUSD: localize('ETH/USD'), - CRYEOSUSD: localize('EOS/USD'), - CRYLTCUSD: localize('LTC/USD'), -}); - -export const getUnsupportedContracts = () => ({ - EXPIRYMISS: { - name: localize('Ends Outside'), - position: 'top', - }, - EXPIRYRANGE: { - name: localize('Ends Between'), - position: 'bottom', - }, - RANGE: { - name: localize('Stays Between'), - position: 'top', - }, - UPORDOWN: { - name: localize('Goes Outside'), - position: 'bottom', - }, - RESETCALL: { - name: localize('Reset Call'), - position: 'top', - }, - RESETPUT: { - name: localize('Reset Put'), - position: 'bottom', - }, - TICKHIGH: { - name: localize('High Tick'), - position: 'top', - }, - TICKLOW: { - name: localize('Low Tick'), - position: 'bottom', - }, - ASIANU: { - name: localize('Asian Up'), - position: 'top', - }, - ASIAND: { - name: localize('Asian Down'), - position: 'bottom', - }, - LBFLOATCALL: { - name: localize('Close-to-Low'), - position: 'top', - }, - LBFLOATPUT: { - name: localize('High-to-Close'), - position: 'top', - }, - LBHIGHLOW: { - name: localize('High-to-Low'), - position: 'top', - }, - CALLSPREAD: { - name: localize('Spread Up'), - position: 'top', - }, - PUTSPREAD: { - name: localize('Spread Down'), - position: 'bottom', - }, - RUNHIGH: { - name: localize('Only Ups'), - position: 'top', - }, - RUNLOW: { - name: localize('Only Downs'), - position: 'bottom', - }, -}); - -export const getSupportedContracts = (is_high_low?: boolean) => ({ - ACCU: { - button_name: , - name: , - position: 'top', - }, - CALL: { - name: is_high_low ? : , - position: 'top', - }, - PUT: { - name: is_high_low ? : , - position: 'bottom', - }, - CALLE: { - name: , - position: 'top', - }, - PUTE: { - name: , - position: 'bottom', - }, - DIGITMATCH: { - name: , - position: 'top', - }, - DIGITDIFF: { - name: , - position: 'bottom', - }, - DIGITEVEN: { - name: , - position: 'top', - }, - DIGITODD: { - name: , - position: 'bottom', - }, - DIGITOVER: { - name: , - position: 'top', - }, - DIGITUNDER: { - name: , - position: 'bottom', - }, - ONETOUCH: { - name: , - position: 'top', - }, - NOTOUCH: { - name: , - position: 'bottom', - }, - MULTUP: { - name: , - position: 'top', - }, - MULTDOWN: { - name: , - position: 'bottom', - }, - VANILLALONGCALL: { - name: , - position: 'top', - }, - VANILLALONGPUT: { - name: , - position: 'bottom', - }, -}); - -export const getContractConfig = (is_high_low?: boolean) => ({ - ...getSupportedContracts(is_high_low), - ...getUnsupportedContracts(), -}); - -/* -// TODO we can combine getContractTypeDisplay and getContractTypePosition functions. -the difference between these two functions is just the property they return. (name/position) -*/ -export const getContractTypeDisplay = (type: TGetSupportedContracts, is_high_low = false, show_button_name = false) => { - const contract_config = getContractConfig(is_high_low)[type] as TContractConfig; - return (show_button_name && contract_config.button_name) || contract_config.name || ''; -}; - -export const getContractTypePosition = (type: TGetSupportedContracts, is_high_low = false) => - getContractConfig(is_high_low)[type].position || 'top'; - -export const isCallPut = (trade_type: 'rise_fall' | 'rise_fall_equal' | 'high_low'): boolean => - trade_type === 'rise_fall' || trade_type === 'rise_fall_equal' || trade_type === 'high_low'; diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx index 6f7c2ecd4fe9..951d04148bd7 100644 --- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx +++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx @@ -2,8 +2,14 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { DesktopWrapper, MobileWrapper, Collapsible, ContractCard, useHover } from '@deriv/components'; -import { isCryptoContract, isDesktop, getEndTime, getSymbolDisplayName } from '@deriv/shared'; -import { getCardLabels, getContractTypeDisplay } from 'Constants/contract'; +import { + getEndTime, + getSymbolDisplayName, + getCardLabels, + getContractTypeDisplay, + isCryptoContract, + isDesktop, +} from '@deriv/shared'; import { getMarketInformation } from 'Utils/Helpers/market-underlying'; import { SwipeableContractDrawer } from './swipeable-components.jsx'; import MarketClosedContractOverlay from './market-closed-contract-overlay.jsx'; diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx index 29e1edb72785..808bc2c6a28b 100644 --- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx +++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx @@ -6,22 +6,23 @@ import { CSSTransition } from 'react-transition-group'; import { ContractCard, CurrencyBadge, Icon, Money, ProgressSliderMobile, Text } from '@deriv/components'; import { getContractPath, + getContractTypeDisplay, + getCardLabels, + getSymbolDisplayName, + getEndTime, + getTotalProfit, + hasContractEntered, isAccumulatorContract, isCryptoContract, isMultiplierContract, isHighLow, isCryptocurrency, - hasContractEntered, isOpen, - getSymbolDisplayName, - getEndTime, - getTotalProfit, isVanillaContract, } from '@deriv/shared'; import { localize } from '@deriv/translations'; import { BinaryLink } from 'App/Components/Routes'; import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader'; -import { getContractTypeDisplay, getCardLabels } from 'Constants/contract'; import { getMarketInformation } from 'Utils/Helpers/market-underlying'; import ResultMobile from './result-mobile.jsx'; import { observer, useStore } from '@deriv/stores'; diff --git a/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx b/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx index 487cbc036604..34409af133c9 100644 --- a/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx +++ b/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx @@ -1,8 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { ProgressSlider } from '@deriv/components'; -import { getCurrentTick } from '@deriv/shared'; -import { getCardLabels } from 'Constants/contract'; +import { getCardLabels, getCurrentTick } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; const ProgressSliderStream = observer(({ contract_info }) => { diff --git a/packages/trader/src/Constants/contract.js b/packages/trader/src/Constants/contract.js deleted file mode 100644 index 64debe49ba5e..000000000000 --- a/packages/trader/src/Constants/contract.js +++ /dev/null @@ -1,294 +0,0 @@ -import React from 'react'; -import { localize, Localize } from '@deriv/translations'; - -export const getCardLabels = () => ({ - APPLY: localize('Apply'), - BUY_PRICE: localize('Buy price:'), - CANCEL: localize('Cancel'), - CLOSE: localize('Close'), - CONTRACT_VALUE: localize('Contract value:'), - CURRENT_STAKE: localize('Current stake:'), - DAY: localize('day'), - DAYS: localize('days'), - DEAL_CANCEL_FEE: localize('Deal cancel. fee:'), - DECREMENT_VALUE: localize('Decrement value'), - DONT_SHOW_THIS_AGAIN: localize("Don't show this again"), - ENTRY_SPOT: localize('Entry spot:'), - INCREMENT_VALUE: localize('Increment value'), - NOT_AVAILABLE: localize('N/A'), - RESALE_NOT_OFFERED: localize('Resale not offered'), - SELL: localize('Sell'), - STAKE: localize('Stake:'), - STOP_LOSS: localize('Stop loss:'), - STRIKE: localize('Strike:'), - TICK: localize('Tick '), - TICKS: localize('Ticks'), - TOTAL_PROFIT_LOSS: localize('Total profit/loss:'), - PROFIT_LOSS: localize('Profit/Loss:'), - POTENTIAL_PROFIT_LOSS: localize('Potential profit/loss:'), - INDICATIVE_PRICE: localize('Indicative price:'), - INITIAL_STAKE: localize('Initial stake:'), - LOST: localize('Lost'), - PAYOUT: localize('Sell price:'), - PURCHASE_PRICE: localize('Buy price:'), - POTENTIAL_PAYOUT: localize('Payout limit:'), - TAKE_PROFIT: localize('Take profit:'), - TAKE_PROFIT_LOSS_NOT_AVAILABLE: localize( - 'Take profit and/or stop loss are not available while deal cancellation is active.' - ), - WON: localize('Won'), -}); - -export const getMarketNamesMap = () => ({ - FRXAUDCAD: localize('AUD/CAD'), - FRXAUDCHF: localize('AUD/CHF'), - FRXAUDJPY: localize('AUD/JPY'), - FRXAUDNZD: localize('AUD/NZD'), - FRXAUDPLN: localize('AUD/PLN'), - FRXAUDUSD: localize('AUD/USD'), - FRXBROUSD: localize('Oil/USD'), - FRXEURAUD: localize('EUR/AUD'), - FRXEURCAD: localize('EUR/CAD'), - FRXEURCHF: localize('EUR/CHF'), - FRXEURGBP: localize('EUR/GBP'), - FRXEURJPY: localize('EUR/JPY'), - FRXEURNZD: localize('EUR/NZD'), - FRXEURUSD: localize('EUR/USD'), - FRXGBPAUD: localize('GBP/AUD'), - FRXGBPCAD: localize('GBP/CAD'), - FRXGBPCHF: localize('GBP/CHF'), - FRXGBPJPY: localize('GBP/JPY'), - FRXGBPNOK: localize('GBP/NOK'), - FRXGBPUSD: localize('GBP/USD'), - FRXNZDJPY: localize('NZD/JPY'), - FRXNZDUSD: localize('NZD/USD'), - FRXUSDCAD: localize('USD/CAD'), - FRXUSDCHF: localize('USD/CHF'), - FRXUSDJPY: localize('USD/JPY'), - FRXUSDNOK: localize('USD/NOK'), - FRXUSDPLN: localize('USD/PLN'), - FRXUSDSEK: localize('USD/SEK'), - FRXXAGUSD: localize('Silver/USD'), - FRXXAUUSD: localize('Gold/USD'), - FRXXPDUSD: localize('Palladium/USD'), - FRXXPTUSD: localize('Platinum/USD'), - OTC_AEX: localize('Netherlands 25'), - OTC_AS51: localize('Australia 200'), - OTC_DJI: localize('Wall Street 30'), - OTC_FCHI: localize('France 40'), - OTC_FTSE: localize('UK 100'), - OTC_GDAXI: localize('Germany 40'), - OTC_HSI: localize('Hong Kong 50'), - OTC_IBEX35: localize('Spanish Index'), - OTC_N225: localize('Japan 225'), - OTC_NDX: localize('US Tech 100'), - OTC_SPC: localize('US 500'), - OTC_SSMI: localize('Swiss 20'), - OTC_SX5E: localize('Euro 50'), - R_10: localize('Volatility 10 Index'), - R_25: localize('Volatility 25 Index'), - R_50: localize('Volatility 50 Index'), - R_75: localize('Volatility 75 Index'), - R_100: localize('Volatility 100 Index'), - BOOM300N: localize('Boom 300 Index'), - BOOM500: localize('Boom 500 Index'), - BOOM1000: localize('Boom 1000 Index'), - CRASH300N: localize('Crash 300 Index'), - CRASH500: localize('Crash 500 Index'), - CRASH1000: localize('Crash 1000 Index'), - RDBEAR: localize('Bear Market Index'), - RDBULL: localize('Bull Market Index'), - STPRNG: localize('Step Index'), - WLDAUD: localize('AUD Basket'), - WLDEUR: localize('EUR Basket'), - WLDGBP: localize('GBP Basket'), - WLDXAU: localize('Gold Basket'), - WLDUSD: localize('USD Basket'), - '1HZ10V': localize('Volatility 10 (1s) Index'), - '1HZ100V': localize('Volatility 100 (1s) Index'), - '1HZ150V': localize('Volatility 150 (1s) Index'), - '1HZ200V': localize('Volatility 200 (1s) Index'), - '1HZ250V': localize('Volatility 250 (1s) Index'), - '1HZ300V': localize('Volatility 300 (1s) Index'), - JD10: localize('Jump 10 Index'), - JD25: localize('Jump 25 Index'), - JD50: localize('Jump 50 Index'), - JD75: localize('Jump 75 Index'), - JD100: localize('Jump 100 Index'), - JD150: localize('Jump 150 Index'), - JD200: localize('Jump 200 Index'), - CRYBCHUSD: localize('BCH/USD'), - CRYBNBUSD: localize('BNB/USD'), - CRYBTCLTC: localize('BTC/LTC'), - CRYIOTUSD: localize('IOT/USD'), - CRYNEOUSD: localize('NEO/USD'), - CRYOMGUSD: localize('OMG/USD'), - CRYTRXUSD: localize('TRX/USD'), - CRYBTCETH: localize('BTC/ETH'), - CRYZECUSD: localize('ZEC/USD'), - CRYXMRUSD: localize('ZMR/USD'), - CRYXMLUSD: localize('XLM/USD'), - CRYXRPUSD: localize('XRP/USD'), - CRYBTCUSD: localize('BTC/USD'), - CRYDSHUSD: localize('DSH/USD'), - CRYETHUSD: localize('ETH/USD'), - CRYEOSUSD: localize('EOS/USD'), - CRYLTCUSD: localize('LTC/USD'), -}); - -export const getUnsupportedContracts = () => ({ - EXPIRYMISS: { - name: , - position: 'top', - }, - EXPIRYRANGE: { - name: , - position: 'bottom', - }, - RANGE: { - name: , - position: 'top', - }, - UPORDOWN: { - name: , - position: 'bottom', - }, - RESETCALL: { - name: , - position: 'top', - }, - RESETPUT: { - name: , - position: 'bottom', - }, - TICKHIGH: { - name: , - position: 'top', - }, - TICKLOW: { - name: , - position: 'bottom', - }, - ASIANU: { - name: , - position: 'top', - }, - ASIAND: { - name: , - position: 'bottom', - }, - LBFLOATCALL: { - name: , - position: 'top', - }, - LBFLOATPUT: { - name: , - position: 'top', - }, - LBHIGHLOW: { - name: , - position: 'top', - }, - CALLSPREAD: { - name: , - position: 'top', - }, - PUTSPREAD: { - name: , - position: 'bottom', - }, - RUNHIGH: { - name: , - position: 'top', - }, - RUNLOW: { - name: , - position: 'bottom', - }, -}); - -// Config to display trade button and their position -export const getSupportedContracts = is_high_low => ({ - ACCU: { - button_name: , - name: , - position: 'top', - }, - CALL: { - name: is_high_low ? : , - position: 'top', - }, - PUT: { - name: is_high_low ? : , - position: 'bottom', - }, - CALLE: { - name: , - position: 'top', - }, - PUTE: { - name: , - position: 'bottom', - }, - DIGITMATCH: { - name: , - position: 'top', - }, - DIGITDIFF: { - name: , - position: 'bottom', - }, - DIGITEVEN: { - name: , - position: 'top', - }, - DIGITODD: { - name: , - position: 'bottom', - }, - DIGITOVER: { - name: , - position: 'top', - }, - DIGITUNDER: { - name: , - position: 'bottom', - }, - ONETOUCH: { - name: , - position: 'top', - }, - NOTOUCH: { - name: , - position: 'bottom', - }, - MULTUP: { - name: , - position: 'top', - }, - MULTDOWN: { - name: , - position: 'bottom', - }, - VANILLALONGCALL: { - name: , - position: 'top', - }, - VANILLALONGPUT: { - name: , - position: 'bottom', - }, -}); - -export const getContractConfig = is_high_low => ({ - ...getSupportedContracts(is_high_low), - ...getUnsupportedContracts(), -}); - -export const getContractTypeDisplay = (type, is_high_low = false, show_button_name = false) => { - const contract_config = getContractConfig(is_high_low)[type]; - return (show_button_name && contract_config.button_name) || contract_config.name || ''; -}; - -export const getContractTypePosition = (type, is_high_low = false) => - getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type.toUpperCase()].position : 'top'; diff --git a/packages/trader/src/Constants/index.js b/packages/trader/src/Constants/index.js index 9ea4413f730b..5ecdd1f3443d 100644 --- a/packages/trader/src/Constants/index.js +++ b/packages/trader/src/Constants/index.js @@ -1,2 +1 @@ -export * from './contract'; export * from './ui'; diff --git a/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx b/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx index 5c8a14d768a5..8436d533dde2 100644 --- a/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx +++ b/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx @@ -3,10 +3,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import { toJS } from 'mobx'; import { DesktopWrapper, MobileWrapper, Popover, Text } from '@deriv/components'; -import { isMobile, useIsMounted, isContractElapsed } from '@deriv/shared'; +import { getMarketNamesMap, isMobile, useIsMounted, isContractElapsed } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { Bounce, SlideIn } from 'App/Components/Animations'; -import { getMarketNamesMap } from '../../../../Constants'; import { DigitSpot, LastDigitPrediction } from '../LastDigitPrediction'; import 'Sass/app/modules/contract/digits.scss'; diff --git a/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.tsx b/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.tsx index 1905f8bac1f1..fe7a105513ef 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.tsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.tsx @@ -1,9 +1,8 @@ import classNames from 'classnames'; import React from 'react'; import { DesktopWrapper, MobileWrapper, Money, IconTradeTypes, Text } from '@deriv/components'; -import { getContractTypeDisplay } from 'Constants/contract'; import ContractInfo from 'Modules/Trading/Components/Form/Purchase/contract-info.jsx'; -import { getGrowthRatePercentage } from '@deriv/shared'; +import { getContractTypeDisplay, getGrowthRatePercentage, getSupportedContracts } from '@deriv/shared'; import { TProposalTypeInfo } from 'Types'; type TPurchaseButton = { @@ -40,7 +39,9 @@ const ButtonTextWrapper = ({ should_fade, is_loading, type, is_high_low }: TButt return (
- {!should_fade && is_loading ? '' : getContractTypeDisplay(type, is_high_low, true)} + {!should_fade && is_loading + ? '' + : getContractTypeDisplay(type as keyof ReturnType, is_high_low, true)}
); diff --git a/packages/trader/src/Modules/Trading/Containers/contract-type.jsx b/packages/trader/src/Modules/Trading/Containers/contract-type.jsx index 914be9a0c118..a530dfef43e3 100644 --- a/packages/trader/src/Modules/Trading/Containers/contract-type.jsx +++ b/packages/trader/src/Modules/Trading/Containers/contract-type.jsx @@ -1,10 +1,9 @@ import React from 'react'; import { MobileWrapper, usePrevious } from '@deriv/components'; -import { unsupported_contract_types_list } from '@deriv/shared'; +import { getMarketNamesMap, unsupported_contract_types_list } from '@deriv/shared'; import { isDigitTradeType } from 'Modules/Trading/Helpers/digits'; import { localize } from '@deriv/translations'; import { ToastPopup } from 'Modules/Trading/Containers/toast-popup.jsx'; -import { getMarketNamesMap } from '../../../Constants'; import ContractTypeWidget from '../Components/Form/ContractType'; import { getAvailableContractTypes } from '../Helpers/contract-type'; import { useTraderStore } from 'Stores/useTraderStores'; diff --git a/packages/trader/src/Modules/Trading/Containers/purchase.tsx b/packages/trader/src/Modules/Trading/Containers/purchase.tsx index ab883a65350a..59f2718a1c38 100644 --- a/packages/trader/src/Modules/Trading/Containers/purchase.tsx +++ b/packages/trader/src/Modules/Trading/Containers/purchase.tsx @@ -1,16 +1,21 @@ import React from 'react'; -import { isAccumulatorContract, isEmptyObject, isMobile } from '@deriv/shared'; +import { + getContractTypePosition, + getSupportedContracts, + isAccumulatorContract, + isEmptyObject, + isMobile, +} from '@deriv/shared'; import { localize } from '@deriv/translations'; import PurchaseButtonsOverlay from 'Modules/Trading/Components/Elements/purchase-buttons-overlay.jsx'; import PurchaseFieldset from 'Modules/Trading/Components/Elements/purchase-fieldset'; -import { getContractTypePosition } from 'Constants/contract'; import { useTraderStore } from 'Stores/useTraderStores'; import { observer, useStore } from '@deriv/stores'; import { TProposalTypeInfo } from 'Types'; import ContractInfo from 'Modules/Trading/Components/Form/Purchase/contract-info.jsx'; const getSortedIndex = (type: string, index: number) => { - switch (getContractTypePosition(type)) { + switch (getContractTypePosition(type as keyof ReturnType)) { case 'top': return 0; case 'bottom': @@ -102,9 +107,13 @@ const Purchase = observer(({ is_market_closed }: { is_market_closed: boolean }) ); - if (!is_vanilla && getContractTypePosition(type) === 'top') { + if (!is_vanilla && getContractTypePosition(type as keyof ReturnType) === 'top') { components.unshift(purchase_fieldset); - } else if ((!is_vanilla && getContractTypePosition(type) !== 'top') || vanilla_trade_type === type) { + } else if ( + (!is_vanilla && + getContractTypePosition(type as keyof ReturnType) !== 'top') || + vanilla_trade_type === type + ) { components.push(purchase_fieldset); } }); diff --git a/packages/trader/src/Utils/Helpers/market-underlying.ts b/packages/trader/src/Utils/Helpers/market-underlying.ts index 7202fba181e1..96922da25d0a 100644 --- a/packages/trader/src/Utils/Helpers/market-underlying.ts +++ b/packages/trader/src/Utils/Helpers/market-underlying.ts @@ -1,4 +1,4 @@ -import { getMarketNamesMap, getContractConfig } from 'Constants/contract'; +import { getContractConfig, getMarketNamesMap } from '@deriv/shared'; type TMarketInfo = { category: string; From e28c803e01dae114c2ebb372ba7e3510c651e64c Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 28 Jun 2023 16:01:29 +0300 Subject: [PATCH 2/5] refactor: test improvements --- packages/shared/src/utils/constants/__tests__/contract.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/utils/constants/__tests__/contract.spec.ts b/packages/shared/src/utils/constants/__tests__/contract.spec.ts index f918a7328aaf..cba6fd090dc9 100644 --- a/packages/shared/src/utils/constants/__tests__/contract.spec.ts +++ b/packages/shared/src/utils/constants/__tests__/contract.spec.ts @@ -9,7 +9,7 @@ import { getContractTypePosition, } from '../contract'; -type TTest = Parameters[0]; +type TTest = keyof ReturnType; const card_label = localize('Apply'); const markets_name = localize('AUD/CAD'); const unsupported_contract = { From b5e1ae958812392abf0a0a4c13192f6ee761725b Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 28 Jun 2023 16:48:27 +0300 Subject: [PATCH 3/5] fix: removed forgotten import --- packages/core/src/Constants/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/Constants/index.js b/packages/core/src/Constants/index.js index 9ea4413f730b..5ecdd1f3443d 100644 --- a/packages/core/src/Constants/index.js +++ b/packages/core/src/Constants/index.js @@ -1,2 +1 @@ -export * from './contract'; export * from './ui'; From 5874dbdbe474e38deb5f6550085cd1c7b07b648b Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 28 Jun 2023 18:05:33 +0300 Subject: [PATCH 4/5] chore: empty commit to retrigger checks From 895ecf944b9da52182b13195219f6c9cc17762aa Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Thu, 29 Jun 2023 09:49:36 +0300 Subject: [PATCH 5/5] refactor: apply suggestion --- .../src/utils/constants/__tests__/contract.spec.ts | 8 ++++---- .../trader/src/Modules/Trading/Containers/purchase.tsx | 9 +++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/shared/src/utils/constants/__tests__/contract.spec.ts b/packages/shared/src/utils/constants/__tests__/contract.spec.ts index cba6fd090dc9..1ae45cfaacf0 100644 --- a/packages/shared/src/utils/constants/__tests__/contract.spec.ts +++ b/packages/shared/src/utils/constants/__tests__/contract.spec.ts @@ -9,7 +9,7 @@ import { getContractTypePosition, } from '../contract'; -type TTest = keyof ReturnType; +type TGetSupportedContractsKey = keyof ReturnType; const card_label = localize('Apply'); const markets_name = localize('AUD/CAD'); const unsupported_contract = { @@ -74,10 +74,10 @@ describe('getContractTypeDisplay', () => { expect(getContractTypeDisplay('MULTDOWN', true, true)).toEqual(localize('Down')); }); it('should return an empty string if show_button_name === false and contract_config has no name field', () => { - expect(getContractTypeDisplay('TEST' as TTest, true, false)).toBe(''); + expect(getContractTypeDisplay('TEST' as TGetSupportedContractsKey, true, false)).toBe(''); }); it('should return an empty string if show_button_name === true and contract_config has no name field and no button_name', () => { - expect(getContractTypeDisplay('TEST' as TTest, true, true)).toBe(''); + expect(getContractTypeDisplay('TEST' as TGetSupportedContractsKey, true, true)).toBe(''); }); }); @@ -86,6 +86,6 @@ describe('getContractTypePosition', () => { expect(getContractTypePosition('NOTOUCH')).toBe('bottom'); }); it('should return a top position if such type does not exist', () => { - expect(getContractTypePosition('TEST' as TTest)).toBe('top'); + expect(getContractTypePosition('TEST' as TGetSupportedContractsKey)).toBe('top'); }); }); diff --git a/packages/trader/src/Modules/Trading/Containers/purchase.tsx b/packages/trader/src/Modules/Trading/Containers/purchase.tsx index 59f2718a1c38..27820aca5874 100644 --- a/packages/trader/src/Modules/Trading/Containers/purchase.tsx +++ b/packages/trader/src/Modules/Trading/Containers/purchase.tsx @@ -14,8 +14,10 @@ import { observer, useStore } from '@deriv/stores'; import { TProposalTypeInfo } from 'Types'; import ContractInfo from 'Modules/Trading/Components/Form/Purchase/contract-info.jsx'; +type TGetSupportedContractsKey = keyof ReturnType; + const getSortedIndex = (type: string, index: number) => { - switch (getContractTypePosition(type as keyof ReturnType)) { + switch (getContractTypePosition(type as TGetSupportedContractsKey)) { case 'top': return 0; case 'bottom': @@ -107,11 +109,10 @@ const Purchase = observer(({ is_market_closed }: { is_market_closed: boolean }) ); - if (!is_vanilla && getContractTypePosition(type as keyof ReturnType) === 'top') { + if (!is_vanilla && getContractTypePosition(type as TGetSupportedContractsKey) === 'top') { components.unshift(purchase_fieldset); } else if ( - (!is_vanilla && - getContractTypePosition(type as keyof ReturnType) !== 'top') || + (!is_vanilla && getContractTypePosition(type as TGetSupportedContractsKey) !== 'top') || vanilla_trade_type === type ) { components.push(purchase_fieldset);