fix: deposit rugged validation on percent option click (#7136)

shapeshift · Jun 14, 2024 · 09f6d25 · 09f6d25
1 parent b5a6c8d
commit 09f6d25
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -180,7 +180,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-helmet-async": "^1.3.0",
-    "react-hook-form": "^7.33.1",
+    "react-hook-form": "^7.51.5",
     "react-icons": "^4.10.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-ref": "^1.0.1",

diff --git a/src/components/DeFi/components/AssetInput.tsx b/src/components/DeFi/components/AssetInput.tsx
@@ -113,29 +113,40 @@ export const AssetInput: React.FC<AssetInputProps> = ({
   const asset = useAppSelector(state => selectAssetById(state, assetId))
 
   // Lower the decimal places when the integer is greater than 8 significant digits for better UI
-  const cryptoAmountIntegerCount = bnOrZero(bnOrZero(cryptoAmount).toFixed(0)).precision(true)
-  const formattedCryptoAmount = bnOrZero(cryptoAmountIntegerCount).isLessThanOrEqualTo(8)
-    ? cryptoAmount
-    : bnOrZero(cryptoAmount).toFixed(3)
+  const cryptoAmountIntegerCount = useMemo(
+    () => bnOrZero(bnOrZero(cryptoAmount).toFixed(0)).precision(true),
+    [cryptoAmount],
+  )
+  const formattedCryptoAmount = useMemo(
+    () =>
+      bnOrZero(cryptoAmountIntegerCount).isLessThanOrEqualTo(8)
+        ? cryptoAmount
+        : bnOrZero(cryptoAmount).toFixed(3),
+    [cryptoAmount, cryptoAmountIntegerCount],
+  )
 
   const formControlHover = useMemo(
     () => ({ bg: isReadOnly ? 'background.input.base' : 'background.input.hover' }),
     [isReadOnly],
   )
 
-  const handleValueChange = useCallback((values: NumberFormatValues) => {
-    // This fires anytime value changes including setting it on max click
-    // Store the value in a ref to send when we actually want the onChange to fire
-    amountRef.current = values.value
-  }, [])
-
   const handleChange = useCallback(() => {
     // onChange will send us the formatted value
     // To get around this we need to get the value from the onChange using a ref
     // Now when the max buttons are clicked the onChange will not fire
     onChange(amountRef.current ?? '', isFiat)
   }, [isFiat, onChange])
 
+  const handleValueChange = useCallback(
+    (values: NumberFormatValues) => {
+      // This fires anytime value changes including setting it on max click
+      // Store the value in a ref to send when we actually want the onChange to fire
+      amountRef.current = values.value
+      handleChange()
+    },
+    [handleChange],
+  )
+
   return (
     <FormControl
       borderWidth={2}

diff --git a/src/features/defi/components/Deposit/Deposit.tsx b/src/features/defi/components/Deposit/Deposit.tsx
@@ -107,12 +107,12 @@ export const Deposit = ({
   const handleMaxClick = useCallback(() => onMaxClick!(setValue), [onMaxClick, setValue])
 
   const values = useWatch({ control })
-  const { field: cryptoAmount } = useController({
+  const { field: cryptoAmount } = useController<DepositValues>({
     name: 'cryptoAmount',
     control,
     rules: cryptoInputValidation,
   })
-  const { field: fiatAmount } = useController({
+  const { field: fiatAmount } = useController<DepositValues>({
     name: 'fiatAmount',
     control,
     rules: fiatInputValidation,

diff --git a/src/features/defi/components/Deposit/PairDeposit.tsx b/src/features/defi/components/Deposit/PairDeposit.tsx
@@ -111,22 +111,22 @@ export const PairDeposit = ({
   })
 
   const values = useWatch({ control })
-  const { field: cryptoAmount0 } = useController({
+  const { field: cryptoAmount0 } = useController<DepositValues>({
     name: 'cryptoAmount0',
     control,
     rules: cryptoInputValidation0,
   })
-  const { field: cryptoAmount1 } = useController({
+  const { field: cryptoAmount1 } = useController<DepositValues>({
     name: 'cryptoAmount1',
     control,
     rules: cryptoInputValidation1,
   })
-  const { field: fiatAmount0 } = useController({
+  const { field: fiatAmount0 } = useController<DepositValues>({
     name: 'fiatAmount0',
     control,
     rules: fiatInputValidation0,
   })
-  const { field: fiatAmount1 } = useController({
+  const { field: fiatAmount1 } = useController<DepositValues>({
     name: 'fiatAmount1',
     control,
     rules: fiatInputValidation1,

diff --git a/yarn.lock b/yarn.lock
@@ -11344,7 +11344,7 @@ __metadata:
     react-dom: ^18.2.0
     react-error-boundary: ^3.1.4
     react-helmet-async: ^1.3.0
-    react-hook-form: ^7.33.1
+    react-hook-form: ^7.51.5
     react-icons: ^4.10.1
     react-infinite-scroll-component: ^6.1.0
     react-multi-ref: ^1.0.1
@@ -32412,12 +32412,12 @@ pvutils@latest:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:^7.33.1":
-  version: 7.33.1
-  resolution: "react-hook-form@npm:7.33.1"
+"react-hook-form@npm:^7.51.5":
+  version: 7.51.5
+  resolution: "react-hook-form@npm:7.51.5"
   peerDependencies:
     react: ^16.8.0 || ^17 || ^18
-  checksum: ec8f938b5af32148956edc9a87b6a0a99cc305617925608961cf4352ad1a786daea9fdc4d15106aea2821937d27367a69ab525882f07c0bb7ea45fba5dbf8ff2
+  checksum: 6b6a56b6520ddb68d491e2f07791538aa611c13fcd76052a499ba10bdaf7f77f4a5f7191e6ca9d9ab0af739bf07171c6e8d97f6c4da06f576aa74caed71828f1
   languageName: node
   linkType: hard