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

wallets/metamask/src/metamask.ts

@@ -165,7 +165,9 @@ export class MetaMask {
   // ---- EXPERIMENTAL FEATURES ----
 
   public readonly experimental = {
-    confirmTransactionAndWaitForMining: async () => await this.confirmTransactionAndWaitForMining()
+    confirmTransactionAndWaitForMining: async () => await this.confirmTransactionAndWaitForMining(),
+    openTransactionDetails: async (txIndex: number) => await this.openTransactionDetails(txIndex),
+    closeTransactionDetails: async () => await this.closeTransactionDetails()
   }
 
   private async confirmTransactionAndWaitForMining() {
@@ -175,4 +177,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/index.ts

@@ -4,3 +4,4 @@ export * from './switchAccount'
 export * from './settings'
 export * from './switchNetwork'
 export * from './addNetwork'
+export * from './transactionDetails'

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

@@ -0,0 +1,34 @@
+import type { Page } from '@playwright/test'
+import { waitFor } from '../../../utils/waitFor'
+import Selectors from '../selectors'
+
+const openTransactionDetails = async (page: Page, txIndex: number) => {
+  let visibleTxs = await page.locator(Selectors.activityTab.completedTransactions).count()
+
+  while (txIndex >= visibleTxs) {
+    try {
+      await page.locator(Selectors.activityTab.viewMoreButton).click({
+        timeout: 3_000 // TODO: Extract timeout.
+      })
+    } catch (e) {
+      console.log(e)
+      throw new Error(`Transaction with index ${txIndex} not found. There are only ${visibleTxs} transactions visible.`)
+    }
+
+    visibleTxs = await page.locator(Selectors.activityTab.completedTransactions).count()
+  }
+
+  await page.locator(Selectors.activityTab.completedTransactions).nth(txIndex).click()
+
+  // TODO: Extract timeout.
+  await waitFor(() => page.locator(Selectors.transactionPopover.closeButton).isVisible(), 3_000)
+}
+
+const closeTransactionDetails = async (page: Page) => {
+  await page.locator(Selectors.transactionPopover.closeButton).click()
+}
+
+export const transactionDetails = {
+  open: openTransactionDetails,
+  close: closeTransactionDetails
+}

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

@@ -1,5 +1,13 @@
 import type { Page } from '@playwright/test'
-import { addNetwork, importWalletFromPrivateKey, lock, settings, switchAccount, switchNetwork } from './actions'
+import {
+  addNetwork,
+  importWalletFromPrivateKey,
+  lock,
+  settings,
+  switchAccount,
+  switchNetwork,
+  transactionDetails
+} from './actions'
 import type { Network } from './actions'
 import Selectors from './selectors'
 import type { SettingsSidebarMenus } from './selectors/settings'
@@ -53,4 +61,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

@@ -36,7 +36,13 @@ const activityTab = {
   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`,
   completedTransactionsList: `${tabContainer} .transaction-list__completed-transactions`,
-  completedTransactions: `${tabContainer} .transaction-list__completed-transactions .transaction-list-item`
+  completedTransactions: `${tabContainer} .transaction-list__completed-transactions .transaction-list-item`,
+  viewMoreButton: `${tabContainer} .transaction-list__completed-transactions button.btn-secondary`
+}
+
+const popoverContainer = '.popover-container'
+const transactionPopover = {
+  closeButton: `${popoverContainer} ${createDataTestSelector('popover-close')}`
 }
 
 export default {
@@ -48,5 +54,6 @@ export default {
   networkDropdown,
   accountMenu,
   importAccountScreen,
-  recoveryPhraseReminder
+  recoveryPhraseReminder,
+  transactionPopover
 }

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

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

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

@@ -34,7 +34,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 }) => {
+test.skip('should confirm EIP-1559 transaction and wait for mining', async ({ page, metamask }) => {
   await page.locator('#addEthereumChain').click()
 
   await metamask.approveNewNetwork()

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

@@ -0,0 +1,25 @@
+import { waitFor } from '../../../src/utils/waitFor'
+import { testWithMetaMask } from '../testWithMetaMask'
+
+const test = testWithMetaMask
+
+const { expect } = test
+
+test('should open transaction details', async ({ page, metamask, metamaskPage }) => {
+  await page.locator('#addEthereumChain').click()
+
+  const isPopperVisible = await waitFor(() => metamaskPage.locator('.tippy-popper button').isVisible(), 1000, false)
+  if (isPopperVisible) {
+    await metamaskPage.locator('.tippy-popper button').click()
+  }
+
+  await metamask.approveNewNetwork()
+  await metamask.approveSwitchNetwork()
+
+  await page.locator('#sendEIP1559Button').click()
+  await metamask.experimental.confirmTransactionAndWaitForMining()
+
+  await metamask.experimental.openTransactionDetails(0)
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.transactionPopover.closeButton)).toBeVisible()
+})