@luxexchange/lx 1.0.0

package/src/components/AmountInput/AmountInput.test.tsx

@@ -0,0 +1,141 @@
+import { parseValue } from '@luxexchange/lx/src/components/AmountInput/utils/parseValue'
+import { replaceSeparators } from '@luxexchange/lx/src/components/AmountInput/utils/replaceSeparators'
+
+describe(replaceSeparators, () => {
+  describe('it can strip grouping separators', () => {
+    const inputParams = {
+      groupingSeparator: ',',
+      decimalSeparator: '.',
+      groupingOverride: '',
+      decimalOverride: '.',
+    }
+    const cases = [
+      { input: { value: '1234', ...inputParams }, output: '1234' },
+      { input: { value: '1234,', ...inputParams }, output: '1234' },
+      { input: { value: '1.234', ...inputParams }, output: '1.234' },
+      { input: { value: '1,234', ...inputParams }, output: '1234' },
+      { input: { value: '1,234.56', ...inputParams }, output: '1234.56' },
+      { input: { value: '1,234,567', ...inputParams }, output: '1234567' },
+      { input: { value: '1,234,567.89', ...inputParams }, output: '1234567.89' },
+    ]
+    it.each(cases)('converts $input.value to $output', ({ input, output }) => {
+      expect(replaceSeparators(input)).toBe(output)
+    })
+  })
+
+  describe('it can handle common English to French cases', () => {
+    const inputParams = {
+      groupingSeparator: ',',
+      decimalSeparator: '.',
+      groupingOverride: ' ',
+      decimalOverride: ',',
+    }
+    const cases = [
+      { input: { value: '.1234', ...inputParams }, output: ',1234' },
+      { input: { value: '1234', ...inputParams }, output: '1234' },
+      { input: { value: '1234.', ...inputParams }, output: '1234,' },
+      { input: { value: '1.234', ...inputParams }, output: '1,234' },
+      { input: { value: '1,234', ...inputParams }, output: '1 234' },
+      { input: { value: '1,234.56', ...inputParams }, output: '1 234,56' },
+      { input: { value: '1,234,567', ...inputParams }, output: '1 234 567' },
+      { input: { value: '1,234,567.89', ...inputParams }, output: '1 234 567,89' },
+    ]
+    it.each(cases)('converts $input.value to $output', ({ input, output }) => {
+      expect(replaceSeparators(input)).toBe(output)
+    })
+  })
+
+  describe('it can handle common French to English cases', () => {
+    const inputParams = {
+      groupingSeparator: ' ',
+      decimalSeparator: ',',
+      groupingOverride: ',',
+      decimalOverride: '.',
+    }
+    const cases = [
+      { input: { value: ',1234', ...inputParams }, output: '.1234' },
+      { input: { value: '1234', ...inputParams }, output: '1234' },
+      { input: { value: '1234,', ...inputParams }, output: '1234.' },
+      { input: { value: '1,234', ...inputParams }, output: '1.234' },
+      { input: { value: '1 234', ...inputParams }, output: '1,234' },
+      { input: { value: '1 234,56', ...inputParams }, output: '1,234.56' },
+      { input: { value: '1 234 567', ...inputParams }, output: '1,234,567' },
+      { input: { value: '1 234 567,89', ...inputParams }, output: '1,234,567.89' },
+    ]
+    it.each(cases)('converts $input.value to $output', ({ input, output }) => {
+      expect(replaceSeparators(input)).toBe(output)
+    })
+  })
+})
+
+describe(parseValue, () => {
+  const defaultParams = {
+    decimalSeparator: '.',
+    groupingSeparator: ',',
+    showCurrencySign: false,
+    nativeKeyboardDecimalSeparator: '.',
+  }
+
+  it('trims whitespaces', () => {
+    expect(
+      parseValue({
+        value: ' 1234 ',
+        ...defaultParams,
+      }),
+    ).toBe('1234')
+  })
+
+  it('removes thousands separators', () => {
+    expect(
+      parseValue({
+        value: '1,234.56',
+        ...defaultParams,
+      }),
+    ).toBe('1234.56')
+
+    expect(
+      parseValue({
+        value: '1.234,56',
+        ...defaultParams,
+        decimalSeparator: ',',
+        groupingSeparator: '.',
+      }),
+    ).toBe('1234.56')
+
+    expect(
+      parseValue({
+        value: '1 234.56',
+        ...defaultParams,
+        decimalSeparator: '.',
+        groupingSeparator: ' ',
+      }),
+    ).toBe('1234.56')
+  })
+
+  it('removes non-numeric characters', () => {
+    expect(
+      parseValue({
+        value: ' example $1,234,567.123456789 example ',
+        ...defaultParams,
+      }),
+    ).toBe('1234567.123456789')
+  })
+
+  it('truncates decimals according to maxDecimals', () => {
+    expect(
+      parseValue({
+        value: '1,234.123456789123456789 WBTC',
+        ...defaultParams,
+        maxDecimals: 8,
+      }),
+    ).toBe('1234.12345678')
+
+    expect(
+      parseValue({
+        value: '1,234.123456789123456789123456789 ETH',
+        ...defaultParams,
+        maxDecimals: 18,
+      }),
+    ).toBe('1234.123456789123456789')
+  })
+})

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,157 @@
+import { forwardRef, useCallback, useEffect, useMemo } from 'react'
+import { getNumberFormatSettings } from 'react-native-localize'
+import { Input, Text } from '@luxfi/ui/src'
+import { fonts } from '@luxfi/ui/src/theme'
+import { useTextWidth } from '@luxexchange/lx/src/components/AmountInput/useTextWidth'
+import { numericInputEnforcer } from '@luxexchange/lx/src/components/AmountInput/utils/numericInputEnforcer'
+import { parseValue } from '@luxexchange/lx/src/components/AmountInput/utils/parseValue'
+import { replaceSeparators } from '@luxexchange/lx/src/components/AmountInput/utils/replaceSeparators'
+import { TextInput, TextInputProps } from '@luxexchange/lx/src/components/input/TextInput'
+import { useAppFiatCurrencyInfo } from '@luxexchange/lx/src/features/fiatCurrency/hooks'
+import { FiatCurrencyInfo } from '@luxexchange/lx/src/features/fiatOnRamp/types'
+import { useOnMobileAppState } from '@luxfi/utilities/src/device/appState'
+import { dismissNativeKeyboard } from '@luxfi/utilities/src/device/keyboard/dismissNativeKeyboard'
+import { isMobileApp } from '@luxfi/utilities/src/platform'
+import { noop } from '@luxfi/utilities/src/react/noop'
+
+// Default font size when not explicitly provided (matches heading2)
+const DEFAULT_FONT_SIZE = fonts.heading2.fontSize
+
+type Props = {
+  adjustWidthToContent?: boolean
+  fiatCurrencyInfo?: FiatCurrencyInfo
+  dimTextColor?: boolean
+  maxDecimals?: number
+  inputEnforcer?: (value?: string) => boolean
+} & TextInputProps
+
+export const AmountInput = forwardRef<Input, Props>(function _AmountInput(
+  {
+    onChangeText,
+    value,
+    adjustWidthToContent,
+    dimTextColor,
+    showSoftInputOnFocus,
+    maxDecimals,
+    fiatCurrencyInfo,
+    inputEnforcer = numericInputEnforcer,
+    ...rest
+  },
+  ref,
+) {
+  const appFiatCurrencyInfo = useAppFiatCurrencyInfo()
+  const targetFiatCurrencyInfo = fiatCurrencyInfo || appFiatCurrencyInfo
+  const { groupingSeparator, decimalSeparator } = targetFiatCurrencyInfo
+  const { decimalSeparator: nativeKeyboardDecimalSeparator } = getNumberFormatSettings()
+
+  useEffect(() => {
+    // Resets input if non-numeric value is passed
+    if (!inputEnforcer(value)) {
+      onChangeText?.('')
+    }
+  }, [inputEnforcer, onChangeText, value])
+
+  const handleChange = useCallback(
+    (val: string) => {
+      onChangeText?.(
+        parseValue({
+          value: val,
+          decimalSeparator,
+          groupingSeparator,
+          showSoftInputOnFocus,
+          nativeKeyboardDecimalSeparator,
+          maxDecimals,
+        }),
+      )
+    },
+    [
+      decimalSeparator,
+      groupingSeparator,
+      maxDecimals,
+      nativeKeyboardDecimalSeparator,
+      onChangeText,
+      showSoftInputOnFocus,
+    ],
+  )
+
+  const formattedValue = replaceSeparators({
+    value: value ?? '',
+    groupingSeparator: ',',
+    decimalSeparator: '.',
+    groupingOverride: '',
+    decimalOverride: decimalSeparator,
+  })
+
+  // Estimate width to prevent overflown input on web
+  const fontSize = typeof rest.fontSize === 'number' ? rest.fontSize : DEFAULT_FONT_SIZE
+  const measurementText = formattedValue || rest.placeholder || ''
+  const maxWidth = typeof rest.maxWidth === 'number' ? rest.maxWidth : undefined
+  const { width, onLayout } = useTextWidth({
+    text: measurementText,
+    maxWidth,
+    enabled: adjustWidthToContent,
+    // on mobile, use onLayout to prevent performance stutters
+    useLayoutOnly: isMobileApp,
+  })
+
+  const textInputProps: TextInputProps = useMemo(
+    () => ({
+      ref,
+      color: !value || dimTextColor ? '$neutral2' : '$neutral1',
+      keyboardType: 'decimal-pad',
+      value: formattedValue,
+      onChangeText: handleChange,
+      ...rest,
+      // Override fontSize to ensure TextInput and hidden Text use the same numeric value.
+      ...(adjustWidthToContent ? { fontSize } : {}),
+      ...(width !== undefined ? { width } : {}),
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: TODO https://linear.app/lux/issue/INFRA-1031/optimize-memoization-in
+    [ref, value, dimTextColor, formattedValue, handleChange, rest, width, adjustWidthToContent, fontSize],
+  )
+
+  // Dismiss keyboard when mobile app is foregrounded (showSoftInputOnFocus doesn't work when the app activates from the background)
+  useOnMobileAppState('active', showSoftInputOnFocus ? noop : dismissNativeKeyboard)
+
+  // break down into two different components depending on value of showSoftInputOnFocus
+  // when showSoftInputOnFocus value changes from false to true, React does not remount the component
+  // and therefore the keyboard does not pop up on TextInput focus.
+  // returning a separately named component guarantees the remount
+  const textInputElement = showSoftInputOnFocus ? (
+    <TextInputWithNativeKeyboard {...textInputProps} />
+  ) : (
+    <TextInput {...textInputProps} showSoftInputOnFocus={false} />
+  )
+
+  if (adjustWidthToContent) {
+    return (
+      <>
+        <Text
+          // Hidden element measures actual text width.
+          // On web, width is estimated instantly, then refined when onLayout fires.
+          // On mobile, width comes only from onLayout measurement.
+          fontFamily="$heading"
+          fontSize={fontSize}
+          fontWeight="500"
+          height={0}
+          numberOfLines={1}
+          overflow="hidden"
+          position="absolute"
+          onLayout={onLayout}
+        >
+          {measurementText}
+        </Text>
+        {textInputElement}
+      </>
+    )
+  }
+
+  return textInputElement
+})
+
+const TextInputWithNativeKeyboard = forwardRef<Input, TextInputProps>(function _TextInputWithNativeKeyboard(
+  props: TextInputProps,
+  ref,
+) {
+  return <TextInput ref={ref} {...props} />
+})

package/src/components/AmountInput/useTextWidth.tsx

@@ -0,0 +1,90 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import type { LayoutChangeEvent } from 'react-native'
+
+// Padding added to width for cursor visibility
+const CURSOR_PADDING_PX = 3
+
+/**
+ * Measures text width with instant estimation and optional layout refinement.
+ *
+ * @params useLayoutOnly - decide whether we should use measurements from onLayout only.
+ * If false, we firstly estimate the width, then we use measured width from onLayout event.
+ */
+export function useTextWidth({
+  text,
+  maxWidth,
+  enabled,
+  useLayoutOnly = false,
+}: {
+  text: string
+  maxWidth?: number
+  enabled?: boolean
+  useLayoutOnly?: boolean
+}): { width: number | undefined; onLayout: (e: LayoutChangeEvent) => void } {
+  // Calibrated width-per-character ratio
+  const calibratedRatioRef = useRef<number | undefined>(undefined)
+  const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(undefined)
+
+  // Track text length to detect when measurement needs update
+  const lastMeasuredLengthRef = useRef<number>(0)
+
+  const estimatedWidth = useMemo(() => {
+    // For text.length === 0, let width be undefined (placeholder sizing handled by parent)
+    if (!enabled || useLayoutOnly || text.length === 0) {
+      return undefined
+    }
+
+    // Only use calibration if we have estimation - otherwise wait for onLayout
+    const calibratedRatio = calibratedRatioRef.current
+    if (calibratedRatio === undefined) {
+      return undefined
+    }
+
+    return text.length * calibratedRatio + CURSOR_PADDING_PX
+  }, [enabled, useLayoutOnly, text])
+
+  // Determine if current measurement is stale (text length changed significantly)
+  const isMeasurementStale = text.length !== lastMeasuredLengthRef.current
+
+  const width = useMemo(() => {
+    if (!enabled) {
+      return undefined
+    }
+
+    if (useLayoutOnly) {
+      // only use measured width (returns undefined until first onLayout)
+      return measuredWidth !== undefined && maxWidth !== undefined ? Math.min(measuredWidth, maxWidth) : measuredWidth
+    }
+
+    // use measurement if fresh, otherwise fall back to estimation
+    const rawWidth = !isMeasurementStale && measuredWidth !== undefined ? measuredWidth : estimatedWidth
+
+    if (rawWidth === undefined) {
+      return undefined
+    }
+
+    return maxWidth !== undefined ? Math.min(rawWidth, maxWidth) : rawWidth
+  }, [enabled, useLayoutOnly, measuredWidth, estimatedWidth, maxWidth, isMeasurementStale])
+
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (!enabled) {
+        return
+      }
+
+      const actualWidth = e.nativeEvent.layout.width + CURSOR_PADDING_PX
+
+      // Update measurement and track what length it corresponds to
+      setMeasuredWidth(actualWidth)
+      lastMeasuredLengthRef.current = text.length
+
+      const charCount = text.length
+      if (charCount > 0 && !useLayoutOnly) {
+        calibratedRatioRef.current = actualWidth / charCount
+      }
+    },
+    [enabled, useLayoutOnly, text.length],
+  )
+
+  return { width, onLayout }
+}

package/src/components/AmountInput/utils/numericInputEnforcer.ts

@@ -0,0 +1,6 @@
+export const numericInputRegex = RegExp('^\\d*(\\.\\d*)?$') // Matches only numeric values without commas
+
+/** Returns true if the value matches a number or an empty string */
+export function numericInputEnforcer(value?: string): boolean {
+  return !value || numericInputRegex.test(value)
+}

package/src/components/AmountInput/utils/parseValue.ts

@@ -0,0 +1,57 @@
+import { replaceSeparators } from '@luxexchange/lx/src/components/AmountInput/utils/replaceSeparators'
+import { truncateToMaxDecimals } from '@luxfi/utilities/src/format/truncateToMaxDecimals'
+import { isMobileWeb } from '@luxfi/utilities/src/platform'
+
+export function parseValue({
+  value,
+  decimalSeparator,
+  groupingSeparator,
+  showSoftInputOnFocus,
+  nativeKeyboardDecimalSeparator,
+  maxDecimals,
+}: {
+  value?: string
+  decimalSeparator: string
+  groupingSeparator: string
+  showSoftInputOnFocus?: boolean
+  nativeKeyboardDecimalSeparator: string
+  maxDecimals?: number
+}): string {
+  let parsedValue = value?.trim() ?? ''
+
+  // Replace all non-numeric characters, leaving the decimal and thousand separators.
+  parsedValue = parsedValue.replace(/[^0-9.,]/g, '')
+
+  if (isMobileWeb) {
+    // Override decimal handling in mweb since 'react-native-localize' provides unreliable native decimal separators in this specific env.
+    // This isn't an ideal long-term solution (as it limits copy/paste flexibility), but it's necessary
+    // to unblock users in various locales who are currently unable to input amounts correctly.
+    parsedValue = parsedValue.replace(/,/g, '.')
+  } else {
+    // TODO(MOB-2385): replace this temporary solution for native keyboard.
+    if (showSoftInputOnFocus && nativeKeyboardDecimalSeparator !== decimalSeparator) {
+      parsedValue = replaceSeparators({
+        value: parsedValue,
+        decimalSeparator: nativeKeyboardDecimalSeparator,
+        decimalOverride: decimalSeparator,
+      })
+    }
+
+    parsedValue = replaceSeparators({
+      value: parsedValue,
+      groupingSeparator,
+      decimalSeparator,
+      groupingOverride: '',
+      decimalOverride: '.',
+    })
+  }
+
+  if (maxDecimals === undefined) {
+    return parsedValue
+  }
+
+  return truncateToMaxDecimals({
+    value: parsedValue,
+    maxDecimals,
+  })
+}

package/src/components/AmountInput/utils/replaceSeparators.ts

@@ -0,0 +1,22 @@
+export function replaceSeparators({
+  value,
+  groupingSeparator,
+  decimalSeparator,
+  groupingOverride,
+  decimalOverride,
+}: {
+  value: string
+  groupingSeparator?: string
+  decimalSeparator: string
+  groupingOverride?: string
+  decimalOverride: string
+}): string {
+  let outputParts = value.split(decimalSeparator)
+  if (groupingSeparator && groupingOverride != null) {
+    outputParts = outputParts.map((part) =>
+      // eslint-disable-next-line security/detect-non-literal-regexp
+      part.replace(new RegExp(`\\${groupingSeparator}`, 'g'), groupingOverride),
+    )
+  }
+  return outputParts.join(decimalOverride)
+}