chore: initial setup for e2e tests

.env.example

@@ -1,9 +1,15 @@
+# RPC urls
 NEXT_PUBLIC_MAINNET=
 NEXT_PUBLIC_BASE_SEPOLIA=
 
-NEXT_PUBLIC_TESTNETS_ENABLED=
+# Enabling this variables adds Base Sepolia in supported markets list
+NEXT_PUBLIC_TESTNETS_ENABLED=true
 
-NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=
+# If you have forked mainnet in Tenderly provide appropriate values
+NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=false
 NEXT_PUBLIC_TENDERLY_VNET_ID=
 NEXT_PUBLIC_TENDERLY_VNET_RPC=
-NEXT_PUBLIC_TENDERLY_VNET_EXPLORER=
+
+# Only for e2e tests
+NEXT_PUBLIC_E2E_TEST_ENABLED=false
+NEXT_PUBLIC_E2E_WALLET_ADDRESS=

.gitignore

@@ -34,6 +34,7 @@ yarn-error.log*
 # local env files
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
+.env.test
 .env*.local
 
 # vercel
@@ -43,4 +44,11 @@ yarn-error.log*
 *.tsbuildinfo
 
 # idea files
-.idea
+.idea
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/example.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "@playwright/test";
+import { Address } from "viem";
+import { chooseForkedChain, connectToMockWallet } from "./helpers";
+import { setERC20Balance } from "./tenderly/setERC20Balance";
+
+test.describe("example", () => {
+  const wallet = process.env.NEXT_PUBLIC_E2E_WALLET_ADDRESS! as Address;
+  const USDT = "0xdac17f958d2ee523a2206206994597c13d831ec7";
+
+  test.beforeEach(async () => {
+    await setERC20Balance({
+      wallet,
+      amount: 1_000_000n,
+      token: USDT,
+    });
+  });
+
+  test("example test", async ({ page }) => {
+    await page.goto("/");
+
+    await chooseForkedChain(page);
+
+    await connectToMockWallet(page);
+
+    await expect(page.getByRole("link", { name: "Stake" })).toBeVisible();
+  });
+});

e2e/helpers.ts

@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+
+export async function chooseForkedChain(page: Page) {
+  await page.getByRole("combobox").click();
+  await page.getByText("Virtual Mainnet").click();
+}
+
+export async function connectToMockWallet(page: Page) {
+  await page.getByRole("button", { name: "Connect Wallet" }).click();
+  await page.getByTestId("rk-wallet-option-mock").click();
+}

e2e/tenderly/client.ts

@@ -0,0 +1,8 @@
+import { mainnetFork } from "@/configs/mainnetFork";
+import { RPCS } from "@/constants/rpcs";
+import { createPublicClient, http } from "viem";
+
+export const client = createPublicClient({
+  chain: mainnetFork,
+  transport: http(RPCS[mainnetFork.id]),
+});

e2e/tenderly/setERC20Balance.ts

@@ -0,0 +1,26 @@
+import { Address, Hex } from "viem";
+import { client } from "./client";
+
+export const setERC20Balance = async ({
+  wallet,
+  amount,
+  token,
+}: {
+  wallet: Address;
+  amount: bigint;
+  token: Address;
+}) => {
+  try {
+    await client.request<{
+      method: "tenderly_setBalance";
+      Parameters: [erc20: Hex, to: Hex, value: Hex];
+      ReturnType: Hex;
+    }>({
+      method: "tenderly_setErc20Balance",
+      params: [token, wallet, `0x${amount.toString(16)}`],
+    });
+  } catch (error) {
+    console.error(error);
+    throw new Error("Failed to set balance of ERC20 token");
+  }
+};

package.json

@@ -2,6 +2,7 @@
   "name": "umbrella-ui",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
@@ -10,8 +11,10 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
-    "prepare": "husky",
-    "test:ci": "vitest related --run --passWithNoTests"
+    "test:ci": "vitest related --run --passWithNoTests",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
+    "prepare": "husky"
   },
   "lint-staged": {
     "**/*.{ts,tsx,js,jsx}": [
@@ -63,6 +66,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
+    "@playwright/test": "^1.52.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -75,6 +79,7 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.1.4",
     "@vitest/ui": "^3.1.4",
+    "dotenv": "^16.5.0",
     "eslint": "^9.27.0",
     "eslint-config-next": "15.3.2",
     "husky": "^9.1.7",

playwright.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+
+dotenv.config({ path: path.resolve(process.cwd(), ".env.test") });
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+
+  use: {
+    trace: "on-first-retry",
+    video: "off",
+    baseURL: "http://localhost:3000",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: "NODE_ENV=test && npm run build && npm run start",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/app/claim-all-rewards/page.tsx

@@ -13,7 +13,6 @@ import { useIsSafeWallet } from "@/hooks/useIsSafeWallet/useIsSafeWallet";
 import { useWalletAddress } from "@/providers/WalletProvider/WalletContext";
 import { sumUpAllRewards } from "@/utils/calculations";
 import { withPositiveBalance } from "@/utils/data";
-import { CoinsIcon } from "lucide-react";
 
 export default function ClaimRewardsPage() {
   const receiver = useWalletAddress();

src/app/layout.tsx

@@ -29,7 +29,9 @@ export default function RootLayout({ children }: Readonly<PropsWithChildren>) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <script src="https://unpkg.com/react-scan/dist/auto.global.js" async />
+        {process.env.NODE_ENV === "production" && (
+          <script src="https://unpkg.com/react-scan/dist/auto.global.js" async />
+        )}
       </head>
       <body
         className={`font-sans ${inter.variable} ${spaceGrotesk.variable} border-main-950 dark:border-main-500 text-main-950 dark:bg-main-950 antialiased dark:text-white`}

src/app/stake/a/[address]/components/StakeATokenForm/StakeATokenForm.tsx

@@ -53,9 +53,6 @@ export const StakeATokenForm = ({ asset, stkToken, reserves }: StakeATokenFormPr
     resolver: zodResolver(schema),
     mode: "onChange",
   });
-  const {
-    formState: { errors },
-  } = formMethods;
 
   const { stake, data: hash, isPending: isTxPending, error: depositError } = useStake();
   const {

src/components/ScannerLink/ScannerLink.tsx

@@ -1,12 +1,12 @@
+import { appChains } from "@/configs/wagmi";
+import { cn } from "@/utils/cn";
 import Link from "next/link";
 import { type ComponentProps, type PropsWithChildren } from "react";
 import { type Address } from "viem";
-import { cn } from "@/utils/cn";
-import { appChains } from "@/configs/wagmi";
 
 const getScannerUrl = (chainId: number) => {
   const chainConfig = appChains.find((chain) => chain.id === chainId);
-  return chainConfig?.blockExplorers.default.url;
+  return chainConfig?.blockExplorers?.default.url;
 };
 
 export type ScannerLinkProps = PropsWithChildren &

src/components/Transaction/ExplorerLink.tsx

@@ -1,7 +1,6 @@
+import { useMarketChain } from "@/hooks/useMarketChain";
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
-import React from "react";
-import { useMarketChain } from "@/hooks/useMarketChain";
 
 export type ExplorerLinkProps = { hash: string };
 
@@ -10,7 +9,7 @@ export const ExplorerLink = ({ hash }: ExplorerLinkProps) => {
 
   return (
     <Link
-      href={`${chain.blockExplorers.default.url}/tx/${hash}`}
+      href={`${chain.blockExplorers?.default.url}/tx/${hash}`}
       target="_blank"
       className="text-main-500 flex cursor-pointer items-center gap-1 text-sm"
     >

src/components/WalletModal/WalletModal.tsx

@@ -63,6 +63,7 @@ export const WalletModal = ({ open, onOpenChange, children }: WalletModalProps)
               <div className="flex flex-col items-center md:gap-6">
                 {!!connector?.icon ? (
                   <div className="relative">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={connector.icon} alt={connector.name} className="size-[72px] md:size-[90px]" />
                     <AssetIcon
                       chainId={chainId}

src/configs/tenderly.config.ts → src/configs/mainnetFork.ts

@@ -1,16 +1,10 @@
 import { defineChain } from "viem";
 
-export const forkedMainnet = defineChain({
+export const mainnetFork = defineChain({
   id: Number(process.env.NEXT_PUBLIC_TENDERLY_VNET_ID ?? 73571),
   name: "Virtual Mainnet",
   nativeCurrency: { name: "VETH", symbol: "VETH", decimals: 18 },
   rpcUrls: {
     default: { http: [process.env.NEXT_PUBLIC_TENDERLY_VNET_RPC!] },
   },
-  blockExplorers: {
-    default: {
-      name: "Tenderly Explorer",
-      url: process.env.NEXT_PUBLIC_TENDERLY_VNET_EXPLORER!,
-    },
-  },
 });