Comment on page
Axiom React Client

Adding Axiom client in the browser
Circuit Export
Once you have written a client circuit, you can integrate it into your React app to create and send Axiom queries directly within your app. 
First install @axiom-crypto/react using a package manager such as npm/yarn/pnpm.
Terminal
npm install @axiom-crypto/react
In order for your webapp to use your circuit, you must compile the circuit first using the CLI. This is so the webapp can load saved build artifacts that ensure you are running the same circuit each time. We recommend adding this compilation step as an npm script:
package.json
"scripts": {
  "buildCircuit": "axiom compile src/lib/circuit/circuit.ts -o src/lib/circuit/build.json"
}
This example script assumes the circuit function is also named circuit and a default input is provided in circuit.ts. See the CLI reference for more options.
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
import circuitBuild from "@/lib/circuit/build.json"; // REPLACE w/ path to build artifacts from circuit compilation
​
export default function AxiomProvider({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
​
  return (
    <AxiomCircuitProvider
      circuit={circuit}
      build={circuitBuild}
      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, callbackAddress, callbackExtraData, refundee);
}, [circuit, inputs, callbackAddress, callbackExtraData, refundee]);
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:
setParams
Function to set the inputs and callback.
setOptions
Function to set the AxiomV2QueryOptions (see here for more details).
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.
reset
Function to reset the inputs and callback variables.
Last modified 11d ago