feat: add EIP-7702 revoke flow

app/scripts/metamask-controller.js

@@ -3438,6 +3438,7 @@ export default class MetamaskController extends EventEmitter {
       getOpenMetamaskTabsIds: this.getOpenMetamaskTabsIds,
       markNotificationPopupAsAutomaticallyClosed: () =>
         this.notificationManager.markAsAutomaticallyClosed(),
+      getCode: this.getCode.bind(this),
 
       // primary keyring management
       addNewAccount: this.addNewAccount.bind(this),
@@ -7619,6 +7620,16 @@ export default class MetamaskController extends EventEmitter {
     });
   }
 
+  async getCode(address, networkClientId) {
+    const { provider } =
+      this.networkController.getNetworkClientById(networkClientId);
+
+    return await provider.request({
+      method: 'eth_getCode',
+      params: [address],
+    });
+  }
+
   async _onAccountChange(newAddress) {
     const permittedAccountsMap = getPermittedAccountsByOrigin(
       this.permissionController.state,

shared/lib/confirmation.utils.ts

@@ -14,6 +14,7 @@ const REDESIGN_USER_TRANSACTION_TYPES = [
   TransactionType.batch,
   TransactionType.contractInteraction,
   TransactionType.deployContract,
+  TransactionType.revokeDelegation,
   TransactionType.tokenMethodApprove,
   TransactionType.tokenMethodIncreaseAllowance,
   TransactionType.tokenMethodSetApprovalForAll,

ui/__mocks__/actions.js

@@ -10,6 +10,7 @@ const {
 
 const ERC20_TOKEN_1_MOCK = '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'; // WBTC
 const ERC20_TOKEN_2_MOCK = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'; // USDC
+const UPGRADED_ACCOUNT_MOCK = '0x9d0ba4ddac06032527b140912ec808ab9451b788';
 const ERC721_TOKEN_MOCK = '0x06012c8cf97bead5deae237070f9587f8e7a266d'; // CryptoKitties
 
 const TOKEN_DETAILS_MOCK = {
@@ -50,7 +51,9 @@ module.exports = {
   },
 
   // eslint-disable-next-line no-empty-function
-  trackMetaMetricsEvent: () => {},
+  trackMetaMetricsEvent: () => {
+    // Intentionally empty
+  },
 
   decodeTransactionData: async (request) => {
     const { contractAddress } = request;
@@ -65,4 +68,12 @@ module.exports = {
 
     return undefined;
   },
+
+  getCode: async (address) => {
+    if (address === UPGRADED_ACCOUNT_MOCK) {
+      return '0x1234';
+    }
+
+    return '0x';
+  },
 };

ui/components/multichain/account-details/account-details-display.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -15,11 +15,15 @@ import {
   Box,
   ButtonSecondary,
   ButtonSecondarySize,
+  Text,
 } from '../../component-library';
 import {
   AlignItems,
+  BackgroundColor,
+  BorderRadius,
   Display,
   FlexDirection,
+  TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -30,12 +34,87 @@ import {
 } from '../../../../shared/constants/metametrics';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getCurrentChainId } from '../../../../shared/modules/selectors/networks';
+import { useEIP7702Account } from '../../../pages/confirmations/hooks/useEIP7702Account';
+import { useAsyncResult } from '../../../hooks/useAsyncResult';
+
+function SmartAccountPill({ address }) {
+  const t = useI18nContext();
+  const { isUpgraded } = useEIP7702Account();
+
+  const { value: isAccountUpgraded } = useAsyncResult(
+    () => isUpgraded(address),
+    [address],
+  );
+
+  if (!isAccountUpgraded) {
+    return null;
+  }
+
+  return (
+    <Box
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
+      backgroundColor={BackgroundColor.backgroundAlternative}
+      alignItems={AlignItems.center}
+      borderRadius={BorderRadius.pill}
+      margin={4}
+      style={{
+        padding: '0px 8px',
+        flexShrink: 1,
+        flexBasis: 'auto',
+        minWidth: 0,
+      }}
+    >
+      <Text
+        ellipsis
+        variant={TextVariant.bodyMd}
+        color={TextColor.textAlternativeSoft}
+      >
+        {t('confirmAccountTypeSmartContract')}
+      </Text>
+    </Box>
+  );
+}
+
+function DowngradeAccountButton({ address, onClose }) {
+  const t = useI18nContext();
+
+  const { downgradeAccount, isUpgraded } = useEIP7702Account({
+    onRedirect: onClose,
+  });
+
+  const { value: isAccountUpgraded } = useAsyncResult(
+    () => isUpgraded(address),
+    [address],
+  );
+
+  const handleClick = useCallback(async () => {
+    await downgradeAccount(address);
+  }, [address, downgradeAccount]);
+
+  if (!isAccountUpgraded) {
+    return null;
+  }
+
+  return (
+    <ButtonSecondary
+      block
+      size={ButtonSecondarySize.Lg}
+      variant={TextVariant.bodyMd}
+      marginBottom={4}
+      onClick={handleClick}
+    >
+      {t('accountDetailsRevokeDelegationButton')}
+    </ButtonSecondary>
+  );
+}
 
 export const AccountDetailsDisplay = ({
   accounts,
   accountName,
   address,
   onExportClick,
+  onClose,
 }) => {
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
@@ -71,7 +150,9 @@ export const AccountDetailsDisplay = ({
         }}
         accounts={accounts}
       />
+      <SmartAccountPill address={address} />
       <QrCodeView Qr={{ data: address }} />
+      <DowngradeAccountButton address={address} onClose={onClose} />
       {exportPrivateKeyFeatureEnabled ? (
         <ButtonSecondary
           block
@@ -113,4 +194,26 @@ AccountDetailsDisplay.propTypes = {
    * Executes upon Export button click
    */
   onExportClick: PropTypes.func.isRequired,
+  /**
+   * Executes when closing the modal
+   */
+  onClose: PropTypes.func.isRequired,
+};
+
+SmartAccountPill.propTypes = {
+  /**
+   * Current address
+   */
+  address: PropTypes.string.isRequired,
+};
+
+DowngradeAccountButton.propTypes = {
+  /**
+   * Current address
+   */
+  address: PropTypes.string.isRequired,
+  /**
+   * Executes when closing the modal
+   */
+  onClose: PropTypes.func.isRequired,
 };