test: Adding e2e for SIWE and re-enabling redesign for SIWE (#25831)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25831?quickstart=1)

## **Related issues**

Fixes:
[#24679](#24679)

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

.vscode/cspell.json

@@ -70,6 +70,7 @@
     "quickstart",
     "recompiles",
     "shellcheck",
+    "SIWE",
     "sourcemaps",
     "sprintf",
     "testcase",

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

@@ -0,0 +1,161 @@
+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 { Driver } from '../../../webdriver/driver';
+import { Mockttp } from '../../../mock-e2e';
+import {
+  assertHeaderInfoBalance,
+  assertPastedAddress,
+  clickHeaderInfoBtn,
+  copyAddressAndPasteWalletAddress,
+  assertSignatureMetrics,
+  assertAccountDetailsMetrics,
+} from './signature-helpers';
+
+describe('Confirmation Signature - SIWE @no-mmi', function (this: Suite) {
+  it('initiates and confirms', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: {
+        driver: Driver;
+        mockedEndpoint: Mockttp;
+      }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#siwe');
+        await switchToNotificationWindow(driver);
+
+        await clickHeaderInfoBtn(driver);
+        await assertHeaderInfoBalance(driver);
+
+        await copyAddressAndPasteWalletAddress(driver);
+        await assertPastedAddress(driver);
+        await assertAccountDetailsMetrics(
+          driver,
+          mockedEndpoints,
+          'personal_sign',
+        );
+        await switchToNotificationWindow(driver);
+        await assertInfoValues(driver);
+        await scrollAndConfirmAndAssertConfirm(driver);
+        await driver.delay(1000);
+
+        await assertVerifiedSiweMessage(
+          driver,
+          '0xef8674a92d62a1876624547bdccaef6c67014ae821de18fa910fbff56577a65830f68848585b33d1f4b9ea1c3da1c1b11553b6aabe8446717daf7cd1e38a68271c',
+        );
+        await assertSignatureMetrics(
+          driver,
+          mockedEndpoints,
+          'personal_sign',
+          '',
+          ['redesigned_confirmation', 'sign_in_with_ethereum'],
+        );
+      },
+    );
+  });
+
+  it('initiates and rejects', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: {
+        driver: Driver;
+        mockedEndpoint: Mockttp;
+      }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#siwe');
+        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.findElement('#siweResult');
+        assert.equal(
+          await rejectionResult.getText(),
+          'Error: User rejected the request.',
+        );
+        await assertSignatureMetrics(
+          driver,
+          mockedEndpoints,
+          'personal_sign',
+          '',
+          ['redesigned_confirmation', 'sign_in_with_ethereum'],
+        );
+      },
+    );
+  });
+
+  it('displays alert for domain binding and confirms', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver; mockedEndpoint: Mockttp }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await driver.clickElement('#siweBadDomain');
+        await switchToNotificationWindow(driver);
+
+        const alert = await driver.findElement('[data-testid="inline-alert"]');
+        assert.equal(await alert.getText(), 'Alert');
+        await driver.clickElement('[data-testid="inline-alert"]');
+
+        await driver.clickElement(
+          '[data-testid="alert-modal-acknowledge-checkbox"]',
+        );
+        await driver.clickElement('[data-testid="alert-modal-button"]');
+
+        await scrollAndConfirmAndAssertConfirm(driver);
+
+        await driver.clickElement(
+          '[data-testid="alert-modal-acknowledge-checkbox"]',
+        );
+        await driver.clickElement(
+          '[data-testid="confirm-alert-modal-submit-button"]',
+        );
+
+        await assertVerifiedSiweMessage(
+          driver,
+          '0x24e559452c37827008633f9ae50c68cdb28e33f547f795af687839b520b022e4093c38bf1dfebda875ded715f2754d458ed62a19248e5a9bd2205bd1cb66f9b51b',
+        );
+      },
+    );
+  });
+});
+
+async function assertInfoValues(driver: Driver) {
+  const origin = driver.findElement({ text: DAPP_HOST_ADDRESS });
+  const message = driver.findElement({
+    text: 'I accept the MetaMask Terms of Service: https://community.metamask.io/tos',
+  });
+
+  assert.ok(await origin);
+  assert.ok(await message);
+}
+
+async function assertVerifiedSiweMessage(driver: Driver, message: string) {
+  await driver.waitUntilXWindowHandles(2);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+  const verifySigUtil = await driver.findElement('#siweResult');
+  assert.equal(await verifySigUtil.getText(), message);
+}

ui/pages/confirmations/hooks/useCurrentConfirmation.test.ts

@@ -204,7 +204,7 @@ describe('useCurrentConfirmation', () => {
     expect(currentConfirmation).toBeUndefined();
   });
 
-  it('returns undefined if message is SIWE', () => {
+  it('returns if message is SIWE', () => {
     const currentConfirmation = runHook({
       message: {
         ...MESSAGE_MOCK,
@@ -214,7 +214,10 @@ describe('useCurrentConfirmation', () => {
       redesignedConfirmationsEnabled: true,
     });
 
-    expect(currentConfirmation).toBeUndefined();
+    expect(currentConfirmation).toStrictEqual({
+      id: APPROVAL_MOCK.id,
+      msgParams: { siwe: { isSIWEMessage: true } },
+    });
   });
 
   it('returns undefined if developer and user settings are enabled and transaction has incorrect type', () => {

ui/pages/confirmations/hooks/useCurrentConfirmation.ts

@@ -65,15 +65,9 @@ const useCurrentConfirmation = () => {
     pendingApproval?.type as ApprovalType,
   );
 
-  const isSIWE =
-    pendingApproval?.type === TransactionType.personalSign &&
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (signatureMessage?.msgParams as any)?.siwe?.isSIWEMessage;
-
   const shouldUseRedesign =
     isRedesignedConfirmationsUserSettingEnabled &&
-    (isCorrectApprovalType || isCorrectTransactionType) &&
-    !isSIWE;
+    (isCorrectApprovalType || isCorrectTransactionType);
 
   return useMemo(() => {
     if (!shouldUseRedesign) {