# Installing frontend NPM packages

```typescript
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 : 

<pre class="language-typescript"><code class="lang-typescript">import { chain } from 'wagmi'
import { 
    ZeroWalletConnector, 
    ZeroWalletConnectorOptions } 
from 'zero-wallet-wagmi-connector'

const zeroWalletConnectorOptions: ZeroWalletConnectorOptions;

<strong>const connector = new ZeroWalletConnector({
</strong>    chains: [chain.goerli],
    options: zeroWalletConnectorOptions
});
</code></pre>

### Parameters

```typescript
{
  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](https://wagmi.sh/react/constants/chains).&#x20;

**options :** an object of the following type :&#x20;

```typescript
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).&#x20;

**`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).&#x20;

**`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](https://docs.zerowallet.org/running-the-docker-service) exposes, Should match the following type :&#x20;

```typescript
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.&#x20;

## Zero wallet signer

All the Zerowallet functionalities are wrapped inside the `ZeroWalletSigner` which you can access as follows:&#x20;

```typescript
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.

{% hint style="info" %}
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.
{% endhint %}

### signer.deployScw() => Promise\<void>

Deploys the [#smart-contract-wallet-scw](https://docs.zerowallet.org/how-does-zerowallet-work#smart-contract-wallet-scw "mention") 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.