stash - useTokenExchangeRate

Author: MajorLift

ui/components/app/currency-input/hooks/useTokenExchangeRate.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { toChecksumAddress } from 'ethereumjs-util';
 import { shallowEqual, useSelector } from 'react-redux';
 import { getCurrentChainId } from '../../../../../shared/modules/selectors/networks';
@@ -45,14 +45,43 @@ export default function useTokenExchangeRate(
     ? contractExchangeRates[tokenAddress] || exchangeRates[tokenAddress]
     : undefined;
 
+  const isMounted = useRef(true);
+
   useEffect(() => {
     if (!contractExchangeRate && tokenAddress) {
       setExchangeRates((prev) => ({
         ...prev,
         [tokenAddress]: LOADING,
       }));
+      fetchTokenExchangeRates(nativeCurrency, [tokenAddress], chainId)
+        .then((addressToExchangeRate) => {
+          if (isMounted.current) {
+            setExchangeRates((prev) => ({
+              ...prev,
+              [tokenAddress]: addressToExchangeRate[tokenAddress] ?? FAILED,
+            }));
+          }
+        })
+        .catch(() => {
+          if (isMounted.current) {
+            setExchangeRates((prev) => ({
+              ...prev,
+              [tokenAddress]: FAILED,
+            }));
+          }
+        });
     }
-  }, [contractExchangeRate, tokenAddress]);
+    return () => {
+      isMounted.current = false;
+    };
+  }, [
+    exchangeRates,
+    chainId,
+    nativeCurrency,
+    tokenAddress,
+    selectedNativeConversionRate,
+    contractExchangeRate,
+  ]);
 
   return useMemo(() => {
     if (!selectedNativeConversionRate) {
@@ -76,29 +105,12 @@ export default function useTokenExchangeRate(
     }
 
     if (!contractExchangeRate) {
-      fetchTokenExchangeRates(nativeCurrency, [tokenAddress], chainId)
-        .then((addressToExchangeRate) => {
-          setExchangeRates((prev) => ({
-            ...prev,
-            // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            [tokenAddress]: addressToExchangeRate[tokenAddress] || FAILED,
-          }));
-        })
-        .catch(() => {
-          setExchangeRates((prev) => ({
-            ...prev,
-            [tokenAddress]: FAILED,
-          }));
-        });
       return undefined;
     }
 
     return new Numeric(contractExchangeRate, 10).times(nativeConversionRate);
   }, [
     exchangeRates,
-    chainId,
-    nativeCurrency,
     tokenAddress,
     selectedNativeConversionRate,
     contractExchangeRate,