chore: wagmi

cawfree · Nov 5, 2022 · f42cbea · f42cbea
1 parent e3e5dcf
commit f42cbea
Show file tree

Hide file tree

Showing 5 changed files with 1,946 additions and 45 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -9,13 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@rainbow-me/rainbowkit": "0.7.4",
+    "ethers": "^5.7.2",
+    "ffjavascript": "0.2.57",
     "foundry": "*",
-    "ethers": "5.7.2",
-    "ffjavascript": "^0.2.57",
     "next": "13.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "snarkjs": "0.5.0"
+    "snarkjs": "0.5.0",
+    "wagmi": "0.7.12"
   },
   "devDependencies": {
     "@babel/core": "7.19.6",

diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
@@ -0,0 +1,52 @@
+import '@rainbow-me/rainbowkit/styles.css';
+
+import * as React from 'react';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import {
+  getDefaultWallets,
+  RainbowKitProvider,
+} from '@rainbow-me/rainbowkit';
+import {
+  chain,
+  configureChains,
+  createClient,
+  WagmiConfig,
+} from 'wagmi';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import {Main as Environment} from 'foundry';
+
+const {rpcUrl} = Environment;
+
+const { chains, provider } = configureChains(
+  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum, chain.localhost],
+  [
+    jsonRpcProvider({
+      rpc: () => ({http: rpcUrl}),
+    })
+  ]
+);
+
+const {connectors} = getDefaultWallets({
+  appName: 'zk-starter',
+  chains
+});
+
+const wagmiClient = createClient({
+  autoConnect: false,
+  connectors,
+  provider
+})
+
+export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+  return (
+    <WagmiConfig client={wagmiClient}>
+      <RainbowKitProvider chains={chains} coolMode>
+        <Head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        </Head>
+        <Component {...pageProps} />
+      </RainbowKitProvider>
+    </WagmiConfig>
+  );
+}
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -5,29 +5,62 @@ import * as ffjavascript from 'ffjavascript';
 
 import mainWitnessCalculator from '../public/Main_witness_calculator';
 import {ethers, Wallet} from 'ethers';
+import {ConnectButton} from '@rainbow-me/rainbowkit';
+import {useAccount, useProvider, useSigner} from "wagmi";
 
 const {
   ANVIL_DEFAULT_WALLET_PRIVATE_KEY_DO_NOT_USE_YOU_WILL_GET_REKT,
-  rpcUrl,
   contractAddress,
   abi,
 } = Environment;
 
+const deployEther = async ({
+  to,
+  provider,
+  amount = ethers.utils.parseEther('1'),
+}: {
+  readonly to: string;
+  readonly provider: ethers.providers.Provider;
+  readonly amount?: ethers.BigNumber;
+}) => {
+  const wallet = new Wallet(
+    ANVIL_DEFAULT_WALLET_PRIVATE_KEY_DO_NOT_USE_YOU_WILL_GET_REKT,
+    provider,
+  );
+
+  const signedTransaction = await wallet.signTransaction(
+    await wallet.populateTransaction({
+      to,
+      value: amount,
+      chainId: (await provider.getNetwork()).chainId,
+    })
+  );
+
+  return provider.sendTransaction(signedTransaction);
+};
+
 export default function Main(): JSX.Element {
 
+  const {isConnected} = useAccount();
+  const provider = useProvider();
+  const {data: signer} = useSigner({
+    // TODO: config
+    //chainId: 1337,
+  });
+
   const onAttemptVerify = React.useCallback(() => void (async () => {
-    const provider = new ethers.providers.JsonRpcProvider(rpcUrl);
-    const wallet = new Wallet(
-      ANVIL_DEFAULT_WALLET_PRIVATE_KEY_DO_NOT_USE_YOU_WILL_GET_REKT,
-      provider,
-    );
 
-    const contract = new ethers.Contract(contractAddress, abi, wallet);
+    if (!signer) throw new Error(`Expected signer, found "${String(signer)}".`);
 
-    const before = await contract.number();
-    await contract.increment();
-    const after = await contract.number();
-    console.log({before, after});
+    const signerAddress = await signer.getAddress();
+
+    // Give the wallet a little ether from the master wallet for the transaction.
+    await deployEther({to: signerAddress, provider});
+
+    const contract = new ethers.Contract(contractAddress, abi, signer);
+    const currentSignerBalance = ethers.utils.formatEther(await provider.getBalance(signerAddress));
+
+    console.log({currentSignerBalance});
 
     // TODO: turn this into a module
     const [wasm, verificationKey] = await Promise.all([
@@ -39,8 +72,8 @@ export default function Main(): JSX.Element {
     const witnessCalculator = await mainWitnessCalculator(wasm);
 
     const witnessBuffer = await witnessCalculator.calculateWTNSBin(
-      {a: 3, b: 11},
-      0,
+        {a: 3, b: 11},
+        0,
     );
 
     // @ts-ignore
@@ -61,8 +94,16 @@ export default function Main(): JSX.Element {
 
     const isValidEthereum = await contract.verifyProof(...JSON.parse(`[${calldata}]`));
     console.log({isValidEthereum});
-  })(), []);
+  })(), [provider, signer]);
+
+  if (!isConnected) return <ConnectButton />;
 
-  // eslint-disable-next-line react/no-children-prop
-  return <button children="Verify" onClick={onAttemptVerify} />;
+  return (
+    <div>
+      connected
+      <button onClick={onAttemptVerify}>
+        run verifiable computation
+      </button>
+    </div>
+  );
 }
diff --git a/packages/foundry/scripts/dev.ts b/packages/foundry/scripts/dev.ts
@@ -63,7 +63,7 @@ const pipe = (
 child_process.execSync('forge build', {stdio: 'inherit'});
 
 void (async () => Promise.all([
-  pipe(child_process.exec('anvil')),
+  pipe(child_process.exec('anvil --chain-id 1337')),
 
   // Wait a little time to spin up the deployment.
   new Promise(resolve => setTimeout(resolve, 1000))