From 4a201e51099161830f88b70cb81b999cf7266eb4 Mon Sep 17 00:00:00 2001 From: Nikolai Berestevich Date: Fri, 25 Jun 2021 11:36:59 +0300 Subject: [PATCH 1/3] nikolai.berestevich/fix/trader-tolls-calculators: point is not a digit 30154 --- src/pages/trader-tools/common/_utility.js | 2 + src/pages/trader-tools/common/_validation.js | 8 +- .../margin-calculator/_margin-calculator.js | 18 +- .../pip-calculator/_pip-calculator.js | 26 +- .../pnl-for-margin/_pnl-for-margin.js | 140 ++++---- .../_pnl-for-multipliers.js | 318 +++++++++--------- .../swap-calculator/_swap-calculator.js | 139 ++------ 7 files changed, 284 insertions(+), 367 deletions(-) diff --git a/src/pages/trader-tools/common/_utility.js b/src/pages/trader-tools/common/_utility.js index a6fc69c7710..c1832713b57 100644 --- a/src/pages/trader-tools/common/_utility.js +++ b/src/pages/trader-tools/common/_utility.js @@ -406,3 +406,5 @@ export const numberSubmitFormatNegative = (input) => { } return result } + +export const getMaxLength = (input_field, input_length) => input_field?.includes(".") ? (input_length + 1).toString() : input_length.toString() diff --git a/src/pages/trader-tools/common/_validation.js b/src/pages/trader-tools/common/_validation.js index d2deacee35b..8c5c7e72ee4 100644 --- a/src/pages/trader-tools/common/_validation.js +++ b/src/pages/trader-tools/common/_validation.js @@ -9,8 +9,10 @@ const validation_regex = { const validation_is_exceed_number = (input, maxDigit) => { const max_digit = maxDigit || 15 - - if (input.length > max_digit) { + if (input.length > max_digit + 1 && input.includes(".")) { + return false + } + if (input.length > max_digit && !input.includes(".")) { return false } @@ -61,7 +63,7 @@ const validation = { return null }, volume: (input) => { - return numberValidation(input, localize('Volume'), 8) + return numberValidation(input, localize('Volume'), 18) }, assetPrice: (input) => { return numberValidation(input, localize('Asset price'), 15) diff --git a/src/pages/trader-tools/margin-calculator/_margin-calculator.js b/src/pages/trader-tools/margin-calculator/_margin-calculator.js index d02cdcd72a6..c19d2d8da4c 100644 --- a/src/pages/trader-tools/margin-calculator/_margin-calculator.js +++ b/src/pages/trader-tools/margin-calculator/_margin-calculator.js @@ -8,6 +8,7 @@ import { getContractSize, getCurrency, resetValidationMargin, + getMaxLength } from '../common/_utility' import { optionItemDefault, @@ -77,7 +78,7 @@ const MarginCalculator = () => { const onTabClick = (tab) => { setTab(tab) } - + return ( <> @@ -114,7 +115,7 @@ const MarginCalculator = () => { assetPrice: '', leverage: '', optionList: syntheticItemLists, - contractSize: '', + contractSize: '' }} validate={resetValidationMargin} onSubmit={(values, { setFieldValue }) => { @@ -134,7 +135,7 @@ const MarginCalculator = () => { setErrors, resetForm, isValid, - dirty, + dirty }) => ( @@ -193,11 +194,8 @@ const MarginCalculator = () => { items={values.optionList} label={localize('Symbol')} onChange={(value) => { - setFieldValue('marginSymbol', getCurrency(value)) - setFieldValue( - 'contractSize', - getContractSize(value), - ) + setFieldValue('marginSymbol', getCurrency(value)); + setFieldValue('contractSize', getContractSize(value)) setFieldValue('symbol', value) }} selected_item={values.symbol} @@ -226,7 +224,7 @@ const MarginCalculator = () => { setFieldTouched('volume', false, false) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.volume,8)} background="white" /> )} @@ -261,7 +259,7 @@ const MarginCalculator = () => { ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.assetPrice, 15)} background="white" /> )} diff --git a/src/pages/trader-tools/pip-calculator/_pip-calculator.js b/src/pages/trader-tools/pip-calculator/_pip-calculator.js index a3553d08617..fd953b962f4 100644 --- a/src/pages/trader-tools/pip-calculator/_pip-calculator.js +++ b/src/pages/trader-tools/pip-calculator/_pip-calculator.js @@ -8,11 +8,12 @@ import { getContractSize, numberWithCommas, numberSubmitFormat, + getMaxLength } from '../common/_utility' import { optionItemDefault, syntheticItemLists, - financialItemLists, + financialItemLists } from '../common/_underlying-data' import { BreadCrumbContainer, @@ -37,7 +38,7 @@ import { StyledLinkButton, StyledSection, FormulaText, - StyledOl, + StyledOl } from '../common/_style' import { Accordion, @@ -45,7 +46,7 @@ import { Header, LocalizedLinkText, QueryImage, - Text, + Text } from 'components/elements' import Input from 'components/form/input' import RightArrow from 'images/svg/black-right-arrow.svg' @@ -119,7 +120,7 @@ const PipCalculator = () => { volume: '', pointValue: '', optionList: syntheticItemLists, - contractSize: '', + contractSize: '' }} validate={resetValidationPip} onSubmit={(values, { setFieldValue }) => { @@ -139,7 +140,7 @@ const PipCalculator = () => { setErrors, resetForm, isValid, - dirty, + dirty }) => ( @@ -199,10 +200,7 @@ const PipCalculator = () => { id="symbol" onChange={(value) => { setFieldValue('marginSymbol', getCurrency(value)) - setFieldValue( - 'contractSize', - getContractSize(value), - ) + setFieldValue('contractSize', getContractSize(value)) setFieldValue('symbol', value) }} error={touched.symbol && errors.symbol} @@ -234,7 +232,7 @@ const PipCalculator = () => { setFieldTouched('volume', false, false) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.volume,8)} background="white" /> )} @@ -263,14 +261,10 @@ const PipCalculator = () => { handleError={(current_input) => { setFieldValue('pointValue', '', false) setFieldError('pointValue', '') - setFieldTouched( - 'pointValue', - false, - false, - ) + setFieldTouched('pointValue',false,false) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.pointValue,15)} background="white" /> )} diff --git a/src/pages/trader-tools/pnl-for-margin/_pnl-for-margin.js b/src/pages/trader-tools/pnl-for-margin/_pnl-for-margin.js index ab461e0af43..a36279de103 100644 --- a/src/pages/trader-tools/pnl-for-margin/_pnl-for-margin.js +++ b/src/pages/trader-tools/pnl-for-margin/_pnl-for-margin.js @@ -8,11 +8,12 @@ import { numberSubmitFormat, numberWithCommas, resetValidationPnlMargin, + getMaxLength } from '../common/_utility' import { financialItemLists, optionItemDefault, - syntheticItemLists, + syntheticItemLists } from '../common/_underlying-data' import { BreadCrumbContainer, @@ -41,7 +42,7 @@ import { StyledLinkButton, StyledOl, StyledSection, - SwapTabSelector, + SwapTabSelector } from '../common/_style' import { localize, Localize } from 'components/localization' import { @@ -50,7 +51,7 @@ import { Header, LocalizedLinkText, QueryImage, - Text, + Text } from 'components/elements' import { Flex, Show } from 'components/containers' import Input from 'components/form/input' @@ -119,7 +120,7 @@ const PnlMarginCalculator = () => { form?.setFieldValue('accountType', sub_tab === 'Synthetic' ? 'Synthetic' : 'Financial') form?.setFieldValue( 'optionList', - sub_tab === 'Synthetic' ? syntheticItemLists : financialItemLists, + sub_tab === 'Synthetic' ? syntheticItemLists : financialItemLists ) } const onSubTabClick = (tab) => setSubTab(tab) @@ -130,11 +131,11 @@ const PnlMarginCalculator = () => { if (form?.values.pointValue) { form.setFieldValue( 'stopLossPips', - getPnlMarginCommon(formik_ref.current.values, 'getStopLossPip'), + getPnlMarginCommon(formik_ref.current.values, 'getStopLossPip') ) form.setFieldValue( 'takeProfitPips', - getPnlMarginCommon(formik_ref.current.values, 'getTakeProfitPip'), + getPnlMarginCommon(formik_ref.current.values, 'getTakeProfitPip') ) // The 2 calls below is to reset the output state in order // prevent the pip output from displaying NAN @@ -163,7 +164,7 @@ const PnlMarginCalculator = () => { {localize( - 'Our profit and loss calculator for margin helps you to approximate your losses and/or gains.', + 'Our profit and loss calculator for margin helps you to approximate your losses and/or gains.' )} @@ -199,40 +200,40 @@ const PnlMarginCalculator = () => { optionList: syntheticItemLists, contractSize: '', assetPrice: '', - stopLossAmount: '', + stopLossAmount: '' }} validate={resetValidationPnlMargin} onSubmit={(values, { setFieldValue }) => { setFieldValue( 'stopLossPips', - getPnlMarginCommon(values, 'getStopLossPip'), + getPnlMarginCommon(values, 'getStopLossPip') ) setFieldValue( 'stopLossLevel', - getPnlMarginCommon(values, 'getStopLossLevel'), + getPnlMarginCommon(values, 'getStopLossLevel') ) setStopLossOutput(getPnlMarginCommon(values, 'getStopLossLevel')) setFieldValue( 'takeProfitPips', - getPnlMarginCommon(values, 'getTakeProfitPip'), + getPnlMarginCommon(values, 'getTakeProfitPip') ) setFieldValue( 'takeProfitLevel', - getPnlMarginCommon(values, 'getTakeProfitLevel'), + getPnlMarginCommon(values, 'getTakeProfitLevel') ) setTakeProfitOutput( - getPnlMarginCommon(values, 'getTakeProfitLevel'), + getPnlMarginCommon(values, 'getTakeProfitLevel') ) setFieldValue('pointValue', numberSubmitFormat(values.pointValue)) setFieldValue('volume', numberSubmitFormat(values.volume)) setFieldValue('assetPrice', numberSubmitFormat(values.assetPrice)) setFieldValue( 'stopLossAmount', - numberSubmitFormat(values.stopLossAmount), + numberSubmitFormat(values.stopLossAmount) ) setFieldValue( 'takeProfitAmount', - numberSubmitFormat(values.takeProfitAmount), + numberSubmitFormat(values.takeProfitAmount) ) }} > @@ -247,7 +248,7 @@ const PnlMarginCalculator = () => { isValid, dirty, setErrors, - resetForm, + resetForm }) => ( <> @@ -351,11 +352,11 @@ const PnlMarginCalculator = () => { resetForm() setFieldValue( 'accountType', - 'Financial', + 'Financial' ) setFieldValue( 'optionList', - financialItemLists, + financialItemLists ) }} > @@ -375,12 +376,12 @@ const PnlMarginCalculator = () => { onChange={(value) => { setFieldValue( 'pnlMarginSymbol', - getCurrency(value), + getCurrency(value) ) setFieldValue( 'contractSize', - getContractSize(value), + getContractSize(value) ) setFieldValue('symbol', value) }} @@ -395,10 +396,7 @@ const PnlMarginCalculator = () => { name="pointValue" value={values.pointValue} onChange={(value) => { - setFieldValue( - 'pointValue', - value, - ) + setFieldValue('pointValue', value) }} > {({ field }) => ( @@ -406,9 +404,7 @@ const PnlMarginCalculator = () => { {...field} id="pointValue" type="text" - label={localize( - 'Point value', - )} + label={localize('Point value')} autoComplete="off" error={ touched.pointValue && @@ -416,26 +412,24 @@ const PnlMarginCalculator = () => { } onBlur={handleBlur} data-lpignore="true" - handleError={( - current_input, - ) => { + handleError={(current_input) => { setFieldValue( 'pointValue', '', - false, + false ) setFieldError( 'pointValue', - '', + '' ) setFieldTouched( 'pointValue', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.pointValue, 8)} background="white" /> )} @@ -473,20 +467,20 @@ const PnlMarginCalculator = () => { setFieldValue( 'volume', '', - false, + false ) setFieldError( 'volume', - '', + '' ) setFieldTouched( 'volume', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.volume, 8)} background="white" /> )} @@ -501,7 +495,7 @@ const PnlMarginCalculator = () => { onChange={(value) => { setFieldValue( 'takeProfitAmount', - value, + value ) }} > @@ -511,7 +505,7 @@ const PnlMarginCalculator = () => { id="takeProfitAmount" type="text" label={localize( - 'Take profit amount', + 'Take profit amount' )} autoComplete="off" error={ @@ -526,20 +520,20 @@ const PnlMarginCalculator = () => { setFieldValue( 'takeProfitAmount', '', - false, + false ) setFieldError( 'takeProfitAmount', - '', + '' ) setFieldTouched( 'takeProfitAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.takeProfitAmount, 15)} background="white" /> )} @@ -557,7 +551,7 @@ const PnlMarginCalculator = () => { onChange={(value) => { setFieldValue( 'assetPrice', - value, + value ) }} > @@ -568,7 +562,7 @@ const PnlMarginCalculator = () => { type="text" value={values.assetPrice} label={localize( - 'Open price of asset', + 'Open price of asset' )} autoComplete="off" error={ @@ -583,20 +577,20 @@ const PnlMarginCalculator = () => { setFieldValue( 'assetPrice', '', - false, + false ) setFieldError( 'assetPrice', - '', + '' ) setFieldTouched( 'assetPrice', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.assetPrice, 15)} background="white" /> )} @@ -611,7 +605,7 @@ const PnlMarginCalculator = () => { onChange={(value) => { setFieldValue( 'stopLossAmount', - value, + value ) }} > @@ -624,7 +618,7 @@ const PnlMarginCalculator = () => { values.stopLossAmount } label={localize( - 'Stop loss amount', + 'Stop loss amount' )} autoComplete="off" error={ @@ -639,20 +633,20 @@ const PnlMarginCalculator = () => { setFieldValue( 'stopLossAmount', '', - false, + false ) setFieldError( 'stopLossAmount', - '', + '' ) setFieldTouched( 'stopLossAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stopLossAmount, 15)} background="white" /> )} @@ -777,11 +771,11 @@ const PnlMarginCalculator = () => { resetForm() setFieldValue( 'accountType', - 'Financial', + 'Financial' ) setFieldValue( 'optionList', - financialItemLists, + financialItemLists ) }} > @@ -799,12 +793,12 @@ const PnlMarginCalculator = () => { onChange={(value) => { setFieldValue( 'pnlMarginSymbol', - getCurrency(value), + getCurrency(value) ) setFieldValue( 'contractSize', - getContractSize(value), + getContractSize(value) ) setFieldValue('symbol', value) }} @@ -836,17 +830,17 @@ const PnlMarginCalculator = () => { setFieldValue( 'volume', '', - false, + false ) setFieldError('volume', '') setFieldTouched( 'volume', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.volume, 8)} background="white" /> )} @@ -867,7 +861,7 @@ const PnlMarginCalculator = () => { type="text" value={values.assetPrice} label={localize( - 'Open price of asset', + 'Open price of asset' )} autoComplete="off" error={ @@ -880,17 +874,17 @@ const PnlMarginCalculator = () => { setFieldValue( 'assetPrice', '', - false, + false ) setFieldError('assetPrice', '') setFieldTouched( 'assetPrice', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.assetPrice, 15)} background="white" /> )} @@ -931,7 +925,7 @@ const PnlMarginCalculator = () => { ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.pointValue, 8)} background="white" /> )} @@ -977,7 +971,7 @@ const PnlMarginCalculator = () => { ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.takeProfitAmount, 15)} background="white" /> )} @@ -1009,20 +1003,20 @@ const PnlMarginCalculator = () => { setFieldValue( 'stopLossAmount', '', - false, + false ) setFieldError( 'stopLossAmount', - '', + '' ) setFieldTouched( 'stopLossAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stopLossAmount, 15)} background="white" /> )} diff --git a/src/pages/trader-tools/pnl-for-multipliers/_pnl-for-multipliers.js b/src/pages/trader-tools/pnl-for-multipliers/_pnl-for-multipliers.js index 182a109cedd..7c3eba52ba5 100644 --- a/src/pages/trader-tools/pnl-for-multipliers/_pnl-for-multipliers.js +++ b/src/pages/trader-tools/pnl-for-multipliers/_pnl-for-multipliers.js @@ -7,6 +7,7 @@ import { numberWithCommas, resetValidationPnlMultipliersAmount, resetValidationPnlMultipliersLevel, + getMaxLength } from '../common/_utility' import { BreadCrumbContainer, @@ -32,7 +33,7 @@ import { StyledLinkButton, StyledOl, StyledSection, - SwapTabSelector, + SwapTabSelector } from '../common/_style' import { localize, Localize } from 'components/localization' import { @@ -41,7 +42,7 @@ import { Header, LocalizedLinkText, QueryImage, - Text, + Text } from 'components/elements' import { Flex, Show } from 'components/containers' import Input from 'components/form/input' @@ -152,7 +153,7 @@ const PnlMultipliersCalculator = () => { assetPrice: '', commission: '', stake: '', - multiplier: '', + multiplier: '' }} validate={resetValidationPnlMultipliersLevel} onSubmit={(values, { setFieldValue }) => { @@ -161,39 +162,36 @@ const PnlMultipliersCalculator = () => { sub_tab === 'Up' ? getPnlMultiplierCommon(values, 'getTakeProfitLevelUp') : getPnlMultiplierCommon( - values, - 'getTakeProfitLevelDown', - ), + values, + 'getTakeProfitLevelDown' + ) ) setFieldValue( 'stopLossLevelOutput', sub_tab === 'Up' ? getPnlMultiplierCommon(values, 'getStopLossLevelUp') - : getPnlMultiplierCommon( - values, - 'getStopLossLevelDown', - ), + : getPnlMultiplierCommon(values, 'getStopLossLevelDown') ) setFieldValue( 'assetPrice', - numberSubmitFormat(values.assetPrice), + numberSubmitFormat(values.assetPrice) ) setFieldValue( 'commission', - numberSubmitFormat(values.commission), + numberSubmitFormat(values.commission) ) setFieldValue('stake', numberSubmitFormat(values.stake)) setFieldValue( 'multiplier', - numberSubmitFormat(values.multiplier), + numberSubmitFormat(values.multiplier) ) setFieldValue( 'takeProfitAmount', - numberSubmitFormat(values.takeProfitAmount), + numberSubmitFormat(values.takeProfitAmount) ) setFieldValue( 'stopLossAmount', - numberSubmitFormat(values.stopLossAmount), + numberSubmitFormat(values.stopLossAmount) ) }} > @@ -206,7 +204,7 @@ const PnlMultipliersCalculator = () => { setFieldError, setFieldTouched, isValid, - dirty, + dirty }) => ( <> @@ -289,7 +287,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'assetPrice', - value, + value ) }} > @@ -299,7 +297,7 @@ const PnlMultipliersCalculator = () => { id="assetPrice" type="text" label={localize( - 'Asset price', + 'Asset price' )} autoComplete="off" error={ @@ -314,20 +312,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'assetPrice', '', - false, + false ) setFieldError( 'assetPrice', - '', + '' ) setFieldTouched( 'assetPrice', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.assetPrice, 8)} background="white" /> )} @@ -342,7 +340,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'commission', - value, + value ) }} > @@ -362,25 +360,25 @@ const PnlMultipliersCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={( - current_input, + current_input ) => { setFieldValue( 'commission', '', - false, + false ) setFieldError( 'commission', - '', + '' ) setFieldTouched( 'commission', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.commission, 8)} background="white" /> )} @@ -398,7 +396,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'stake', - value, + value ) }} > @@ -408,7 +406,7 @@ const PnlMultipliersCalculator = () => { id="stake" type="text" label={localize( - 'Stake', + 'Stake' )} autoComplete="off" error={ @@ -423,20 +421,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'stake', '', - false, + false ) setFieldError( 'stake', - '', + '' ) setFieldTouched( 'stake', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stake, 15)} background="white" /> )} @@ -451,7 +449,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'takeProfitAmount', - value, + value ) }} > @@ -476,20 +474,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'takeProfitAmount', '', - false, + false ) setFieldError( 'takeProfitAmount', - '', + '' ) setFieldTouched( 'takeProfitAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.takeProfitAmount, 15)} background="white" /> )} @@ -507,7 +505,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'multiplier', - value, + value ) }} > @@ -520,7 +518,7 @@ const PnlMultipliersCalculator = () => { values.multiplier } label={localize( - 'Multiplier', + 'Multiplier' )} autoComplete="off" error={ @@ -535,20 +533,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'multiplier', '', - false, + false ) setFieldError( 'multiplier', - '', + '' ) setFieldTouched( 'multiplier', false, - false, + false ) current_input.focus() }} - maxLength="4" + maxLength={getMaxLength(values.multiplier, 4)} background="white" /> )} @@ -563,7 +561,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'stopLossAmount', - value, + value ) }} > @@ -591,20 +589,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'stopLossAmount', '', - false, + false ) setFieldError( 'stopLossAmount', - '', + '' ) setFieldTouched( 'stopLossAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stopLossAmount, 15)} background="white" /> )} @@ -637,7 +635,7 @@ const PnlMultipliersCalculator = () => { {numberWithCommas( - values.takeProfitLevelOutput, + values.takeProfitLevelOutput )} @@ -652,7 +650,7 @@ const PnlMultipliersCalculator = () => { {numberWithCommas( - values.stopLossLevelOutput, + values.stopLossLevelOutput )} @@ -723,20 +721,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'assetPrice', '', - false, + false ) setFieldError( 'assetPrice', - '', + '' ) setFieldTouched( 'assetPrice', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.assetPrice, 8)} background="white" /> )} @@ -770,17 +768,17 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'stake', '', - false, + false ) setFieldError('stake', '') setFieldTouched( 'stake', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stake, 15)} background="white" /> )} @@ -808,25 +806,25 @@ const PnlMultipliersCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={( - current_input, + current_input ) => { setFieldValue( 'multiplier', '', - false, + false ) setFieldError( 'multiplier', - '', + '' ) setFieldTouched( 'multiplier', false, - false, + false ) current_input.focus() }} - maxLength="4" + maxLength={getMaxLength(values.multiplier, 4)} background="white" /> )} @@ -872,7 +870,7 @@ const PnlMultipliersCalculator = () => { ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.commission, 8)} background="white" /> )} @@ -896,7 +894,7 @@ const PnlMultipliersCalculator = () => { type="text" value={values.takeProfitAmount} label={localize( - 'Take profit amount', + 'Take profit amount' )} autoComplete="off" error={ @@ -911,20 +909,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'takeProfitAmount', '', - false, + false ) setFieldError( 'takeProfitAmount', - '', + '' ) setFieldTouched( 'takeProfitAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.takeProfitAmount, 15)} background="white" /> )} @@ -937,7 +935,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'stopLossAmount', - value, + value ) }} > @@ -948,7 +946,7 @@ const PnlMultipliersCalculator = () => { type="text" value={values.stopLossAmount} label={localize( - 'Stop loss amount', + 'Stop loss amount' )} autoComplete="off" error={ @@ -958,25 +956,25 @@ const PnlMultipliersCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={( - current_input, + current_input ) => { setFieldValue( 'stopLossAmount', '', - false, + false ) setFieldError( 'stopLossAmount', - '', + '' ) setFieldTouched( 'stopLossAmount', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stopLossAmount, 15)} background="white" /> )} @@ -1144,7 +1142,7 @@ const PnlMultipliersCalculator = () => { assetPrice: '', commission: '', stake: '', - multiplier: '', + multiplier: '' }} validate={resetValidationPnlMultipliersAmount} onSubmit={(values, { setFieldValue }) => { @@ -1152,43 +1150,43 @@ const PnlMultipliersCalculator = () => { 'takeProfitAmountOutput', sub_tab === 'Up' ? getPnlMultiplierCommon( - values, - 'getTakeProfitAmountUp', - ) + values, + 'getTakeProfitAmountUp', + ) : getPnlMultiplierCommon( - values, - 'getTakeProfitAmountDown', - ), + values, + 'getTakeProfitAmountDown', + ), ) setFieldValue( 'stopLossAmountOutput', sub_tab === 'Up' ? getPnlMultiplierCommon(values, 'getStopLossAmountUp') : getPnlMultiplierCommon( - values, - 'getStopLossAmountDown', - ), + values, + 'getStopLossAmountDown' + ) ) setFieldValue( 'assetPrice', - numberSubmitFormat(values.assetPrice), + numberSubmitFormat(values.assetPrice) ) setFieldValue( 'commission', - numberSubmitFormat(values.commission), + numberSubmitFormat(values.commission) ) setFieldValue('stake', numberSubmitFormat(values.stake)) setFieldValue( 'multiplier', - numberSubmitFormat(values.multiplier), + numberSubmitFormat(values.multiplier) ) setFieldValue( 'takeProfitLevel', - numberSubmitFormat(values.takeProfitLevel), + numberSubmitFormat(values.takeProfitLevel) ) setFieldValue( 'stopLossLevel', - numberSubmitFormat(values.stopLossLevel), + numberSubmitFormat(values.stopLossLevel) ) }} > @@ -1201,7 +1199,7 @@ const PnlMultipliersCalculator = () => { setFieldError, setFieldTouched, isValid, - dirty, + dirty }) => ( <> @@ -1284,7 +1282,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'assetPrice', - value, + value ) }} > @@ -1309,20 +1307,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'assetPrice', '', - false, + false ) setFieldError( 'assetPrice', - '', + '' ) setFieldTouched( 'assetPrice', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.assetPrice, 8)} background="white" /> )} @@ -1337,7 +1335,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'commission', - value, + value ) }} > @@ -1347,7 +1345,7 @@ const PnlMultipliersCalculator = () => { id="commission" type="text" label={localize( - 'Commission', + 'Commission' )} autoComplete="off" error={ @@ -1362,20 +1360,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'commission', '', - false, + false ) setFieldError( 'commission', - '', + '' ) setFieldTouched( 'commission', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.commission, 8)} background="white" /> )} @@ -1393,7 +1391,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'stake', - value, + value ) }} > @@ -1403,7 +1401,7 @@ const PnlMultipliersCalculator = () => { id="stake" type="text" label={localize( - 'Stake', + 'Stake' )} autoComplete="off" error={ @@ -1413,25 +1411,25 @@ const PnlMultipliersCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={( - current_input, + current_input ) => { setFieldValue( 'stake', '', - false, + false ) setFieldError( 'stake', - '', + '' ) setFieldTouched( 'stake', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stake, 15)} background="white" /> )} @@ -1446,7 +1444,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'takeProfitLevel', - value, + value ) }} > @@ -1456,7 +1454,7 @@ const PnlMultipliersCalculator = () => { id="takeProfitLevel" type="text" label={localize( - 'Take profit level', + 'Take profit level' )} autoComplete="off" error={ @@ -1471,20 +1469,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'takeProfitLevel', '', - false, + false ) setFieldError( 'takeProfitLevel', - '', + '' ) setFieldTouched( 'takeProfitLevel', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.takeProfitLevel, 15)} background="white" /> )} @@ -1502,7 +1500,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'multiplier', - value, + value ) }} > @@ -1515,7 +1513,7 @@ const PnlMultipliersCalculator = () => { values.multiplier } label={localize( - 'Multiplier', + 'Multiplier' )} autoComplete="off" error={ @@ -1530,20 +1528,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'multiplier', '', - false, + false ) setFieldError( 'multiplier', - '', + '' ) setFieldTouched( 'multiplier', false, - false, + false ) current_input.focus() }} - maxLength="4" + maxLength={getMaxLength(values.multiplier, 4)} background="white" /> )} @@ -1558,7 +1556,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'stopLossLevel', - value, + value ) }} > @@ -1571,7 +1569,7 @@ const PnlMultipliersCalculator = () => { values.stopLossLevel } label={localize( - 'Stop loss level', + 'Stop loss level' )} autoComplete="off" error={ @@ -1581,25 +1579,25 @@ const PnlMultipliersCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={( - current_input, + current_input ) => { setFieldValue( 'stopLossLevel', '', - false, + false ) setFieldError( 'stopLossLevel', - '', + '' ) setFieldTouched( 'stopLossLevel', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stopLossLevel, 15)} background="white" /> )} @@ -1632,7 +1630,7 @@ const PnlMultipliersCalculator = () => { {numberWithCommas( - values.takeProfitAmountOutput, + values.takeProfitAmountOutput )} @@ -1647,7 +1645,7 @@ const PnlMultipliersCalculator = () => { {numberWithCommas( - values.stopLossAmountOutput, + values.stopLossAmountOutput )} @@ -1718,20 +1716,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'assetPrice', '', - false, + false ) setFieldError( 'assetPrice', - '', + '' ) setFieldTouched( 'assetPrice', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.assetPrice, 8)} background="white" /> )} @@ -1765,17 +1763,17 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'stake', '', - false, + false ) setFieldError('stake', '') setFieldTouched( 'stake', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stake, 15)} background="white" /> )} @@ -1808,20 +1806,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'multiplier', '', - false, + false ) setFieldError( 'multiplier', - '', + '' ) setFieldTouched( 'multiplier', false, - false, + false ) current_input.focus() }} - maxLength="4" + maxLength={getMaxLength(values.multiplier, 4)} background="white" /> )} @@ -1854,20 +1852,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'commission', '', - false, + false ) setFieldError( 'commission', - '', + '' ) setFieldTouched( 'commission', false, - false, + false ) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.commission, 8)} background="white" /> )} @@ -1880,7 +1878,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'takeProfitLevel', - value, + value ) }} > @@ -1891,7 +1889,7 @@ const PnlMultipliersCalculator = () => { type="text" value={values.takeProfitLevel} label={localize( - 'Take profit level', + 'Take profit level' )} autoComplete="off" error={ @@ -1906,20 +1904,20 @@ const PnlMultipliersCalculator = () => { setFieldValue( 'takeProfitLevel', '', - false, + false ) setFieldError( 'takeProfitLevel', - '', + '' ) setFieldTouched( 'takeProfitLevel', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.takeProfitLevel, 15)} background="white" /> )} @@ -1932,7 +1930,7 @@ const PnlMultipliersCalculator = () => { onChange={(value) => { setFieldValue( 'stopLossLevel', - value, + value ) }} > @@ -1943,7 +1941,7 @@ const PnlMultipliersCalculator = () => { type="text" value={values.stopLossLevel} label={localize( - 'Stop loss level', + 'Stop loss level' )} autoComplete="off" error={ @@ -1953,25 +1951,25 @@ const PnlMultipliersCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={( - current_input, + current_input ) => { setFieldValue( 'stopLossLevel', '', - false, + false ) setFieldError( 'stopLossLevel', - '', + '' ) setFieldTouched( 'stopLossLevel', false, - false, + false ) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.stopLossLevel, 15)} background="white" /> )} diff --git a/src/pages/trader-tools/swap-calculator/_swap-calculator.js b/src/pages/trader-tools/swap-calculator/_swap-calculator.js index aa8f0396f93..52c29199de7 100644 --- a/src/pages/trader-tools/swap-calculator/_swap-calculator.js +++ b/src/pages/trader-tools/swap-calculator/_swap-calculator.js @@ -12,11 +12,12 @@ import { numberSubmitFormatNegative, numberSubmitFormat, numberWithCommas, + getMaxLength } from '../common/_utility' import { optionItemDefault, syntheticItemLists, - financialItemLists, + financialItemLists } from '../common/_underlying-data' import { BreadCrumbContainer, @@ -40,7 +41,7 @@ import { StyledOl, StyledSection, SwapFormWrapper, - SwapTabSelector, + SwapTabSelector } from '../common/_style' import { localize, Localize } from 'components/localization' import { @@ -50,7 +51,7 @@ import { Header, LocalizedLinkText, QueryImage, - Text, + Text } from 'components/elements' import { Flex, Show } from 'components/containers' import Input from 'components/form/input' @@ -145,20 +146,14 @@ const SwapCalculator = () => { optionList: syntheticItemLists, contractSize: '', swapRate: '', - assetPrice: '', + assetPrice: '' }} validate={resetValidationSynthetic} onSubmit={(values, { setFieldValue }) => { setFieldValue('swapCharge', getSwapChargeSynthetic(values)) setFieldValue('volume', numberSubmitFormat(values.volume)) - setFieldValue( - 'swapRate', - numberSubmitFormatNegative(values.swapRate), - ) - setFieldValue( - 'assetPrice', - numberSubmitFormat(values.assetPrice), - ) + setFieldValue('swapRate', numberSubmitFormatNegative(values.swapRate)) + setFieldValue('assetPrice', numberSubmitFormat(values.assetPrice)) }} > {({ @@ -170,7 +165,7 @@ const SwapCalculator = () => { setFieldError, setFieldTouched, isValid, - dirty, + dirty }) => ( @@ -196,15 +191,9 @@ const SwapCalculator = () => { selected_option={values.symbol} id="symbol" onChange={(value) => { - setFieldValue( - 'swapCurrency', - getCurrency(value), - ) - - setFieldValue( - 'contractSize', - getContractSize(value), + setFieldValue('swapCurrency', getCurrency(value) ) + setFieldValue('contractSize', getContractSize(value)) setFieldValue('symbol', value) }} contract_size={values.contractSize} @@ -233,20 +222,12 @@ const SwapCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={(current_input) => { - setFieldValue( - 'volume', - '', - false, - ) + setFieldValue('volume', '', false) setFieldError('volume', '') - setFieldTouched( - 'volume', - false, - false, - ) + setFieldTouched('volume', false, false) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.volume, 8)} background="white" /> )} @@ -276,20 +257,12 @@ const SwapCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={(current_input) => { - setFieldValue( - 'assetPrice', - '', - false, - ) + setFieldValue('assetPrice', '', false) setFieldError('assetPrice', '') - setFieldTouched( - 'assetPrice', - false, - false, - ) + setFieldTouched('assetPrice', false, false) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.assetPrice, 15)} background="white" /> )} @@ -319,20 +292,12 @@ const SwapCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={(current_input) => { - setFieldValue( - 'swapRate', - '', - false, - ) + setFieldValue('swapRate', '', false) setFieldError('swapRate', '') - setFieldTouched( - 'swapRate', - false, - false, - ) + setFieldTouched('swapRate', false, false) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.swapRate, 15)} background="white" /> )} @@ -463,20 +428,14 @@ const SwapCalculator = () => { optionList: financialItemLists, contractSize: '', swapRate: '', - pointValue: '', + pointValue: '' }} validate={resetValidationForex} onSubmit={(values, { setFieldValue }) => { setFieldValue('swapCharge', getSwapChargeForex(values)) setFieldValue('volume', numberSubmitFormat(values.volume)) - setFieldValue( - 'swapRate', - numberSubmitFormatNegative(values.swapRate), - ) - setFieldValue( - 'pointValue', - numberSubmitFormat(values.pointValue), - ) + setFieldValue('swapRate', numberSubmitFormatNegative(values.swapRate)) + setFieldValue('pointValue', numberSubmitFormat(values.pointValue)) }} > {({ @@ -488,7 +447,7 @@ const SwapCalculator = () => { isValid, dirty, setFieldTouched, - setFieldError, + setFieldError }) => ( @@ -513,14 +472,8 @@ const SwapCalculator = () => { selected_option={values.symbol} id="symbol" onChange={(value) => { - setFieldValue( - 'swapCurrency', - getCurrency(value), - ) - setFieldValue( - 'contractSize', - getContractSize(value), - ) + setFieldValue('swapCurrency', getCurrency(value)) + setFieldValue('contractSize', getContractSize(value)) setFieldValue('symbol', value) }} contractSize={values.contractSize} @@ -548,20 +501,12 @@ const SwapCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={(current_input) => { - setFieldValue( - 'volume', - '', - false, - ) + setFieldValue('volume', '', false) setFieldError('volume', '') - setFieldTouched( - 'volume', - false, - false, - ) + setFieldTouched('volume', false, false) current_input.focus() }} - maxLength="8" + maxLength={getMaxLength(values.volume, 8)} background="white" /> )} @@ -591,20 +536,12 @@ const SwapCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={(current_input) => { - setFieldValue( - 'pointValue', - '', - false, - ) + setFieldValue('pointValue', '', false) setFieldError('pointValue', '') - setFieldTouched( - 'pointValue', - false, - false, - ) + setFieldTouched('pointValue', false, false) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.pointValue, 15)} background="white" /> )} @@ -634,20 +571,12 @@ const SwapCalculator = () => { onBlur={handleBlur} data-lpignore="true" handleError={(current_input) => { - setFieldValue( - 'swapRate', - '', - false, - ) + setFieldValue('swapRate', '', false,) setFieldError('swapRate', '') - setFieldTouched( - 'swapRate', - false, - false, - ) + setFieldTouched('swapRate', false, false) current_input.focus() }} - maxLength="15" + maxLength={getMaxLength(values.swapRate, 15)} background="white" /> )} From 3c0fa0948ead5eada80d0289fbdb115c407f7c03 Mon Sep 17 00:00:00 2001 From: Nikolai Berestevich Date: Fri, 25 Jun 2021 11:44:13 +0300 Subject: [PATCH 2/3] nikolai.berestevich/fix/trader-tolls-calculators: point is not a digit 30154 --- src/pages/trader-tools/common/_validation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/trader-tools/common/_validation.js b/src/pages/trader-tools/common/_validation.js index 8c5c7e72ee4..5991f0bbf67 100644 --- a/src/pages/trader-tools/common/_validation.js +++ b/src/pages/trader-tools/common/_validation.js @@ -63,7 +63,7 @@ const validation = { return null }, volume: (input) => { - return numberValidation(input, localize('Volume'), 18) + return numberValidation(input, localize('Volume'), 8) }, assetPrice: (input) => { return numberValidation(input, localize('Asset price'), 15) From 2ef32ea433a4bf994311844351299107fba8c99c Mon Sep 17 00:00:00 2001 From: Nikolai Berestevich Date: Wed, 30 Jun 2021 12:43:44 +0300 Subject: [PATCH 3/3] nikolai.berestevich/fix/ point should not be counted for digitals number --- src/pages/trader-tools/common/_validation.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/trader-tools/common/_validation.js b/src/pages/trader-tools/common/_validation.js index 5991f0bbf67..c5cba3a1e02 100644 --- a/src/pages/trader-tools/common/_validation.js +++ b/src/pages/trader-tools/common/_validation.js @@ -9,13 +9,12 @@ const validation_regex = { const validation_is_exceed_number = (input, maxDigit) => { const max_digit = maxDigit || 15 - if (input.length > max_digit + 1 && input.includes(".")) { + if (input.includes(".") && input.length > max_digit + 1) { return false } - if (input.length > max_digit && !input.includes(".")) { + if (!input.includes(".") && input.length > max_digit) { return false } - return true }