Add transaction flow and details sections

test/e2e/page-objects/pages/confirmations/legacy/watch-asset-confirmation.ts

@@ -0,0 +1,20 @@
+import { Driver } from '../../../../webdriver/driver';
+import { RawLocator } from '../../../common';
+
+class WatchAssetConfirmation {
+  private driver: Driver;
+
+  private footerConfirmButton: RawLocator;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+
+    this.footerConfirmButton = '[data-testid="page-container-footer-next"]';
+  }
+
+  async clickFooterConfirmButton() {
+    await this.driver.clickElement(this.footerConfirmButton);
+  }
+}
+
+export default WatchAssetConfirmation;

test/e2e/page-objects/pages/confirmation.ts → test/e2e/page-objects/pages/confirmations/redesign/confirmation.ts

@@ -1,5 +1,5 @@
-import { Driver } from '../../webdriver/driver';
-import { RawLocator } from '../common';
+import { Driver } from '../../../../webdriver/driver';
+import { RawLocator } from '../../../common';
 
 class Confirmation {
   protected driver: Driver;

test/e2e/page-objects/pages/set-approval-for-all-transaction-confirmation.ts → test/e2e/page-objects/pages/confirmations/redesign/set-approval-for-all-transaction-confirmation.ts

@@ -1,6 +1,6 @@
-import { tEn } from '../../../lib/i18n-helpers';
-import { Driver } from '../../webdriver/driver';
-import { RawLocator } from '../common';
+import { tEn } from '../../../../../lib/i18n-helpers';
+import { Driver } from '../../../../webdriver/driver';
+import { RawLocator } from '../../../common';
 import TransactionConfirmation from './transaction-confirmation';
 
 class SetApprovalForAllTransactionConfirmation extends TransactionConfirmation {

test/e2e/page-objects/pages/confirmations/redesign/token-transfer-confirmation.ts

@@ -0,0 +1,45 @@
+import { tEn } from '../../../../../lib/i18n-helpers';
+import { Driver } from '../../../../webdriver/driver';
+import { RawLocator } from '../../../common';
+import TransactionConfirmation from './transaction-confirmation';
+
+class TokenTransferTransactionConfirmation extends TransactionConfirmation {
+  private networkParagraph: RawLocator;
+
+  private interactingWithParagraph: RawLocator;
+
+  private networkFeeParagraph: RawLocator;
+
+  constructor(driver: Driver) {
+    super(driver);
+
+    this.driver = driver;
+
+    this.networkParagraph = {
+      css: 'p',
+      text: tEn('transactionFlowNetwork') as string,
+    };
+    this.interactingWithParagraph = {
+      css: 'p',
+      text: tEn('interactingWith') as string,
+    };
+    this.networkFeeParagraph = {
+      css: 'p',
+      text: tEn('networkFee') as string,
+    };
+  }
+
+  async check_networkParagraph() {
+    await this.driver.waitForSelector(this.networkParagraph);
+  }
+
+  async check_interactingWithParagraph() {
+    await this.driver.waitForSelector(this.interactingWithParagraph);
+  }
+
+  async check_networkFeeParagraph() {
+    await this.driver.waitForSelector(this.networkFeeParagraph);
+  }
+}
+
+export default TokenTransferTransactionConfirmation;

test/e2e/page-objects/pages/confirmations/redesign/transaction-confirmation.ts

@@ -0,0 +1,25 @@
+import { tEn } from '../../../../../lib/i18n-helpers';
+import { Driver } from '../../../../webdriver/driver';
+import { RawLocator } from '../../../common';
+import Confirmation from './confirmation';
+
+class TransactionConfirmation extends Confirmation {
+  private walletInitiatedHeadingTitle: RawLocator;
+
+  constructor(driver: Driver) {
+    super(driver);
+
+    this.driver = driver;
+
+    this.walletInitiatedHeadingTitle = {
+      css: 'h3',
+      text: tEn('review') as string,
+    };
+  }
+
+  async check_walletInitiatedHeadingTitle() {
+    await this.driver.waitForSelector(this.walletInitiatedHeadingTitle);
+  }
+}
+
+export default TransactionConfirmation;

test/e2e/page-objects/pages/send/send-token-page.ts

@@ -1,5 +1,6 @@
 import { strict as assert } from 'assert';
 import { Driver } from '../../../webdriver/driver';
+import { RawLocator } from '../../common';
 
 class SendTokenPage {
   private driver: Driver;
@@ -18,6 +19,10 @@ class SendTokenPage {
 
   private ensResolvedAddress: string;
 
+  private assetPickerButton: RawLocator;
+
+  private tokenListButton: RawLocator;
+
   constructor(driver: Driver) {
     this.driver = driver;
     this.inputAmount = '[data-testid="currency-input"]';
@@ -32,6 +37,8 @@ class SendTokenPage {
       text: 'Continue',
       tag: 'button',
     };
+    this.assetPickerButton = '[data-testid="asset-picker-button"]';
+    this.tokenListButton = '[data-testid="multichain-token-list-button"]';
   }
 
   async check_pageIsLoaded(): Promise<void> {
@@ -125,6 +132,15 @@ class SendTokenPage {
       `ENS domain '${ensDomain}' resolved to address '${address}' and can be used as recipient on send token screen.`,
     );
   }
+
+  async click_assetPickerButton() {
+    await this.driver.clickElement(this.assetPickerButton);
+  }
+
+  async click_secondTokenListButton() {
+    const elements = await this.driver.findElements(this.tokenListButton);
+    await elements[1].click();
+  }
 }
 
 export default SendTokenPage;

test/e2e/page-objects/pages/test-dapp.ts

@@ -15,13 +15,16 @@ class TestDapp {
 
   private erc1155RevokeSetApprovalForAllButton: RawLocator;
 
+  private erc20WatchAssetButton: RawLocator;
+
   constructor(driver: Driver) {
     this.driver = driver;
 
     this.erc721SetApprovalForAllButton = '#setApprovalForAllButton';
     this.erc1155SetApprovalForAllButton = '#setApprovalForAllERC1155Button';
     this.erc721RevokeSetApprovalForAllButton = '#revokeButton';
     this.erc1155RevokeSetApprovalForAllButton = '#revokeERC1155Button';
+    this.erc20WatchAssetButton = '#watchAssets';
   }
 
   async open({
@@ -62,6 +65,10 @@ class TestDapp {
   public async clickERC1155RevokeSetApprovalForAllButton() {
     await this.driver.clickElement(this.erc1155RevokeSetApprovalForAllButton);
   }
+
+  public async clickERC20WatchAssetButton() {
+    await this.driver.clickElement(this.erc20WatchAssetButton);
+  }
 }
 
 export default TestDapp;

test/e2e/tests/confirmations/transactions/erc1155-revoke-set-approval-for-all-redesign.ts

@@ -3,7 +3,7 @@ import { TransactionEnvelopeType } from '@metamask/transaction-controller';
 import { DAPP_URL } from '../../../constants';
 import { unlockWallet, WINDOW_TITLES } from '../../../helpers';
 import { Mockttp } from '../../../mock-e2e';
-import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/set-approval-for-all-transaction-confirmation';
+import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/confirmations/redesign/set-approval-for-all-transaction-confirmation';
 import TestDapp from '../../../page-objects/pages/test-dapp';
 import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
 import { Driver } from '../../../webdriver/driver';

test/e2e/tests/confirmations/transactions/erc1155-set-approval-for-all-redesign.spec.ts

@@ -2,7 +2,7 @@
 import { TransactionEnvelopeType } from '@metamask/transaction-controller';
 import { DAPP_URL, unlockWallet, WINDOW_TITLES } from '../../../helpers';
 import { Mockttp } from '../../../mock-e2e';
-import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/set-approval-for-all-transaction-confirmation';
+import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/confirmations/redesign/set-approval-for-all-transaction-confirmation';
 import TestDapp from '../../../page-objects/pages/test-dapp';
 import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
 import { Driver } from '../../../webdriver/driver';

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

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
+import { TransactionEnvelopeType } from '@metamask/transaction-controller';
+import { DAPP_URL } from '../../../constants';
+import { unlockWallet, WINDOW_TITLES } from '../../../helpers';
+import { Mockttp } from '../../../mock-e2e';
+import WatchAssetConfirmation from '../../../page-objects/pages/confirmations/legacy/watch-asset-confirmation';
+import HomePage from '../../../page-objects/pages/homepage';
+import SendTokenPage from '../../../page-objects/pages/send/send-token-page';
+import TestDapp from '../../../page-objects/pages/test-dapp';
+import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
+import { Driver } from '../../../webdriver/driver';
+import { withRedesignConfirmationFixtures } from '../helpers';
+import { mocked4BytesSetApprovalForAll } from './erc721-revoke-set-approval-for-all-redesign';
+import { TestSuiteArguments } from './shared';
+import TokenTransferTransactionConfirmation from '../../../page-objects/pages/confirmations/redesign/token-transfer-confirmation';
+
+const { SMART_CONTRACTS } = require('../../../seeder/smart-contracts');
+
+describe('Confirmation Redesign ERC20 Token Send @no-mmi', function () {
+  it('Sends a type 0 transaction (Legacy)', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      TransactionEnvelopeType.legacy,
+      async ({ driver, contractRegistry }: TestSuiteArguments) => {
+        await createTransactionAndAssertDetails(driver, contractRegistry);
+      },
+      mocks,
+      SMART_CONTRACTS.HST,
+    );
+  });
+
+  it('Sends a type 2 transaction (EIP1559)', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      TransactionEnvelopeType.feeMarket,
+      async ({ driver, contractRegistry }: TestSuiteArguments) => {
+        await createTransactionAndAssertDetails(driver, contractRegistry);
+      },
+      mocks,
+      SMART_CONTRACTS.HST,
+    );
+  });
+});
+
+async function mocks(server: Mockttp) {
+  return [await mocked4BytesSetApprovalForAll(server)];
+}
+
+async function createTransactionAndAssertDetails(
+  driver: Driver,
+  contractRegistry?: GanacheContractAddressRegistry,
+) {
+  await unlockWallet(driver);
+
+  const contractAddress = await (
+    contractRegistry as GanacheContractAddressRegistry
+  ).getContractAddress(SMART_CONTRACTS.HST);
+
+  const testDapp = new TestDapp(driver);
+
+  await testDapp.open({ contractAddress, url: DAPP_URL });
+
+  await testDapp.clickERC20WatchAssetButton();
+
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+  const watchAssetConfirmation = new WatchAssetConfirmation(driver);
+  await watchAssetConfirmation.clickFooterConfirmButton();
+
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
+
+  const homePage = new HomePage(driver);
+  await homePage.startSendFlow();
+
+  const sendToPage = new SendTokenPage(driver);
+  await sendToPage.check_pageIsLoaded();
+  await sendToPage.fillRecipient('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
+  await sendToPage.fillAmount('1');
+
+  await sendToPage.click_assetPickerButton();
+  await sendToPage.click_secondTokenListButton();
+  await sendToPage.goToNextScreen();
+
+  const tokenTransferTransactionConfirmation =
+    new TokenTransferTransactionConfirmation(driver);
+  await tokenTransferTransactionConfirmation.check_walletInitiatedHeadingTitle();
+  await tokenTransferTransactionConfirmation.check_networkParagraph();
+  await tokenTransferTransactionConfirmation.check_interactingWithParagraph();
+  await tokenTransferTransactionConfirmation.check_networkFeeParagraph();
+
+  await tokenTransferTransactionConfirmation.clickFooterConfirmButton();
+}

test/e2e/tests/confirmations/transactions/erc721-revoke-set-approval-for-all-redesign.ts

@@ -3,7 +3,7 @@ import { TransactionEnvelopeType } from '@metamask/transaction-controller';
 import { DAPP_URL } from '../../../constants';
 import { unlockWallet, WINDOW_TITLES } from '../../../helpers';
 import { Mockttp } from '../../../mock-e2e';
-import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/set-approval-for-all-transaction-confirmation';
+import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/confirmations/redesign/set-approval-for-all-transaction-confirmation';
 import TestDapp from '../../../page-objects/pages/test-dapp';
 import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
 import { Driver } from '../../../webdriver/driver';

test/e2e/tests/confirmations/transactions/erc721-set-approval-for-all-redesign.spec.ts

@@ -2,7 +2,7 @@
 import { TransactionEnvelopeType } from '@metamask/transaction-controller';
 import { DAPP_URL, unlockWallet, WINDOW_TITLES } from '../../../helpers';
 import { Mockttp } from '../../../mock-e2e';
-import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/set-approval-for-all-transaction-confirmation';
+import SetApprovalForAllTransactionConfirmation from '../../../page-objects/pages/confirmations/redesign/set-approval-for-all-transaction-confirmation';
 import TestDapp from '../../../page-objects/pages/test-dapp';
 import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
 import { Driver } from '../../../webdriver/driver';

ui/pages/confirmations/components/confirm/info/shared/send-heading/__snapshots__/send-heading.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<SendHeading /> renders component 1`] = `
 <div>
   <div
-    class="mm-box mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
+    class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
   >
     <div
       class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-token mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-muted mm-box--background-color-overlay-default mm-box--rounded-full"

ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.stories.tsx

@@ -13,7 +13,9 @@ const Story = {
   component: SendHeading,
   decorators: [
     (story: () => Meta<typeof SendHeading>) => (
-      <Provider store={store}>{story()}</Provider>
+      <Provider store={store}>
+        <ConfirmContextProvider>{story()}</ConfirmContextProvider>
+      </Provider>
     ),
   ],
 };

ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx

@@ -73,7 +73,7 @@ const SendHeading = () => {
       flexDirection={FlexDirection.Column}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
-      paddingTop={4}
+      padding={4}
     >
       {TokenImage}
       {TokenValue}