✨ feat(metamask): Add support for approve permissions (#998)

wallets/metamask/src/metamask.ts

@@ -107,4 +107,20 @@ export class MetaMask {
 
     await this.notificationPage.rejectTransaction(this.extensionId)
   }
+
+  async approvePermission(customSpendLimit?: number) {
+    if (!this.extensionId) {
+      throw NO_EXTENSION_ID_ERROR
+    }
+
+    await this.notificationPage.approvePermission(this.extensionId, customSpendLimit)
+  }
+
+  async rejectPermission() {
+    if (!this.extensionId) {
+      throw NO_EXTENSION_ID_ERROR
+    }
+
+    await this.notificationPage.rejectPermission(this.extensionId)
+  }
 }

wallets/metamask/src/pages/NotificationPage/actions/approvePermission.ts

@@ -0,0 +1,28 @@
+import type { Page } from '@playwright/test'
+import Selectors from '../selectors'
+
+const editTokenPermission = async (notificationPage: Page, customSpendLimit: number) => {
+  await notificationPage.locator(Selectors.PermissionPage.approve.editPermission.editPermissionButton).click()
+
+  await notificationPage.locator(Selectors.PermissionPage.approve.editPermission.customSpendLimitButton).click()
+
+  await notificationPage
+    .locator(Selectors.PermissionPage.approve.editPermission.customSpendLimitInput)
+    .fill(customSpendLimit.toString())
+
+  await notificationPage.locator(Selectors.PermissionPage.approve.editPermission.saveButton).click()
+}
+
+const approveTokenPermission = async (notificationPage: Page) => {
+  await notificationPage.locator(Selectors.PermissionPage.approve.confirmButton).click()
+}
+
+const rejectTokenPermission = async (notificationPage: Page) => {
+  await notificationPage.locator(Selectors.PermissionPage.approve.rejectButton).click()
+}
+
+export const approvePermission = {
+  editSpendLimit: editTokenPermission,
+  approve: approveTokenPermission,
+  reject: rejectTokenPermission
+}

wallets/metamask/src/pages/NotificationPage/actions/index.ts

@@ -1,5 +1,6 @@
 export * from './connectToDapp'
 export * from './signSimpleMessage'
 export * from './signStructuredMessage'
+export * from './approvePermission'
 export * from './transaction'
 export * from './network'

wallets/metamask/src/pages/NotificationPage/page.ts

@@ -1,7 +1,14 @@
 import type { Page } from '@playwright/test'
 import { getNotificationPageAndWaitForLoad } from '../../utils/getNotificationPageAndWaitForLoad'
 import { waitFor } from '../../utils/waitFor'
-import { connectToDapp, network, signSimpleMessage, signStructuredMessage, transaction } from './actions'
+import {
+  approvePermission,
+  connectToDapp,
+  network,
+  signSimpleMessage,
+  signStructuredMessage,
+  transaction
+} from './actions'
 import Selectors from './selectors'
 
 export class NotificationPage {
@@ -91,4 +98,20 @@ export class NotificationPage {
 
     await transaction.reject(notificationPage)
   }
+
+  async approvePermission(extensionId: string, customSpendLimit?: number) {
+    const notificationPage = await getNotificationPageAndWaitForLoad(this.page.context(), extensionId)
+
+    if (customSpendLimit) {
+      await approvePermission.editSpendLimit(notificationPage, customSpendLimit)
+    }
+
+    await approvePermission.approve(notificationPage)
+  }
+
+  async rejectPermission(extensionId: string) {
+    const notificationPage = await getNotificationPageAndWaitForLoad(this.page.context(), extensionId)
+
+    await approvePermission.reject(notificationPage)
+  }
 }

wallets/metamask/src/pages/NotificationPage/selectors/index.ts

@@ -1,9 +1,11 @@
 import NetworkPage from './networkPage'
+import PermissionPage from './permissionPage'
 import SignaturePage from './signaturePage'
 import TransactionPage from './transactionPage'
 
 export default {
   SignaturePage,
   NetworkPage,
-  TransactionPage
+  TransactionPage,
+  PermissionPage
 }

wallets/metamask/src/pages/NotificationPage/selectors/permissionPage.ts

@@ -0,0 +1,19 @@
+import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector'
+
+const approve = {
+  editPermission: {
+    editPermissionButton:
+      '.confirm-approve-content__edit-submission-button-container .confirm-approve-content__medium-link-text.cursor-pointer',
+    customSpendLimitButton:
+      '.edit-approval-permission-modal-content .edit-approval-permission__edit-section__option:last-of-type .edit-approval-permission__edit-section__radio-button',
+    customSpendLimitInput:
+      '.edit-approval-permission-modal-content .edit-approval-permission__edit-section__option-input input',
+    saveButton: '.edit-approval-permission-modal-container .modal-container__footer > button.btn-primary'
+  },
+  confirmButton: `.page-container__footer ${createDataTestSelector('page-container-footer-next')}`,
+  rejectButton: `.page-container__footer ${createDataTestSelector('page-container-footer-cancel')}`
+}
+
+export default {
+  approve
+}

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

@@ -0,0 +1,35 @@
+import { testWithMetaMask } from '../testWithMetaMask'
+
+const test = testWithMetaMask.extend<{ switchChainAndDeployToken: () => Promise<void> }>({
+  switchChainAndDeployToken: async ({ page, metamask }, use) => {
+    await use(async () => {
+      await page.locator('#addEthereumChain').click()
+
+      await metamask.approveNewNetwork()
+      await metamask.approveSwitchNetwork()
+
+      await expect(page.locator('#tokenAddresses')).toBeEmpty()
+      await page.locator('#createToken').click()
+
+      await metamask.confirmTransaction()
+    })
+  }
+})
+
+const { expect } = test
+
+test('should approve tokens with the default limit', async ({ page, metamask, switchChainAndDeployToken }) => {
+  await switchChainAndDeployToken()
+
+  await page.locator('#approveTokens').click()
+
+  await metamask.approvePermission()
+})
+
+test('should approve tokens with the custom limit', async ({ page, metamask, switchChainAndDeployToken }) => {
+  await switchChainAndDeployToken()
+
+  await page.locator('#approveTokens').click()
+
+  await metamask.approvePermission(420)
+})

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

@@ -0,0 +1,21 @@
+import { testWithMetaMask } from '../testWithMetaMask'
+
+const test = testWithMetaMask
+
+const { expect } = test
+
+test('should reject approve request', async ({ page, metamask }) => {
+  await page.locator('#addEthereumChain').click()
+
+  await metamask.approveNewNetwork()
+  await metamask.approveSwitchNetwork()
+
+  await expect(page.locator('#tokenAddresses')).toBeEmpty()
+  await page.locator('#createToken').click()
+
+  await metamask.confirmTransaction()
+
+  await page.locator('#approveTokens').click()
+
+  await metamask.rejectPermission()
+})