✨ feat(metamask): Add gas customization to approvePermission (#1051)

Synthetixio · Jan 2, 2024 · 988ccae · 988ccae
1 parent aab9d93
commit 988ccae
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 23 deletions.
diff --git a/wallets/metamask/src/metamask.ts b/wallets/metamask/src/metamask.ts
@@ -131,12 +131,12 @@ export class MetaMask {
     await this.notificationPage.rejectTransaction(this.extensionId)
   }
 
-  async approvePermission(spendLimit?: 'max' | number) {
+  async approvePermission(options?: { spendLimit?: 'max' | number; gasSetting?: GasSetting }) {
     if (!this.extensionId) {
       throw NO_EXTENSION_ID_ERROR
     }
 
-    await this.notificationPage.approvePermission(this.extensionId, spendLimit)
+    await this.notificationPage.approvePermission(this.extensionId, options)
   }
 
   async rejectPermission() {

diff --git a/wallets/metamask/src/pages/NotificationPage/actions/approvePermission.ts b/wallets/metamask/src/pages/NotificationPage/actions/approvePermission.ts
@@ -1,5 +1,6 @@
 import type { Page } from '@playwright/test'
 import Selectors from '../selectors'
+import { type GasSetting, transaction } from './transaction'
 
 const editTokenPermission = async (notificationPage: Page, customSpendLimit: 'max' | number) => {
   if (customSpendLimit === 'max') {
@@ -12,12 +13,12 @@ const editTokenPermission = async (notificationPage: Page, customSpendLimit: 'ma
     .fill(customSpendLimit.toString())
 }
 
-const approveTokenPermission = async (notificationPage: Page) => {
+const approveTokenPermission = async (notificationPage: Page, gasSetting: GasSetting) => {
   // Click the "Next" button.
   await notificationPage.locator(Selectors.ActionFooter.confirmActionButton).click()
 
-  // Click the "Confirm" button.
-  await notificationPage.locator(Selectors.ActionFooter.confirmActionButton).click()
+  // Approve flow is identical to the confirm transaction flow after we click the "Next" button.
+  await transaction.confirm(notificationPage, gasSetting)
 }
 
 const rejectTokenPermission = async (notificationPage: Page) => {

diff --git a/wallets/metamask/src/pages/NotificationPage/page.ts b/wallets/metamask/src/pages/NotificationPage/page.ts
@@ -108,14 +108,14 @@ export class NotificationPage {
     await transaction.confirmAndWaitForMining(this.page, notificationPage, gasSetting)
   }
 
-  async approvePermission(extensionId: string, spendLimit?: 'max' | number) {
+  async approvePermission(extensionId: string, options?: { spendLimit?: 'max' | number; gasSetting?: GasSetting }) {
     const notificationPage = await getNotificationPageAndWaitForLoad(this.page.context(), extensionId)
 
-    if (spendLimit !== undefined) {
-      await approvePermission.editTokenPermission(notificationPage, spendLimit)
+    if (options?.spendLimit !== undefined) {
+      await approvePermission.editTokenPermission(notificationPage, options.spendLimit)
     }
 
-    await approvePermission.approve(notificationPage)
+    await approvePermission.approve(notificationPage, options?.gasSetting ?? 'site')
   }
 
   async rejectPermission(extensionId: string) {

diff --git a/wallets/metamask/test/e2e/metamask/approvePermission.spec.ts b/wallets/metamask/test/e2e/metamask/approvePermission.spec.ts
@@ -15,28 +15,79 @@ const test = testWithMetaMask.extend<{
   }
 })
 
-const { expect } = test
+const { expect, describe } = test
 
-test('should approve tokens with the default limit by default', async ({ page, metamask, deployToken }) => {
-  await deployToken()
+describe('with default gas setting', () => {
+  test('should approve tokens with the default limit by default', async ({ page, metamask, deployToken }) => {
+    await deployToken()
 
-  await page.locator('#approveTokens').click()
+    await page.locator('#approveTokens').click()
 
-  await metamask.approvePermission()
-})
+    await metamask.approvePermission()
+  })
+
+  test('should approve tokens with the `max` limit', async ({ page, metamask, deployToken }) => {
+    await deployToken()
+
+    await page.locator('#approveTokens').click()
+
+    await metamask.approvePermission({ spendLimit: 'max' })
+  })
 
-test('should approve tokens with the max limit', async ({ page, metamask, deployToken }) => {
-  await deployToken()
+  test('should approve tokens with the custom limit', async ({ page, metamask, deployToken }) => {
+    await deployToken()
 
-  await page.locator('#approveTokens').click()
+    await page.locator('#approveTokens').click()
 
-  await metamask.approvePermission('max')
+    await metamask.approvePermission({ spendLimit: 420 })
+  })
 })
 
-test('should approve tokens with the custom limit', async ({ page, metamask, deployToken }) => {
-  await deployToken()
+describe('with custom gas setting', () => {
+  test('should approve tokens with the default spend limit', async ({ page, metamask, deployToken }) => {
+    await deployToken()
+
+    await page.locator('#approveTokens').click()
+
+    await metamask.approvePermission({
+      gasSetting: 'site'
+    })
+  })
 
-  await page.locator('#approveTokens').click()
+  test('should approve tokens with the `max` spend limit and custom gas setting', async ({
+    page,
+    metamask,
+    deployToken
+  }) => {
+    await deployToken()
 
-  await metamask.approvePermission(420)
+    await page.locator('#approveTokens').click()
+
+    await metamask.approvePermission({
+      spendLimit: 'max',
+      gasSetting: {
+        maxBaseFee: 250,
+        priorityFee: 150
+      }
+    })
+  })
+
+  test('should approve tokens with the custom spend limit and custom gas limit', async ({
+    page,
+    metamask,
+    deployToken
+  }) => {
+    await deployToken()
+
+    await page.locator('#approveTokens').click()
+
+    await metamask.approvePermission({
+      spendLimit: 420,
+      gasSetting: {
+        maxBaseFee: 250,
+        priorityFee: 150,
+        gasLimit: 200_000
+      }
+    })
+  })
 })