WIP Impact Metrics

.env.example

@@ -93,5 +93,6 @@ NEXT_PUBLIC_STRATEGY_ADDRESS="0xa3c5a2ea8ca2060e00761069b23da5171146a747"
 WALLET_PRIVATE_KEY=""
 
 
+OPENSOURCE_OBSERVER_API="https://opensource-observer.hasura.app/v1/graphql"
 NEXT_PUBLIC_POSTHOG_KEY=""
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

.env.test

@@ -0,0 +1,24 @@
+# ------------------
+# TEST CONFIGURATION
+# ------------------
+
+# Voting periods
+NEXT_PUBLIC_START_DATE=2024-01-01T00:00:00.000Z
+NEXT_PUBLIC_REGISTRATION_END_DATE=2024-01-01T00:00:00.000Z
+NEXT_PUBLIC_REVIEW_END_DATE=2024-01-01T00:00:00.000Z
+NEXT_PUBLIC_VOTING_END_DATE=2026-01-01T00:00:00.000Z
+NEXT_PUBLIC_RESULTS_DATE=2026-01-01T00:00:00.000Z
+
+
+# Set to true to let anyone vote without an approval attestation
+NEXT_PUBLIC_SKIP_APPROVED_VOTER_CHECK=true
+
+
+NEXT_PUBLIC_E2E_TEST=true
+NEXT_PUBLIC_TEST_WALLET_PRIVATE_KEY="0xfddf5e311800c2fad48651979111a9600434b34d5646924d377b9a1d22856d61"
+
+### SYNPRESS
+TEST_SEED_PHRASE="denial solar address invite flash measure young start traffic rib cash awkward"
+TEST_PRIVATE_KEY=318ed94fa9b65cb353b47e4650dd9a849386891e16bf1564cfc892be06607229
+TEST_WALLET_PASSWORD=playwright
+TEST_WALLET_ADDRESS=0x7c6d34f2b0bfe7dd773ff5da3e0168d40d613304

.gitignore

@@ -34,9 +34,19 @@ yarn-error.log*
 # 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*.local
+.env.main
+.env.impact
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
+
+/playwright-report
+
+/test-results
+/playwright-report
+
+.cache-synpress
+.env.synpress

README.md

@@ -76,3 +76,33 @@ open localhost:3000
 - **Server-side caching of requests to EAS and IPFS** - Immediately returns the data without calling EAS and locally serving ipfs cids.
 - **SQL database for ballots** - Votes are stored privately in a Postgres database
 - **Allo2 for token distribution** - Payouts are calculated based on amount of configured tokens in the pool and the vote calculation
+
+### TESTING Playwright + Synpress
+
+#### Setup Wallet Cache
+
+[Docs](https://synpress.io/docs/guides/wallet-cache)
+
+1. We need to setup envs for metamask, currently having a wallet without funds in .env.test, possible override it with .env.synpress (remove synpress cache folder and run `bun run synpress:wallet-cache` again):
+
+- SEED_PHRASE
+- PRIVATE_KEY
+- PASSWORD
+
+2. Install playwright browser
+
+```
+bun run playwright:browser
+```
+
+3. Setup wallets (./test/wallet-setup/\*)
+
+```
+bun run synpress:wallet-cache
+```
+
+4. Run tests
+
+```
+bun run test:e2e
+```

e2e/tests/index.spec.ts

@@ -0,0 +1,121 @@
+import { expect, test } from "@playwright/test";
+import { privateKeyToAccount } from "viem/accounts";
+import { db } from "~/server/db";
+
+const account = privateKeyToAccount(
+  process.env.NEXT_PUBLIC_TEST_WALLET_PRIVATE_KEY as `0x${string}`,
+);
+
+test.beforeEach(async ({ page }) => {
+  try {
+    await db.ballot.delete({ where: { voterId: account.address } });
+  } catch (error) {}
+  await page.goto("http://localhost:3000/projects");
+});
+
+test.afterEach(async () => {
+  try {
+    await db.ballot.delete({ where: { voterId: account.address } });
+  } catch (error) {}
+});
+
+test("Submit Ballot flow", async ({ page }) => {
+  // Make sure page has loaded
+  await expect(
+    page.locator("a").filter({ hasText: "Alpha InsidersBringing you" }),
+  ).toBeVisible();
+
+  // Connect wallet
+  await page.waitForSelector(`[data-testid="connect-wallet"]`);
+  await page.getByTestId("connect-wallet").click();
+  await page.getByTestId("rk-auth-message-button").click();
+
+  await expect(page.getByRole("button", { name: "0x39…dBEC" })).toBeVisible();
+
+  await page.waitForTimeout(500);
+  // Select 2 projects to add to ballot
+  await page
+    .locator("a")
+    .filter({ hasText: "Alpha InsidersBringing you" })
+    .getByRole("button")
+    .click();
+  await page
+    .locator("a")
+    .filter({ hasText: "Bankless AcademyBankless" })
+    .getByRole("button")
+    .click();
+
+  await page.waitForTimeout(1000);
+  await page.getByRole("button", { name: "Add 2 projects to ballot" }).click();
+
+  await page
+    .locator("a")
+    .filter({ hasText: "Castle CapitalCastle Capital" })
+    .click();
+  await expect(page.getByText("0x516272...82308bEE0")).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "https://www.castlecapital.vc/" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Castle Capital" }),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "Add to ballot" }).click();
+  await page.getByLabel("allocation-input").fill("5000");
+  await page.getByLabel("allocation-input").press("Enter");
+
+  await page.getByRole("link", { name: "View ballot", exact: true }).click();
+
+  // Ballot page
+  await page
+    .getByRole("row", { name: "Alpha Insiders" })
+    .getByLabel("allocation-input")
+    .click();
+  await page
+    .getByRole("row", { name: "Alpha Insiders" })
+    .getByLabel("allocation-input")
+    .fill("5000");
+  await page
+    .getByRole("row", { name: "Alpha Insiders" })
+    .getByLabel("allocation-input")
+    .press("Tab");
+  await page
+    .getByRole("row", { name: "Bankless Academy" })
+    .getByLabel("allocation-input")
+    .fill("2000");
+  await page
+    .getByRole("row", { name: "Bankless Academy" })
+    .getByLabel("allocation-input")
+    .blur();
+
+  await page.getByRole("button", { name: "Submit ballot" }).click();
+  await page.waitForTimeout(500);
+  await page.getByRole("button", { name: "Submit ballot" }).click();
+
+  await expect(
+    page.getByRole("heading", { name: "Your vote has been received 🥳" }),
+  ).toBeVisible();
+
+  /*
+
+
+  - Distribute
+    - Create profile
+    - Create pool
+    - 
+
+  - Select projects
+  - Add to ballot
+  - Edit ballot
+  - Submit ballot
+
+  - Add list to ballot
+  - Edit list votes
+
+  - Create application
+  - Approve application
+
+  - Add voters
+
+  */
+});

next.config.js

@@ -42,6 +42,27 @@ const config = {
       },
     ],
   },
+
+  async headers() {
+    return [
+      {
+        source: "/api/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Credentials", value: "true" },
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value:
+              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default config;

package.json

@@ -4,17 +4,24 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "next build",
+    "build": "prisma generate && next build",
     "db:push": "prisma db push",
     "db:studio": "prisma studio",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",
     "test": "vitest",
+    "playwright:browser": "playwright install chromium",
+    "synpress:wallet-cache": "synpress",
+    "pretest:e2e": "npm run playwright:browser",
+    "test:e2e": "playwright test --project=chromium",
+    "test:server": "node testServer.mjs",
+    "test:codegen": "playwright codegen",
     "eas:registerSchemas": "npx tsx src/lib/eas/registerSchemas"
   },
   "dependencies": {
     "@allo-team/allo-v2-sdk": "^1.0.39",
+    "@ethereum-attestation-service/eas-contracts": "^1.7.1",
     "@ethereum-attestation-service/eas-sdk": "^1.5.0",
     "@hookform/resolvers": "^3.3.4",
     "@next-auth/prisma-adapter": "^1.0.7",
@@ -26,6 +33,9 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@rainbow-me/rainbowkit": "2",
     "@rainbow-me/rainbowkit-siwe-next-auth": "^0.3.4",
     "@t3-oss/env-nextjs": "^0.8.0",
@@ -37,14 +47,15 @@
     "@trpc/next": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
+    "@vercel/analytics": "^1.2.2",
     "@vercel/blob": "^0.19.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
     "date-fns": "^3.3.1",
     "ethers": "^6.11.1",
     "formidable": "^3.5.1",
     "graphql-request": "^6.1.0",
-    "lucide-react": "^0.368.0",
+    "lucide-react": "^0.436.0",
     "next": "^14.1.0",
     "next-auth": "^4.24.5",
     "next-themes": "^0.2.1",
@@ -57,22 +68,27 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.3",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-number-format": "^5.3.1",
     "react-use": "^17.5.0",
+    "recharts": "^2.12.7",
     "siwe": "^2.1.4",
     "slugify": "^1.6.6",
     "sonner": "^1.4.0",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.1.20",
     "url-slug": "^4.0.1",
+    "uuid": "^10.0.0",
     "viem": "2.x",
     "wagmi": "2",
     "zod": "3.22.4"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.0",
+    "@playwright/test": "1.44.0",
+    "@synthetixio/synpress": "4.0.0-alpha.7",
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^6.3.0",
     "@types/eslint": "^8.56.2",
@@ -82,6 +98,7 @@
     "@types/papaparse": "^5.3.14",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-react": "^4.2.1",
@@ -99,6 +116,7 @@
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "prisma": "^5.8.1",
+    "serve": "^14.2.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",

playwright.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig, devices } from "@playwright/test";
+import Dotenv from "dotenv";
+
+Dotenv.config({ path: [".env", ".env.test"], override: true });
+
+export default defineConfig({
+  testDir: "test/e2e",
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 10000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: "html",
+  use: {
+    actionTimeout: 0,
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    headless: false,
+  },
+  // start local web server before tests
+  webServer: [
+    {
+      command: "npm run test:server",
+      url: "http://localhost:3000",
+      timeout: 60000,
+      reuseExistingServer: true,
+    },
+  ],
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  outputDir: "test-results",
+});