From 1f1840854e5c631b779a423d9eac5870241d7f97 Mon Sep 17 00:00:00 2001 From: NeOMakinG <14963751+NeOMakinG@users.noreply.github.com> Date: Mon, 10 Jun 2024 19:37:46 +0200 Subject: [PATCH] fix: allow dot and comma as decimal separators on number inputs (#7087) --- src/components/DeFi/components/Allocation.tsx | 2 ++ src/components/DeFi/components/AssetInput.tsx | 2 ++ src/components/FeeExplainer/components/FeeInput.tsx | 2 ++ src/components/Modals/Settings/BalanceThresholdInput.tsx | 6 +++++- .../MultiHopTrade/components/TradeAmountInput.tsx | 2 ++ src/components/TokenRow/TokenRow.tsx | 2 ++ src/state/slices/preferencesSlice/preferencesSlice.ts | 2 ++ 7 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/DeFi/components/Allocation.tsx b/src/components/DeFi/components/Allocation.tsx index 40aa96924bb..173ea8b21de 100644 --- a/src/components/DeFi/components/Allocation.tsx +++ b/src/components/DeFi/components/Allocation.tsx @@ -28,6 +28,7 @@ import { RawText } from 'components/Text' import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter' import { useToggle } from 'hooks/useToggle/useToggle' import { bn, bnOrZero } from 'lib/bignumber/bignumber' +import { allowedDecimalSeparators } from 'state/slices/preferencesSlice/preferencesSlice' import { colors } from 'theme/colors' const cryptoInputStyle = { caretColor: colors.blue[200] } @@ -182,6 +183,7 @@ export const Allocation: React.FC = ({ prefix={isFiat ? localeParts.prefix : ''} decimalSeparator={localeParts.decimal} inputMode='decimal' + allowedDecimalSeparators={allowedDecimalSeparators} thousandSeparator={localeParts.group} value={isFiat ? bnOrZero(fiatAmount).toFixed(2) : formattedCryptoAmount} onValueChange={handleNumberFormatValueChange} diff --git a/src/components/DeFi/components/AssetInput.tsx b/src/components/DeFi/components/AssetInput.tsx index a914c9bc866..9e5118f8424 100644 --- a/src/components/DeFi/components/AssetInput.tsx +++ b/src/components/DeFi/components/AssetInput.tsx @@ -18,6 +18,7 @@ import { AssetIcon } from 'components/AssetIcon' import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter' import { useToggle } from 'hooks/useToggle/useToggle' import { bnOrZero } from 'lib/bignumber/bignumber' +import { allowedDecimalSeparators } from 'state/slices/preferencesSlice/preferencesSlice' import { colors } from 'theme/colors' import { Balance } from './Balance' @@ -170,6 +171,7 @@ export const AssetInput: React.FC = ({ prefix={isFiat ? localeParts.prefix : ''} decimalSeparator={localeParts.decimal} inputMode='decimal' + allowedDecimalSeparators={allowedDecimalSeparators} thousandSeparator={localeParts.group} value={isFiat ? bnOrZero(fiatAmount).toFixed(2) : formattedCryptoAmount} onValueChange={handleValueChange} diff --git a/src/components/FeeExplainer/components/FeeInput.tsx b/src/components/FeeExplainer/components/FeeInput.tsx index eb3a20853a2..923887bc175 100644 --- a/src/components/FeeExplainer/components/FeeInput.tsx +++ b/src/components/FeeExplainer/components/FeeInput.tsx @@ -5,6 +5,7 @@ import type { NumberFormatValues } from 'react-number-format' import NumberFormat from 'react-number-format' import { useTranslate } from 'react-polyglot' import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter' +import { allowedDecimalSeparators } from 'state/slices/preferencesSlice/preferencesSlice' const CryptoInput = (props: InputProps) => { const translate = useTranslate() @@ -60,6 +61,7 @@ export const FeeInput: React.FC = ({ isFiat, onChange, value }) = prefix={isFiat ? localeParts.prefix : ''} decimalSeparator={localeParts.decimal} inputMode='decimal' + allowedDecimalSeparators={allowedDecimalSeparators} thousandSeparator={localeParts.group} value={value} onValueChange={handleValueChange} diff --git a/src/components/Modals/Settings/BalanceThresholdInput.tsx b/src/components/Modals/Settings/BalanceThresholdInput.tsx index f961f09f63c..625dcdfb83d 100644 --- a/src/components/Modals/Settings/BalanceThresholdInput.tsx +++ b/src/components/Modals/Settings/BalanceThresholdInput.tsx @@ -5,7 +5,10 @@ import { FaGreaterThanEqual } from 'react-icons/fa' import type { NumberFormatValues } from 'react-number-format' import NumberFormat from 'react-number-format' import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter' -import { preferences } from 'state/slices/preferencesSlice/preferencesSlice' +import { + allowedDecimalSeparators, + preferences, +} from 'state/slices/preferencesSlice/preferencesSlice' import { selectBalanceThreshold } from 'state/slices/selectors' import { useAppDispatch, useAppSelector } from 'state/store' @@ -44,6 +47,7 @@ export const BalanceThresholdInput = () => { thousandSeparator={localeParts.group} decimalSeparator={localeParts.decimal} customInput={InputComponent} + allowedDecimalSeparators={allowedDecimalSeparators} isNumericString={true} value={balanceThreshold} prefix={localeParts.prefix} diff --git a/src/components/MultiHopTrade/components/TradeAmountInput.tsx b/src/components/MultiHopTrade/components/TradeAmountInput.tsx index 3a49f96d702..5117eddda8b 100644 --- a/src/components/MultiHopTrade/components/TradeAmountInput.tsx +++ b/src/components/MultiHopTrade/components/TradeAmountInput.tsx @@ -27,6 +27,7 @@ import { Balance } from 'components/DeFi/components/Balance' import { PercentOptionsButtonGroup } from 'components/DeFi/components/PercentOptionsButtonGroup' import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter' import { bnOrZero } from 'lib/bignumber/bignumber' +import { allowedDecimalSeparators } from 'state/slices/preferencesSlice/preferencesSlice' import { selectMarketDataByAssetIdUserCurrency } from 'state/slices/selectors' import { useAppSelector } from 'state/store' import { colors } from 'theme/colors' @@ -232,6 +233,7 @@ export const TradeAmountInput: React.FC = memo( prefix={isFiat ? localeParts.prefix : ''} decimalSeparator={localeParts.decimal} inputMode='decimal' + allowedDecimalSeparators={allowedDecimalSeparators} thousandSeparator={localeParts.group} value={isFiat ? bnOrZero(fiatAmount).toFixed(2) : formattedCryptoAmount} // this is already within a useCallback, we don't need to memo this diff --git a/src/components/TokenRow/TokenRow.tsx b/src/components/TokenRow/TokenRow.tsx index 5d44879afd2..a8fdbb2c13b 100644 --- a/src/components/TokenRow/TokenRow.tsx +++ b/src/components/TokenRow/TokenRow.tsx @@ -12,6 +12,7 @@ import { Controller } from 'react-hook-form' import NumberFormat from 'react-number-format' import { useTranslate } from 'react-polyglot' import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter' +import { allowedDecimalSeparators } from 'state/slices/preferencesSlice/preferencesSlice' const CryptoInput = (props: InputProps) => { const translate = useTranslate() @@ -59,6 +60,7 @@ export function TokenRow({ inputMode='decimal' thousandSeparator={localeParts.group} decimalSeparator={localeParts.decimal} + allowedDecimalSeparators={allowedDecimalSeparators} customInput={CryptoInput} isNumericString={true} value={value} diff --git a/src/state/slices/preferencesSlice/preferencesSlice.ts b/src/state/slices/preferencesSlice/preferencesSlice.ts index b56ceea80ee..4dda3a71bc4 100644 --- a/src/state/slices/preferencesSlice/preferencesSlice.ts +++ b/src/state/slices/preferencesSlice/preferencesSlice.ts @@ -74,6 +74,8 @@ export enum CurrencyFormats { CommaDecimalDotThousands = 'de-DE', // 123.456,78 $ } +export const allowedDecimalSeparators = ['.', ','] + export enum HomeMarketView { TopAssets = 'TopAssets', Watchlist = 'Watchlist',