# Set up guide

{% hint style="info" %}
For more information on web wallet integrations, refer to the [StarknetKit documentation](https://www.starknetkit.com/docs/latest/connectors/web-wallet)
{% endhint %}

### Installation

To get started with integrating the web wallet SDK in your dApp, you will need to install the **\`starknetkit\`** package and its peer dependencies:

```bash
  yarn add starknetkit
```

or for usage with NPM:

```bash
  npm install starknetkit
```

#### Imports

After installation, we get access to different methods, such as `connect` , `disconnect`, etc which we should import for use in our application:

```js
import { connect, disconnect } from 'starknetkit'
```

#### Establishing a connection

To establish a wallet connection, we need to call the `connect` method which was imported earlier like this:

```javascript
const connection = await connect();
```

Below is an example function that establishes a connection, then sets the `connection`, `provider`, and `address` states:

```js
const connectWallet = async() => {
  const connection = await connect({webWalletUrl: "https://web.argent.xyz"});

  if(connection && connection.isConnected) {
    setConnection(connection)
    setProvider(connection.account)
    setAddress(connection.selectedAddress)
  }
 }
```

And to reconnect to a previously connected wallet on load:

```js
const connection = await connect({modalMode: "neverAsk", webWalletUrl: "https://web.argent.xyz"})
```

{% hint style="info" %}
It's important to note that web wallet is only available for users on mainnet. If as a dApp for integration and testing purposes, you need access to an internal testnet environment, please contact Argent privately.
{% endhint %}

For a detailed guide on how to integrate web wallet in starknet-react based applications, please refer to the [StarknetKit documentation](https://www.starknetkit.com/docs/latest/starknetkit-with-starknet-react/basics).

### Signing transactions

Signing transactions in web wallet is similar to how it's done using the Argent X browser extension.

```javascript
const tx = await connection.account.execute({
   //let's assume this is an erc20 contract
   contractAddress: "0x...",
   selector: "transfer",
   calldata: [
	"0x...",
	// ...
   ]
})
```

It will show up like this to the user:

<figure><img src="/files/x8lcOSYJNtNpn82XXejm" alt=""><figcaption></figcaption></figure>

If the user's wallet is already funded it will ask the user to confirm the transaction. The dapp will get feedback if the user has confirmed or rejected the transaction request. If confirmed, the dapp will get a transaction hash.

**Users wallet is not funded**

In a case where the user has no funds, the user is guided through the “Add funds” screens where they can go to on-ramps and more. We tried to make the funding process of new wallets as easy as possible with regards KYC. Once this process is completed, the user's wallet will be funded and now ready to be deployed.

**Users wallet is not deployed**

After a user has funded their wallet, they are ready for their first transaction. The wallet deployment will be done along the first transaction and is almost invisible to the user. Just note that a connected wallet may not be deployed yet.


---

# 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.ready.co/ready-wallets/web-wallet/set-up-guide.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.