fix: token input decimals handling (#91)

Author: danielsimao

.changeset/strong-bananas-breathe.md

@@ -0,0 +1,5 @@
+---
+"@interlay/ui": patch
+---
+
+fix: token input decimals handling

packages/components/src/TokenInput/BaseTokenInput.tsx

@@ -24,6 +24,12 @@ const escapeRegExp = (string: string): string => {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
 
+const hasCorrectDecimals = (value: string, decimals: number) => {
+  const decimalGroups = value.split('.');
+
+  return decimalGroups.length > 1 ? decimalGroups[1].length <= decimals : true;
+};
+
 type Props = {
   valueUSD?: number;
   balance?: ReactNode;
@@ -33,8 +39,10 @@ type Props = {
   size?: TokenInputSize;
   isInvalid?: boolean;
   minHeight?: Spacing;
-  value?: string | number;
-  defaultValue?: string | number;
+  value?: string;
+  defaultValue?: string;
+  // TODO: use Currency from bob-ui
+  currency: { decimals: number };
   onValueChange?: (value: string | number) => void;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onFocus?: (e: FocusEvent<Element>) => void;
@@ -69,6 +77,7 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
       inputMode,
       value: valueProp,
       endAdornment,
+      currency,
       onChange,
       onValueChange,
       ...props
@@ -84,9 +93,13 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
       (e) => {
         const value = e.target.value;
 
-        const isValid = value === '' || RegExp(`^\\d*(?:\\\\[.])?\\d*$`).test(escapeRegExp(value));
+        const isEmpty = value === '';
+        const hasValidDecimalFormat = RegExp(`^\\d*(?:\\\\[.])?\\d*$`).test(escapeRegExp(value));
+        const hasValidDecimalsAmount = hasCorrectDecimals(value, currency.decimals);
+
+        const isValid = hasValidDecimalFormat && hasValidDecimalsAmount;
 
-        if (isValid) {
+        if (isEmpty || isValid) {
           onChange?.(e);
           onValueChange?.(value);
           setValue(value);

packages/components/src/TokenInput/FixedTokenInput.tsx

@@ -5,7 +5,7 @@ import { BaseTokenInput, BaseTokenInputProps } from './BaseTokenInput';
 import { TokenInputBalance } from './TokenInputBalance';
 
 type Props = {
-  balance?: string | number;
+  balance?: string;
   humanBalance?: string | number;
   balanceLabel?: ReactNode;
   onClickBalance?: (balance: string | number) => void;

packages/components/src/TokenInput/SelectableTokenInput.tsx

@@ -8,10 +8,10 @@ import { TokenInputBalance } from './TokenInputBalance';
 import { TokenSelect, TokenSelectProps } from './TokenSelect';
 
 type Props = {
-  balance?: string | number;
+  balance?: string;
   humanBalance?: string | number;
   balanceLabel?: ReactNode;
-  onClickBalance?: (balance: string | number) => void;
+  onClickBalance?: (balance: string) => void;
   selectProps: Omit<TokenSelectProps, 'label' | 'helperTextId'>;
 };
 
@@ -75,7 +75,7 @@ const SelectableTokenInput = forwardRef<HTMLInputElement, SelectableTokenInputPr
 
     const balance = balanceProp !== undefined && (
       <TokenInputBalance
-        balance={ticker ? balanceProp : 0}
+        balance={ticker ? balanceProp : '0'}
         balanceHuman={humanBalance}
         inputId={id}
         isDisabled={isDisabled || !ticker}

packages/components/src/TokenInput/TokenInput.tsx

@@ -7,6 +7,8 @@ import { SelectableTokenInput, SelectableTokenInputProps } from './SelectableTok
 
 type Props = {
   onValueChange?: (value?: string | number) => void;
+  // TODO: define type when repo moved to bob-ui
+  currency: any;
 };
 
 type FixedAttrs = Omit<FixedTokenInputProps, keyof Props>;
@@ -38,7 +40,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       setValue(value);
     };
 
-    const handleClickBalance = (balance: string | number) => {
+    const handleClickBalance = (balance: string) => {
       inputRef.current?.focus();
       setValue(balance);
       onValueChange?.(balance);

packages/components/src/TokenInput/TokenInputBalance.tsx

@@ -6,9 +6,9 @@ import { StyledBalance, StyledMaxButton } from './TokenInput.style';
 
 type TokenInputBalanceProps = {
   inputId?: string;
-  balance: string | number;
+  balance: string;
   balanceHuman?: string | number;
-  onClickBalance?: (balance: string | number) => void;
+  onClickBalance?: (balance: string) => void;
   isDisabled?: boolean;
   label?: ReactNode;
 };
@@ -21,7 +21,7 @@ const TokenInputBalance = ({
   isDisabled: isDisabledProp,
   label = 'Balance'
 }: TokenInputBalanceProps): JSX.Element => {
-  const isDisabled = isDisabledProp || balanceProp === 0;
+  const isDisabled = isDisabledProp || Number(balanceProp) === 0;
 
   const ariaLabel = typeof label === 'string' ? `apply max ${label}` : 'apply max';