feat: ERC20 Revoke Allowance

test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts

@@ -87,7 +87,7 @@ describe('Confirmation Redesign ERC20 Approve Component', function () {
   });
 });
 
-async function mocked4Bytes(mockServer: MockttpServer) {
+export async function mocked4BytesApprove(mockServer: MockttpServer) {
   return await mockServer
     .forGet('https://www.4byte.directory/api/v1/signatures/')
     .withQuery({ hex_signature: '0x095ea7b3' })
@@ -111,7 +111,7 @@ async function mocked4Bytes(mockServer: MockttpServer) {
 }
 
 async function mocks(server: MockttpServer) {
-  return [await mocked4Bytes(server)];
+  return [await mocked4BytesApprove(server)];
 }
 
 export async function importTST(driver: Driver) {

test/e2e/tests/confirmations/transactions/increase-token-allowance-redesign.spec.ts

@@ -8,6 +8,7 @@ import {
 import { Driver } from '../../../webdriver/driver';
 import { scrollAndConfirmAndAssertConfirm } from '../helpers';
 import { openDAppWithContract, TestSuiteArguments } from './shared';
+import { mocked4BytesApprove } from './erc20-approve-redesign.spec';
 
 const {
   defaultGanacheOptions,
@@ -155,30 +156,7 @@ describe('Confirmation Redesign ERC20 Increase Allowance', function () {
   });
 });
 
-async function mocked4BytesApprove(mockServer: MockttpServer) {
-  return await mockServer
-    .forGet('https://www.4byte.directory/api/v1/signatures/')
-    .withQuery({ hex_signature: '0x095ea7b3' })
-    .thenCallback(() => ({
-      statusCode: 200,
-      json: {
-        count: 1,
-        next: null,
-        previous: null,
-        results: [
-          {
-            id: 149,
-            created_at: '2016-07-09T03:58:29.617584Z',
-            text_signature: 'approve(address,uint256)',
-            hex_signature: '0x095ea7b3',
-            bytes_signature: '\t^§³',
-          },
-        ],
-      },
-    }));
-}
-
-async function mocked4BytesIncreaseAllowance(mockServer: MockttpServer) {
+export async function mocked4BytesIncreaseAllowance(mockServer: MockttpServer) {
   return await mockServer
     .forGet('https://www.4byte.directory/api/v1/signatures/')
     .withQuery({ hex_signature: '0x39509351' })
@@ -213,7 +191,7 @@ async function createERC20IncreaseAllowanceTransaction(driver: Driver) {
   await driver.clickElement('#increaseTokenAllowance');
 }
 
-async function editSpendingCap(driver: Driver, newSpendingCap: string) {
+export async function editSpendingCap(driver: Driver, newSpendingCap: string) {
   await driver.delay(largeDelayMs);
   await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
   await driver.clickElement('[data-testid="edit-spending-cap-icon"');
@@ -231,7 +209,7 @@ async function editSpendingCap(driver: Driver, newSpendingCap: string) {
   await driver.delay(veryLargeDelayMs * 2);
 }
 
-async function assertChangedSpendingCap(
+export async function assertChangedSpendingCap(
   driver: Driver,
   newSpendingCap: string,
 ) {

test/e2e/tests/confirmations/transactions/revoke-allowance-redesign.spec.ts

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
+import { MockttpServer } from 'mockttp';
+import { WINDOW_TITLES } from '../../../helpers';
+import { Driver } from '../../../webdriver/driver';
+import { scrollAndConfirmAndAssertConfirm } from '../helpers';
+import { mocked4BytesApprove } from './erc20-approve-redesign.spec';
+import {
+  assertChangedSpendingCap,
+  editSpendingCap,
+} from './increase-token-allowance-redesign.spec';
+import { openDAppWithContract, TestSuiteArguments } from './shared';
+
+const {
+  defaultGanacheOptions,
+  defaultGanacheOptionsForType2Transactions,
+  withFixtures,
+} = require('../../../helpers');
+const FixtureBuilder = require('../../../fixture-builder');
+const { SMART_CONTRACTS } = require('../../../seeder/smart-contracts');
+
+describe('Confirmation Redesign ERC20 Revoke Allowance', function () {
+  const smartContract = SMART_CONTRACTS.HST;
+
+  describe('Submit an revoke transaction @no-mmi', function () {
+    it('Sends a type 0 transaction (Legacy)', async function () {
+      await withFixtures(
+        {
+          dapp: true,
+          fixtures: new FixtureBuilder()
+            .withPermissionControllerConnectedToTestDapp()
+            .withPreferencesController({
+              preferences: {
+                redesignedConfirmationsEnabled: true,
+                isRedesignedConfirmationsDeveloperEnabled: true,
+              },
+            })
+            .build(),
+          ganacheOptions: defaultGanacheOptions,
+          smartContract,
+          testSpecificMock: mocks,
+          title: this.test?.fullTitle(),
+        },
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
+          await openDAppWithContract(driver, contractRegistry, smartContract);
+
+          await createERC20ApproveTransaction(driver);
+
+          const NEW_SPENDING_CAP = '0';
+          await editSpendingCap(driver, NEW_SPENDING_CAP);
+
+          await driver.waitForSelector({
+            css: 'h2',
+            text: 'Remove permission',
+          });
+
+          await scrollAndConfirmAndAssertConfirm(driver);
+
+          await assertChangedSpendingCap(driver, NEW_SPENDING_CAP);
+        },
+      );
+    });
+
+    it('Sends a type 2 transaction (EIP1559)', async function () {
+      await withFixtures(
+        {
+          dapp: true,
+          fixtures: new FixtureBuilder()
+            .withPermissionControllerConnectedToTestDapp()
+            .withPreferencesController({
+              preferences: {
+                redesignedConfirmationsEnabled: true,
+                isRedesignedConfirmationsDeveloperEnabled: true,
+              },
+            })
+            .build(),
+          ganacheOptions: defaultGanacheOptionsForType2Transactions,
+          smartContract,
+          testSpecificMock: mocks,
+          title: this.test?.fullTitle(),
+        },
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
+          await openDAppWithContract(driver, contractRegistry, smartContract);
+
+          await createERC20ApproveTransaction(driver);
+
+          const NEW_SPENDING_CAP = '0';
+          await editSpendingCap(driver, NEW_SPENDING_CAP);
+
+          await driver.waitForSelector({
+            css: 'h2',
+            text: 'Remove permission',
+          });
+
+          await scrollAndConfirmAndAssertConfirm(driver);
+
+          await assertChangedSpendingCap(driver, NEW_SPENDING_CAP);
+        },
+      );
+    });
+  });
+});
+
+async function mocks(server: MockttpServer) {
+  return [await mocked4BytesApprove(server)];
+}
+
+async function createERC20ApproveTransaction(driver: Driver) {
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  await driver.clickElement('#approveTokens');
+}

ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx

@@ -1,6 +1,7 @@
 import { NameType } from '@metamask/name-controller';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
+import { ConfirmInfoRow } from '../../../../../../../components/app/confirm/info/row';
 import Name from '../../../../../../../components/app/name';
 import { Box, Text } from '../../../../../../../components/component-library';
 import Tooltip from '../../../../../../../components/ui/tooltip';
@@ -65,33 +66,38 @@ export const ApproveStaticSimulation = () => {
   );
 
   const simulationElements = (
-    <Box display={Display.Flex}>
-      <Box
-        display={Display.Inline}
-        marginInlineEnd={1}
-        minWidth={BlockSize.Zero}
-      >
-        {spendingCap === UNLIMITED_MSG ? (
-          <Tooltip title={formattedSpendingCap}>{formattedTokenText}</Tooltip>
-        ) : (
-          formattedTokenText
-        )}
+    <ConfirmInfoRow
+      label={isNFT ? t('simulationApproveHeading') : t('spendingCap')}
+    >
+      <Box style={{ marginLeft: 'auto', maxWidth: '100%' }}>
+        <Box display={Display.Flex}>
+          <Box
+            display={Display.Inline}
+            marginInlineEnd={1}
+            minWidth={BlockSize.Zero}
+          >
+            {spendingCap === UNLIMITED_MSG ? (
+              <Tooltip title={formattedSpendingCap}>
+                {formattedTokenText}
+              </Tooltip>
+            ) : (
+              formattedTokenText
+            )}
+          </Box>
+          <Name
+            value={transactionMeta.txParams.to as string}
+            type={NameType.ETHEREUM_ADDRESS}
+          />
+        </Box>
       </Box>
-      <Name
-        value={transactionMeta.txParams.to as string}
-        type={NameType.ETHEREUM_ADDRESS}
-      />
-    </Box>
+    </ConfirmInfoRow>
   );
 
   return (
     <StaticSimulation
       title={t('simulationDetailsTitle')}
       titleTooltip={t('simulationDetailsTitleTooltip')}
       description={t('simulationDetailsApproveDesc')}
-      simulationHeading={
-        isNFT ? t('simulationApproveHeading') : t('spendingCap')
-      }
       simulationElements={simulationElements}
     />
   );

ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx

@@ -4,6 +4,7 @@ import thunk from 'redux-thunk';
 import { getMockApproveConfirmState } from '../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
 import ApproveInfo from './approve';
+import { SpendingCapProvider } from './spending-cap-context';
 
 jest.mock('../../../../../../store/actions', () => ({
   ...jest.requireActual('../../../../../../store/actions'),
@@ -69,7 +70,9 @@ describe('<ApproveInfo />', () => {
     const mockStore = configureMockStore(middleware)(state);
 
     const { container } = renderWithConfirmContextProvider(
-      <ApproveInfo />,
+      <SpendingCapProvider>
+        <ApproveInfo />
+      </SpendingCapProvider>,
       mockStore,
     );
 

ui/pages/confirmations/components/confirm/info/approve/approve.tsx

@@ -1,4 +1,7 @@
-import { TransactionMeta } from '@metamask/transaction-controller';
+import {
+  TransactionMeta,
+  TransactionType,
+} from '@metamask/transaction-controller';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useConfirmContext } from '../../../../context/confirm';
@@ -9,6 +12,9 @@ import { ApproveDetails } from './approve-details/approve-details';
 import { ApproveStaticSimulation } from './approve-static-simulation/approve-static-simulation';
 import { EditSpendingCapModal } from './edit-spending-cap-modal/edit-spending-cap-modal';
 import { useIsNFT } from './hooks/use-is-nft';
+import { RevokeDetails } from './revoke-details/revoke-details';
+import { RevokeStaticSimulation } from './revoke-static-simulation/revoke-static-simulation';
+import { useSpendingCapContext } from './spending-cap-context';
 import { SpendingCap } from './spending-cap/spending-cap';
 
 const ApproveInfo = () => {
@@ -24,7 +30,8 @@ const ApproveInfo = () => {
 
   const [isOpenEditSpendingCapModal, setIsOpenEditSpendingCapModal] =
     useState(false);
-  const [customSpendingCap, setCustomSpendingCap] = useState('');
+
+  const { customSpendingCap, setCustomSpendingCap } = useSpendingCapContext();
 
   const setCustomSpendingCapCandidate = (newValue: string) => {
     const value = parseInt(newValue, 10);
@@ -36,11 +43,19 @@ const ApproveInfo = () => {
     return null;
   }
 
+  const showRevokeScreen =
+    customSpendingCap === '0' &&
+    transactionMeta.type === TransactionType.tokenMethodApprove;
+
   return (
     <>
-      <ApproveStaticSimulation />
-      <ApproveDetails />
-      {!isNFT && (
+      {showRevokeScreen ? (
+        <RevokeStaticSimulation />
+      ) : (
+        <ApproveStaticSimulation />
+      )}
+      {showRevokeScreen ? <RevokeDetails /> : <ApproveDetails />}
+      {!isNFT && !showRevokeScreen && (
         <SpendingCap
           setIsOpenEditSpendingCapModal={setIsOpenEditSpendingCapModal}
           customSpendingCap={customSpendingCap}

ui/pages/confirmations/components/confirm/info/approve/hooks/use-custom-spending-cap.ts

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+
+export const useCustomSpendingCap = () => {
+  const [customSpendingCap, setCustomSpendingCap] = useState('');
+
+  return { customSpendingCap, setCustomSpendingCap };
+};

ui/pages/confirmations/components/confirm/info/approve/revoke-details/revoke-details.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
+import { OriginRow } from '../../shared/transaction-details/transaction-details';
+
+export const RevokeDetails = () => {
+  return (
+    <ConfirmInfoSection>
+      <OriginRow />
+    </ConfirmInfoSection>
+  );
+};