wip

packages/core/src/providers/LocalMulticallProvider.tsx

@@ -73,7 +73,7 @@ export function LocalMulticallProvider({ children }: LocalMulticallProps) {
       }
       void checkDeployed()
     }
-  }, [library, chainId])
+  }, [library, chainId, getCurrent])
 
   const awaitingMulticallBlock = multicallBlockNumber && blockNumber && blockNumber < multicallBlockNumber
 

packages/docs/playwright/with-metamask.test.ts

@@ -80,20 +80,20 @@ describe(`Browser: ${browserType.name()} with Metamask`, () => {
       })
 
       const popupPromise = waitForPopup(context)
-      await page.click(XPath.text('button', 'Switch to Goerli'))
+      await page.click(XPath.text('button', 'Switch to Sepolia'))
       const popupPage = await popupPromise
       await popupPage.click(XPath.text('button', 'Switch network'))
 
       await waitForExpect(async () => {
-        expect(await page.isVisible(`//*[text()='Current chain: ' and text()='5']`)).to.be.true
+        expect(await page.isVisible(`//*[text()='Current chain: ' and text()='11155111']`)).to.be.true
       })
     })
 
     it('Add new network to Metamask', async () => {
       await page.goto(`${baseUrl}Guides/Transactions/Switching%20Networks`)
 
       await waitForExpect(async () => {
-        expect(await page.isVisible(`//*[text()='Current chain: ' and text()='5']`)).to.be.true
+        expect(await page.isVisible(`//*[text()='Current chain: ' and text()='11155111']`)).to.be.true
       })
 
       const popupPromise = waitForPopup(context)
@@ -145,7 +145,7 @@ describe(`Browser: ${browserType.name()} with Metamask`, () => {
       let popupPage = await popupPromise
       await popupPage.click(XPath.text('button', 'Sign'))
       await waitForExpect(async () => {
-        expect(await page.isVisible(`//*[text()='ChainId: ' and text()='5']`)).to.be.true
+        expect(await page.isVisible(`//*[text()='ChainId: ' and text()='11155111']`)).to.be.true
       })
 
       await metamask.switchToNetwork('Ethereum Mainnet')
@@ -163,10 +163,10 @@ describe(`Browser: ${browserType.name()} with Metamask`, () => {
         expect(await page.isVisible(`//*[text()='Not logged in']`)).to.be.true
       })
 
-      await metamask.switchToNetwork('Goerli Test Network')
+      await metamask.switchToNetwork('Sepolia')
 
       await waitForExpect(async () => {
-        expect(await page.isVisible(`//*[text()='ChainId: ' and text()='5']`)).to.be.true
+        expect(await page.isVisible(`//*[text()='ChainId: ' and text()='11155111']`)).to.be.true
       })
     })
   })

packages/docs/src/examples/Siwe.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Mainnet, DAppProvider, useEthers, Config, Goerli } from '@usedapp/core'
+import { Mainnet, DAppProvider, useEthers, Config, Sepolia } from '@usedapp/core'
 import { getDefaultProvider } from 'ethers'
 import { SiweProvider, useSiwe } from '@usedapp/siwe'
 
@@ -12,7 +12,7 @@ const config: Config = {
   readOnlyChainId: Mainnet.chainId,
   readOnlyUrls: {
     [Mainnet.chainId]: getDefaultProvider('mainnet'),
-    [Goerli.chainId]: getDefaultProvider('goerli'),
+    [Sepolia.chainId]: 'https://rpc2.sepolia.org',
   },
 }
 

packages/docs/src/examples/SwitchingNetworks.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { DAppProvider, useSendTransaction, useEthers, Config, Goerli, Mainnet, Optimism } from '@usedapp/core'
+import { DAppProvider, useSendTransaction, useEthers, Config, Sepolia, Mainnet, Optimism } from '@usedapp/core'
 import { getDefaultProvider } from 'ethers'
 
 const config: Config = {
   readOnlyChainId: Mainnet.chainId,
   readOnlyUrls: {
     [Mainnet.chainId]: getDefaultProvider('mainnet'),
     [Optimism.chainId]: getDefaultProvider('optimism'),
-    [Goerli.chainId]: getDefaultProvider('goerli'),
+    [Sepolia.chainId]: 'https://rpc2.sepolia.org',
   },
 }
 
@@ -45,8 +45,8 @@ export function App() {
           </button>
         }{' '}
         {
-          <button onClick={() => switchNetwork(Goerli.chainId)} disabled={chainId === Goerli.chainId}>
-            Switch to Goerli
+          <button onClick={() => switchNetwork(Sepolia.chainId)} disabled={chainId === Sepolia.chainId}>
+            Switch to Sepolia
           </button>
         }
       </div>

packages/example/playwright/with-metamask.ts

@@ -83,7 +83,7 @@ export const withMetamaskTest = (baseUrl: string) => {
       log('Adding an account with some funds to be able to deploy multicall contract...')
       await metamask.addAccount(defaultAccounts[0].secretKey, [page])
 
-      log('Swtiching to local network to deploy multicall...')
+      log('Switching to local network to deploy multicall...')
       const txConfirmPagePromise = waitForPopup(context)
       await metamask.switchToNetwork('Localhost 8545')
 
@@ -235,7 +235,7 @@ export const withMetamaskTest = (baseUrl: string) => {
 
         await page.goto(`${baseUrl}send`)
         await page.fill(XPath.id('input', 'EthInput'), '1')
-        await page.fill(XPath.id('input', 'AddressInput'), wallet.address)
+        await page.fill('#AddressInput', wallet.address)
         await page.click(XPath.text('button', 'Send'))
 
         await waitForExpect(() => {

packages/example/src/entrypoint.tsx

@@ -17,6 +17,7 @@ import { getDefaultProvider } from '@ethersproject/providers'
 const readOnlyUrls: Config['readOnlyUrls'] = {
   [Mainnet.chainId]: process.env.MAINNET_URL || getDefaultProvider('mainnet'),
   [Optimism.chainId]: 'https://mainnet.optimism.io',
+  [Localhost.chainId]: 'http://localhost:8545',
 }
 
 if (process.env.LOCALHOST_URL) {

packages/playwright/src/metamask/MetaMask.ts

@@ -5,10 +5,13 @@ import { XPath } from '../xpath'
 
 export const log = debug('usedapp:playwright')
 
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
 export class MetaMask {
   constructor(private page: Page) {}
 
   private extensionId: string | undefined = undefined
+  private noLocalhostYet = true
 
   async getExtensionId() {
     if (this.extensionId) return this.extensionId
@@ -33,11 +36,17 @@ export class MetaMask {
   async addAccount(privateKey: string, pages: Page[] = []) {
     log('Adding MetaMask account...')
     await this.gotoMetamask()
-    await this.page.click('.account-menu__icon') // Top right menu with accounts.
-    await this.page.click(XPath.text('div', 'Import Account'))
+
+    await sleep(1000)
+    if (await this.page.getByTestId('popover-close').isVisible()) {
+      await this.page.getByTestId('popover-close').click()
+    }
+
+    await this.page.getByTestId('account-menu-icon').click() // Top right menu with accounts.
+    await this.page.getByRole('button', { name: 'Add account or hardware wallet' }).click()
+    await this.page.getByRole('button', { name: 'Import account' }).click()
     await this.page.fill('#private-key-box', privateKey)
-    await this.page.click(XPath.text('button', 'Import'))
-    await this.page.waitForSelector('.account-menu__icon')
+    await this.page.getByTestId('import-account-confirm-button').click()
     log('MetaMask account added.')
 
     if (!pages.length) return
@@ -65,44 +74,59 @@ export class MetaMask {
     log('Metamask account connected to pages.')
   }
 
-  async switchToNetwork(network: 'Ethereum Mainnet' | 'Localhost 8545' | 'Goerli Test Network') {
+  async switchToNetwork(network: 'Ethereum Mainnet' | 'Localhost 8545' | 'Sepolia') {
+    if (network === 'Localhost 8545' && this.noLocalhostYet) {
+      this.noLocalhostYet = false
+      await this.page.goto(
+        'chrome-extension://' + (await this.getExtensionId()) + '//home.html#settings/networks/add-network'
+      )
+      await this.page.getByLabel('Network name').fill('Localhost 8545')
+      await this.page.getByLabel('New RPC URL').fill('http://localhost:8545')
+      await this.page.getByLabel('Chain ID').fill('1337')
+      await this.page.getByTestId('network-form-ticker-input').fill('ETH')
+      await this.page.getByRole('button', { name: 'Save' }).click()
+    }
+
     log('Switching network...')
     await this.gotoMetamask()
-    await this.page.click('.network-display--clickable') // Network popup menu on the top right.
 
-    // See if testnets are visible.
-    if (!(await this.page.isVisible(XPath.text('span', network)))) {
-      log('Making testnet visible in settings...')
-      await this.page.click('.network-display--clickable') // Un-click it.
-      await this.page.goto('chrome-extension://' + (await this.getExtensionId()) + '//home.html' + '#settings/advanced')
+    await sleep(1000)
+    const popoverClose = this.page.getByTestId('popover-close')
+    if (await popoverClose.isVisible()) {
+      await popoverClose.click()
+    }
 
-      // 4th checkbox relates to "Show test networks"
-      // Could not find a better way to click this.
-      await this.page.click('(//div[contains(@class, "toggle-button--off")])[4]//div')
+    await this.page.getByTestId('network-display').click() // Network popup menu on the top right.
 
-      await this.page.click('.network-display--clickable') // Open it up again.
+    await sleep(1000)
+    if (await this.page.isVisible('.toggle-button--off')) {
+      await this.page.check('.toggle-button--off')
     }
-    await this.page.click(XPath.text('span', network))
+
+    await this.page.getByTestId(network).click()
     log(`Network switched to "${network}"`)
   }
 
   async activate() {
     log('Activating Metamask...')
     await this.gotoMetamask()
-    await this.page.click(XPath.text('button', 'Get Started'))
-    await this.page.click(XPath.text('button', 'Create a Wallet'))
-    await this.page.click(XPath.text('button', 'No Thanks')) // Telemetry.
-
-    await this.page.fill('#create-password', 'qwerty123')
-    await this.page.fill('#confirm-password', 'qwerty123')
-    await this.page.check('//div[@role="checkbox"]')
-    await this.page.click(XPath.text('button', 'Create'))
-    await this.page.click(XPath.text('button', 'Next'))
-    await this.page.click(XPath.text('button', 'Remind me later')) // Recovery phrase.
-
-    await this.page.waitForSelector('//h2[contains(text(), "What\'s new")]', { state: 'visible' })
+    await this.page.getByRole('checkbox').click()
+    await this.page.getByRole('button', { name: 'Create a new wallet' }).click()
+    await this.page.getByRole('button', { name: 'No thanks' }).click() // Telemetry.
+
+    await this.page.getByTestId('create-password-new').fill('qwerty123')
+    await this.page.getByTestId('create-password-confirm').fill('qwerty123')
+    await this.page.getByRole('checkbox').click()
+
+    await this.page.getByRole('button', { name: 'Create a new wallet' }).click()
+    await this.page.getByRole('button', { name: 'Remind me later (not recommended)' }).click()
+    await this.page.getByRole('checkbox').click()
+    await this.page.getByRole('button', { name: 'Skip' }).click()
+    await this.page.getByRole('button', { name: 'Got it' }).click()
+    await this.page.getByRole('button', { name: 'Next' }).click()
+    await this.page.getByRole('button', { name: 'Done' }).click()
+    await this.page.getByRole('button', { name: 'No thanks' }).click()
 
-    await this.page.click('//button[@title="Close"]') // Close "What's new" section.
     log('Metamask activated.')
   }