replace react-imask with NumericFormat

xch-dev · Feb 12, 2025 · 23a2589 · 23a2589
1 parent 0a720b4
commit 23a2589
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
-    "react-imask": "^7.6.1",
+    "react-number-format": "^5.4.3",
     "react-router-dom": "^6.26.0",
     "react-toastify": "^11.0.3",
     "tailwind-merge": "^2.5.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ui/masked-input.tsx b/src/components/ui/masked-input.tsx
@@ -1,30 +1,58 @@
 import * as React from 'react';
-import { IMaskMixin } from 'react-imask';
 import { Input, InputProps } from './input';
+import { NumericFormat } from 'react-number-format';
 
-const MaskedInput = IMaskMixin(
-  ({ inputRef, ...props }: { inputRef: React.Ref<HTMLInputElement> }) => (
-    <Input {...props} ref={inputRef} />
-  ),
+interface MaskedInputProps extends InputProps {
+  inputRef?: React.Ref<HTMLInputElement>;
+  onValueChange?: (values: { floatValue?: number }) => void;
+  allowLeadingZeros?: boolean;
+  allowDecimal?: boolean;
+  allowNegative?: boolean;
+  allowThousands?: boolean;
+  allowLeadingZeroScale?: boolean;
+  allowDecimalScale?: boolean;
+  allowLeadingZeroWidth?: boolean;
+  allowLeadingZeroWidthScale?: boolean;
+  type?: "text";
+  decimalScale?: number;
+}
+
+const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
+  ({ inputRef, type = "text", onValueChange, ...props }, ref) => (
+    <NumericFormat
+      onValueChange={onValueChange}
+      customInput={Input}
+      getInputRef={inputRef || ref}
+      displayType="input"
+      type={type}
+      {...props}
+    />
+  )
 );
 
 MaskedInput.displayName = 'MaskedInput';
 
 // Extended Masked Input for XCH inputs
-interface XchInputProps extends InputProps {
+interface XchInputProps extends MaskedInputProps {
   decimals?: number;
 }
 
 const TokenAmountInput = React.forwardRef<HTMLInputElement, XchInputProps>(
-  ({ decimals = 12, type = 'text', ...props }, ref) => (
+  ({ decimals = 12, ...props }, ref) => (
     <MaskedInput
       placeholder='0.00'
       {...props}
-      type={type}
+      type="text"
       inputRef={ref}
-      mask={Number}
-      radix='.'
-      scale={decimals}
+      decimalScale={12}
+      allowLeadingZeros={false}
+      allowDecimal={true}
+      allowNegative={false}
+      allowThousands={true}
+      allowLeadingZeroScale={false}
+      allowDecimalScale={true}
+      allowLeadingZeroWidth={false}
+      allowLeadingZeroWidthScale={false}
     />
   ),
 );

diff --git a/src/pages/MakeOffer.tsx b/src/pages/MakeOffer.tsx
@@ -182,12 +182,9 @@ export function MakeOffer() {
                   placeholder={'0.00'}
                   className='pr-12'
                   value={state.fee}
-                  onBlur={(e) =>
-                    useOfferState.setState({ fee: e.target.value })
-                  }
-                  onChange={(e) =>
-                    useOfferState.setState({ fee: e.target.value })
-                  }
+                  onValueChange={(values) => {
+                    useOfferState.setState({ fee: values.floatValue?.toString() ?? '' })
+                  }}
                 />
                 <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
                   <span className='text-gray-500 text-sm' id='price-currency'>
@@ -457,8 +454,9 @@ function AssetSelector({
               className='rounded-r-none z-10'
               placeholder={t`Enter amount`}
               value={assets.xch}
-              onBlur={(e) => setAssets({ ...assets, xch: e.target.value })}
-              onChange={(e) => setAssets({ ...assets, xch: e.target.value })}
+              onValueChange={(values) => {
+                setAssets({ ...assets, xch: values.floatValue?.toString() ?? '' });
+              }}
             />
             <Button
               variant='outline'
@@ -546,12 +544,8 @@ function AssetSelector({
                 className='border-l-0 z-10 rounded-l-none rounded-r-none w-[100px] h-12'
                 placeholder={t`Amount`}
                 value={cat.amount}
-                onBlur={(e) => {
-                  assets.cats[i].amount = e.target.value;
-                  setAssets({ ...assets });
-                }}
-                onChange={(e) => {
-                  assets.cats[i].amount = e.target.value;
+                onValueChange={(values) => {
+                  assets.cats[i].amount = values.floatValue?.toString() ?? '';
                   setAssets({ ...assets });
                 }}
               />