Update revoke flow logic

MetaMask · Sep 6, 2024 · dba74ef · dba74ef
1 parent 5e302f4
commit dba74ef
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 166 deletions.
diff --git a/test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts b/test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts
@@ -1,19 +1,13 @@
 /* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
 import { MockttpServer } from 'mockttp';
-import {
-  getEventPayloads,
-  tinyDelayMs,
-  veryLargeDelayMs,
-  WINDOW_TITLES,
-} from '../../../helpers';
+import { tinyDelayMs, veryLargeDelayMs, WINDOW_TITLES } from '../../../helpers';
 import { Driver } from '../../../webdriver/driver';
 import { scrollAndConfirmAndAssertConfirm } from '../helpers';
 import {
   openDAppWithContract,
   TestSuiteArguments,
   toggleAdvancedDetails,
 } from './shared';
-import { MockedEndpoint } from '../../../mock-e2e';
 
 const {
   defaultGanacheOptions,
@@ -26,8 +20,8 @@ const { SMART_CONTRACTS } = require('../../../seeder/smart-contracts');
 describe('Confirmation Redesign ERC20 Approve Component', function () {
   const smartContract = SMART_CONTRACTS.HST;
 
-  describe.only('Submit an Approve transaction @no-mmi', function () {
-    it.only('Sends a type 0 transaction (Legacy)', async function () {
+  describe('Submit an Approve transaction @no-mmi', function () {
+    it('Sends a type 0 transaction (Legacy)', async function () {
       await withFixtures(
         {
           dapp: true,
@@ -45,24 +39,13 @@ describe('Confirmation Redesign ERC20 Approve Component', function () {
           testSpecificMock: mocks,
           title: this.test?.fullTitle(),
         },
-        async ({
-          driver,
-          contractRegistry,
-          mockedEndpoint: mockedEndpoints,
-        }: TestSuiteArguments) => {
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
           await openDAppWithContract(driver, contractRegistry, smartContract);
 
           await importTST(driver);
 
           await createERC20ApproveTransaction(driver);
 
-          const events = await getEventPayloads(
-            driver,
-            mockedEndpoints as MockedEndpoint[],
-          );
-
-          console.log('here '.repeat(42), { mockedEndpoints, events });
-
           await assertApproveDetails(driver);
 
           await confirmApproveTransaction(driver);
@@ -107,6 +90,7 @@ describe('Confirmation Redesign ERC20 Approve Component', function () {
 export async function mocked4BytesApprove(mockServer: MockttpServer) {
   return await mockServer
     .forGet('https://www.4byte.directory/api/v1/signatures/')
+    .always()
     .withQuery({ hex_signature: '0x095ea7b3' })
     .thenCallback(() => ({
       statusCode: 200,

diff --git a/test/e2e/tests/confirmations/transactions/increase-token-allowance-redesign.spec.ts b/test/e2e/tests/confirmations/transactions/increase-token-allowance-redesign.spec.ts
@@ -1,16 +1,13 @@
 /* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
 import {
-  getEventPayloads,
   largeDelayMs,
   veryLargeDelayMs,
   WINDOW_TITLES,
 } from '../../../helpers';
-import { MockedEndpoint, Mockttp } from '../../../mock-e2e';
+import { Mockttp } from '../../../mock-e2e';
 import { Driver } from '../../../webdriver/driver';
 import { scrollAndConfirmAndAssertConfirm } from '../helpers';
 import { openDAppWithContract, TestSuiteArguments } from './shared';
-import { mocked4BytesApprove } from './erc20-approve-redesign.spec';
-import { MockedEndpoint } from '../../../mock-e2e';
 
 const {
   defaultGanacheOptions,
@@ -42,22 +39,11 @@ describe('Confirmation Redesign ERC20 Increase Allowance', function () {
           testSpecificMock: mocks,
           title: this.test?.fullTitle(),
         },
-        async ({
-          driver,
-          contractRegistry,
-          mockedEndpoint: mockedEndpoints,
-        }: TestSuiteArguments) => {
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
           await openDAppWithContract(driver, contractRegistry, smartContract);
 
           await createERC20IncreaseAllowanceTransaction(driver);
 
-          const events = await getEventPayloads(
-            driver,
-            mockedEndpoints as MockedEndpoint[],
-          );
-
-          console.log('here '.repeat(42), { mockedEndpoints, events });
-
           const NEW_SPENDING_CAP = '3';
           await editSpendingCap(driver, NEW_SPENDING_CAP);
 
@@ -86,22 +72,11 @@ describe('Confirmation Redesign ERC20 Increase Allowance', function () {
           testSpecificMock: mocks,
           title: this.test?.fullTitle(),
         },
-        async ({
-          driver,
-          contractRegistry,
-          mockedEndpoint: mockedEndpoints,
-        }: TestSuiteArguments) => {
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
           await openDAppWithContract(driver, contractRegistry, smartContract);
 
           await createERC20IncreaseAllowanceTransaction(driver);
 
-          const events = await getEventPayloads(
-            driver,
-            mockedEndpoints as MockedEndpoint[],
-          );
-
-          console.log('here '.repeat(42), { mockedEndpoints, events });
-
           const NEW_SPENDING_CAP = '3';
           await editSpendingCap(driver, NEW_SPENDING_CAP);
 
@@ -130,22 +105,11 @@ describe('Confirmation Redesign ERC20 Increase Allowance', function () {
           testSpecificMock: mocks,
           title: this.test?.fullTitle(),
         },
-        async ({
-          driver,
-          contractRegistry,
-          mockedEndpoint: mockedEndpoints,
-        }: TestSuiteArguments) => {
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
           await openDAppWithContract(driver, contractRegistry, smartContract);
 
           await createERC20IncreaseAllowanceTransaction(driver);
 
-          const events = await getEventPayloads(
-            driver,
-            mockedEndpoints as MockedEndpoint[],
-          );
-
-          console.log('here '.repeat(42), { mockedEndpoints, events });
-
           const NEW_SPENDING_CAP = '3000';
           await editSpendingCap(driver, NEW_SPENDING_CAP);
 
@@ -174,22 +138,11 @@ describe('Confirmation Redesign ERC20 Increase Allowance', function () {
           testSpecificMock: mocks,
           title: this.test?.fullTitle(),
         },
-        async ({
-          driver,
-          contractRegistry,
-          mockedEndpoint: mockedEndpoints,
-        }: TestSuiteArguments) => {
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
           await openDAppWithContract(driver, contractRegistry, smartContract);
 
           await createERC20IncreaseAllowanceTransaction(driver);
 
-          const events = await getEventPayloads(
-            driver,
-            mockedEndpoints as MockedEndpoint[],
-          );
-
-          console.log('here '.repeat(42), { mockedEndpoints, events });
-
           const NEW_SPENDING_CAP = '3000';
           await editSpendingCap(driver, NEW_SPENDING_CAP);
 
@@ -238,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.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
   await driver.clickElement('[data-testid="edit-spending-cap-icon"');
 

diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
               class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
               data-testid="simulation-token-value"
             >
-              0
+              1000
             </p>
           </div>
           <div>
@@ -385,7 +385,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
           style="white-space: pre-wrap;"
         >
-          0 
+          1000 
         </p>
         <button
           aria-label="Edit"

diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx
@@ -4,7 +4,6 @@ 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'),
@@ -23,6 +22,14 @@ jest.mock(
   }),
 );
 
+jest.mock('./hooks/use-approve-token-simulation', () => ({
+  useApproveTokenSimulation: jest.fn(() => ({
+    spendingCap: '1000',
+    formattedSpendingCap: '1000',
+    value: '1000',
+  })),
+}));
+
 jest.mock('../../../../hooks/useAssetDetails', () => ({
   useAssetDetails: jest.fn(() => ({
     decimals: 18,
@@ -70,9 +77,7 @@ describe('<ApproveInfo />', () => {
     const mockStore = configureMockStore(middleware)(state);
 
     const { container } = renderWithConfirmContextProvider(
-      <SpendingCapProvider>
-        <ApproveInfo />
-      </SpendingCapProvider>,
+      <ApproveInfo />,
       mockStore,
     );
 

diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.tsx
@@ -5,16 +5,17 @@ import {
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useConfirmContext } from '../../../../context/confirm';
+import { useAssetDetails } from '../../../../hooks/useAssetDetails';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
 import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section';
 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 { useApproveTokenSimulation } from './hooks/use-approve-token-simulation';
 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 = () => {
@@ -31,23 +32,34 @@ const ApproveInfo = () => {
   const [isOpenEditSpendingCapModal, setIsOpenEditSpendingCapModal] =
     useState(false);
 
+  const { decimals } = useAssetDetails(
+    transactionMeta.txParams.to,
+    transactionMeta.txParams.from,
+    transactionMeta.txParams.data,
+  );
+
+  const { spendingCap } = useApproveTokenSimulation(
+    transactionMeta,
+    decimals || '0',
+  );
+
+  const showRevokeVariant =
+    spendingCap === '0' &&
+    transactionMeta.type === TransactionType.tokenMethodApprove;
+
   if (!transactionMeta?.txParams) {
     return null;
   }
 
-  const showRevokeScreen =
-    customSpendingCap === '0' &&
-    transactionMeta.type === TransactionType.tokenMethodApprove;
-
   return (
     <>
-      {showRevokeScreen ? (
+      {showRevokeVariant ? (
         <RevokeStaticSimulation />
       ) : (
         <ApproveStaticSimulation />
       )}
-      {showRevokeScreen ? <RevokeDetails /> : <ApproveDetails />}
-      {!isNFT && !showRevokeScreen && (
+      {showRevokeVariant ? <RevokeDetails /> : <ApproveDetails />}
+      {!isNFT && !showRevokeVariant && (
         <SpendingCap
           setIsOpenEditSpendingCapModal={setIsOpenEditSpendingCapModal}
         />

diff --git a/ui/pages/confirmations/components/confirm/info/approve/spending-cap-context.tsx b/ui/pages/confirmations/components/confirm/info/approve/spending-cap-context.tsx