fix: force rounding input numbers

haqq-network · Nov 7, 2024 · 4cf142d · 4cf142d
1 parent 50ed35e
commit 4cf142d
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/libs/ui-kit/src/lib/modal-input.tsx b/libs/ui-kit/src/lib/modal-input.tsx
@@ -3,6 +3,7 @@ import {
   InputHTMLAttributes,
   ReactNode,
   useCallback,
+  useMemo,
 } from 'react';
 import clsx from 'clsx';
 import MaskedInput from 'react-text-mask';
@@ -29,7 +30,13 @@ const CurrencyInput = ({
     ...maskOptions,
   });
 
-  return <MaskedInput mask={currencyMask} {...inputProps} />;
+  const inputValue = useMemo(() => {
+    // Hack, because react-text-mask doesn't work with correct with decimals
+    // ex: it converts 0.0709 to 0.070 (not 0.071!)
+    return inputProps.value ? Number(inputProps.value).toFixed(3) : undefined;
+  }, [inputProps.value]);
+
+  return <MaskedInput mask={currencyMask} {...inputProps} value={inputValue} />;
 };
 
 export function StringInput({