connect with metamask

package.json

@@ -84,6 +84,7 @@
     "@playwright/test": "^1.42.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
+    "@tenkeylabs/dappwright": "^2.8.2",
     "@typechain/ethers-v6": "^0.5.1",
     "@types/node": "20.1.1",
     "@types/react": "18.2.6",

tests/connected/wallet-flow.spec.ts

@@ -0,0 +1,40 @@
+import { BrowserContext, expect, test as baseTest } from "@playwright/test";
+import dappwright, { Dappwright, MetaMaskWallet } from "@tenkeylabs/dappwright";
+
+export const test = baseTest.extend<{
+    context: BrowserContext;
+    wallet: Dappwright;
+}>({
+    context: async ({ }, use) => {
+        // Launch context with extension
+        const [wallet, _, context] = await dappwright.bootstrap("", {
+            wallet: "metamask",
+            version: MetaMaskWallet.recommendedVersion,
+            seed: "test test test test test test test test test test test junk", // Hardhat's default https://hardhat.org/hardhat-network/docs/reference#accounts
+            headless: true,
+        });
+
+        await wallet.addNetwork({
+            networkName: "OP Mainnet",
+            rpc: "https://optimism.drpc.org",
+            chainId: 10,
+            symbol: "ETH",
+        });
+
+        await use(context);
+    },
+
+    wallet: async ({ context }, use) => {
+        const metamask = await dappwright.getWallet("metamask", context);
+
+        await use(metamask);
+    },
+});
+
+test("should be able to connect", async ({ wallet, page }) => {
+    await page.goto('/');
+    await page.getByText('Connect Wallet').first().click();
+    await page.getByRole('button', { name: 'MetaMask' }).click();
+    await wallet.approve();
+    await expect(page.getByText('0xf3...2266')).toBeVisible();
+});

tests/disconnected/homepage/desktop.spec.ts

@@ -2,6 +2,7 @@ import { test } from "@playwright/test";
 
 test.describe('homepage desktop', () => {
     test('connect wallet button', async ({ page }) => {
+        // TODO: frh -> should i add here to be visible?
         await page.goto('/');
         await page.getByText('Connect Wallet').first().click();
         await page.getByRole('button', { name: 'MetaMask' }).click();

yarn.lock

@@ -3530,6 +3530,13 @@
   dependencies:
     "@tanstack/query-core" "5.27.5"
 
+"@tenkeylabs/dappwright@^2.8.2":
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/@tenkeylabs/dappwright/-/dappwright-2.8.2.tgz#fb0b35b58fbe190929f0882d59b087a6f0225105"
+  integrity sha512-FV9j7282CCdvz38PBzug3TLhZMlufPRHR5ZLQJI5nGfMDUNEeDh3SNvU/9kx3238GMmdm7kz3SPlfAdNfhyiIA==
+  dependencies:
+    node-stream-zip "^1.13.0"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.10.tgz#b7ebd3adfa7750628d100594f6726b054d2c33b2"
@@ -8131,6 +8138,11 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+node-stream-zip@^1.13.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.15.0.tgz#158adb88ed8004c6c49a396b50a6a5de3bca33ea"
+  integrity sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"