chore: Improved examples (#1233)

examples/ethereum-wallet-mock/test/cypress/connectToDapp.cy.ts

@@ -0,0 +1,7 @@
+it('should mock MetaMask in the Test Dapp', () => {
+  cy.connectToDapp()
+
+  cy.get('#getAccounts').click()
+
+  cy.get('#getAccountsResult').should('have.text', '0xd73b04b0e696b0945283defa3eee453814758f1a')
+})

examples/ethereum-wallet-mock/test/cypress/00_mock.cy.ts → examples/ethereum-wallet-mock/test/cypress/switchAccount.cy.ts

@@ -1,11 +1,3 @@
-it('should mock MetaMask in the Test Dapp', () => {
-  cy.connectToDapp()
-
-  cy.get('#getAccounts').click()
-
-  cy.get('#getAccountsResult').should('have.text', '0xd73b04b0e696b0945283defa3eee453814758f1a')
-})
-
 it('should add new account using MetaMask mock', () => {
   cy.switchAccount('0x4444797cA71d0EaE1be5a7EffD27Fd6C38126801')
 

examples/metamask/test/cypress/metamask.cy.ts

@@ -1,11 +1,14 @@
 it('should connect to ethereum', () => {
   cy.window().then((window) => {
+    // Access the Ethereum provider injected by MetaMask
     // @ts-ignore
     window.ethereum
       .request({
+        // Request the current chain ID from the Ethereum provider
         method: 'eth_chainId'
       })
       .then((currentChainId: string) => {
+        // Assert that the current chain ID is '0x1' (Ethereum mainnet)
         expect(currentChainId).to.equal('0x1')
       })
   })

examples/metamask/test/cypress/newAccount.cy.ts

@@ -0,0 +1,22 @@
+it('should add a new account with a specified name', () => {
+  const accountName = 'Test Account 2'
+
+  // Add a new account with the specified name
+  cy.addNewAccount(accountName).then(() => {
+    // Verify that the current account name matches the newly added account
+    cy.getAccount().should('eq', accountName)
+  })
+})
+
+it('should rename currently newly added account with specified name', () => {
+  const newAccountName = 'Rename Account Name'
+
+  // Add a new account with the initial name
+  cy.addNewAccount(newAccountName).then(() => {
+    // Rename the newly added account
+    cy.renameAccount(newAccountName, 'Renaming test').then(() => {
+      // Verify that the account name has been updated to the new name
+      cy.getAccount().should('eq', 'Renaming test')
+    })
+  })
+})

examples/metamask/test/playwright/00_mock.spec.ts

@@ -1,26 +1,35 @@
 import { testWithSynpress } from '@synthetixio/synpress'
 import { EthereumWalletMock, ethereumWalletMockFixtures } from '@synthetixio/synpress/playwright'
 
+// Set up the test environment with Synpress and Ethereum wallet mock fixtures
 const test = testWithSynpress(ethereumWalletMockFixtures)
 
 const { expect } = test
 
 test('should mock MetaMask in the Test Dapp', async ({ page, ethereumWalletMock }) => {
+  // Verify that there is only one account in the wallet
   expect(await ethereumWalletMock.getAllAccounts()).toHaveLength(1)
 
+  // Click the connect button
   await page.locator('#connectButton').click()
 
+  // Verify that the correct account address is displayed
   await expect(page.locator('#accounts')).toHaveText('0xd73b04b0e696b0945283defa3eee453814758f1a')
 })
 
 test('should add new account using MetaMask mock', async ({ page }) => {
+  // Create a new instance of EthereumWalletMock
   const ethereumWalletMock = new EthereumWalletMock(page)
 
+  // Import a wallet using a mnemonic phrase
   await ethereumWalletMock.importWallet('candy maple cake sugar pudding cream honey rich smooth crumble sweet treat')
+  // Add a new account to the wallet
   await ethereumWalletMock.addNewAccount()
 
+  // Click the connect button on the page
   await page.locator('#connectButton').click()
 
+  // Verify that both account addresses are displayed correctly
   await expect(page.locator('#accounts')).toHaveText(
     '0x6503D95e3F20389EE9496b277ABfFDb8eCCD2cc5,0xd73b04b0e696b0945283defa3eee453814758f1a'
   )

examples/metamask/test/playwright/01_basic.spec.ts

@@ -2,19 +2,30 @@ import { testWithSynpress } from '@synthetixio/synpress'
 import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
 import basicSetup from '../wallet-setup/basic.setup'
 
+// Set up the test environment with Synpress and MetaMask fixtures, using the basic setup configuration
 const test = testWithSynpress(metaMaskFixtures(basicSetup))
 
 const { expect } = test
 
 test('should connect wallet to the MetaMask Test Dapp', async ({ context, page, metamaskPage, extensionId }) => {
+  // Create a new MetaMask instance with the provided context, page, password, and extension ID
   const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword, extensionId)
 
+  // Navigate to the root page
   await page.goto('/')
 
+  // Click the connect button to initiate the wallet connection
   await page.locator('#connectButton').click()
+
+  // Connect dApp to MetaMask
   await metamask.connectToDapp()
+
+  // Verify that the correct account address is displayed
   await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
 
+  // Click the button to get all connected accounts
   await page.locator('#getAccounts').click()
+
+  // Verify that the correct account address is returned and displayed
   await expect(page.locator('#getAccountsResult')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
 })

examples/metamask/test/playwright/02_simple.spec.ts

@@ -5,42 +5,59 @@ const test = synpress
 const { expect } = test
 
 test('should confirm contract deployment', async ({ page, metamask, connectToAnvil }) => {
+  // Connect to Anvil network
   await connectToAnvil()
 
+  // Check if token addresses are initially empty
   await expect(page.locator('#tokenAddresses')).toBeEmpty()
+
+  // Click the button to create a new token
   await page.locator('#createToken').click()
 
+  // Confirm the transaction in MetaMask
   await metamask.confirmTransaction()
 
+  // Verify that the token address is correctly displayed after deployment
   await expect(page.locator('#tokenAddresses')).toHaveText('0x5FbDB2315678afecb367f032d93F642f64180aa3')
 })
 
 test('should confirm legacy transaction', async ({ page, metamask, connectToAnvil }) => {
+  // Connect to Anvil network
   await connectToAnvil()
 
+  // Click the button to send a transaction
   await page.locator('#sendButton').click()
 
+  // Confirm the transaction in MetaMask
   await metamask.confirmTransaction()
 })
 
 test('should confirm EIP-1559 transaction', async ({ page, metamask, connectToAnvil }) => {
+  // Connect to Anvil network
   await connectToAnvil()
 
+  // Click the button to send an EIP-1559 transaction
   await page.locator('#sendEIP1559Button').click()
 
+  // Confirm the transaction in MetaMask
   await metamask.confirmTransaction()
 })
 
 test('should sign and verify EIP-712 message', async ({ page, metamask }) => {
+  // Click the button to sign a typed data (EIP-712) message
   await page.locator('#signTypedDataV4').click()
 
+  // Confirm the signature in MetaMask
   await metamask.confirmSignature()
 
+  // Verify that the signature result is correct
   await expect(page.locator('#signTypedDataV4Result')).toHaveText(
     '0x1cf422c4a319c19ecb89c960e7c296810278fa2bef256c7e9419b285c8216c547b3371fa1ec3987ce08561d3ed779845393d8d3e4311376d0bc0846f37d1b2821c'
   )
 
+  // Click the button to verify the signed message
   await page.locator('#signTypedDataV4Verify').click()
 
+  // Verify that the correct address is returned from the verification
   await expect(page.locator('#signTypedDataV4VerifyResult')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
 })

examples/metamask/test/playwright/03_advanced.spec.ts

@@ -10,29 +10,42 @@ const tokenLocator = '.multichain-token-list-item'
 
 describe('Token', () => {
   test('should confirm tokens transfer', async ({ page, metamask, connectToAnvil, deployToken }) => {
+    // Connect to Anvil network
     await connectToAnvil()
+    // Deploy the token contract
     await deployToken()
 
+    // Click the transfer tokens button
     await page.locator('#transferTokens').click()
+    // Confirm the transaction in MetaMask
     await metamask.confirmTransaction()
   })
 
   test('should approve tokens', async ({ page, metamask, connectToAnvil, deployToken }) => {
+    // Connect to Anvil network
     await connectToAnvil()
+    // Deploy the token contract
     await deployToken()
 
+    // Click the approve tokens button
     await page.locator('#approveTokens').click()
+    // Approve the token permission in MetaMask
     await metamask.approveTokenPermission()
   })
 
   test('should add token to the wallet', async ({ page, metamask, metamaskPage, connectToAnvil, deployToken }) => {
+    // Connect to Anvil network
     await connectToAnvil()
+    // Deploy the token contract
     await deployToken()
 
+    // Click the watch assets button
     await page.locator('#watchAssets').click()
 
+    // Add the new token to MetaMask
     await metamask.addNewToken()
 
+    // Verify that the token (TST) is added to the wallet
     await expect(metamaskPage.locator(tokenLocator).nth(1)).toContainText('TST')
   })
 })
@@ -44,17 +57,25 @@ describe('Piggy Bank', () => {
     connectToAnvil,
     deployPiggyBank
   }) => {
+    // Connect to Anvil network
     await connectToAnvil()
+    // Deploy the Piggy Bank contract
     await deployPiggyBank()
 
+    // Click the deposit button
     await page.locator('#depositButton').click()
+    // Confirm the deposit transaction in MetaMask
     await metamask.confirmTransaction()
 
+    // Verify that the deposit was completed
     await expect(page.locator('#contractStatus')).toHaveText('Deposit completed')
 
+    // Click the withdraw button
     await page.locator('#withdrawButton').click()
+    // Confirm the withdrawal transaction in MetaMask
     await metamask.confirmTransaction()
 
+    // Verify that the withdrawal was successful
     await expect(page.locator('#contractStatus')).toHaveText('Withdrawn')
   })
 })

examples/metamask/test/playwright/addNetwork.spec.ts

@@ -7,13 +7,18 @@ const test = testWithSynpress(metaMaskFixtures(basicSetup))
 const { expect } = test
 
 test('should add a custom network to MetaMask', async ({ metamask, page }) => {
-  // Add the custom network
-  await metamask.addNetwork({
+  // Define the custom network parameters
+  const customNetwork = {
     name: 'Optimism',
     rpcUrl: 'https://mainnet.optimism.io',
     chainId: 10,
     symbol: 'ETH'
-  })
+  }
 
+  // Add the custom network to MetaMask
+  await metamask.addNetwork(customNetwork)
+
+  // Verify that the chain ID has been updated correctly
+  // Note: '0xa' is the hexadecimal representation of 10
   await expect(page.locator('#chainId')).toHaveText('0xa')
 })