fix: allow dot and comma as decimal separators on number inputs (#7087)

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<AllocationProps> = ({
                 prefix={isFiat ? localeParts.prefix : ''}
                 decimalSeparator={localeParts.decimal}
                 inputMode='decimal'
+                allowedDecimalSeparators={allowedDecimalSeparators}
                 thousandSeparator={localeParts.group}
                 value={isFiat ? bnOrZero(fiatAmount).toFixed(2) : formattedCryptoAmount}
                 onValueChange={handleNumberFormatValueChange}

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<AssetInputProps> = ({
               prefix={isFiat ? localeParts.prefix : ''}
               decimalSeparator={localeParts.decimal}
               inputMode='decimal'
+              allowedDecimalSeparators={allowedDecimalSeparators}
               thousandSeparator={localeParts.group}
               value={isFiat ? bnOrZero(fiatAmount).toFixed(2) : formattedCryptoAmount}
               onValueChange={handleValueChange}

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<FeeInputProps> = ({ isFiat, onChange, value }) =
       prefix={isFiat ? localeParts.prefix : ''}
       decimalSeparator={localeParts.decimal}
       inputMode='decimal'
+      allowedDecimalSeparators={allowedDecimalSeparators}
       thousandSeparator={localeParts.group}
       value={value}
       onValueChange={handleValueChange}

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}

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<TradeAmountInputProps> = 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

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<C extends FieldValues>({
           inputMode='decimal'
           thousandSeparator={localeParts.group}
           decimalSeparator={localeParts.decimal}
+          allowedDecimalSeparators={allowedDecimalSeparators}
           customInput={CryptoInput}
           isNumericString={true}
           value={value}

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',