🔗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

pnpm

pnpm install tokenbound-connectkit

yarn

yarn add tokenbound-connectkit

npm

npm install tokenbound-connectkit

Imports

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

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.

  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:

  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

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:

   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.

Reference the tokenbound-connectkit-example repository for an example implementation.