# 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](/running-the-docker-service.md) 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 [How does Zerowallet work?](/how-does-zerowallet-work.md#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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zerowallet.org/installing-frontend-npm-packages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.