Merge branch 'develop' into bump-accounts-controller-to-14

.circleci/config.yml

@@ -1189,7 +1189,7 @@ jobs:
           command: |
             if .circleci/scripts/test-run-e2e.sh
             then
-              timeout 20m yarn test:e2e:chrome --retries 1
+              timeout 20m yarn test:e2e:chrome:confirmation-redesign --retries 1
             fi
           no_output_timeout: 5m
           environment:

package.json

@@ -52,6 +52,7 @@
     "test:e2e:mmi:visual": "./test/e2e/mmi/scripts/run-visual-test.sh check",
     "test:e2e:mmi:visual:update": "./test/e2e/mmi/scripts/run-visual-test.sh update",
     "test:e2e:pw:report": "yarn playwright show-report public/playwright/playwright-reports/html",
+    "test:e2e:chrome:confirmation-redesign": "ENABLE_CONFIRMATION_REDESIGN=true SELENIUM_BROWSER=chrome node test/e2e/run-all.js",
     "test:e2e:chrome:rpc": "SELENIUM_BROWSER=chrome node test/e2e/run-all.js --rpc",
     "test:e2e:chrome:multi-provider": "MULTIPROVIDER=true SELENIUM_BROWSER=chrome node test/e2e/run-all.js --multi-provider",
     "test:e2e:firefox": "SELENIUM_BROWSER=firefox node test/e2e/run-all.js",

test/e2e/helpers.js

@@ -657,7 +657,8 @@ const closeSRPReveal = async (driver) => {
   });
 };
 
-const DAPP_URL = 'http://127.0.0.1:8080';
+const DAPP_HOST_ADDRESS = '127.0.0.1:8080';
+const DAPP_URL = `http://${DAPP_HOST_ADDRESS}`;
 const DAPP_ONE_URL = 'http://127.0.0.1:8081';
 
 const openDapp = async (driver, contract = null, dappURL = DAPP_URL) => {
@@ -1107,6 +1108,7 @@ async function initBundler(bundlerServer, ganacheServer, usePaymaster) {
 }
 
 module.exports = {
+  DAPP_HOST_ADDRESS,
   DAPP_URL,
   DAPP_ONE_URL,
   TEST_SEED_PHRASE,

test/e2e/tests/confirmations/helpers.ts

@@ -0,0 +1,35 @@
+import { strict as assert } from 'assert';
+import FixtureBuilder from '../../fixture-builder';
+import {
+  defaultGanacheOptions,
+  withFixtures,
+} from '../../helpers';
+import { Driver } from '../../webdriver/driver';
+
+export async function scrollAndConfirmAndAssertConfirm (driver: Driver) {
+  const confirmButton = await driver.findElement({ xpath: '//button[@data-testid="confirm-footer-button"]'});
+  await driver.clickElement('.confirm-scroll-to-bottom__button');
+  await driver.clickElement('[data-testid="confirm-footer-button"]');
+}
+
+export function withRedesignConfirmationFixtures (title: string = '', testFunction: Function) {
+  return withFixtures(
+    {
+      dapp: true,
+      driverOptions: {
+        timeOut: 20000,
+      },
+      fixtures: new FixtureBuilder()
+        .withPermissionControllerConnectedToTestDapp()
+        .withPreferencesController({
+          preferences: {
+            redesignedConfirmationsEnabled: true,
+          },
+        })
+        .build(),
+      ganacheOptions: defaultGanacheOptions,
+      title,
+    },
+    testFunction,
+  );
+}

test/e2e/tests/confirmations/signatures/permit.spec.ts

@@ -0,0 +1,105 @@
+import { strict as assert } from 'assert';
+import { Suite } from 'mocha';
+import { scrollAndConfirmAndAssertConfirm, withRedesignConfirmationFixtures } from '../helpers';
+import {
+  DAPP_HOST_ADDRESS,
+  WINDOW_TITLES,
+  openDapp,
+  switchToNotificationWindow,
+  unlockWallet,
+} from '../../../helpers';
+import { Ganache } from '../../../seeder/ganache';
+import { Driver } from '../../../webdriver/driver';
+
+describe('Confirmation Signature - Permit', function (this: Suite) {
+  if (!process.env.ENABLE_CONFIRMATION_REDESIGN) { return; }
+
+  it('initiates and confirms', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver, ganacheServer }: { driver: Driver, ganacheServer: Ganache }) => {
+        const addresses = await ganacheServer.getAccounts();
+        const publicAddress = addresses?.[0] as string;
+
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#signPermit');
+        await switchToNotificationWindow(driver);
+
+        await assertInfoValues(driver);
+        await scrollAndConfirmAndAssertConfirm(driver);
+        await assertVerifiedResults(driver, publicAddress);
+      },
+    );
+  });
+
+  it('initiates and rejects', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#signPermit');
+        await switchToNotificationWindow(driver);
+
+        await driver.clickElement('[data-testid="confirm-footer-cancel-button"]');
+
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+        const rejectionResult = await driver.waitForSelector({
+          css: '#signPermitResult',
+          text: 'Error: User rejected the request.',
+        });
+        assert.ok(rejectionResult);
+      },
+    );
+  });
+});
+
+async function assertInfoValues(driver: Driver) {
+  const origin = driver.findElement({ text: DAPP_HOST_ADDRESS });
+  const contractPetName = driver.findElement({
+    css: '.name__value',
+    text: '0xCcCCc...ccccC',
+  });
+
+  const primaryType = driver.findElement({ text: 'Permit' });
+  const owner = driver.findElement({ css: '.name__name', text: 'Account 1' });
+  const spender = driver.findElement({ css: '.name__value', text: '0x5B38D...eddC4' });
+  const value = driver.findElement({ text: '3000' });
+  const nonce = driver.findElement({ text: '0' });
+  const deadline = driver.findElement({ text: '50000000000' });
+
+  assert.ok(await origin, 'origin');
+  assert.ok(await contractPetName, 'contractPetName');
+  assert.ok(await primaryType, 'primaryType');
+  assert.ok(await owner, 'owner');
+  assert.ok(await spender, 'spender');
+  assert.ok(await value, 'value');
+  assert.ok(await nonce, 'nonce');
+  assert.ok(await deadline, 'deadline');
+}
+
+async function assertVerifiedResults(driver: Driver, publicAddress: string) {
+  await driver.waitUntilXWindowHandles(2);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  await driver.clickElement('#signPermitVerify');
+
+  const verifyResult = await driver.findElement('#signPermitResult');
+  const verifyResultR = await driver.findElement('#signPermitResultR');
+  const verifyResultS = await driver.findElement('#signPermitResultS');
+  const verifyResultV = await driver.findElement('#signPermitResultV');
+
+  await driver.waitForSelector({
+    css: '#signPermitVerifyResult',
+    text: publicAddress,
+  });
+  const verifyRecoverAddress = await driver.findElement('#signPermitVerifyResult');
+
+  assert.equal(await verifyResult.getText(), '0x0a396f89ee073214f7e055e700048abd7b4aba6ecca0352937d6a2ebb7176f2f43c63097ad7597632e34d6a801695702ba603d5872a33ee7d7562fcdb9e816ee1c');
+  assert.equal(await verifyResultR.getText(), 'r: 0x0a396f89ee073214f7e055e700048abd7b4aba6ecca0352937d6a2ebb7176f2f');
+  assert.equal(await verifyResultS.getText(), 's: 0x43c63097ad7597632e34d6a801695702ba603d5872a33ee7d7562fcdb9e816ee');
+  assert.equal(await verifyResultV.getText(), 'v: 28');
+  assert.equal(await verifyRecoverAddress.getText(), publicAddress);
+}

test/e2e/tests/confirmations/signatures/personal-sign.spec.ts

@@ -0,0 +1,84 @@
+import { strict as assert } from 'assert';
+import { Suite } from 'mocha';
+import { withRedesignConfirmationFixtures } from '../helpers';
+import {
+  DAPP_HOST_ADDRESS,
+  WINDOW_TITLES,
+  openDapp,
+  switchToNotificationWindow,
+  unlockWallet,
+} from '../../../helpers';
+import { Ganache } from '../../../seeder/ganache';
+import { Driver } from '../../../webdriver/driver';
+
+describe('Confirmation Signature - Personal Sign', function (this: Suite) {
+  if (!process.env.ENABLE_CONFIRMATION_REDESIGN) { return; }
+
+  it('initiates and confirms', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver, ganacheServer }: { driver: Driver, ganacheServer: Ganache }) => {
+        const addresses = await ganacheServer.getAccounts();
+        const publicAddress = addresses?.[0] as string;
+
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#personalSign');
+        await switchToNotificationWindow(driver);
+
+        await assertInfoValues(driver);
+
+        await driver.clickElement('[data-testid="confirm-footer-button"]');
+
+        await assertVerifiedPersonalMessage(driver, publicAddress);
+      }
+    );
+  });
+
+  it('initiates and rejects', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#personalSign');
+        await switchToNotificationWindow(driver);
+
+        await driver.clickElement('[data-testid="confirm-footer-cancel-button"]');
+
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+        const rejectionResult = await driver.waitForSelector({
+          css: '#personalSign',
+          text: 'Error: User rejected the request.',
+        });
+        assert.ok(rejectionResult);
+      },
+    );
+  });
+});
+
+async function assertInfoValues(driver: Driver) {
+  const origin = driver.findElement({ text: DAPP_HOST_ADDRESS });
+  const message = driver.findElement({ text: 'Example `personal_sign` message' });
+
+  assert.ok(await origin);
+  assert.ok(await message);
+}
+
+async function assertVerifiedPersonalMessage(driver: Driver, publicAddress: string) {
+  await driver.waitUntilXWindowHandles(2);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  await driver.clickElement('#personalSignVerify');
+
+  const verifySigUtil = await driver.findElement('#personalSignVerifySigUtilResult');
+  await driver.waitForSelector({
+    css: '#personalSignVerifyECRecoverResult',
+    text: publicAddress,
+  });
+  const verifyECRecover = await driver.findElement('#personalSignVerifyECRecoverResult');
+
+  assert.equal(await verifySigUtil.getText(), publicAddress);
+  assert.equal(await verifyECRecover.getText(), publicAddress);
+}

test/e2e/tests/confirmations/signatures/sign-typed-data-v3.spec.ts

@@ -0,0 +1,98 @@
+import { strict as assert } from 'assert';
+import { Suite } from 'mocha';
+import { scrollAndConfirmAndAssertConfirm, withRedesignConfirmationFixtures } from '../helpers';
+import {
+  DAPP_HOST_ADDRESS,
+  WINDOW_TITLES,
+  openDapp,
+  switchToNotificationWindow,
+  unlockWallet,
+} from '../../../helpers';
+import { Ganache } from '../../../seeder/ganache';
+import { Driver } from '../../../webdriver/driver';
+
+describe('Confirmation Signature - Sign Typed Data V3', function (this: Suite) {
+  if (!process.env.ENABLE_CONFIRMATION_REDESIGN) { return; }
+
+  it('initiates and confirms', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver, ganacheServer }: { driver: Driver, ganacheServer: Ganache }) => {
+        const addresses = await ganacheServer.getAccounts();
+        const publicAddress = addresses?.[0] as string;
+
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#signTypedDataV3');
+        await switchToNotificationWindow(driver);
+
+        await assertInfoValues(driver);
+        await scrollAndConfirmAndAssertConfirm(driver);
+        await assertVerifiedResults(driver, publicAddress);
+      },
+    );
+  });
+
+  it('initiates and rejects', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#signTypedDataV3');
+        await switchToNotificationWindow(driver);
+
+        await driver.clickElement('[data-testid="confirm-footer-cancel-button"]');
+
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+        const rejectionResult = await driver.waitForSelector({
+          css: '#signTypedDataV3Result',
+          text: 'Error: User rejected the request.',
+        });
+        assert.ok(rejectionResult);
+      },
+    );
+  });
+});
+
+async function assertInfoValues(driver: Driver) {
+  const origin = driver.findElement({ text: DAPP_HOST_ADDRESS });
+  const contractPetName = driver.findElement({
+    css: '.name__value',
+    text: '0xCcCCc...ccccC',
+  });
+
+  const primaryType = driver.findElement({ text: 'Mail' });
+  const fromName = driver.findElement({ text: 'Cow' });
+  const fromAddress = driver.findElement({ css: '.name__value', text: '0xCD2a3...DD826' });
+  const toName = driver.findElement({ text: 'Bob' });
+  const toAddress = driver.findElement({ css: '.name__value', text: '0xbBbBB...bBBbB' });
+  const contents = driver.findElement({ text: 'Hello, Bob!' });
+
+  assert.ok(await origin, 'origin');
+  assert.ok(await contractPetName, 'contractPetName');
+  assert.ok(await primaryType, 'primaryType');
+  assert.ok(await fromName, 'fromName');
+  assert.ok(await fromAddress, 'fromAddress');
+  assert.ok(await toName, 'toName');
+  assert.ok(await toAddress, 'toAddress');
+  assert.ok(await contents, 'contents');
+}
+
+async function assertVerifiedResults(driver: Driver, publicAddress: string) {
+  await driver.waitUntilXWindowHandles(2);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  await driver.clickElement('#signTypedDataV3Verify');
+
+  const verifyResult = await driver.findElement('#signTypedDataV3Result');
+  await driver.waitForSelector({
+    css: '#signTypedDataV3VerifyResult',
+    text: publicAddress,
+  });
+  const verifyRecoverAddress = await driver.findElement('#signTypedDataV3VerifyResult');
+
+  assert.equal(await verifyResult.getText(), '0x0a22f7796a2a70c8dc918e7e6eb8452c8f2999d1a1eb5ad714473d36270a40d6724472e5609948c778a07216bd082b60b6f6853d6354c731fd8ccdd3a2f4af261b');
+  assert.equal(await verifyRecoverAddress.getText(), publicAddress);
+}