Installing frontend NPM packages

npm i zero-wallet-wagmi-connector

Zero wallet connector

First of all, we need to create our wagmi connector using the ZeroWalletConnector class.

You can see the following example code for initializing the connector :

import { chain } from 'wagmi'
import { 
    ZeroWalletConnector, 
    ZeroWalletConnectorOptions } 
from 'zero-wallet-wagmi-connector'

const zeroWalletConnectorOptions: ZeroWalletConnectorOptions;

const connector = new ZeroWalletConnector({
    chains: [chain.goerli],
    options: zeroWalletConnectorOptions
});

Parameters

{
  chains?: Chain[];
  options: ZeroWalletConnectorOptions;
}

chains : An array containing chains to be added to the connector, you can use wagmi chain object. You can find more about it here.

options : an object of the following type :

type ZeroWalletConnectorOptions = {
    jsonRpcProviderUrl: string;
    store: string;
    recoveryMechanism: string;
    gasTankName: string;
    zeroWalletServerEndpoints: ZeroWalletServerEndpoints;
};

jsonRpcProviderUrl : link to your provider

store : Defines the way the connector stores data related to Zerowallet (e.g. private key, nonce etc.), for now we only support browser option for this (you need to pass 'browser' to this param).

recoveryMechanism : The type of the recovery mechanism you'd like to include (We only support GDrive for now - you need to pass 'google' to this param).

gasTankName : The name of the gas tank we want to interact with, note that this name should match the one in the backend YAML file.

zeroWalletServerEndpoints : Server endpoints that the docker service exposes, Should match the following type :

type ZeroWalletServerEndpoints = {
    nonceProvider: string;
    nonceRefresher: string;
    authorizer: string;
    gasStation: string;
    transactionBuilder: string;
    scwDeployer: string;
};

nonceProvider : API endpoint to retrieve the nonce for a given Zerowallet.

nonceRefresher : API endpoint to refresh the nonce for a given Zerowallet.

authorizer : API endpoint to add the given Zerowallet to the authorized users list.

gasStation : API endpoint to send a transaction to the blockchain.

transactionBuilder : API endpoint to build a transaction.

scwDeployer : API endpoint to deploy the SCW for a given Zerowallet.

Zero wallet signer

All the Zerowallet functionalities are wrapped inside the ZeroWalletSigner which you can access as follows:

const { data: signer, status } = useSigner<ZeroWalletSigner>()

How to interact with Zerowallet Signer

signer.authorize() => Promise<void>

Adds the current user to the authorized users list, which means this user can now use all Zerowallet functionalities.

Note that signer.authorize() should be called only one time for a certain user,

in case of calling this function for an authorized user, it will throw an error.

signer.deployScw() => Promise<void>

Deploys the Smart Contract Wallet (SCW) for an authorized Zerowallet. The user should be authorized, otherwise this function will throw an error.

signer.refreshNonce() => Promise<void>

Refreshes the expired nonce for the given Zerowallet. The user should be authorized at least once before, otherwise this function will throw an error.

signer.getNonce() => Promise<string>

Returns the current nonce of signed in user. In cases of unauthorized given user or expired nonce, this function will throw errors.