✨ feat(metamask): Add support for NFT actions

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

@@ -32,10 +32,31 @@ export type GasSetting = z.input<typeof GasSetting>
 const confirmTransaction = async (notificationPage: Page, options: GasSetting) => {
   const gasSetting = GasSetting.parse(options)
 
+  const handleNftSetApprovalForAll = async (page: Page) => {
+    try {
+      const nftApproveButtonLocator = page.locator(
+        Selectors.TransactionPage.nftApproveAllConfirmationPopup.approveButton
+      )
+      const isNfTPopupHidden = await waitFor(() => nftApproveButtonLocator.isHidden(), 3_000, false)
+
+      if (!isNfTPopupHidden) {
+        await nftApproveButtonLocator.click()
+      }
+    } catch (e) {
+      if (page.isClosed()) {
+        return
+      }
+
+      throw new Error(`Failed to handle NFT setApprovalForAll popup: ${e}`)
+    }
+  }
+
   // By default, the `site` gas setting is used.
   if (gasSetting === 'site') {
     await notificationPage.locator(Selectors.ActionFooter.confirmActionButton).click()
 
+    await handleNftSetApprovalForAll(notificationPage)
+
     return
   }
 
@@ -119,6 +140,8 @@ const confirmTransaction = async (notificationPage: Page, options: GasSetting) =
   await waitFor(waitForAction, 3_000, true)
 
   await notificationPage.locator(Selectors.ActionFooter.confirmActionButton).click()
+
+  await handleNftSetApprovalForAll(notificationPage)
 }
 
 const confirmTransactionAndWaitForMining = async (walletPage: Page, notificationPage: Page, options: GasSetting) => {

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

@@ -35,6 +35,11 @@ const editGasFeeMenu = {
   advancedGasFeeMenu
 }
 
+const nftApproveAllConfirmationPopup = {
+  approveButton: '.set-approval-for-all-warning__content button.set-approval-for-all-warning__footer__approve-button'
+}
+
 export default {
-  editGasFeeMenu
+  editGasFeeMenu,
+  nftApproveAllConfirmationPopup
 }

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

@@ -3,13 +3,25 @@ import { testWithMetaMask } from '../testWithMetaMask'
 
 const test = testWithMetaMask.extend<{
   connectAndTriggerEIP1559Transaction: () => Promise<void>
+  connectDeployAndMintNft: () => Promise<void>
 }>({
   connectAndTriggerEIP1559Transaction: async ({ page, connectToAnvil }, use) => {
     await use(async () => {
       await connectToAnvil()
 
       await page.locator('#sendEIP1559Button').click()
     })
+  },
+  connectDeployAndMintNft: async ({ page, connectToAnvil, metamask }, use) => {
+    await use(async () => {
+      await connectToAnvil()
+
+      await page.locator('#deployNFTsButton').click()
+      await metamask.confirmTransaction()
+
+      await page.locator('#mintButton').click()
+      await metamask.confirmTransaction()
+    })
   }
 })
 
@@ -40,6 +52,64 @@ describe('with default gas setting', () => {
 
     await metamask.confirmTransaction()
   })
+
+  describe('NFTs', () => {
+    test('should confirm `watch NFT` request', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#watchNFTButton').click()
+
+      await metamask.confirmTransaction()
+    })
+
+    test('should confirm `watch all NFTs` request', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#watchNFTsButton').click()
+
+      await metamask.confirmTransaction()
+    })
+
+    test('should confirm `approve` transaction', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#approveButton').click()
+
+      await metamask.confirmTransaction()
+
+      await expect(page.locator('#nftsStatus')).toHaveText('Approve completed')
+    })
+
+    test('should confirm `set approval for all` transaction', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#setApprovalForAllButton').click()
+
+      await metamask.confirmTransaction()
+
+      await expect(page.locator('#nftsStatus')).toHaveText('Set Approval For All completed')
+    })
+
+    test('should confirm `revoke` transaction', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#revokeButton').click()
+
+      await metamask.confirmTransaction()
+
+      await expect(page.locator('#nftsStatus')).toHaveText('Revoke completed')
+    })
+
+    test('should confirm `transfer from` transaction', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#transferFromButton').click()
+
+      await metamask.confirmTransaction()
+
+      await expect(page.locator('#nftsStatus')).toHaveText('Transfer From completed')
+    })
+  })
 })
 
 describe('with custom gas setting', () => {
@@ -163,5 +233,20 @@ describe('with custom gas setting', () => {
         }
       })
     })
+
+    test('should confirm `set approval for all` transaction', async ({ page, metamask, connectDeployAndMintNft }) => {
+      await connectDeployAndMintNft()
+
+      await page.locator('#setApprovalForAllButton').click()
+
+      await metamask.confirmTransaction({
+        gasSetting: {
+          maxBaseFee: 250,
+          priorityFee: 150
+        }
+      })
+
+      await expect(page.locator('#nftsStatus')).toHaveText('Set Approval For All completed')
+    })
   })
 })