Exporting a Client Side Prover

Going from AxiomREPL to your app

Circuit Export

When you select the Export > Export TypeScript circuit option in AxiomREPL, a circuit.ts file will be downloaded with all the artifacts specific to your circuit that are required to run the circuit inside your own application. Namely, circuit.ts includes: the circuit size and configuration, default circuit inputs and their types, the circuit verification key, and your circuit code. This is all exported as a singular circuit object.

To add this into a React app, first install @axiom-crypto/react using a package manager such as npm/yarn/pnpm.

Terminal

npm install @axiom-crypto/react

AxiomCircuitProvider

In order to use this in your Next.js 13 app, you'll need to wrap AxiomCircuitProvider in its own file to ensure that it's only mounted once:

src/axiomProvider.tsx

"use client";

import { useEffect, useState } from "react";
import { AxiomCircuitProvider } from '@axiom-crypto/react';
import { circuit } from "@/lib/circuit";  // REPLACE w/ path to exported circuit.ts

export default function AxiomProvider({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <AxiomCircuitProvider
      circuit={circuit}
      providerUri={process.env.NEXT_PUBLIC_PROVIDER_URI_GOERLI as string}
      chainId={5}
      mock={true}
    >
      {mounted && children}
    </AxiomCircuitProvider>
  )
}

and in your layout file:

src/layout.tsx

return (
  ...
    <AxiomProvider>
      {children}
    </AxiomProvider>
  ...
)

useAxiomCircuit

Then you can use the useAxiomCircuit hook to get built queries inside your application:

const circuit = useAxiomCircuit();

// you may need to wrap the `setParams` call in a useEffect hook to prevent an
// infinite reload loop 
useEffect(() => {
    circuit.setParams(inputs, callback);
}, [circuit, inputs, callback]);
const builtQuery = circuit.builtQuery;

// can now use builtQuery to send an on-chain Query to Axiom

Hook functionality

The following functions and variables are available from the useAxiomCircuit hook:

axiom

The Axiom instance variable. Exposes useful things like the AxiomV2Query contract address and ABI.

setParams

Function to set the inputs and callback.

areParamsSet

Boolean that returns true if inputs and callback are set, or false otherwise.

build

Async function to build the inputs and callback along with the provided circuit into a Query to be sent to AxiomV2Query.

builtQuery

The full builtQuery variable that contains all inputs required for calling sendQuery on AxiomV2Query.

payment

Variable that gives the calculated payment amount for the Query.

reset

Function to reset the inputs and callback variables.