✨ feat(metamask): Add support for opening transaction details

wallets/metamask/src/metamask.ts

@@ -169,7 +169,10 @@ export class MetaMask {
   // ---- EXPERIMENTAL FEATURES ----
 
   public readonly experimental = {
-    confirmTransactionAndWaitForMining: async () => await this.confirmTransactionAndWaitForMining()
+    confirmTransactionAndWaitForMining: async () => await this.confirmTransactionAndWaitForMining(),
+    // Note: `txIndex` starts from 0.
+    openTransactionDetails: async (txIndex: number) => await this.openTransactionDetails(txIndex),
+    closeTransactionDetails: async () => await this.closeTransactionDetails()
   }
 
   private async confirmTransactionAndWaitForMining() {
@@ -179,4 +182,12 @@ export class MetaMask {
 
     await this.notificationPage.confirmTransactionAndWaitForMining(this.extensionId)
   }
+
+  private async openTransactionDetails(txIndex: number) {
+    await this.homePage.openTransactionDetails(txIndex)
+  }
+
+  private async closeTransactionDetails() {
+    await this.homePage.closeTransactionDetails()
+  }
 }

wallets/metamask/src/pages/HomePage/actions/addNetwork.ts

@@ -28,7 +28,7 @@ export async function addNetwork(page: Page, network: Network) {
 
   // We have to wait for the RPC URL error to appear.
   const rpcUrlErrorLocator = page.locator(Selectors.settings.networks.newNetworkForm.rpcUrlError)
-  if (await waitFor(() => rpcUrlErrorLocator.isVisible(), 2_000, false)) {
+  if (await waitFor(() => rpcUrlErrorLocator.isVisible(), 1_000, false)) {
     const rpcUrlErrorText = await rpcUrlErrorLocator.textContent({ timeout: 1_000 })
     throw new Error(`[AddNetwork] RPC URL error: ${rpcUrlErrorText}`)
   }
@@ -37,7 +37,7 @@ export async function addNetwork(page: Page, network: Network) {
 
   // We have to wait for the Chain ID error to appear.
   const chainIdErrorLocator = page.locator(Selectors.settings.networks.newNetworkForm.chainIdError)
-  if (await waitFor(() => chainIdErrorLocator.isVisible(), 2_000, false)) {
+  if (await waitFor(() => chainIdErrorLocator.isVisible(), 1_000, false)) {
     const chainIdErrorText = await chainIdErrorLocator.textContent({ timeout: 1_000 })
     throw new Error(`[AddNetwork] Chain ID error: ${chainIdErrorText}`)
   }

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

@@ -7,3 +7,4 @@ export * from './switchNetwork'
 export * from './addNetwork'
 export * from './toggleShowTestNetworks'
 export * from './addNewAccount'
+export * from './transactionDetails'

wallets/metamask/src/pages/HomePage/actions/transactionDetails.ts

@@ -0,0 +1,29 @@
+import type { Page } from '@playwright/test'
+import { waitFor } from '../../../utils/waitFor'
+import Selectors from '../selectors'
+
+const openTransactionDetails = async (page: Page, txIndex: number) => {
+  await page.locator(Selectors.activityTab.activityTabButton).click()
+
+  const visibleTxs = await page.locator(Selectors.activityTab.completedTransactions).count()
+
+  if (txIndex >= visibleTxs) {
+    throw new Error(
+      `[OpenTransactionDetails] Transaction with index ${txIndex} is not visible. There are only ${visibleTxs} transactions visible.`
+    )
+  }
+
+  await page.locator(Selectors.activityTab.completedTransactions).nth(txIndex).click()
+
+  // TODO: Extract timeout.
+  await waitFor(() => page.locator(Selectors.popover.closeButton).isVisible(), 3_000)
+}
+
+const closeTransactionDetails = async (page: Page) => {
+  await page.locator(Selectors.popover.closeButton).click()
+}
+
+export const transactionDetails = {
+  open: openTransactionDetails,
+  close: closeTransactionDetails
+}

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

@@ -7,7 +7,8 @@ import {
   settings,
   switchAccount,
   switchNetwork,
-  toggleShowTestNetworks
+  toggleShowTestNetworks,
+  transactionDetails
 } from './actions'
 import type { Network } from './actions'
 import Selectors from './selectors'
@@ -66,4 +67,12 @@ export class HomePage {
   async addNetwork(network: Network) {
     await addNetwork(this.page, network)
   }
+
+  async openTransactionDetails(txIndex: number) {
+    await transactionDetails.open(this.page, txIndex)
+  }
+
+  async closeTransactionDetails() {
+    await transactionDetails.close(this.page)
+  }
 }

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

@@ -71,13 +71,13 @@ const activityTab = {
   transactionsList: `${tabContainer} .transaction-list__transactions`,
   pendingQueuedTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item .transaction-status-label--queued`,
   pendingUnapprovedTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item .transaction-status-label--unapproved`,
-  pendingApprovedTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item .transaction-status-label--pending`
+  pendingApprovedTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item .transaction-status-label--pending`,
+  completedTransactions: `${tabContainer} .transaction-list__completed-transactions .transaction-list-item`
 
   /// ---- Unused Selectors ----
   // pendingTransactionsList: `${tabContainer} .transaction-list__pending-transactions`,
   // pendingTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item`,
   // completedTransactionsList: `${tabContainer} .transaction-list__completed-transactions`,
-  // completedTransactions: `${tabContainer} .transaction-list__completed-transactions .transaction-list-item`
 }
 
 export default {

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

@@ -0,0 +1,18 @@
+import { testWithMetaMask } from '../testWithMetaMask'
+
+const test = testWithMetaMask
+
+const { expect } = test
+
+test('should close transaction details', async ({ page, metamask, metamaskPage, connectToAnvil }) => {
+  await connectToAnvil()
+
+  await page.locator('#sendEIP1559Button').click()
+  await metamask.experimental.confirmTransactionAndWaitForMining()
+
+  await metamask.experimental.openTransactionDetails(0)
+
+  await metamask.experimental.closeTransactionDetails()
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.popover.closeButton)).toBeHidden()
+})

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

@@ -23,7 +23,7 @@ test('should confirm legacy transaction', async ({ page, metamask, connectToAnvi
   await metamask.confirmTransaction()
 })
 
-test('should confirm EIP 1559 transaction', async ({ page, metamask, connectToAnvil }) => {
+test('should confirm EIP-1559 transaction', async ({ page, metamask, connectToAnvil }) => {
   await connectToAnvil()
 
   await page.locator('#sendEIP1559Button').click()

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

@@ -25,7 +25,7 @@ test.skip('should confirm legacy transaction and wait for mining', async ({ page
   await metamask.experimental.confirmTransactionAndWaitForMining()
 })
 
-test.skip('should confirm EIP 1559 transaction and wait for mining', async ({ page, metamask, connectToAnvil }) => {
+test.skip('should confirm EIP-1559 transaction and wait for mining', async ({ page, metamask, connectToAnvil }) => {
   await connectToAnvil()
 
   await page.locator('#sendEIP1559Button').click()

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

@@ -0,0 +1,22 @@
+import { testWithMetaMask } from '../testWithMetaMask'
+
+const test = testWithMetaMask
+
+const { expect } = test
+
+test('should open transaction details', async ({ page, metamask, metamaskPage, connectToAnvil }) => {
+  await connectToAnvil()
+
+  await page.locator('#sendEIP1559Button').click()
+  await metamask.experimental.confirmTransactionAndWaitForMining()
+
+  await metamask.experimental.openTransactionDetails(0)
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.popover.closeButton)).toBeVisible()
+})
+
+test('should throw an error if the passed transaction index is out of bounds', async ({ metamask }) => {
+  await expect(metamask.experimental.openTransactionDetails(0)).rejects.toThrowError(
+    '[OpenTransactionDetails] Transaction with index 0 is not visible. There are only 0 transactions visible.'
+  )
+})