From dba74efa89bb533a16f9a1619408e35c255ba4d9 Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo <pedro.figueiredo@consensys.net>
Date: Fri, 6 Sep 2024 14:29:50 +0100
Subject: [PATCH] Update revoke flow logic

---
 .../erc20-approve-redesign.spec.ts            | 26 ++------
 .../increase-token-allowance-redesign.spec.ts | 59 ++-----------------
 .../__snapshots__/approve.test.tsx.snap       |  4 +-
 .../confirm/info/approve/approve.test.tsx     | 13 ++--
 .../confirm/info/approve/approve.tsx          | 28 ++++++---
 .../info/approve/spending-cap-context.tsx     | 33 -----------
 .../components/confirm/title/title.test.tsx   | 41 +++++++------
 .../components/confirm/title/title.tsx        | 25 +++++++-
 ui/pages/confirmations/confirm/confirm.tsx    | 45 +++++++-------
 9 files changed, 108 insertions(+), 166 deletions(-)
 delete mode 100644 ui/pages/confirmations/components/confirm/info/approve/spending-cap-context.tsx

diff --git a/test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts b/test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts
index e07fb26955ba..baa3638330b6 100644
--- a/test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts
+++ b/test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts
@@ -1,11 +1,6 @@
 /* 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 {
@@ -13,7 +8,6 @@ import {
   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
index cd4c08a83297..3c1d695c3534 100644
--- 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
index 72b494a67553..ebc8cf316a43 100644
--- 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
index 82e1718c0a4d..914e276369f5 100644
--- 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
index eba28883e971..a982c8af90bb 100644
--- 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
deleted file mode 100644
index 820d7207c2e7..000000000000
--- a/ui/pages/confirmations/components/confirm/info/approve/spending-cap-context.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { createContext, ReactNode, useContext, useState } from 'react';
-
-const SpendingCapContext = createContext<{
-  customSpendingCap: string;
-  setCustomSpendingCap: (newCap: string) => void;
-} | null>(null);
-
-export const SpendingCapProvider = ({ children }: { children: ReactNode }) => {
-  const [customSpendingCap, setCustomSpendingCap] = useState('');
-
-  return (
-    <SpendingCapContext.Provider
-      value={{ customSpendingCap, setCustomSpendingCap }}
-    >
-      {children}
-    </SpendingCapContext.Provider>
-  );
-};
-
-export const useSpendingCapContext = () => {
-  const context = useContext(SpendingCapContext);
-  if (!context) {
-    throw new Error(
-      'useSpendingCapContext must be used within an SpendingCapProvider',
-    );
-  }
-  return context;
-};
-
-SpendingCapProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
diff --git a/ui/pages/confirmations/components/confirm/title/title.test.tsx b/ui/pages/confirmations/components/confirm/title/title.test.tsx
index cbe5028fcae5..f62e1f0239b7 100644
--- a/ui/pages/confirmations/components/confirm/title/title.test.tsx
+++ b/ui/pages/confirmations/components/confirm/title/title.test.tsx
@@ -16,16 +16,29 @@ import {
   ConfirmAlertsState,
 } from '../../../../../ducks/confirm-alerts/confirm-alerts';
 import { Severity } from '../../../../../helpers/constants/design-system';
-import { SpendingCapProvider } from '../info/approve/spending-cap-context';
 import ConfirmTitle from './title';
 
+jest.mock('../info/approve/hooks/use-approve-token-simulation', () => ({
+  useApproveTokenSimulation: jest.fn(() => ({
+    spendingCap: '1000',
+    formattedSpendingCap: '1000',
+    value: '1000',
+  })),
+}));
+
+jest.mock('../../../hooks/useAssetDetails', () => ({
+  useAssetDetails: jest.fn(() => ({
+    decimals: 18,
+    userBalance: '1000000',
+    tokenSymbol: 'TST',
+  })),
+}));
+
 describe('ConfirmTitle', () => {
   it('should render the title and description for a personal signature', () => {
     const mockStore = configureMockStore([])(getMockPersonalSignConfirmState);
     const { getByText } = renderWithConfirmContextProvider(
-      <SpendingCapProvider>
-        <ConfirmTitle />
-      </SpendingCapProvider>,
+      <ConfirmTitle />,
       mockStore,
     );
 
@@ -42,9 +55,7 @@ describe('ConfirmTitle', () => {
       getMockTypedSignConfirmStateForRequest(permitSignatureMsg),
     );
     const { getByText } = renderWithConfirmContextProvider(
-      <SpendingCapProvider>
-        <ConfirmTitle />
-      </SpendingCapProvider>,
+      <ConfirmTitle />,
       mockStore,
     );
 
@@ -57,9 +68,7 @@ describe('ConfirmTitle', () => {
   it('should render the title and description for typed signature', () => {
     const mockStore = configureMockStore([])(getMockTypedSignConfirmState());
     const { getByText } = renderWithConfirmContextProvider(
-      <SpendingCapProvider>
-        <ConfirmTitle />
-      </SpendingCapProvider>,
+      <ConfirmTitle />,
       mockStore,
     );
 
@@ -76,9 +85,7 @@ describe('ConfirmTitle', () => {
       getMockContractInteractionConfirmState(),
     );
     const { getByText } = renderWithConfirmContextProvider(
-      <SpendingCapProvider>
-        <ConfirmTitle />
-      </SpendingCapProvider>,
+      <ConfirmTitle />,
       mockStore,
     );
 
@@ -116,9 +123,7 @@ describe('ConfirmTitle', () => {
         }),
       );
       const { queryByText } = renderWithConfirmContextProvider(
-        <SpendingCapProvider>
-          <ConfirmTitle />
-        </SpendingCapProvider>,
+        <ConfirmTitle />,
         mockStore,
       );
 
@@ -130,9 +135,7 @@ describe('ConfirmTitle', () => {
       const mockStore = configureMockStore([])(mockAlertState());
 
       const { getByText } = renderWithConfirmContextProvider(
-        <SpendingCapProvider>
-          <ConfirmTitle />
-        </SpendingCapProvider>,
+        <ConfirmTitle />,
         mockStore,
       );
 
diff --git a/ui/pages/confirmations/components/confirm/title/title.tsx b/ui/pages/confirmations/components/confirm/title/title.tsx
index b23fe5a2880e..62b3f82b9c4a 100644
--- a/ui/pages/confirmations/components/confirm/title/title.tsx
+++ b/ui/pages/confirmations/components/confirm/title/title.tsx
@@ -15,13 +15,14 @@ import {
 import useAlerts from '../../../../../hooks/useAlerts';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { useConfirmContext } from '../../../context/confirm';
+import { useAssetDetails } from '../../../hooks/useAssetDetails';
 import { Confirmation, SignatureRequestType } from '../../../types/confirm';
 import {
   isPermitSignatureRequest,
   isSIWESignatureRequest,
 } from '../../../utils';
+import { useApproveTokenSimulation } from '../info/approve/hooks/use-approve-token-simulation';
 import { useIsNFT } from '../info/approve/hooks/use-is-nft';
-import { useSpendingCapContext } from '../info/approve/spending-cap-context';
 
 function ConfirmBannerAlert({ ownerId }: { ownerId: string }) {
   const t = useI18nContext();
@@ -127,13 +128,33 @@ const getDescription = (
   }
 };
 
+const isTransactionMeta = (
+  confirmation: Confirmation,
+): confirmation is TransactionMeta => {
+  return (confirmation as TransactionMeta).txParams !== undefined;
+};
+
 const ConfirmTitle: React.FC = memo(() => {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext();
 
   const { isNFT } = useIsNFT(currentConfirmation as TransactionMeta);
 
-  const { customSpendingCap } = useSpendingCapContext();
+  let customSpendingCap = '';
+  if (isTransactionMeta(currentConfirmation)) {
+    const { decimals } = useAssetDetails(
+      currentConfirmation.txParams.to,
+      currentConfirmation.txParams.from,
+      currentConfirmation.txParams.data,
+    );
+
+    const { spendingCap } = useApproveTokenSimulation(
+      currentConfirmation,
+      decimals || '0',
+    );
+
+    customSpendingCap = spendingCap;
+  }
 
   const title = useMemo(
     () =>
diff --git a/ui/pages/confirmations/confirm/confirm.tsx b/ui/pages/confirmations/confirm/confirm.tsx
index 8649f128d94f..3f3a18d55661 100644
--- a/ui/pages/confirmations/confirm/confirm.tsx
+++ b/ui/pages/confirmations/confirm/confirm.tsx
@@ -13,7 +13,6 @@ import { ConfirmAlerts } from '../components/confirm/confirm-alerts';
 import { Footer } from '../components/confirm/footer';
 import { Header } from '../components/confirm/header';
 import { Info } from '../components/confirm/info';
-import { SpendingCapProvider } from '../components/confirm/info/approve/spending-cap-context';
 import { LedgerInfo } from '../components/confirm/ledger-info';
 import { Nav } from '../components/confirm/nav';
 import { NetworkChangeToast } from '../components/confirm/network-change-toast';
@@ -48,29 +47,27 @@ const Confirm = () => (
     <TransactionModalContextProvider>
       {/* This context should be removed once we implement the new edit gas fees popovers */}
       <GasFeeContextProviderWrapper>
-        <SpendingCapProvider>
-          <EIP1559TransactionGasModal />
-          <ConfirmAlerts>
-            <Page className="confirm_wrapper">
-              <Nav />
-              <Header />
-              <ScrollToBottom>
-                {
-                  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
-                  <MMISignatureMismatchBanner />
-                  ///: END:ONLY_INCLUDE_IF
-                }
-                <BlockaidLoadingIndicator />
-                <LedgerInfo />
-                <Title />
-                <Info />
-                <PluggableSection />
-              </ScrollToBottom>
-              <Footer />
-              <NetworkChangeToast />
-            </Page>
-          </ConfirmAlerts>
-        </SpendingCapProvider>
+        <EIP1559TransactionGasModal />
+        <ConfirmAlerts>
+          <Page className="confirm_wrapper">
+            <Nav />
+            <Header />
+            <ScrollToBottom>
+              {
+                ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+                <MMISignatureMismatchBanner />
+                ///: END:ONLY_INCLUDE_IF
+              }
+              <BlockaidLoadingIndicator />
+              <LedgerInfo />
+              <Title />
+              <Info />
+              <PluggableSection />
+            </ScrollToBottom>
+            <Footer />
+            <NetworkChangeToast />
+          </Page>
+        </ConfirmAlerts>
       </GasFeeContextProviderWrapper>
     </TransactionModalContextProvider>
   </ConfirmContextProvider>