diff --git a/wallets/metamask/src/metamask.ts b/wallets/metamask/src/metamask.ts index cf42733ec..a524c28c1 100644 --- a/wallets/metamask/src/metamask.ts +++ b/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() + } } diff --git a/wallets/metamask/src/pages/HomePage/actions/addNetwork.ts b/wallets/metamask/src/pages/HomePage/actions/addNetwork.ts index 42c4a6515..bb48ff19c 100644 --- a/wallets/metamask/src/pages/HomePage/actions/addNetwork.ts +++ b/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}`) } diff --git a/wallets/metamask/src/pages/HomePage/actions/index.ts b/wallets/metamask/src/pages/HomePage/actions/index.ts index 4fe2a250f..e6ad8e1f8 100644 --- a/wallets/metamask/src/pages/HomePage/actions/index.ts +++ b/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' diff --git a/wallets/metamask/src/pages/HomePage/actions/transactionDetails.ts b/wallets/metamask/src/pages/HomePage/actions/transactionDetails.ts new file mode 100644 index 000000000..02bd1feef --- /dev/null +++ b/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 +} diff --git a/wallets/metamask/src/pages/HomePage/page.ts b/wallets/metamask/src/pages/HomePage/page.ts index 74cd8ddea..147d82aa4 100644 --- a/wallets/metamask/src/pages/HomePage/page.ts +++ b/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) + } } diff --git a/wallets/metamask/src/pages/HomePage/selectors/index.ts b/wallets/metamask/src/pages/HomePage/selectors/index.ts index dfc23adcb..09adb233e 100644 --- a/wallets/metamask/src/pages/HomePage/selectors/index.ts +++ b/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 { diff --git a/wallets/metamask/test/e2e/metamask/closeTransactionDetails.spec.ts b/wallets/metamask/test/e2e/metamask/closeTransactionDetails.spec.ts new file mode 100644 index 000000000..57f54c771 --- /dev/null +++ b/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() +}) diff --git a/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts b/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts index 1dc335708..0b377a646 100644 --- a/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts +++ b/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() diff --git a/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts b/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts index 8f8f90317..e08452511 100644 --- a/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts +++ b/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() diff --git a/wallets/metamask/test/e2e/metamask/openTransactionDetails.spec.ts b/wallets/metamask/test/e2e/metamask/openTransactionDetails.spec.ts new file mode 100644 index 000000000..7b0dece03 --- /dev/null +++ b/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.' + ) +})