✨ feat: MetaMask PPOM tests (#1114)

## Motivation and context

MetaMask PPOM tested.

## Does it fix any issue?

https://linear.app/synpress/issue/SYN-66/metamask-ppom-tests

## Quality checklist

- [x] I have performed a self-review of my code.
- [x] If it is a core feature, I have added thorough e2e tests.

**⚠️👆 Delete any section you see irrelevant before submitting the pull request 👆⚠️**


---

<details open="true"><summary>Generated summary</summary>

> ## TL;DR
> This pull request introduces a new set of tests for the MetaMask wallet, specifically focusing on the PPOM security mechanism. It also adds a new test for the custom transaction form.
> 
> ## What changed
> Two files were modified in this pull request:
> 
> 1. `wallets/metamask/test/e2e/metamask/PPOM.spec.ts`: This is a new file that contains tests for the PPOM security mechanism. It checks if the mechanism can prevent malicious ETH transfers, ERC20 transfers, ERC20 approvals, approvals for all, permits, trade orders, and seaports.
> 
> 2. `wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts`: This file was updated to include a new test for the custom transaction form. It checks if the form can send a defined amount.
> 
> ## How to test
> To test these changes, follow these steps:
> 
> 1. Pull the changes from this branch into your local environment.
> 2. Navigate to the `wallets/metamask/test/e2e/metamask` directory.
> 3. Run the `PPOM.spec.ts` and `confirmTransaction.spec.ts` test files using your preferred test runner.
> 4. Ensure all tests pass and there are no unexpected errors.
> 
> ## Why make this change
> These changes were made to improve the test coverage for the MetaMask wallet. By testing the PPOM security mechanism and the custom transaction form, we can ensure that these features are working as expected and prevent potential issues in the future.
</details>

wallets/metamask/test/e2e/metamask/PPOM.spec.ts

@@ -0,0 +1,82 @@
+import { getNotificationPageAndWaitForLoad } from '../../../src/utils/getNotificationPageAndWaitForLoad'
+import { createDataTestSelector } from '../../../src/utils/selectors/createDataTestSelector'
+import { testWithMetaMask } from '../testWithMetaMask'
+
+const test = testWithMetaMask
+
+const { describe, expect } = test
+
+const PPOM_ERROR = 'This is a deceptive request'
+const PPOM_WARNING = 'Request may not be safe'
+
+describe('using PPOM security mechanism', () => {
+  test('should prevent malicious ETH transfer', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousRawEthButton').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_ERROR
+    )
+  })
+
+  test('should prevent malicious ERC20 transfer', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousERC20TransferButton').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_WARNING
+    )
+  })
+
+  test('should prevent malicious ERC20 approval', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousApprovalButton').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_WARNING
+    )
+  })
+
+  test('should prevent malicious approval for all', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousSetApprovalForAll').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_WARNING
+    )
+  })
+
+  test('should prevent malicious permit', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousPermit').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_ERROR
+    )
+  })
+
+  test('should prevent malicious trade order', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousTradeOrder').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_ERROR
+    )
+  })
+
+  test('should prevent malicious seaport', async ({ context, page, metamask }) => {
+    await page.locator('#maliciousSeaport').click()
+
+    const notificationPage = await getNotificationPageAndWaitForLoad(context, metamask.extensionId || '')
+
+    await expect(notificationPage.locator(createDataTestSelector('security-provider-banner-alert'))).toContainText(
+      PPOM_ERROR
+    )
+  })
+})

wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts

@@ -279,3 +279,16 @@ describe('without gas limit', () => {
     await metamask.confirmTransaction()
   })
 })
+
+describe('using custom transaction form', () => {
+  test('should send defined amount', async ({ page, metamask, connectToAnvil }) => {
+    await connectToAnvil()
+
+    await page.locator('#toInput').fill('0x70997970C51812dc3A010C7d01b50e0d17dc79C8')
+    await page.locator('#amountInput').fill('3')
+    await page.locator('#gasInput').fill('1000000000')
+
+    await page.locator('#submitForm').click()
+    await metamask.confirmTransaction()
+  })
+})