From 5d01789befda2cb48b657106093ea0a2781eaa7d Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 15 Dec 2025 12:44:52 +0100
Subject: [PATCH] refactor(e2e): remove mock wallet and test to RainbowKit
 modal boundary

---
 src/config/rainbow-kit.ts        | 11 ----------
 tests/e2e/fixtures/mockWallet.ts | 35 --------------------------------
 tests/e2e/pages/StartPage.ts     | 22 +++++---------------
 tests/e2e/start.spec.ts          | 18 ++++++++++++----
 4 files changed, 19 insertions(+), 67 deletions(-)
 delete mode 100644 tests/e2e/fixtures/mockWallet.ts

diff --git a/src/config/rainbow-kit.ts b/src/config/rainbow-kit.ts
index 8b0e5e5ecb7..37c435e7417 100644
--- a/src/config/rainbow-kit.ts
+++ b/src/config/rainbow-kit.ts
@@ -10,10 +10,6 @@ import {
   zerionWallet,
 } from "@rainbow-me/rainbowkit/wallets"
 
-import { IS_CI, IS_DEV } from "@/lib/utils/env"
-
-import { mockWallet } from "../../tests/e2e/fixtures/mockWallet"
-
 const CHAIN_MAP = {
   hardhat,
   sepolia,
@@ -78,13 +74,6 @@ const walletGroups = [
   },
 ]
 
-if (IS_DEV || IS_CI) {
-  walletGroups.push({
-    groupName: "Test",
-    wallets: [mockWallet],
-  })
-}
-
 export const rainbowkitConfig = getDefaultConfig({
   appName: "ethereum.org",
   projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
diff --git a/tests/e2e/fixtures/mockWallet.ts b/tests/e2e/fixtures/mockWallet.ts
deleted file mode 100644
index 9cb7c3fac63..00000000000
--- a/tests/e2e/fixtures/mockWallet.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Address } from "viem"
-import { CreateConnectorFn, mock } from "wagmi"
-import type { Wallet } from "@rainbow-me/rainbowkit"
-import { WalletDetailsParams } from "@rainbow-me/rainbowkit"
-
-const defaultAnvilAccount: Address =
-  "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
-
-export const mockWallet = (): Wallet => {
-  return {
-    id: "mock",
-    name: "Mock Wallet",
-    shortName: "Mock",
-    installed: true,
-    iconBackground: "rgba(0, 255, 0, 0.5)",
-    iconUrl: "/images/assets/svgs/eth-glyph-colored.svg",
-    downloadUrls: {},
-    createConnector: createMockConnector,
-  }
-}
-
-function createMockConnector(
-  walletDetails: WalletDetailsParams
-): CreateConnectorFn {
-  const mockConnector: CreateConnectorFn = (config) => {
-    return {
-      ...mock({
-        accounts: [defaultAnvilAccount],
-      })(config),
-      rkDetails: walletDetails.rkDetails,
-    }
-  }
-
-  return mockConnector
-}
diff --git a/tests/e2e/pages/StartPage.ts b/tests/e2e/pages/StartPage.ts
index dadfbdb37c7..6097c86de18 100644
--- a/tests/e2e/pages/StartPage.ts
+++ b/tests/e2e/pages/StartPage.ts
@@ -1,4 +1,4 @@
-import { expect, Page } from "@playwright/test"
+import { Page } from "@playwright/test"
 
 import { testData } from "../fixtures/testData"
 
@@ -28,7 +28,10 @@ export class StartPage extends BasePage {
     await this.assertTitleContains(testData.content.headings.startPage)
   }
 
-  async connectWithExistingWallet() {
+  /**
+   * Navigate through the start flow and open the wallet connection modal.
+   */
+  async openWalletConnectionModal() {
     await this.page
       .getByRole("paragraph")
       .filter({ hasText: "I have a wallet." })
@@ -37,20 +40,5 @@ export class StartPage extends BasePage {
     await this.page
       .getByRole("button", { name: "Sign in with Ethereum" })
       .click()
-    // Choose mock wallet option in RainbowKit modal
-    await this.page.getByTestId("rk-wallet-option-mock").click()
-    // Verify wallet connected
-    await expect(
-      this.page
-        .getByRole("paragraph")
-        .filter({ hasText: "This is your account" })
-    ).toBeVisible()
-  }
-
-  async continueToUseAppsStep() {
-    await this.page.getByRole("button", { name: "Let's continue" }).click()
-    await expect(
-      this.page.getByRole("heading", { name: "Let's use some apps" })
-    ).toBeVisible()
   }
 }
diff --git a/tests/e2e/start.spec.ts b/tests/e2e/start.spec.ts
index 6dc1f2944ee..1753ae3b450 100644
--- a/tests/e2e/start.spec.ts
+++ b/tests/e2e/start.spec.ts
@@ -1,15 +1,25 @@
-import { test } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 import { StartPage } from "./pages"
 
 test.describe("Start Page", () => {
-  test("Connect wallet", async ({ page }) => {
+  test("loads successfully", async ({ page }) => {
+    const startPage = new StartPage(page)
+    await startPage.goto()
+    await startPage.verifyPageLoaded()
+  })
+
+  test("wallet modal opens with wallet options", async ({ page }) => {
     const startPage = new StartPage(page)
     await startPage.goto()
     await startPage.verifyPageLoaded()
 
-    await startPage.connectWithExistingWallet()
+    await startPage.openWalletConnectionModal()
 
-    await startPage.continueToUseAppsStep()
+    const walletModal = page.getByRole("dialog")
+    await expect(walletModal.getByText("Connect a Wallet")).toBeVisible()
+    await expect(walletModal.getByText("MetaMask")).toBeVisible()
+    await expect(walletModal.getByText("Coinbase Wallet")).toBeVisible()
+    await expect(walletModal.getByText("Rainbow")).toBeVisible()
   })
 })