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

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

@@ -49,9 +49,9 @@ export const RangeSliderFilter = <T,>({
     return [min ?? defaultMinimum, max ?? maxValue]
   }, [columnFilters, id, maxValue, defaultMinimum])
 
-  const [range, setRange] = useUniqueDebounce(
+  const [range, setRange] = useUniqueDebounce({
     defaultValue,
-    useCallback(
+    callback: useCallback(
       (newRange: NumberRange) =>
         setColumnFilter(
           id,
@@ -61,7 +61,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

@@ -93,9 +93,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 +130,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
+  const [value, setValue] = useDebounce(defaultValue, debounceMs, debounceCallback)
+  return [value, setValue] as const
 }

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

@@ -4,7 +4,7 @@ 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'
@@ -261,7 +261,13 @@ export const LargeTokenInput = ({
   testId,
 }: Props) => {
   const [percentage, setPercentage] = useState<Decimal | undefined>(undefined)
-  const [balance, setBalance] = useDebounce(externalBalance, Duration.FormDebounce, onBalance)
+  const [balance, setBalance] = 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: (a, b) => new BigNumber(a ?? 0).isEqualTo(b ?? 0),
+  })
 
   const showSlider = !!maxBalance?.showSlider
   const showWalletBalance = maxBalance && maxBalance.showBalance !== false

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

@@ -100,6 +100,14 @@ export const NumericTextField = ({ value, min, max, onChange, onBlur, onFocus, .
   const parseAndClamp = (validatedValue: string, { shouldClamp = false }: { shouldClamp?: boolean }) => {
     if (validatedValue === '') return undefined
     const result = shouldClamp ? clamp(validatedValue, min, max) : new BigNumber(validatedValue)
+
+    // Preserve original formatting for zero values with trailing zeros (e.g., "0.00", "0.000")
+    // This prevents the input from jumping to "0" when the user is still typing
+    const decimalPart = validatedValue.split('.')[1]
+    if (!shouldClamp && result.isEqualTo(0) && decimalPart && /^0+$/.test(decimalPart)) {
+      return validatedValue as Decimal
+    }
+
     return result.toString() as Decimal
   }
 

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

@@ -23,7 +23,11 @@ export const SearchField = ({
   inputRef,
   ...props
 }: SearchFieldProps) => {
-  const [search, setSearch] = useUniqueDebounce<string>(value, onSearch)
+  const [search, setSearch] = useUniqueDebounce<string>({
+    defaultValue: value,
+    callback: onSearch,
+    equals: (a, b) => a.trim() === b.trim(),
+  })
   const localInputRef = useRef<HTMLInputElement | null>(null)
   const ref = inputRef || localInputRef
   const resetSearch = useCallback(() => {

tests/cypress/component/numeric-text-field.cy.tsx

@@ -119,4 +119,36 @@ describe('NumericTextField', () => {
     cy.get('input').click().type('.5').blur()
     cy.get('[data-testid="state-value"]').should('contain', '0.5')
   })
+
+  it('changing the amount of zeros in the decimal should not cause rounding to just 0', () => {
+    cy.mount(<TestComponent />)
+
+    // Start with empty input
+    cy.get('input').click().clear()
+
+    // Type "0.0001" character by character
+    cy.get('input').type('0')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0')
+
+    cy.get('input').type('.')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0')
+
+    cy.get('input').type('0')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0.0')
+
+    cy.get('input').type('0')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0.00')
+
+    cy.get('input').type('0')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0.000')
+
+    cy.get('input').type('1')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0.0001')
+
+    cy.get('input').type('{backspace}')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0.000')
+
+    cy.get('input').type('2')
+    cy.get('[data-testid="state-temp-value"]').should('contain', '0.0002')
+  })
 })