send: fix max send for native balances (#5126)

* send: fix max send for native balances * code review * Removing unnecessary await and simplifying updateMaxBalance useEffect in SendSheet --------- Co-authored-by: jinchung <[email protected]>
rainbow-me · Oct 20, 2023 · dc7cd66 · dc7cd66
1 parent 8d617ca
commit dc7cd66
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/src/screens/SendSheet.js b/src/screens/SendSheet.js
@@ -175,6 +175,7 @@ export default function SendSheet(props) {
   const [recipient, setRecipient] = useState('');
   const [nickname, setNickname] = useState('');
   const [selected, setSelected] = useState({});
+  const [maxEnabled, setMaxEnabled] = useState(false);
   const { maxInputBalance, updateMaxInputBalance } = useMaxInputBalance();
 
   const [debouncedInput] = useDebounce(currentInput, 500);
@@ -322,17 +323,6 @@ export default function SendSheet(props) {
     };
   }, [stopPollingGasFees]);
 
-  // Recalculate balance when gas price changes
-  useEffect(() => {
-    if (
-      selected?.isNativeAsset &&
-      (prevSelectedGasFee?.gasFee?.estimatedFee?.value?.amount ?? 0) !==
-        (selectedGasFee?.gasFee?.estimatedFee?.value?.amount ?? 0)
-    ) {
-      updateMaxInputBalance(selected);
-    }
-  }, [prevSelectedGasFee, selected, selectedGasFee, updateMaxInputBalance]);
-
   useEffect(() => {
     const updateNetworkAndProvider = async () => {
       const assetNetwork = isNft
@@ -374,6 +364,9 @@ export default function SendSheet(props) {
   const onChangeNativeAmount = useCallback(
     newNativeAmount => {
       if (!isString(newNativeAmount)) return;
+      if (maxEnabled) {
+        setMaxEnabled(false);
+      }
       const _nativeAmount = newNativeAmount.replace(/[^0-9.]/g, '');
       let _assetAmount = '';
       if (_nativeAmount.length) {
@@ -395,22 +388,35 @@ export default function SendSheet(props) {
       });
       analytics.track('Changed native currency input in Send flow');
     },
-    [maxInputBalance, selected.decimals, selected?.price?.value]
+    [maxEnabled, maxInputBalance, selected.decimals, selected?.price?.value]
   );
 
-  const sendMaxBalance = useCallback(async () => {
-    const newBalanceAmount = await updateMaxInputBalance(selected);
-    sendUpdateAssetAmount(newBalanceAmount);
-  }, [selected, sendUpdateAssetAmount, updateMaxInputBalance]);
+  useEffect(() => {
+    if (maxEnabled) {
+      const newBalanceAmount = updateMaxInputBalance(selected);
+      sendUpdateAssetAmount(newBalanceAmount);
+    }
+    // we want to listen to the gas fee and update when it changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    selected,
+    sendUpdateAssetAmount,
+    updateMaxInputBalance,
+    selectedGasFee,
+    maxEnabled,
+  ]);
 
   const onChangeAssetAmount = useCallback(
     newAssetAmount => {
       if (isString(newAssetAmount)) {
+        if (maxEnabled) {
+          setMaxEnabled(false);
+        }
         sendUpdateAssetAmount(newAssetAmount);
         analytics.track('Changed token input in Send flow');
       }
     },
-    [sendUpdateAssetAmount]
+    [maxEnabled, sendUpdateAssetAmount]
   );
 
   useEffect(() => {
@@ -1009,7 +1015,7 @@ export default function SendSheet(props) {
             onChangeNativeAmount={onChangeNativeAmount}
             onResetAssetSelection={onResetAssetSelection}
             selected={selected}
-            sendMaxBalance={sendMaxBalance}
+            sendMaxBalance={() => setMaxEnabled(true)}
             setLastFocusedInputHandle={setLastFocusedInputHandle}
             txSpeedRenderer={
               <GasSpeedButton