From 09f6d253e03e2d5ca9402609306961532abf77a3 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Fri, 14 Jun 2024 15:54:21 +0200
Subject: [PATCH] fix: deposit rugged validation on percent option click
 (#7136)

---
 package.json                                  |  2 +-
 src/components/DeFi/components/AssetInput.tsx | 31 +++++++++++++------
 .../defi/components/Deposit/Deposit.tsx       |  4 +--
 .../defi/components/Deposit/PairDeposit.tsx   |  8 ++---
 yarn.lock                                     | 10 +++---
 5 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 8a61036a3ef..76fe78b7811 100644
--- 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
index a490fadd618..b921ccd5952 100644
--- a/src/components/DeFi/components/AssetInput.tsx
+++ b/src/components/DeFi/components/AssetInput.tsx
@@ -113,22 +113,23 @@ 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
@@ -136,6 +137,16 @@ export const AssetInput: React.FC<AssetInputProps> = ({
     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
index 54752275586..626e2c733b1 100644
--- 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
index b59a9277a63..c7157499667 100644
--- 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
index f78425ac297..e884a9edb98 100644
--- 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