Sailos

ReactJS

Installation

bun i @omnid/react

This SDK is only for the Web, React-Native based users should use zk-expo instead. Here is a tutorial on Intergating this on the Web.

Making Proofs

useProof Hook

Example,

import { useProof } from '@omnid/react';
const rsa = {
    wasmUrl: 'https://proxy.anudit.workers.dev/corsproxy?apiurl=https://cdn.omnid.io/api/public/dl/fKe9TQJo/rsa.wasm',
    zkeyUrl: 'https://proxy.anudit.workers.dev/corsproxy?apiurl=https://cdn.omnid.io/api/public/dl/fKe9TQJo/rsa_gzip.zkey'
};
const { downloaded, downloadProgress, makeProof } = useProof(rsa, { gzippedZkey: true });
const { proof, publicSignals, calldata, timeTaken } = await makeProof(input);

We use a CORS proxy to bypass few CORS errors while downloading assets on a Website.

Reference,

const useProof = (
  circuitFiles: { wasmUrl: string; zkeyUrl: string },
  options?: {
    differDownload?: boolean;
    gzippedZkey?: boolean;
    gzippedWasm?: boolean;
    disableCache?: boolean;
  }
): {
  wasmBuffer: Uint8Array | null;
  zkeyBuffer: Uint8Array | null;
  downloaded: boolean;
  downloadProgress: string | null;
  download: () => Promise<boolean>;
  computeWitness: (wasm_buffer: Buffer, inputs: CircuitSignals) => Promise<Uint8Array>;
  makeProof: (inputs: CircuitSignals) => Promise<{
    proof: Groth16Proof;
    publicSignals: PublicSignals;
    timeTaken: number;
    calldata: any;
  }>;
  clearCache: () => Promise<void>;
}

Managing Localstorage

Usage,

import { storeUint8Array, removeUint8Array, retrieveUint8Array } from "@omnid/react";

Reference,

storeUint8Array

async function storeUint8Array(
    key: string,
    uint8ArrayData: Uint8Array,
    storeName = 'circuit-cache'
): Promise<void>

removeUint8Array

async function removeUint8Array(
    key: string,
    storeName = 'circuit-cache'
): Promise<void>

retrieveUint8Array

async function retrieveUint8Array(
    key: string,
    storeName = 'circuit-cache'
): Promise<Uint8Array | null>

Tracking Events

useWebSocket hook

Instead of waiting for the chain to emit the event you can subscribe to the relay for incoming transaction hashes for your channel.

Example,

import { useWebSocket, WebSocketMessageHandler } from "@omnid/react";
 
const handleMessage: WebSocketMessageHandler = (data) => {
  alert(data.message, data.channel);
};
 
useWebSocket("YourZKHash", handleMessage, true, false);

Reference,

export const useWebSocket = (
  channelId: string,
  onMessage: WebSocketMessageHandler,
  active: boolean = false,
  shouldReconnect: boolean = false,
): WebSocket | null

Managing Passkeys

import { Passkey } from '@omnid/react';

create

Reference,

 

Usage,

const { data: credential, error } = await Passkey.create({
    appName: "Bio Demo",
    username: "Omnid Devicekey"
});
console.log({ credential })

getPublicKeyFromAttestationResponse

Reference,

 

Usage,

const { data: publicKey } = Passkey.getPublicKeyFromAttestationResponse({
    response,
} as { response: AuthenticatorAttestationResponse });

importPublicKeyAsCryptoKey

Usage,

const publicKeyAsCryptoKey = await Passkey.importPublicKeyAsCryptoKey(
    publicKey as ArrayBuffer
);
const exported = await window.crypto.subtle.exportKey(
    "jwk",
    publicKeyAsCryptoKey as CryptoKey
);

importPublicKeyAsCryptoKey

Usage,

const { data: assertion, response, error } = await Passkey.auth(Buffer.from(localId.id, 'base64'), challenge);

verifySignature

Usage,

const verificationData = await Passkey.verifySignature({ publicKey, assertation });

On this page