refactor confirm-transaction component from class to functional

app/scripts/metamask-controller.js

@@ -1267,7 +1267,6 @@ export default class MetamaskController extends EventEmitter {
       appStateController,
       collectiblesController,
       collectibleDetectionController,
-      assetsContractController,
       currencyRateController,
       detectTokensController,
       ensController,
@@ -1422,9 +1421,7 @@ export default class MetamaskController extends EventEmitter {
       ),
 
       // AssetsContractController
-      getTokenStandardAndDetails: assetsContractController.getTokenStandardAndDetails.bind(
-        assetsContractController,
-      ),
+      getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 
       // CollectiblesController
       addCollectible: collectiblesController.addCollectible.bind(
@@ -1747,6 +1744,19 @@ export default class MetamaskController extends EventEmitter {
     };
   }
 
+  async getTokenStandardAndDetails(address, userAddress, tokenId) {
+    const details = await this.assetsContractController.getTokenStandardAndDetails(
+      address,
+      userAddress,
+      tokenId,
+    );
+    return {
+      ...details,
+      decimals: details?.decimals?.toString(10),
+      balance: details?.balance?.toString(10),
+    };
+  }
+
   //=============================================================================
   // VAULT / KEYRING RELATED METHODS
   //=============================================================================

test/e2e/metamask-ui.spec.js

@@ -343,10 +343,11 @@ describe('MetaMask', function () {
       // Continue to next screen
       await driver.delay(largeDelayMs);
       await driver.clickElement({ text: 'Next', tag: 'button' });
-      await driver.delay(regularDelayMs);
+      await driver.delay(largeDelayMs);
     });
 
     it('displays the token transfer data', async function () {
+      await driver.delay(largeDelayMs);
       await driver.clickElement({ text: 'Hex', tag: 'button' });
       await driver.delay(regularDelayMs);
 
@@ -449,6 +450,7 @@ describe('MetaMask', function () {
     });
 
     it('customizes gas', async function () {
+      await driver.delay(largeDelayMs);
       await driver.clickElement({ text: 'Edit', tag: 'button' });
       await driver.delay(largeDelayMs);
       await driver.clickElement(

ui/helpers/utils/token-util.js

@@ -4,8 +4,11 @@ import {
   conversionUtil,
   multiplyCurrencies,
 } from '../../../shared/modules/conversion.utils';
+import { getTokenStandardAndDetails } from '../../store/actions';
+import { ERC1155, ERC721 } from '../constants/common';
 import * as util from './util';
 import { formatCurrency } from './confirm-tx.util';
+import { getTransactionData } from './transactions.util';
 
 const DEFAULT_SYMBOL = '';
 
@@ -212,3 +215,48 @@ export function getTokenFiatAmount(
   }
   return result;
 }
+
+export async function getAssetDetails(
+  tokenAddress,
+  currentUserAddress,
+  transactionData,
+  existingCollectibles,
+) {
+  const tokenData = getTransactionData(transactionData);
+  if (!tokenData) {
+    throw new Error('Unable to detect valid token data');
+  }
+
+  const tokenId = getTokenValueParam(tokenData);
+  let tokenDetails;
+  try {
+    tokenDetails = await getTokenStandardAndDetails(
+      tokenAddress,
+      currentUserAddress,
+      tokenId,
+    );
+  } catch (error) {
+    log.warn(error);
+    return {};
+  }
+
+  if (tokenDetails?.standard) {
+    const { standard } = tokenDetails;
+    if (standard === ERC721 || standard === ERC1155) {
+      const existingCollectible = existingCollectibles.find(({ address }) =>
+        util.isEqualCaseInsensitive(tokenAddress, address),
+      );
+
+      if (existingCollectible) {
+        return {
+          ...existingCollectible,
+          standard,
+        };
+      }
+    }
+    // else if not a collectible already in state or standard === ERC20 just return tokenDetails as it contains all required data
+    return tokenDetails;
+  }
+
+  return {};
+}

ui/hooks/useAssetDetails.js

@@ -0,0 +1,118 @@
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { getCollectibles, getTokens } from '../ducks/metamask/metamask';
+import { ERC1155, ERC721, ERC20 } from '../helpers/constants/common';
+import {
+  calcTokenAmount,
+  getAssetDetails,
+  getTokenAddressParam,
+  getTokenValueParam,
+} from '../helpers/utils/token-util';
+import { getTransactionData } from '../helpers/utils/transactions.util';
+import { getTokenList } from '../selectors';
+import { hideLoadingIndication, showLoadingIndication } from '../store/actions';
+import { usePrevious } from './usePrevious';
+
+export function useAssetDetails(tokenAddress, userAddress, transactionData) {
+  const dispatch = useDispatch();
+
+  // state selectors
+  const tokens = useSelector(getTokens);
+  const collectibles = useSelector(getCollectibles);
+  const tokenList = useSelector(getTokenList);
+
+  // in-hook state
+  const [currentAsset, setCurrentAsset] = useState(null);
+
+  // previous state checkers
+  const prevTokenAddress = usePrevious(tokenAddress);
+  const prevUserAddress = usePrevious(userAddress);
+  const prevTransactionData = usePrevious(transactionData);
+
+  useEffect(() => {
+    async function getAndSetAssetDetails() {
+      dispatch(showLoadingIndication());
+      const assetDetails = await getAssetDetails(
+        tokenAddress,
+        userAddress,
+        transactionData,
+        collectibles,
+        tokens,
+        tokenList,
+      );
+      setCurrentAsset(assetDetails);
+      dispatch(hideLoadingIndication());
+    }
+    if (
+      tokenAddress !== prevTokenAddress ||
+      userAddress !== prevUserAddress ||
+      transactionData !== prevTransactionData
+    ) {
+      getAndSetAssetDetails();
+    }
+  }, [
+    dispatch,
+    prevTokenAddress,
+    prevTransactionData,
+    prevUserAddress,
+    tokenAddress,
+    userAddress,
+    transactionData,
+    collectibles,
+    tokens,
+    tokenList,
+  ]);
+
+  let assetStandard,
+    assetName,
+    assetAddress,
+    tokenSymbol,
+    decimals,
+    tokenImage,
+    userBalance,
+    tokenValue,
+    toAddress,
+    tokenAmount,
+    tokenId;
+
+  if (currentAsset) {
+    const {
+      standard,
+      symbol,
+      image,
+      name,
+      balance,
+      decimals: currentAssetDecimals,
+    } = currentAsset;
+    const tokenData = getTransactionData(transactionData);
+    assetStandard = standard;
+    assetAddress = tokenAddress;
+    tokenSymbol = symbol;
+    tokenImage = image;
+    toAddress = getTokenAddressParam(tokenData);
+    if (assetStandard === ERC721 || assetStandard === ERC1155) {
+      assetName = name;
+      tokenId = getTokenValueParam(tokenData);
+    }
+    if (assetStandard === ERC20) {
+      userBalance = balance;
+      decimals = Number(currentAssetDecimals?.toString(10));
+      tokenAmount =
+        tokenData &&
+        calcTokenAmount(getTokenValueParam(tokenData), decimals).toString(10);
+    }
+  }
+  return {
+    assetStandard,
+    assetName,
+    assetAddress,
+    userBalance,
+    tokenSymbol,
+    decimals,
+    tokenImage,
+    tokenValue,
+    toAddress,
+    tokenAmount,
+    tokenId,
+  };
+}