# Tokenbound Connectkit

## **Introduction**

Tokenbound gives NFTs unimaginable capabilities. They empower NFTs to do everything a normal wallet can do. But connecting tokenbound accounts to dApps and executing transactions might be a little bit more complex, as the `execute` method can only be called by the owner of the NFT bound to the Tokenbound account.

With this connectkit, dApps can now enable tokenbound accounts to seamlessly connect and use their dApps like every normal account on Starknet.

### **Installation**

{% tabs %}
{% tab title="pnpm" %}
pnpm install tokenbound-connectkit
{% endtab %}

{% tab title="yarn " %}
yarn add tokenbound-connectkit
{% endtab %}

{% tab title="npm" %}
npm install tokenbound-connectkit
{% endtab %}
{% endtabs %}

### Imports

After installing the package, we get access to different methods and types, such as `connect`, `disconnect`,  `TBAStarknetWindowObject`etc which we should import for use in our application.

```jsx
import {
  connect,
  disconnect,
  TBAStarknetWindowObject,
} from "tokenbound-connectkit";
```

Now let's take a look at what these methods are:

* **connect**: This method is used to establish a connection with the tokenbound account. It provides us with an iFrame that takes in the address of the tokenbound.
* **disconnect**: This method is used to disconnect the tokenbound account from your dApp.
* **TBAStarknetWindowObject**: A type that specifies the kind of data the wallet connection returns.

### **Establishing a connection**

To establish a wallet connection, we need to call the connect method which we imported earlier. Before that, we need to declare the state variables.

```typescript
  const [connection, setConnection] = useState<
    TBAStarknetWindowObject | null | undefined
  >(null);
  const [account, setAccount] = useState();
```

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

```javascript
  const connectFn = async () => {
    try {
      const { wallet } = await connect({
        tokenboundOptions: {
          chainId: constants.NetworkName.SN_MAIN,
        },
      });
      setConnection(wallet);
      setAccount(wallet?.account);
      setAddress(wallet?.selectedAddress)
    } catch (e) {
      console.error(e);
      alert((e as any).message);
    }
  };
```

#### Connection parameters

```typescript
export interface TokenboundConnectorOptions {
  chainId: string
  policies?: PolicyOption[]
}
```

### **Disconnecting an account**

To disconnect an account, the below function simply calls the disconnect method and set the connection to `null`:

```typescript
   const disconnectFn = async () => {
    await disconnect();
    setAddress("")
    setAccount(undefined)
    setConnection(null);
  };
```

### Available methods

1. `isConnected` - This method available after an attempt to establish a connection, can be used to confirm if an account was truly connected.
2. `selectedAddress` - This method can be called to get the wallet address of a connected account.
3. `account` - This method gives us access to the account object.&#x20;

Reference the [tokenbound-connectkit-example](https://github.com/horuslabsio/tokenbound-conneckit-example) repository for an example implementation.


---

# 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.tbaexplorer.com/toolings/tokenbound-connectkit.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.