handle number validation

src/features/Web3/components/Conversion/Conversion.tsx

@@ -12,7 +12,7 @@ export function Conversion(): ReactElement {
   const [euro, setEuro] = useState('0.00')
 
   useEffect(() => {
-    if (!selectedToken?.price || !amount) {
+    if (!selectedToken?.price || !amount || amount === '') {
       setDollar('0.00')
       setEuro('0.00')
       return

src/features/Web3/components/Form/Form.tsx

@@ -3,7 +3,12 @@ import { useAccount } from 'wagmi'
 import { InputGroup } from '../Input'
 import styles from './Form.module.css'
 import { useStore } from '@nanostores/react'
-import { $selectedToken, $isInitSend, $amount } from '@features/Web3/stores'
+import {
+  $selectedToken,
+  $isInitSend,
+  $amount,
+  $setAmount
+} from '@features/Web3/stores'
 import siteConfig from '@config/blog.config'
 import { Send } from '../Send'
 import { RainbowKit } from '../RainbowKit/RainbowKit'
@@ -18,6 +23,7 @@ export function Web3Form(): ReactElement {
 
   const [error, setError] = useState<string>()
 
+  // Error Validation
   useEffect(() => {
     if (!amount || amount === '' || !selectedToken?.balance) {
       setError(undefined)
@@ -34,7 +40,7 @@ export function Web3Form(): ReactElement {
   // reset amount whenever token changes
   useEffect(() => {
     if (!selectedToken) return
-    $amount.set('')
+    $setAmount('')
   }, [selectedToken])
 
   return (

src/features/Web3/components/Input/InputGroup.tsx

@@ -3,7 +3,12 @@ import Input from '@components/Input'
 import { Conversion } from '../Conversion'
 import styles from './InputGroup.module.css'
 import { TokenSelect } from '../TokenSelect'
-import { $amount, $isInitSend, $selectedToken } from '@features/Web3/stores'
+import {
+  $amount,
+  $setAmount,
+  $isInitSend,
+  $selectedToken
+} from '@features/Web3/stores'
 import { useStore } from '@nanostores/react'
 
 export function InputGroup({
@@ -19,7 +24,7 @@ export function InputGroup({
   const [isFocus, setIsFocus] = useState(false)
 
   function handleChange(newAmount: string) {
-    $amount.set(newAmount)
+    $setAmount(newAmount)
   }
 
   return (
@@ -36,6 +41,7 @@ export function InputGroup({
           type="text"
           inputMode="decimal"
           pattern="[0-9.]*"
+          lang="en-US"
           value={amount}
           placeholder="0.00"
           onChange={(e) => handleChange(e.target.value)}

src/features/Web3/components/TokenSelect/Token.tsx

@@ -11,9 +11,10 @@ interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
   ({ className, token, ...props }, forwardedRef) => {
+    const locale = window?.navigator?.language || 'en'
     const balance =
       token?.balance && token?.symbol
-        ? formatCurrency(token.balance, token.symbol, 'en', false, {
+        ? formatCurrency(token.balance, token.symbol, locale, false, {
             decimalPlaces: 3,
             significantFigures: 3
           })
@@ -23,7 +24,7 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
       token?.balance && token?.price?.usd
         ? token?.balance * token?.price.usd
         : 0
-    const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', 'en')
+    const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', locale)
 
     return balance && parseInt(balance) !== 0 && valueInUsd >= 1 ? (
       <Select.Item

src/features/Web3/lib/normalizeAmount/index.ts

@@ -0,0 +1 @@
+export * from './normalizeAmount'

src/features/Web3/lib/normalizeAmount/normalizeAmount.test.ts

@@ -0,0 +1,17 @@
+import { test, expect } from 'vitest'
+import { normalizeAmount } from './normalizeAmount'
+
+test('normalizeAmount replaces comma with a period', () => {
+  const result = normalizeAmount('1,234')
+  expect(result).toBe('1.234')
+})
+
+test('normalizeAmount removes non-digit and non-decimal characters', () => {
+  const result = normalizeAmount('1234.56abc')
+  expect(result).toBe('1234.56')
+})
+
+test('normalizeAmount removes non-digit and non-decimal characters', () => {
+  const result = normalizeAmount('1234,56abc')
+  expect(result).toBe('1234.56')
+})

src/features/Web3/lib/normalizeAmount/normalizeAmount.ts

@@ -0,0 +1,9 @@
+export function normalizeAmount(amount: string): string {
+  // Replace comma used as a decimal separator with a period
+  amount = amount.replace(',', '.')
+
+  // Remove any non-digit or non-decimal characters
+  amount = amount.replace(/[^\d.]/g, '')
+
+  return amount
+}

src/features/Web3/stores/send.ts

@@ -1,5 +1,12 @@
-import { atom } from 'nanostores'
+import { action, atom } from 'nanostores'
+import { normalizeAmount } from '../lib/normalizeAmount'
 
 export const $isInitSend = atom<boolean>(false)
 export const $amount = atom<string>('')
 export const $txHash = atom<string | undefined>()
+
+export const $setAmount = action($amount, 'setAmount', (store, amount) => {
+  const normalizedAmount = normalizeAmount(amount)
+  store.set(normalizedAmount)
+  return store.get()
+})