Merge pull request #1528 from curvefi/fix/lti-decimals

fix: various fixes and improvements to numeric text field and large token input

Author: DanielSchiavini

apps/main/src/llamalend/features/market-list/filters/RangeSliderFilter.tsx

@@ -51,9 +51,9 @@ export const RangeSliderFilter = <T,>({
   }, [columnFilters, id, maxValue, defaultMinimum])
   const isMobile = useIsMobile()
 
-  const [range, setRange] = useUniqueDebounce(
+  const [range, setRange] = useUniqueDebounce({
     defaultValue,
-    useCallback(
+    callback: useCallback(
       (newRange: NumberRange) =>
         setColumnFilter(
           id,
@@ -63,7 +63,7 @@ export const RangeSliderFilter = <T,>({
         ),
       [defaultMinimum, defaultValue, id, maxValue, setColumnFilter],
     ),
-  )
+  })
 
   const onChange = useCallback<OnSliderChange>((_, newRange) => setRange(newRange as NumberRange), [setRange])
 

packages/curve-ui-kit/src/hooks/useDebounce.ts

@@ -7,7 +7,7 @@ import { Duration } from '@ui-kit/themes/design/0_primitives'
  * @param initialValue - The initial value to use
  * @param debounceMs - The debounce period in milliseconds
  * @param callback - Callback function that is called after the debounce period
- * @returns A tuple containing the current value and a setter function
+ * @returns A triple containing the current value, a setter function and a cancel function
  *
  * @example
  * ```tsx
@@ -28,7 +28,7 @@ import { Duration } from '@ui-kit/themes/design/0_primitives'
  *
  * // With a controlled component
  * // The hook will update its internal value when initialValue changes
- * const [debouncedValue, setDebouncedValue] = useDebounce(externalValue, 200, handleChange);
+ * const [debouncedValue, setDebouncedValue, cancel] = useDebounce(externalValue, 200, handleChange);
  */
 export function useDebounce<T>(initialValue: T, debounceMs: number, callback: (value: T) => void) {
   const [value, setValue] = useState<T>(initialValue)
@@ -49,26 +49,25 @@ export function useDebounce<T>(initialValue: T, debounceMs: number, callback: (v
     [],
   )
 
+  // Clear any existing timer
+  const cancel = useCallback(() => timerRef.current && clearTimeout(timerRef.current), [])
+
   // Sets the internal value, but calls the callback after a delay unless retriggered again.
   const setDebouncedValue = useCallback(
     (newValue: T) => {
       setValue(newValue)
-
-      // Clear any existing timer
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current)
-      }
+      cancel()
 
       // Initiate a new timer
       timerRef.current = window.setTimeout(() => {
         callback(newValue)
         timerRef.current = null
       }, debounceMs)
     },
-    [callback, debounceMs],
+    [callback, cancel, debounceMs],
   )
 
-  return [value, setDebouncedValue] as const
+  return [value, setDebouncedValue, cancel] as const
 }
 
 /**
@@ -93,9 +92,26 @@ export function useDebouncedValue<T>(
 const SearchDebounceMs = 166 // 10 frames at 60fps
 
 /**
- * A hook that debounces a search value and calls a callback when the debounce period has elapsed.
+ * A hook that debounces a value and only calls the callback when the value has actually changed.
+ * This prevents unnecessary callback executions when the debounced value hasn't changed.
+ *
+ * @param defaultValue - The initial value to use
+ * @param callback - Function called when the debounced value changes
+ * @param debounceMs - The debounce period in milliseconds (default: 166ms)
+ * @param equals - Optional custom equality function to compare values
+ * @returns A tuple containing the current value and a setter function
  */
-export function useUniqueDebounce<T>(defaultValue: T, callback: (value: T) => void, debounceMs = SearchDebounceMs) {
+export function useUniqueDebounce<T>({
+  defaultValue,
+  callback,
+  debounceMs = SearchDebounceMs,
+  equals,
+}: {
+  defaultValue: T
+  callback: (value: T) => void
+  debounceMs?: number
+  equals?: (a: T, b: T) => boolean
+}) {
   const lastValue = useRef(defaultValue)
 
   /**
@@ -113,16 +129,14 @@ export function useUniqueDebounce<T>(defaultValue: T, callback: (value: T) => vo
 
   const debounceCallback = useCallback(
     (value: T) => {
-      if (typeof value === 'string') {
-        value = value.trim() as unknown as T
-      }
-      if (value !== lastValue.current) {
+      const isEqual = equals ? equals(value, lastValue.current) : value === lastValue.current
+      if (!isEqual) {
         lastValue.current = value
         callback(value)
       }
     },
-    [callback],
+    [callback, equals],
   )
-  const [search, setSearch] = useDebounce(defaultValue, debounceMs, debounceCallback)
-  return [search, setSearch] as const
+
+  return useDebounce(defaultValue, debounceMs, debounceCallback)
 }

packages/curve-ui-kit/src/shared/ui/LargeTokenInput.tsx

@@ -4,11 +4,11 @@ import Box from '@mui/material/Box'
 import Chip from '@mui/material/Chip'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import { useDebounce } from '@ui-kit/hooks/useDebounce'
+import { useUniqueDebounce } from '@ui-kit/hooks/useDebounce'
 import { t } from '@ui-kit/lib/i18n'
 import { Duration, TransitionFunction } from '@ui-kit/themes/design/0_primitives'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { formatNumber, type Decimal } from '@ui-kit/utils'
+import { decimal, formatNumber, type Decimal } from '@ui-kit/utils'
 import { Balance, type Props as BalanceProps } from './Balance'
 import { NumericTextField } from './NumericTextField'
 import { TradingSlider } from './TradingSlider'
@@ -70,7 +70,7 @@ type BalanceTextFieldProps = {
   maxBalance?: Decimal
   isError: boolean
   disabled?: boolean
-  onCommit: (balance: Decimal | undefined) => void
+  onCommit: (balance: string | undefined) => void
   name: string
 }
 
@@ -245,6 +245,9 @@ const calculateNewPercentage = (newBalance: Decimal, max: Decimal) =>
     .toFixed(2)
     .replace(/\.?0+$/, '') as Decimal
 
+/** Converts two decimals to BigNumber for comparison. Undefined is considered zero. */
+const bigNumEquals = (a?: Decimal, b?: Decimal) => new BigNumber(a ?? 0).isEqualTo(b ?? 0)
+
 export const LargeTokenInput = ({
   ref,
   tokenSelector,
@@ -261,7 +264,13 @@ export const LargeTokenInput = ({
   testId,
 }: Props) => {
   const [percentage, setPercentage] = useState<Decimal | undefined>(undefined)
-  const [balance, setBalance] = useDebounce(externalBalance, Duration.FormDebounce, onBalance)
+  const [balance, setBalance, cancelSetBalance] = useUniqueDebounce({
+    defaultValue: externalBalance,
+    callback: onBalance,
+    debounceMs: Duration.FormDebounce,
+    // We don't want to trigger onBalance if the value is effectively the same, e.g. "0.0" and "0.00"
+    equals: bigNumEquals,
+  })
 
   const showSlider = !!maxBalance?.showSlider
   const showWalletBalance = maxBalance && maxBalance.showBalance !== false
@@ -281,14 +290,21 @@ export const LargeTokenInput = ({
   )
 
   const handleBalanceChange = useCallback(
-    (newBalance: Decimal | undefined) => {
-      if (newBalance == null) return
-      setBalance(newBalance)
+    (newBalance: string | undefined) => {
+      // In case the input is somehow invalid, although we do our best to sanitize it in NumericTextField,
+      // we cancel the debounce such that the input won't reset while still typing.
+      const decimalBalance = decimal(newBalance)
+      if (decimalBalance == null) {
+        cancelSetBalance()
+        return
+      }
+
+      setBalance(decimalBalance)
       setPercentage(
-        maxBalance?.balance && newBalance ? calculateNewPercentage(newBalance, maxBalance.balance) : undefined,
+        maxBalance?.balance && newBalance ? calculateNewPercentage(decimalBalance, maxBalance.balance) : undefined,
       )
     },
-    [maxBalance?.balance, setBalance],
+    [maxBalance?.balance, setBalance, cancelSetBalance],
   )
 
   const handleChip = useCallback(

packages/curve-ui-kit/src/shared/ui/NumericTextField.tsx

@@ -11,10 +11,9 @@ import { type Decimal } from '@ui-kit/utils'
  *
  * @param value - The new input value to validate
  * @param current - The current input value to fall back to if validation fails
- * @param allowNegative - Whether to allow negative numbers
  * @returns The validated and normalized input value, or the current value if invalid
  */
-const sanitize = (value: string, current: string, allowNegative: boolean): string => {
+const sanitize = (value: string, current: string): string => {
   const normalizedValue = value.replace(/,/g, '.')
 
   // If more than one decimal point, return the current value (ignore the change)
@@ -28,13 +27,8 @@ const sanitize = (value: string, current: string, allowNegative: boolean): strin
     return current
   }
 
-  // If negative numbers are not allowed and value starts with minus, ignore the change
-  if (!allowNegative && minusIndex === 0) {
-    return current
-  }
-
   // Check if it contains only valid characters (numbers, optional minus at start if allowed, and one optional decimal)
-  const pattern = allowNegative ? /^-?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/ : /^[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/
+  const pattern = /^-?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/
   return pattern.test(normalizedValue) ? normalizedValue : current
 }
 
@@ -72,8 +66,8 @@ type NumericTextFieldProps = Omit<TextFieldProps, 'type' | 'value' | 'onChange'
   min?: Decimal
   /** Maximum allowed value (default: Infinity) */
   max?: Decimal
-  /** Callback fired when the numeric value changes */
-  onChange?: (value: Decimal | undefined) => void
+  /** Callback fired when the numeric value changes, can be a temporary non decimal value like "5." or "-" */
+  onChange?: (value: string | undefined) => void
   /** Callback fired when the numeric is being submitted */
   onBlur?: (value: Decimal | undefined) => void
 }
@@ -82,27 +76,14 @@ export const NumericTextField = ({ value, min, max, onChange, onBlur, onFocus, .
   // Internal value that might be incomplete, like "4.".
   const [inputValue, setInputValue] = useState(getDisplayValue(value))
 
-  const [lastChangeValue, setLastChangeValue] = useState(value)
+  const [lastChangeValue, setLastChangeValue] = useState<string | undefined>(value)
   const [lastBlurValue, setLastBlurValue] = useState(value)
 
   // Update input value when value changes externally
   useEffect(() => {
     setInputValue(getDisplayValue(value))
   }, [value])
 
-  /**
-   * Converts a string input to a numeric value with optional clamping.
-   *
-   * @param validatedValue - The sanitized string input
-   * @param shouldClamp - Whether to apply min/max bounds
-   * @returns Numeric value, undefined for empty/invalid input
-   */
-  const parseAndClamp = (validatedValue: string, { shouldClamp = false }: { shouldClamp?: boolean }) => {
-    if (validatedValue === '') return undefined
-    const result = shouldClamp ? clamp(validatedValue, min, max) : new BigNumber(validatedValue)
-    return result.toString() as Decimal
-  }
-
   return (
     <TextField
       {...props}
@@ -120,19 +101,17 @@ export const NumericTextField = ({ value, min, max, onChange, onBlur, onFocus, .
         onFocus?.(e)
       }}
       onChange={(e) => {
-        const sanitizedValue = sanitize(e.target.value, inputValue, min == null || +min < 0)
+        const sanitizedValue = sanitize(e.target.value, inputValue)
         setInputValue(sanitizedValue)
-
-        const changedValue = parseAndClamp(sanitizedValue, { shouldClamp: false })
-
-        if (changedValue !== lastChangeValue) {
-          onChange?.(changedValue)
-          setLastChangeValue(changedValue)
-        }
+        onChange?.(sanitizedValue)
+        setLastChangeValue(sanitizedValue)
       }}
       onBlur={() => {
-        // Replace a sole minus with just empty input as it's not really valid.
-        const finalValue = parseAndClamp(inputValue === '-' ? '' : inputValue, { shouldClamp: true })
+        // Replace a sole invalid values with just empty input as they're not really valid.
+        const invalidValues = ['-', '.', ',', '']
+        const finalValue = invalidValues.includes(inputValue)
+          ? undefined
+          : (clamp(inputValue, min, max).toString() as Decimal)
         setInputValue(getDisplayValue(finalValue))
 
         // Also emit the changed event, because due to clamping and such the final value

packages/curve-ui-kit/src/shared/ui/SearchField.tsx

@@ -12,6 +12,9 @@ export type SearchFieldProps = TextFieldProps & {
   inputRef?: RefObject<HTMLInputElement | null>
 }
 
+/** Compares two strings, ignoring leading and trailing whitespace. */
+const searchFieldEquals = (a: string, b: string) => a.trim() === b.trim()
+
 /**
  * Search field with debounced search. It is cleared and focused when clicking the close button.
  */
@@ -23,7 +26,11 @@ export const SearchField = ({
   inputRef,
   ...props
 }: SearchFieldProps) => {
-  const [search, setSearch] = useUniqueDebounce<string>(value, onSearch)
+  const [search, setSearch] = useUniqueDebounce<string>({
+    defaultValue: value,
+    callback: onSearch,
+    equals: searchFieldEquals,
+  })
   const localInputRef = useRef<HTMLInputElement | null>(null)
   const ref = inputRef || localInputRef
   const resetSearch = useCallback(() => {

packages/curve-ui-kit/src/shared/ui/TradingSlider.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { CLASS_BORDERLESS, SLIDER_BACKGROUND_VAR } from '@ui-kit/themes/components/slider'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { type Decimal } from '@ui-kit/utils'
+import { decimal, type Decimal } from '@ui-kit/utils'
 import { NumericTextField } from './NumericTextField'
 
 const { Spacing } = SizesAndSpaces
@@ -59,7 +59,7 @@ export const TradingSlider = ({ percentage, onChange, onCommit, step = 1, textAl
       value={percentage}
       min="0"
       max="100"
-      onChange={(newPercentage) => onChange?.(newPercentage)}
+      onChange={(newPercentage) => onChange?.(decimal(newPercentage))}
       onBlur={(newPercentage) => onCommit?.(newPercentage)}
       disabled={disabled}
       slotProps={{

packages/curve-ui-kit/src/utils/decimal.spec.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { decimal } from './decimal'
+
+describe('decimal', () => {
+  it('handles basic, normal numbers', () => {
+    expect(decimal('1')).toBe('1')
+    expect(decimal('3.14')).toBe('3.14')
+    expect(decimal('-4.20')).toBe('-4.20')
+    expect(decimal('1.55e20')).toBe('1.55e20')
+    expect(decimal('1e-10')).toBe('1e-10')
+  })
+
+  it('handles zero and negative zero', () => {
+    expect(decimal('0')).toBe('0')
+    expect(decimal('0.00')).toBe('0.00')
+    expect(decimal('-0')).toBe('-0')
+  })
+
+  it('handles incomplete numbers', () => {
+    expect(decimal('5.')).toBe('5.') // trailing decimal still converts fine to numbers
+  })
+
+  it.each(['Infinity', '-Infinity', undefined, null, '', '?', '-', NaN])('handles edge cases', (invalidCharacter) => {
+    expect(decimal(invalidCharacter as any)).toBe(undefined)
+  })
+
+  it('handles large and small numbers', () => {
+    // Would be "Infinity" or with native number type
+    const veryLargeNumber =
+      '123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890.1'
+
+    // Would be "0" or with native number type
+    const verySmallNumber =
+      '0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000123456789'
+
+    expect(decimal(veryLargeNumber)).toBe(veryLargeNumber)
+    expect(decimal(verySmallNumber)).toBe(verySmallNumber)
+  })
+
+  it('returns undefined for non-numeric strings', () => {
+    expect(decimal('abc')).toBe(undefined)
+    expect(decimal('12.34.56')).toBe(undefined)
+    expect(decimal('12a34')).toBe(undefined)
+  })
+})