add formatter

Author: jorgen

src/utils/format.ts

@@ -343,3 +343,57 @@ export function parseUnitsWithExtendedDecimals(
   }
   return ethers.utils.parseUnits(valueToParse, decimals);
 }
+
+export function formatNumberWithSeparators(
+  value: string,
+  maxDecimals: number = 18
+): string {
+  if (!value || value === ".") return value;
+
+  const parts = value.split(".");
+  const integerPart = parts[0] || "0";
+  const decimalPart = parts[1];
+
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+  if (parts.length === 2) {
+    const limitedDecimals = decimalPart.substring(0, maxDecimals);
+    return `${formattedInteger}.${limitedDecimals}`;
+  } else if (value.endsWith(".")) {
+    return `${formattedInteger}.`;
+  }
+
+  return formattedInteger;
+}
+
+export function parseFormattedNumber(value: string): string {
+  return value.replace(/,/g, "");
+}
+
+export function calculateCursorPosition(
+  previousValue: string,
+  newValue: string,
+  previousCursor: number,
+  wasDeleting: boolean
+): number {
+  const commasBefore = (
+    previousValue.slice(0, previousCursor).match(/,/g) || []
+  ).length;
+  const rawCursorPosition = previousCursor - commasBefore;
+
+  let newCursor = 0;
+  let rawPosition = 0;
+
+  for (let i = 0; i < newValue.length && rawPosition < rawCursorPosition; i++) {
+    if (newValue[i] !== ",") {
+      rawPosition++;
+    }
+    newCursor++;
+  }
+
+  if (wasDeleting && newValue[newCursor] === ",") {
+    newCursor++;
+  }
+
+  return newCursor;
+}

src/views/SwapAndBridge/components/TokenInput/DestinationTokenInput.tsx

@@ -1,9 +1,9 @@
 import { ReactComponent as ArrowsCross } from "assets/icons/arrows-cross.svg";
+import { FormattedTokenInput } from "./FormattedTokenInput";
 import { ChangeAccountModal } from "../ChangeAccountModal";
 import SelectorButton from "../ChainTokenSelector/SelectorButton";
 import { BalanceSelector } from "../BalanceSelector";
 import {
-  TokenAmountInput,
   TokenAmountInputTitle,
   TokenAmountInputWrapper,
   TokenAmountStack,
@@ -63,14 +63,15 @@ export const DestinationTokenInput = ({
           value={displayValue}
           error={false}
         >
-          <TokenAmountInput
+          <FormattedTokenInput
             id="destination-amount-input"
             name="destination-amount-input"
-            placeholder="0.00"
             value={displayValue}
-            onChange={(e) => handleInputChange(e.target.value)}
+            onChange={handleInputChange}
+            placeholder="0.00"
             disabled={inputDisabled}
             error={false}
+            maxDecimals={18}
           />
         </TokenAmountInputWrapper>
         <UnitToggleButtonWrapper>

src/views/SwapAndBridge/components/TokenInput/FormattedTokenInput.tsx

@@ -0,0 +1,118 @@
+import { useRef, useEffect, ChangeEvent, forwardRef } from "react";
+import { TokenAmountInput } from "./styles";
+import {
+  formatNumberWithSeparators,
+  parseFormattedNumber,
+  calculateCursorPosition,
+} from "utils/format";
+
+interface FormattedTokenInputProps {
+  id: string;
+  name: string;
+  value: string;
+  onChange: (rawValue: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  error: boolean;
+  maxDecimals?: number;
+  "data-testid"?: string;
+}
+
+export const FormattedTokenInput = forwardRef<
+  HTMLInputElement,
+  FormattedTokenInputProps
+>(
+  (
+    {
+      id,
+      name,
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder = "0.00",
+      disabled = false,
+      error,
+      maxDecimals = 18,
+      "data-testid": dataTestId,
+    },
+    forwardedRef
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const lastValueRef = useRef<string>(value);
+    const lastCursorRef = useRef<number>(0);
+
+    useEffect(() => {
+      if (forwardedRef) {
+        if (typeof forwardedRef === "function") {
+          forwardedRef(inputRef.current);
+        } else {
+          forwardedRef.current = inputRef.current;
+        }
+      }
+    }, [forwardedRef]);
+
+    useEffect(() => {
+      lastValueRef.current = value;
+    }, [value]);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const input = e.target;
+      const newRawValue = input.value;
+      const cursorPosition = input.selectionStart || 0;
+
+      lastCursorRef.current = cursorPosition;
+
+      const unformatted = parseFormattedNumber(newRawValue);
+
+      if (unformatted && !/^\d*\.?\d*$/.test(unformatted)) {
+        return;
+      }
+
+      onChange(unformatted);
+    };
+
+    useEffect(() => {
+      if (inputRef.current && document.activeElement === inputRef.current) {
+        const input = inputRef.current;
+
+        if (lastValueRef.current !== value) {
+          const wasDeleting = value.length < lastValueRef.current.length;
+          const newCursor = calculateCursorPosition(
+            lastValueRef.current,
+            value,
+            lastCursorRef.current,
+            wasDeleting
+          );
+
+          input.setSelectionRange(newCursor, newCursor);
+        }
+      }
+    }, [value]);
+
+    return (
+      <TokenAmountInput
+        ref={inputRef}
+        id={id}
+        name={name}
+        data-testid={dataTestId}
+        type="text"
+        inputMode="decimal"
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        disabled={disabled}
+        error={error}
+        autoComplete="off"
+        autoCorrect="off"
+        spellCheck="false"
+      />
+    );
+  }
+);
+
+FormattedTokenInput.displayName = "FormattedTokenInput";

src/views/SwapAndBridge/components/TokenInput/OriginTokenInput.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from "react";
 import { ReactComponent as ArrowsCross } from "assets/icons/arrows-cross.svg";
+import { FormattedTokenInput } from "./FormattedTokenInput";
 import SelectorButton from "../ChainTokenSelector/SelectorButton";
 import { BalanceSelector } from "../BalanceSelector";
 import {
-  TokenAmountInput,
   TokenAmountInputTitle,
   TokenAmountInputWrapper,
   TokenAmountStack,
@@ -79,16 +79,17 @@ export const OriginTokenInput = ({
           value={displayValue}
           error={insufficientBalance}
         >
-          <TokenAmountInput
+          <FormattedTokenInput
+            ref={amountInputRef}
             id="origin-amount-input"
             name="origin-amount-input"
             data-testid="bridge-amount-input"
-            ref={amountInputRef}
-            placeholder="0.00"
             value={displayValue}
-            onChange={(e) => handleInputChange(e.target.value)}
+            onChange={handleInputChange}
+            placeholder="0.00"
             disabled={inputDisabled}
             error={insufficientBalance}
+            maxDecimals={18}
           />
         </TokenAmountInputWrapper>
         <UnitToggleButtonWrapper>

src/views/SwapAndBridge/hooks/useTokenAmountInput.ts

@@ -6,6 +6,7 @@ import {
   convertUSDToToken,
   formatAmountForDisplay,
   formatUSD,
+  formatNumberWithSeparators,
   isValidNumberInput,
   parseInputValue,
 } from "utils";
@@ -86,7 +87,9 @@ export const useTokenAmountInput = ({
       return "";
     }
 
-    return formatAmountForDisplay(amount, token, unit);
+    const rawFormatted = formatAmountForDisplay(amount, token, unit);
+
+    return formatNumberWithSeparators(rawFormatted, 18);
   }, [
     isUserInput,
     isUpdateLoading,
@@ -153,9 +156,6 @@ export const useTokenAmountInput = ({
 
   const handleInputChange = useCallback(
     (value: string) => {
-      if (!isValidNumberInput(value)) {
-        return;
-      }
       handleSetInputValue(value);
     },
     [handleSetInputValue]