docs: replace wagmi examples with imports (#98)

- updates the wagmi guide
- replaces hard-coded snippets with direct imports to more easily test
and maintain
- removes the default filter value in the tutorial filters

code/wagmi/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

code/wagmi/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+};
+
+export default nextConfig;

code/wagmi/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "wagmi",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.60.4",
+    "@wagmi/connectors": "^5.3.10",
+    "@wagmi/core": "^2.14.6",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "viem": "^2.21.45",
+    "wagmi": "^2.12.32"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}

code/wagmi/src/components/Account.tsx

@@ -0,0 +1,7 @@
+import { useAccount } from 'wagmi';
+
+export function Account() {
+  const { address } = useAccount();
+
+  return <div>{address}</div>;
+}

code/wagmi/src/components/AccountTS.tsx

@@ -0,0 +1,7 @@
+import { fetchAccount } from '@/utils/account';
+
+export function AccountTS() {
+  const address = fetchAccount();
+
+  return <div>{address}</div>;
+}

code/wagmi/src/components/Balance.tsx

@@ -0,0 +1,9 @@
+import { useBalance } from 'wagmi';
+
+export function Balance() {
+  const balance = useBalance({
+    address: '0xBC989fDe9e54cAd2aB4392Af6dF60f04873A033A',
+  });
+
+  return <div>{balance && <p>Balance: {balance.data?.value.toString()}</p>}</div>;
+}

code/wagmi/src/components/BalanceTS.tsx

@@ -0,0 +1,18 @@
+import { fetchBalance } from '@/utils/balance';
+import { useState } from 'react';
+
+export function BalanceTS() {
+  const [balance, setBalance] = useState<bigint>();
+
+  const updateBalance = async () => {
+    const newBalance = await fetchBalance();
+    setBalance(newBalance);
+  };
+
+  return (
+    <div>
+      <button onClick={updateBalance}>Update Balance</button>
+      {balance && <p>Balance: {balance.toString()}</p>}
+    </div>
+  );
+}

code/wagmi/src/components/Block.tsx

@@ -0,0 +1,7 @@
+import { useBlockNumber } from 'wagmi';
+
+export function Block() {
+  const block = useBlockNumber();
+
+  return <div>{block && <p>Block: {block.data?.toString()}</p>}</div>;
+}

code/wagmi/src/components/BlockTS.tsx

@@ -0,0 +1,18 @@
+import { fetchLatestBlockNumber } from '@/utils/block';
+import { useState } from 'react';
+
+export function BlockTS() {
+  const [block, setBlock] = useState<bigint>();
+
+  const updateBlock = async () => {
+    const newBlock = await fetchLatestBlockNumber();
+    setBlock(newBlock);
+  };
+
+  return (
+    <div>
+      <button onClick={updateBlock}>Update Block</button>
+      {block && <p>Block: {block.toString()}</p>}
+    </div>
+  );
+}

code/wagmi/src/components/ConnectWallet.tsx

@@ -0,0 +1,12 @@
+import { injected } from '@wagmi/connectors';
+import { useConnect } from 'wagmi';
+
+export function ConnectWallet() {
+  const { connect } = useConnect();
+
+  return (
+    <div>
+      <button onClick={() => connect({ connector: injected() })}>Connect Wallet</button>
+    </div>
+  );
+}

code/wagmi/src/components/ConnectWalletTS.tsx

@@ -0,0 +1,9 @@
+import { connectWallet } from '@/utils/connect';
+
+export function ConnectWalletTS() {
+  return (
+    <div>
+      <button onClick={connectWallet}>Connect Wallet</button>
+    </div>
+  );
+}

code/wagmi/src/components/ReadContract.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import type { Address, BaseError } from 'viem';
+import { useReadContract } from 'wagmi';
+import * as erc20TokenABI from '../../../frontend-paymaster/contracts/artifacts-zk/contracts/erc20/MyERC20Token.sol/MyERC20Token.json';
+
+const CONTRACT_ADDRESS = '0x9c1a3d7C98dBF89c7f5d167F2219C29c2fe775A7';
+
+export function ReadContract() {
+  return (
+    <div>
+      <div>
+        <BalanceOf />
+        <br />
+        <TotalSupply />
+      </div>
+    </div>
+  );
+}
+
+function TotalSupply() {
+  const { data, isRefetching, refetch } = useReadContract({
+    abi: erc20TokenABI.abi,
+    address: CONTRACT_ADDRESS,
+    functionName: 'totalSupply',
+  });
+
+  console.log('data', data);
+
+  return (
+    <div>
+      Total Supply: {data?.toString()}
+      <button
+        disabled={isRefetching}
+        onClick={() => refetch()}
+        style={{ marginLeft: 4 }}
+      >
+        {isRefetching ? 'loading...' : 'refetch'}
+      </button>
+    </div>
+  );
+}
+
+function BalanceOf() {
+  const [address, setAddress] = useState<Address>('0xBC989fDe9e54cAd2aB4392Af6dF60f04873A033A');
+  const { data, error, isLoading, isSuccess } = useReadContract({
+    abi: erc20TokenABI.abi,
+    address: CONTRACT_ADDRESS,
+    functionName: 'balanceOf',
+    args: [address],
+  });
+
+  const [value, setValue] = useState<string>(address);
+
+  return (
+    <div>
+      Token balance: {isSuccess && data?.toString()}
+      <input
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="wallet address"
+        style={{ marginLeft: 4 }}
+        value={value}
+      />
+      <button onClick={() => setAddress(value as Address)}>{isLoading ? 'fetching...' : 'fetch'}</button>
+      {error && <div>{(error as BaseError).shortMessage}</div>}
+    </div>
+  );
+}

code/wagmi/src/components/ReadContractTS.tsx

@@ -0,0 +1,24 @@
+import { readERC20Contract } from '@/utils/read';
+import { useState } from 'react';
+
+export function ReadContractTS() {
+  const [data, setData] = useState<string>();
+
+  async function updateTotalSupply() {
+    const supply = await readERC20Contract('totalSupply');
+    const newData = supply as bigint;
+    setData(newData.toString());
+  }
+
+  return (
+    <div>
+      {data && <div>Total Supply: {data?.toString()}</div>}
+      <button
+        onClick={updateTotalSupply}
+        style={{ marginLeft: 4 }}
+      >
+        Update Total Supply
+      </button>
+    </div>
+  );
+}

code/wagmi/src/components/SendTx.tsx

@@ -0,0 +1,37 @@
+import { parseEther } from 'viem';
+import { useSendTransaction } from 'wagmi';
+
+export function SendTx() {
+  const { sendTransaction, isError, isPending, isSuccess, data, error } = useSendTransaction();
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target as HTMLFormElement);
+          const address = formData.get('address') as `0x${string}`;
+          const value = formData.get('value') as `${number}`;
+          sendTransaction({
+            to: address,
+            value: parseEther(value),
+          });
+        }}
+      >
+        <input
+          name="address"
+          placeholder="address"
+        />
+        <input
+          name="value"
+          placeholder="value (ether)"
+        />
+        <button type="submit">Send</button>
+      </form>
+
+      {isPending && <div>Transaction pending...</div>}
+      {isSuccess && <div>Transaction Hash: {data}</div>}
+      {isError && <div>Error: {error?.message}</div>}
+    </>
+  );
+}

code/wagmi/src/components/SendTxPrepared.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { parseEther } from 'viem';
+import { usePrepareTransactionRequest, useSendTransaction } from 'wagmi';
+
+export function SendTxPrepared() {
+  const [to, setTo] = useState<`0x${string}`>();
+  const [value, setValue] = useState<string>('0.0');
+
+  const { data: txRequest } = usePrepareTransactionRequest({
+    to,
+    value: parseEther(value as `${number}`),
+  });
+
+  const { sendTransaction, isError, isPending, isSuccess, data, error } = useSendTransaction();
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!txRequest) return;
+          sendTransaction(txRequest);
+        }}
+      >
+        <input
+          placeholder="address"
+          onChange={(e) => setTo(e.target.value as `0x${string}`)}
+          value={to}
+        />
+        <input
+          id="value"
+          placeholder="value (ether)"
+          onChange={(e) => setValue(e.target.value)}
+          value={value?.toString()}
+        />
+        <button
+          disabled={!txRequest}
+          type="submit"
+        >
+          Send
+        </button>
+      </form>
+
+      {isPending && <div>Transaction pending...</div>}
+      {isSuccess && <div>Transaction Hash: {data}</div>}
+      {isError && <div>Error: {error?.message}</div>}
+    </>
+  );
+}

code/wagmi/src/components/SendTxPreparedTS.tsx

@@ -0,0 +1,44 @@
+import { prepareTx } from '@/utils/prepareTx';
+import { useState } from 'react';
+import { config } from '../../wagmi-config';
+import { sendTransaction } from '@wagmi/core';
+
+export function SendTxPreparedTS() {
+  const [data, setData] = useState<string>();
+  const [to, setTo] = useState<`0x${string}`>();
+  const [value, setValue] = useState<string>('0.0');
+
+  return (
+    <>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          if (!to) return;
+          const tx = await prepareTx(to, value as `${number}`);
+          const txData = await sendTransaction(config, tx);
+          setData(txData);
+        }}
+      >
+        <input
+          placeholder="address"
+          onChange={(e) => setTo(e.target.value as `0x${string}`)}
+          value={to}
+        />
+        <input
+          id="value"
+          placeholder="value (ether)"
+          onChange={(e) => setValue(e.target.value)}
+          value={value?.toString()}
+        />
+        <button
+          disabled={!value || !to}
+          type="submit"
+        >
+          Send
+        </button>
+      </form>
+
+      {data && <div>Transaction Hash: {data}</div>}
+    </>
+  );
+}