Track when token balance is changed to update value on approval screen (#16964)

* Track when token balance is changed to update value on approval screen

* Code refactor

* Fix unit test

* Fix sign approval balance

* Refactor code

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -50,7 +50,6 @@ export default class SignatureRequestOriginal extends Component {
   };
 
   state = {
-    fromAccount: this.props.fromAccount,
     showSignatureRequestWarning: false,
   };
 
@@ -274,11 +273,13 @@ export default class SignatureRequestOriginal extends Component {
   };
 
   render = () => {
-    const { messagesCount, conversionRate, nativeCurrency } = this.props;
     const {
+      messagesCount,
+      conversionRate,
+      nativeCurrency,
       fromAccount: { address, balance, name },
-      showSignatureRequestWarning,
+    } = this.props;
-    } = this.state;
+    const { showSignatureRequestWarning } = this.state;
     const { t } = this.context;
 
     const rejectNText = t('rejectRequestsN', [messagesCount]);

ui/hooks/useAssetDetails.js

@@ -1,22 +1,33 @@
+import { isEqual } from 'lodash';
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { getCollectibles } from '../ducks/metamask/metamask';
+import { getCollectibles, getTokens } from '../ducks/metamask/metamask';
 import { getAssetDetails } from '../helpers/utils/token-util';
 import { hideLoadingIndication, showLoadingIndication } from '../store/actions';
+import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 import { usePrevious } from './usePrevious';
+import { useTokenTracker } from './useTokenTracker';
 
 export function useAssetDetails(tokenAddress, userAddress, transactionData) {
   const dispatch = useDispatch();
   // state selectors
   const collectibles = useSelector(getCollectibles);
+  const tokens = useSelector(getTokens, isEqual);
+  const currentToken = tokens.find((token) =>
+    isEqualCaseInsensitive(token.address, tokenAddress),
+  );
 
   // in-hook state
   const [currentAsset, setCurrentAsset] = useState(null);
+  const { tokensWithBalances } = useTokenTracker(
+    currentToken ? [currentToken] : [],
+  );
 
   // previous state checkers
   const prevTokenAddress = usePrevious(tokenAddress);
   const prevUserAddress = usePrevious(userAddress);
   const prevTransactionData = usePrevious(transactionData);
+  const prevTokenBalance = usePrevious(tokensWithBalances);
 
   useEffect(() => {
     async function getAndSetAssetDetails() {
@@ -33,7 +44,8 @@ export function useAssetDetails(tokenAddress, userAddress, transactionData) {
     if (
       tokenAddress !== prevTokenAddress ||
       userAddress !== prevUserAddress ||
-      transactionData !== prevTransactionData
+      transactionData !== prevTransactionData ||
+      (prevTokenBalance && prevTokenBalance !== tokensWithBalances)
     ) {
       getAndSetAssetDetails();
     }
@@ -46,6 +58,8 @@ export function useAssetDetails(tokenAddress, userAddress, transactionData) {
     userAddress,
     transactionData,
     collectibles,
+    tokensWithBalances,
+    prevTokenBalance,
   ]);
 
   if (currentAsset) {

ui/hooks/useAssetDetails.test.js

@@ -19,6 +19,7 @@ const renderUseAssetDetails = ({
         chainId: '0x5',
       },
       tokenList: {},
+      tokens: [],
     },
   };