Vanilla JS/TS

JavaScript

A common way to interact with blockchain is to make calls and send transactions from JavaScript, most often from a web browser. vlayer provides developer friendly JavaScript/TypeScript API - vlayer SDK. It combines well with the standard way of interacting with smart contracts.

Installation

To install vlayer SDK, run the following command in your JavaScript application

yarn add @vlayer/sdk

npm i @vlayer/sdk

pnpm i @vlayer/sdk

bun i @vlayer/sdk

vlayer client

A vlayer client is an interface to vlayer JSON-RPC API methods to trigger and follow the status of proving. It also provides convenient access to specific vlayer features such as Web Proofs and Email Proofs.

Initialize a client with default prover.

import { createVlayerClient } from '@vlayer/sdk'
 
const vlayer = createVlayerClient();

Initialize a client with prover with specific url.

import { createVlayerClient } from '@vlayer/sdk'
 
const vlayer = createVlayerClient({
  proverUrl: 'http://localhost:3000',
})

Proving

In order to start proving, we will need to provide:

• address - an address of prover contract
• proverAbi - abi of prover contract
• functionName - name of prover contract function to call
• args - an array of arguments to functionName prover contract function
• chainId - id of the chain in whose context the prover contract call shall be executed

import { foundry } from 'viem/chains'
import { proverAbi } from './proverAbi'

const hash = await vlayer.prove({
    address: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
    proverAbi,
    functionName: 'main',
    args: ['0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', 123],
    chainId: foundry,
})

Waiting for result

Wait for the proving to be finished, and then retrieve the result along with Proof.

const result = await vlayer.waitForProvingResult({ hash });

By default, the waitForProvingResult function polls the server for a proof for 2 minutes. This is achieved through 120 retries with a polling interval of 1 second. You can customize this behavior by specifying the following optional parameters:

• numberOfRetries: The total number of polling attempts.
• sleepDuration: The delay (in ms) between each polling attempt. For example, if you want to extend the polling duration to 180 seconds with a 2-second delay between attempts, you can configure it as follows:

const provingResult = await vlayer.waitForProvingResult({
  numberOfRetries: 90,  // Total retries (180s / 2)
  sleepDuration: 2000,  // 2s interval between retries
});

Verification

Once we have obtained proving result, we can call verifier contract (below example demonstrates how to use createAnvilClient function for that purpose).

import { verifierAbi } from './verifierAbi'
import { testHelpers } from '@vlayer/sdk'

testHelpers.createAnvilClient().writeContract({
    abi: verifierAbi,
    address,
    account,
    functionName: 'verify',
    args: result,
})