Quickstart

Get started with Axiom V2 on Goerli Testnet

What are we building?

In this Quickstart documentation, we'll be building an basic Next.js web app that implements an Axiom client-side prover to generate a ZK proof of a user's average account balance over the past

Start by cloning this Quickstart repository:

https://github.com/axiom-crypto/axiom-quickstart

Setting up environment variables

You'll need a key from Alchemy and a project ID from WalletConnect to place in your environmental variables. You can make a copy of and rename .env.local.example to .env.local:

.env.local

NEXT_PUBLIC_ALCHEMY_KEY=<alchemy key>
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=<walletconnect project ID>
NEXT_PUBLIC_MOCK=true

Package installation

Install required node.js packages with the following command:

Terminal

npm install

AxiomREPL

We'll first build a circuit in AxiomREPL. AxiomREPL allows developers to specify data fetching and computation for their specific use cases. This circuit will be exported as a client-side prover that will run in the user's browser, with the values in the inputs panel (bottom) that will be overridden by values provided by the Next.js web app. We've included this AxiomREPL link with the code:

https://repl.axiom.xyz?gist=a0ae0d93983ceb1f9c57e4bfe045bb13

Code

The same code in the above link is below:

AxiomREPL: Code

// Number of periods to run for; must be constant so circuit is deterministic
const periods = 10;

// Get the total account balance over the periods
let total = witness(0);
for (let i = 0; i < periods; i++) {
    const targetBlock = sub(endBlock, mul(constant(i), blockInterval));
    const bal = getAccount(targetBlock, user).balance().toCircuitValue();
    total = add(total, bal);
}

// Divide by number of periods to get the average account balance
const avgBalance = div(total, constant(periods));

// Add the average account balance to the callback
addToCallback(avgBalance);

AxiomREPL: Inputs

{
    "user": "0xf591C4c1e179A5E16407116882f7F8a524D51d14",
    "endBlock": 10000000,
    "blockInterval": 50000
}

Export

We want to export the TypeScript circuit.ts file, which we'll place into the cloned Quickstart repo:

Export the TypeScript circuit from AxiomREPL

Copy the exported circuit.ts file into the following directory inside the Quickstart, overriding the current file that's there:

src/components/axiom/worker/circuit.ts

Now, you have everything that you need to send a Query into the AxiomV2Query contract.

Sending a Query

In order to send a Query, you can start the Next.js dev server and go through a potential user flow:

1. Run the development server

npm run dev

The development server will start at the default address of http://localhost:3000. which you can open in your web browser.

Generating client-side proofs is only supported in Google Chrome and Safari. Firefox is currently not supported.

2. Connect your wallet

3. Click the Build and Send Query button (query will require 0.0205 Goerli ETH)

Viewing the sent Query

All Queries and their statuses are visible in Axiom Explorer (V2 Goerli w/ mock proofs).

Example Query send from the Quickstart example

The callback transaction contains an event that has the axiomResults data (the average balance of the account):

Callback axiomResults data is just directly emitted from the deployed ExampleClient contract

Using the data in your contract

The callback will output the results of the addToCallback calls (in the order that you called addToCallback) as an array of bytes32[] values.

See the Handling Axiom Callbacks section for more information.

Deployment Addresses

See Contract Addresses.