chore: add anvil to tests

package.json

@@ -44,13 +44,15 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@celo/devchain-anvil": "12.0.0-canary.49",
     "@tanstack/eslint-plugin-query": "^5.28.6",
     "@types/dompurify": "^3",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
+    "@viem/anvil": "^0.0.10",
     "autoprefixer": "^10.4.20",
     "critters": "^0.0.25",
     "daisyui": "^4.9.0",
@@ -87,7 +89,9 @@
     "typecheck": "tsc",
     "lint": "next lint",
     "start": "next start",
-    "test": "vitest",
+    "test": "yarn test:L1 && yarn test:L2",
+    "test:L1": "VITE_ANVIL_CELO_VERSION=L1 vitest",
+    "test:L2": "VITE_ANVIL_CELO_VERSION=L2 vitest",
     "prettier": "prettier --write ./src",
     "checks": "yarn typecheck && yarn lint && yarn test && yarn prettier && yarn build:app"
   },

src/config/config.ts

@@ -1,4 +1,4 @@
-import { celo, celoAlfajores } from 'viem/chains';
+import { celo, celoAlfajores, Chain } from 'viem/chains';
 
 interface Config {
   debug: boolean;
@@ -10,7 +10,7 @@ interface Config {
   infuraApiKey: string;
   upstashKey: string;
   watchBlockNumber: boolean;
-  chain: typeof chain;
+  chain: Chain;
 }
 
 const isDevMode = process?.env?.NODE_ENV === 'development';
@@ -47,7 +47,7 @@ const chain = {
         },
         testnet: true,
       }),
-};
+} as Chain;
 
 export const config: Config = Object.freeze({
   debug: isDevMode,

src/test/anvil/constants.ts

@@ -0,0 +1,27 @@
+import { readFileSync } from 'fs';
+
+export const VITE_ANVIL_CELO_VERSION = process.env.VITE_ANVIL_CELO_VERSION as 'L1' | 'L2';
+
+if (!['L1', 'L2'].includes(VITE_ANVIL_CELO_VERSION)) {
+  throw new Error(
+    'Missing or incorrect environment variable "VITE_ANVIL_CELO_VERSION", must be L1 or L2',
+  );
+}
+export const ANVIL_STATE_PATH = require.resolve(
+  VITE_ANVIL_CELO_VERSION === 'L1'
+    ? '@celo/devchain-anvil/devchain.json'
+    : '@celo/devchain-anvil/l2-devchain.json',
+);
+const json = JSON.parse(readFileSync(ANVIL_STATE_PATH).toString());
+export const FORK_BLOCK_NUMBER = BigInt(json.block.number as `0x${string}`);
+
+export const ANVIL_CHAIN_ID = 12345;
+export const ANVIL_FORK_URL = 12345;
+
+export const ANVIL_BASE_HOST = '127.0.0.1:8545';
+
+export const TEST_MNEMONIC =
+  'concert load couple harbor equip island argue ramp clarify fence smart topic';
+export const TEST_BALANCE = 1000000;
+export const TEST_GAS_PRICE = 0;
+export const TEST_GAS_LIMIT = 20000000;

src/test/anvil/setup.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from 'vitest';
+import { FORK_BLOCK_NUMBER, TEST_BALANCE } from './constants';
+import { testClient, walletClient } from './utils';
+
+test('anvil is setup', async () => {
+  await expect(walletClient.getAddresses()).resolves.toMatchInlineSnapshot(`
+      [
+        "0x5409ED021D9299bf6814279A6A1411A7e866A631",
+      ]
+    `);
+
+  await expect(
+    testClient.getBalance({ address: (await walletClient.getAddresses())[0] }),
+  ).resolves.toBe(BigInt(TEST_BALANCE) * 10n ** 18n);
+  await expect(testClient.getBlobBaseFee()).resolves.toBe(0n);
+  await expect(testClient.getBlockNumber()).resolves.toBe(FORK_BLOCK_NUMBER);
+});

src/test/anvil/setup.ts

@@ -0,0 +1,13 @@
+import { fetchLogs } from '@viem/anvil';
+import { afterEach } from 'vitest';
+import { ANVIL_BASE_HOST } from './constants';
+import { pool } from './utils';
+
+afterEach(async (context) => {
+  context.onTestFailed(async () => {
+    // If a test fails, you can fetch and print the logs of your anvil instance.
+    const logs = await fetchLogs(`http://${ANVIL_BASE_HOST}`, pool);
+    // Only print the 20 most recent log messages.
+    console.log(...logs.slice(-20));
+  });
+});

src/test/anvil/utils.ts

@@ -0,0 +1,37 @@
+import { createTestClient, createWalletClient, http, publicActions, type Chain } from 'viem';
+import { mnemonicToAccount } from 'viem/accounts';
+import { celoAlfajores } from 'viem/chains';
+import { ANVIL_BASE_HOST, ANVIL_CHAIN_ID, TEST_MNEMONIC } from './constants';
+
+/**
+ * The id of the current test worker.
+ *
+ * This is used by the anvil proxy to route requests to the correct anvil instance.
+ */
+export const pool = Number(process.env.VITEST_POOL_ID ?? 1);
+export const anvil = {
+  ...celoAlfajores,
+  id: ANVIL_CHAIN_ID,
+  rpcUrls: {
+    default: {
+      http: [`http://${ANVIL_BASE_HOST}/${pool}`],
+      webSocket: [`ws://${ANVIL_BASE_HOST}/${pool}`],
+    },
+    public: {
+      http: [`http://${ANVIL_BASE_HOST}/${pool}`],
+      webSocket: [`ws://${ANVIL_BASE_HOST}/${pool}`],
+    },
+  },
+} as const satisfies Chain;
+
+export const testClient = createTestClient({
+  chain: anvil,
+  mode: 'anvil',
+  transport: http(),
+}).extend(publicActions);
+
+export const walletClient = createWalletClient({
+  chain: anvil,
+  account: mnemonicToAccount(TEST_MNEMONIC),
+  transport: http(),
+});

src/test/globalSetup.ts

@@ -0,0 +1,26 @@
+import { startProxy } from '@viem/anvil';
+import {
+  ANVIL_CHAIN_ID,
+  ANVIL_STATE_PATH,
+  TEST_BALANCE,
+  TEST_GAS_LIMIT,
+  TEST_GAS_PRICE,
+  TEST_MNEMONIC,
+} from './anvil/constants';
+
+export default async function setup() {
+  await startProxy({
+    port: 8545,
+    host: '::', // By default, the proxy will listen on all interfaces.
+    options: {
+      chainId: ANVIL_CHAIN_ID,
+      state: ANVIL_STATE_PATH,
+      mnemonic: TEST_MNEMONIC,
+      balance: TEST_BALANCE,
+      gasPrice: TEST_GAS_PRICE,
+      gasLimit: TEST_GAS_LIMIT,
+      blockBaseFeePerGas: 0,
+      stopTimeout: 1000,
+    },
+  });
+}

vitest.config.js → vitest.config.ts

@@ -3,5 +3,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     globals: true,
+    globalSetup: ['./src/test/globalSetup.ts'],
+    setupFiles: ['./src/test/anvil/setup.ts'],
   },
 });

yarn.lock

@@ -60,6 +60,7 @@ __metadata:
     "@celo/abis": "npm:^11.0.0"
     "@celo/abis-12": "npm:@celo/[email protected]"
     "@celo/compliance": "npm:^1.0.24"
+    "@celo/devchain-anvil": "npm:12.0.0-canary.49"
     "@headlessui/react": "npm:^1.7.19"
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6"
     "@metamask/post-message-stream": "npm:6.1.2"
@@ -75,6 +76,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^7.4.0"
     "@typescript-eslint/parser": "npm:^7.4.0"
     "@vercel/analytics": "npm:^1.3.0"
+    "@viem/anvil": "npm:^0.0.10"
     autoprefixer: "npm:^10.4.20"
     bignumber.js: "npm:^9.1.2"
     clsx: "npm:^2.1.1"
@@ -134,6 +136,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@celo/devchain-anvil@npm:12.0.0-canary.49":
+  version: 12.0.0-canary.49
+  resolution: "@celo/devchain-anvil@npm:12.0.0-canary.49"
+  checksum: 10/7f3e359a41dde6f50b64eab91f8d3fc5aa16892767d34ae172a703eae499dc0d98df2527b2ff25fb2240a846d0b6364f6acea274cd2269c1dbccb584e9f6f83c
+  languageName: node
+  linkType: hard
+
 "@coinbase/wallet-sdk@npm:4.0.4":
   version: 4.0.4
   resolution: "@coinbase/wallet-sdk@npm:4.0.4"
@@ -2811,6 +2820,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@viem/anvil@npm:^0.0.10":
+  version: 0.0.10
+  resolution: "@viem/anvil@npm:0.0.10"
+  dependencies:
+    execa: "npm:^7.1.1"
+    get-port: "npm:^6.1.2"
+    http-proxy: "npm:^1.18.1"
+    ws: "npm:^8.13.0"
+  checksum: 10/8e688b9b2a7f4f90b5b7d9669bc73b20b37f05cd09646bce0fd934e582ac067bf8006c23f49d7dc0af4aa4261d863fe52730372afc0e377931da78deb1eb68bf
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:2.1.1":
   version: 2.1.1
   resolution: "@vitest/expect@npm:2.1.1"
@@ -5368,6 +5389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eventemitter3@npm:^4.0.0":
+  version: 4.0.7
+  resolution: "eventemitter3@npm:4.0.7"
+  checksum: 10/8030029382404942c01d0037079f1b1bc8fed524b5849c237b80549b01e2fc49709e1d0c557fa65ca4498fc9e24cff1475ef7b855121fcc15f9d61f93e282346
+  languageName: node
+  linkType: hard
+
 "events@npm:3.3.0, events@npm:^3.3.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"
@@ -5392,6 +5420,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"execa@npm:^7.1.1":
+  version: 7.2.0
+  resolution: "execa@npm:7.2.0"
+  dependencies:
+    cross-spawn: "npm:^7.0.3"
+    get-stream: "npm:^6.0.1"
+    human-signals: "npm:^4.3.0"
+    is-stream: "npm:^3.0.0"
+    merge-stream: "npm:^2.0.0"
+    npm-run-path: "npm:^5.1.0"
+    onetime: "npm:^6.0.0"
+    signal-exit: "npm:^3.0.7"
+    strip-final-newline: "npm:^3.0.0"
+  checksum: 10/473feff60f9d4dbe799225948de48b5158c1723021d19c4b982afe37bcd111ae84e1b4c9dfe967fae5101b0894b1a62e4dd564a286dfa3e46d7b0cfdbf7fe62b
+  languageName: node
+  linkType: hard
+
 "execa@npm:~8.0.1":
   version: 8.0.1
   resolution: "execa@npm:8.0.1"
@@ -5578,6 +5623,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.0.0":
+  version: 1.15.9
+  resolution: "follow-redirects@npm:1.15.9"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 10/e3ab42d1097e90d28b913903841e6779eb969b62a64706a3eb983e894a5db000fbd89296f45f08885a0e54cd558ef62e81be1165da9be25a6c44920da10f424c
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -5746,7 +5801,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stream@npm:^6.0.0":
+"get-port@npm:^6.1.2":
+  version: 6.1.2
+  resolution: "get-port@npm:6.1.2"
+  checksum: 10/e3c3d591492a11393455ef220f24c812a28f7da56ec3e4a2512d931a1f196d42850b50ac6138349a44622eda6dc3c0ccd8495cd91376d968e2d9e6f6f849e0a9
+  languageName: node
+  linkType: hard
+
+"get-stream@npm:^6.0.0, get-stream@npm:^6.0.1":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
   checksum: 10/781266d29725f35c59f1d214aedc92b0ae855800a980800e2923b3fbc4e56b3cb6e462c42e09a1cf1a00c64e056a78fa407cbe06c7c92b7e5cd49b4b85c2a497
@@ -6032,6 +6094,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http-proxy@npm:^1.18.1":
+  version: 1.18.1
+  resolution: "http-proxy@npm:1.18.1"
+  dependencies:
+    eventemitter3: "npm:^4.0.0"
+    follow-redirects: "npm:^1.0.0"
+    requires-port: "npm:^1.0.0"
+  checksum: 10/2489e98aba70adbfd8b9d41ed1ff43528be4598c88616c558b109a09eaffe4bb35e551b6c75ac42ed7d948bb7530a22a2be6ef4f0cecacb5927be139f4274594
+  languageName: node
+  linkType: hard
+
 "http-shutdown@npm:^1.2.2":
   version: 1.2.2
   resolution: "http-shutdown@npm:1.2.2"
@@ -6056,6 +6129,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"human-signals@npm:^4.3.0":
+  version: 4.3.1
+  resolution: "human-signals@npm:4.3.1"
+  checksum: 10/fa59894c358fe9f2b5549be2fb083661d5e1dff618d3ac70a49ca73495a72e873fbf6c0878561478e521e17d498292746ee391791db95ffe5747bfb5aef8765b
+  languageName: node
+  linkType: hard
+
 "human-signals@npm:^5.0.0":
   version: 5.0.0
   resolution: "human-signals@npm:5.0.0"
@@ -8919,6 +8999,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"requires-port@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "requires-port@npm:1.0.0"
+  checksum: 10/878880ee78ccdce372784f62f52a272048e2d0827c29ae31e7f99da18b62a2b9463ea03a75f277352f4697c100183debb0532371ad515a2d49d4bfe596dd4c20
+  languageName: node
+  linkType: hard
+
 "resolve-from@npm:^4.0.0":
   version: 4.0.0
   resolution: "resolve-from@npm:4.0.0"
@@ -9293,7 +9380,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"signal-exit@npm:^3.0.3":
+"signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
   checksum: 10/a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
@@ -10764,6 +10851,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.13.0":
+  version: 8.18.0
+  resolution: "ws@npm:8.18.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/70dfe53f23ff4368d46e4c0b1d4ca734db2c4149c6f68bc62cb16fc21f753c47b35fcc6e582f3bdfba0eaeb1c488cddab3c2255755a5c3eecb251431e42b3ff6
+  languageName: node
+  linkType: hard
+
 "ws@npm:~8.11.0":
   version: 8.11.0
   resolution: "ws@npm:8.11.0"