diff --git a/src/config/rainbow-kit.ts b/src/config/rainbow-kit.ts index 5d580f113d9..8b0e5e5ecb7 100644 --- a/src/config/rainbow-kit.ts +++ b/src/config/rainbow-kit.ts @@ -10,6 +10,10 @@ 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, @@ -60,23 +64,33 @@ const getTransports = () => { } } +const walletGroups = [ + { + groupName: "New to crypto", + wallets: [ + coinbaseWallet, + rainbowWallet, + metaMaskWallet, + zerionWallet, + oneKeyWallet, + walletConnectWallet, + ], + }, +] + +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!, // @ts-expect-error - TODO: fix this chains: getTargetChains(), transports: getTransports(), - wallets: [ - { - groupName: "New to crypto", - wallets: [ - coinbaseWallet, - rainbowWallet, - metaMaskWallet, - zerionWallet, - oneKeyWallet, - walletConnectWallet, - ], - }, - ], + wallets: walletGroups, + ssr: true, }) diff --git a/src/lib/utils/env.ts b/src/lib/utils/env.ts index e5b8db2fb38..c632614c256 100644 --- a/src/lib/utils/env.ts +++ b/src/lib/utils/env.ts @@ -1,4 +1,5 @@ export const IS_DEV = process.env.NODE_ENV === "development" +export const IS_CI = process.env.CI === "true" export const IS_PROD = process.env.NODE_ENV === "production" export const IS_PREVIEW_DEPLOY = process.env.NEXT_PUBLIC_IS_PREVIEW_DEPLOY === "true" diff --git a/tests/e2e/fixtures/mockWallet.ts b/tests/e2e/fixtures/mockWallet.ts new file mode 100644 index 00000000000..9cb7c3fac63 --- /dev/null +++ b/tests/e2e/fixtures/mockWallet.ts @@ -0,0 +1,35 @@ +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/fixtures/testData.ts b/tests/e2e/fixtures/testData.ts index a3f859d3c6b..90669322ec4 100644 --- a/tests/e2e/fixtures/testData.ts +++ b/tests/e2e/fixtures/testData.ts @@ -1,4 +1,5 @@ import en from "@/intl/en/common.json" +import enStart from "@/intl/en/page-start.json" import es from "@/intl/es/common.json" /** @@ -36,6 +37,7 @@ export const testData = { content: { headings: { homepage: en["site-title"], + startPage: enStart["page-start-meta-title"], findWallet: en["nav-find-wallet-label"], notFoundEn: en["we-couldnt-find-that-page"], notFoundEs: es["we-couldnt-find-that-page"], diff --git a/tests/e2e/pages/StartPage.ts b/tests/e2e/pages/StartPage.ts new file mode 100644 index 00000000000..de3a7e1a817 --- /dev/null +++ b/tests/e2e/pages/StartPage.ts @@ -0,0 +1,56 @@ +import { expect, Page } from "@playwright/test" + +import { testData } from "../fixtures/testData" + +import { BasePage } from "./BasePage" + +/** + * Page Object Model for the Start page + */ +export class StartPage extends BasePage { + private readonly url = "/en/start" + + constructor(page: Page) { + super(page) + } + + /** + * Navigate to the start page + */ + async goto() { + await this.navigateTo(this.url) + } + + /** + * Verify the start page has loaded successfully + */ + async verifyPageLoaded() { + await this.assertTitleContains(testData.content.headings.startPage) + } + + async connectWithExistingWallet() { + await this.page + .getByRole("paragraph") + .filter({ hasText: "I have a wallet." }) + .click() + await this.page.getByRole("button", { name: "Continue" }).click() + 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: "Lets continue" }).click() + await expect( + this.page.getByRole("heading", { name: "Let Use Some Apps" }) + ).toBeVisible() + } +} diff --git a/tests/e2e/pages/index.ts b/tests/e2e/pages/index.ts index 97eefbead23..9a6571806c3 100644 --- a/tests/e2e/pages/index.ts +++ b/tests/e2e/pages/index.ts @@ -5,3 +5,4 @@ export { BasePage } from "./BasePage" export { FindWalletPage } from "./FindWalletPage" export { HomePage } from "./HomePage" +export { StartPage } from "./StartPage" diff --git a/tests/e2e/start.spec.ts b/tests/e2e/start.spec.ts new file mode 100644 index 00000000000..6dc1f2944ee --- /dev/null +++ b/tests/e2e/start.spec.ts @@ -0,0 +1,15 @@ +import { test } from "@playwright/test" + +import { StartPage } from "./pages" + +test.describe("Start Page", () => { + test("Connect wallet", async ({ page }) => { + const startPage = new StartPage(page) + await startPage.goto() + await startPage.verifyPageLoaded() + + await startPage.connectWithExistingWallet() + + await startPage.continueToUseAppsStep() + }) +})