✨ webapp: get deliverables on server

webapp/app/chain.ts

@@ -0,0 +1,11 @@
+import { baseGoerli, foundry, type Chain } from 'viem/chains';
+import { deliverableAddress as deliverable } from './contracts';
+import type { Address } from 'viem';
+
+const chain = {
+  [baseGoerli.id]: baseGoerli,
+  [foundry.id]: foundry,
+}[Object.keys(deliverable)[0]] as Chain;
+
+export default chain;
+export const deliverableAddress = (deliverable as Record<number, Address>)[chain.id];

webapp/app/page.tsx

@@ -1,3 +1,14 @@
+import getDeliverables from '../server/getDeliverables';
+
 export default async function Home() {
-  return <main></main>;
+  const deliverables = await getDeliverables();
+  return (
+    <main>
+      <ul>
+        {deliverables.map((id) => (
+          <li key={String(id)}>{String(id)}</li>
+        ))}
+      </ul>
+    </main>
+  );
 }

webapp/client/wagmi.ts

@@ -1,16 +1,18 @@
 'use client';
 
-import { foundry } from 'viem/chains';
-import { createConfig, http } from 'wagmi';
 import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
+import { createConfig, http } from 'wagmi';
+import { foundry } from 'viem/chains';
 import { test } from '../e2e/utils/connectors';
+import chain from '../app/chain';
 
 const projectId = 'f1e5a989573bf31c595b3642fffa6036';
 
 export const config = createConfig({
-  chains: [foundry],
-  transports: { [foundry.id]: http() },
-  connectors: JSON.parse(process.env.NEXT_PUBLIC_E2E ?? 'false')
-    ? [test()]
-    : [injected(), coinbaseWallet({ appName: 'receba' }), walletConnect({ projectId })],
+  chains: [chain],
+  transports: { [chain.id]: http() },
+  connectors:
+    chain.id === foundry.id
+      ? [test()]
+      : [injected(), coinbaseWallet({ appName: 'receba' }), walletConnect({ projectId })],
 });

webapp/package.json

@@ -6,12 +6,12 @@
     "test": "concurrently 'npm:test:*' --group -c auto",
     "test:e2e": "playwright test",
     "test:eslint": "eslint --max-warnings 0 .",
-    "e2e:next": "npm run e2e:setup && export NEXT_PUBLIC_FOUNDRY=true && next build --no-lint && next start",
-    "e2e:setup": "npm -w @receba/scripts run webapp:setup",
+    "e2e:next": "npm run e2e:setup && export CHAIN=localhost && next build --no-lint && next start",
+    "e2e:setup": "npm -w @receba/scripts run webapp:setup && CHAIN=localhost wagmi generate",
     "dev": "concurrently 'npm:dev:*' --kill-others -c auto",
     "dev:anvil": "anvil",
-    "dev:next": "npm run e2e:setup && rm -rf .next/cache/fetch-cache && NEXT_PUBLIC_FOUNDRY=true next dev",
-    "postinstall": "concurrently npm:dev:anvil npm:e2e:setup --kill-others --success first --hide 0,1"
+    "dev:next": "npm run e2e:setup && rm -rf .next/cache/fetch-cache && CHAIN=localhost next dev",
+    "postinstall": "wagmi generate"
   },
   "dependencies": {
     "@tanstack/react-query": "rc",
@@ -35,7 +35,7 @@
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.11",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@wagmi/cli": "alpha",
+    "@wagmi/cli": "2.0.0-alpha.6",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.1",
     "daisyui": "^3.9.2",

webapp/playwright.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   ],
   webServer: [
     { command: 'npm run dev:anvil', url: 'http://localhost:8545' },
-    { command: 'npm run e2e:next', url: 'http://localhost:3000', env: { NEXT_PUBLIC_E2E: 'true' } },
+    { command: 'npm run e2e:next', url: 'http://localhost:3000' },
   ],
   expect: { timeout: 6_666 },
   timeout: 66_666,

webapp/server/getDeliverables.ts

@@ -0,0 +1,21 @@
+'use server';
+
+import { cache } from 'react';
+import { revalidateTag } from 'next/cache';
+import { getFunctionSelector } from 'viem';
+import { readContract, readContracts } from '@wagmi/core';
+import { deliverableAddress as address } from '../app/chain';
+import { deliverableAbi as abi } from '../app/contracts';
+import { config } from './wagmi';
+
+export default cache(async function getDeliverables() {
+  const total = Number(await readContract(config, { functionName: 'totalSupply', abi, address }));
+  return readContracts(config, {
+    allowFailure: false,
+    contracts: [...Array(total)].map((_, i) => ({ functionName: 'tokenByIndex', args: [i], abi, address })),
+  });
+});
+
+export async function revalidate() {
+  revalidateTag(`${address}:${getFunctionSelector('totalSupply()')}`);
+}

webapp/server/wagmi.ts

@@ -1,10 +1,10 @@
 import { rpc } from 'viem/utils';
-import { foundry } from 'viem/chains';
 import { createConfig } from '@wagmi/core';
 import { createPublicClient, createTransport, fallback, RpcRequestError, type TransactionRequest } from 'viem';
+import appChain from '../app/chain';
 
 export const config = createConfig({
-  chains: [foundry],
+  chains: [appChain],
   storage: null,
   connectors: [],
   syncConnectedChain: false,

webapp/wagmi.config.ts

@@ -1,19 +1,16 @@
-import { foundry as chain } from 'viem/chains';
+import { readFileSync, readdirSync } from 'fs';
 import { defineConfig } from '@wagmi/cli';
 import { getAddress } from 'viem';
-import { foundry } from '@wagmi/cli/plugins';
-import { address as receba } from '../deployments/localhost/Receba.json' assert { type: 'json' };
-import { address as deliverable } from '../deployments/localhost/Deliverable.json' assert { type: 'json' };
+
+const deployments = `../deployments/${process.env.CHAIN ?? 'testnet'}`;
+const chainId = Number(readFileSync(`${deployments}/.chainId`));
 
 export default defineConfig({
   out: 'app/contracts.ts',
-  plugins: [
-    foundry({
-      project: '..',
-      deployments: {
-        Receba: { [chain.id]: getAddress(receba) },
-        Deliverable: { [chain.id]: getAddress(deliverable) },
-      },
+  contracts: readdirSync(deployments)
+    .filter((file) => file.endsWith('.json'))
+    .map((file) => {
+      const { abi, address } = JSON.parse(readFileSync(`${deployments}/${file}`).toString());
+      return { name: file.replace('.json', ''), abi, address: { [chainId]: getAddress(address) } };
     }),
-  ],
 });