Refactor token send/method confirmation flow (trimmed down)

app/scripts/metamask-controller.js

@@ -1271,7 +1271,6 @@ export default class MetamaskController extends EventEmitter {
       appStateController,
       collectiblesController,
       collectibleDetectionController,
-      assetsContractController,
       currencyRateController,
       detectTokensController,
       ensController,
@@ -1427,9 +1426,7 @@ export default class MetamaskController extends EventEmitter {
       setTheme: preferencesController.setTheme.bind(preferencesController),
 
       // AssetsContractController
-      getTokenStandardAndDetails: assetsContractController.getTokenStandardAndDetails.bind(
-        assetsContractController,
-      ),
+      getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 
       // CollectiblesController
       addCollectible: collectiblesController.addCollectible.bind(
@@ -1758,6 +1755,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/helpers.js

@@ -16,6 +16,7 @@ const { ensureXServerIsRunning } = require('./x-server');
 const tinyDelayMs = 200;
 const regularDelayMs = tinyDelayMs * 2;
 const largeDelayMs = regularDelayMs * 2;
+const veryLargeDelayMs = largeDelayMs * 2;
 const dappPort = 8080;
 
 const convertToHexValue = (val) => `0x${new BigNumber(val, 10).toString(16)}`;
@@ -276,6 +277,7 @@ module.exports = {
   tinyDelayMs,
   regularDelayMs,
   largeDelayMs,
+  veryLargeDelayMs,
   withFixtures,
   connectDappWithExtensionPopup,
   completeImportSRPOnboardingFlow,

test/e2e/metamask-ui.spec.js

@@ -3,7 +3,12 @@ const path = require('path');
 
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
 const createStaticServer = require('../../development/create-static-server');
-const { tinyDelayMs, regularDelayMs, largeDelayMs } = require('./helpers');
+const {
+  tinyDelayMs,
+  regularDelayMs,
+  largeDelayMs,
+  veryLargeDelayMs,
+} = require('./helpers');
 const { buildWebDriver } = require('./webdriver');
 const Ganache = require('./ganache');
 const { ensureXServerIsRunning } = require('./x-server');
@@ -272,7 +277,7 @@ describe('MetaMask', function () {
       const gasPriceInput = inputs[1];
       await gasLimitInput.fill('4700000');
       await gasPriceInput.fill('20');
-      await driver.delay(1000);
+      await driver.delay(veryLargeDelayMs);
       await driver.clickElement({ text: 'Save', tag: 'button' });
       await driver.clickElement({ text: 'Confirm', tag: 'button' });
 
@@ -343,10 +348,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);
 
@@ -386,7 +392,7 @@ describe('MetaMask', function () {
       const gasPriceInput = inputs[1];
       await gasLimitInput.fill('100000');
       await gasPriceInput.fill('100');
-      await driver.delay(1000);
+      await driver.delay(veryLargeDelayMs);
       await driver.clickElement({ text: 'Save', tag: 'button' });
     });
 
@@ -449,19 +455,20 @@ describe('MetaMask', function () {
     });
 
     it('customizes gas', async function () {
+      await driver.delay(veryLargeDelayMs);
       await driver.clickElement({ text: 'Edit', tag: 'button' });
-      await driver.delay(largeDelayMs);
+      await driver.delay(veryLargeDelayMs);
       await driver.clickElement(
         { text: 'Edit suggested gas fee', tag: 'button' },
         10000,
       );
-      await driver.delay(1000);
+      await driver.delay(veryLargeDelayMs);
       const inputs = await driver.findElements('input[type="number"]');
       const gasLimitInput = inputs[0];
       const gasPriceInput = inputs[1];
       await gasLimitInput.fill('60000');
       await gasPriceInput.fill('10');
-      await driver.delay(1000);
+      await driver.delay(veryLargeDelayMs);
       await driver.clickElement({ text: 'Save', tag: 'button' });
       await driver.findElement({ tag: 'span', text: '0.0006' });
     });
@@ -586,7 +593,7 @@ describe('MetaMask', function () {
 
       await gasLimitInput.fill('60001');
 
-      await driver.delay(1000);
+      await driver.delay(veryLargeDelayMs);
 
       await driver.clickElement({ text: 'Save', tag: 'button' });
 
@@ -752,7 +759,7 @@ describe('MetaMask', function () {
     });
 
     it('submits the transaction', async function () {
-      await driver.delay(1000);
+      await driver.delay(veryLargeDelayMs);
       await driver.clickElement({ text: 'Confirm', tag: 'button' });
       await driver.delay(regularDelayMs);
     });

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -11,6 +11,8 @@ import useAddressDetails from '../../../../../hooks/useAddressDetails';
 import Identicon from '../../../../ui/identicon';
 import InfoTooltip from '../../../../ui/info-tooltip';
 import NicknamePopovers from '../../../modals/nickname-popovers';
+import Typography from '../../../../ui/typography';
+import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
 
 const ConfirmPageContainerSummary = (props) => {
   const {
@@ -116,9 +118,15 @@ const ConfirmPageContainerSummary = (props) => {
         <div className="confirm-page-container-summary__title">
           {renderImage()}
           {!hideTitle ? (
-            <div className="confirm-page-container-summary__title-text">
+            <Typography
+              className="confirm-page-container-summary__title-text"
+              variant={
+                title && title.length < 10 ? TYPOGRAPHY.H1 : TYPOGRAPHY.H3
+              }
+              title={title}
+            >
               {titleComponent || title}
-            </div>
+            </Typography>
           ) : null}
         </div>
         {hideSubtitle ? null : (

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss

@@ -77,6 +77,14 @@
     text-overflow: ellipsis;
   }
 
+  &__title-text-long {
+    @include H3;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &__subtitle {
     @include H5;
 

ui/components/ui/typography/typography.js

@@ -82,6 +82,7 @@ export default function Typography({
   fontStyle = 'normal',
   align,
   overflowWrap,
+  title,
   tag,
   margin = [1, 0],
   boxProps = {},
@@ -117,7 +118,10 @@ export default function Typography({
   return (
     <Box margin={margin} {...boxProps}>
       {(boxClassName) => (
-        <Tag className={classnames(boxClassName, computedClassName)}>
+        <Tag
+          className={classnames(boxClassName, computedClassName)}
+          title={title}
+        >
           {children}
         </Tag>
       )}
@@ -175,6 +179,10 @@ Typography.propTypes = {
    * Additional className to assign the Typography component
    */
   className: PropTypes.string,
+  /**
+   * Title attribute to include on the element. Will show as tooltip on hover.
+   */
+  title: PropTypes.string,
   /**
    * The text content of the Typography component
    */

ui/helpers/utils/token-util.js

@@ -4,8 +4,12 @@ import {
   conversionUtil,
   multiplyCurrencies,
 } from '../../../shared/modules/conversion.utils';
+import { getTokenStandardAndDetails } from '../../store/actions';
+import { ERC1155, ERC721 } from '../constants/common';
+import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
 import * as util from './util';
 import { formatCurrency } from './confirm-tx.util';
+import { getTransactionData } from './transactions.util';
 
 const DEFAULT_SYMBOL = '';
 
@@ -212,3 +216,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 }) =>
+        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 {};
+}