Usage

Installation

To get started with integrating the StarknetKit SDK in your dApp, you will need to install the StarknetKit package and its peer dependencies:

npm install starknetkit

Imports

After installation, we get access to different methods, such as connect, disconnect, etc. We should import them for use in our application. Add this to your connect wallet component file:

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:

const { wallet, connector, connectorData } = await connect({})

The default order of connectors is as follows:

Ready Wallet (formerly Argent X)
Braavos

The order of connectors can be changed by passing connectors argument to the connect method.

import { connect } from "starknetkit"
import { WebWalletConnector } from "starknetkit/webwallet"
import { InjectedConnector } from "starknetkit/injected"
 
 
 
const handleConnect = async () => {
    const { wallet, connectorData } = await connect({
      modalMode: 'alwaysAsk',
      modalTheme: 'system',
      connectors: [
        new InjectedConnector({
        options: { id: "argentX", name: "Ready Wallet (formerly Argent)" },
        }),
        new InjectedConnector({
          options: { id: "braavos", name: "Braavos" },
        })
      ],
    });
 
    if (wallet && connectorData) {
      setConnection(wallet);
      setAddress(connectorData.account || '');
    }
  };

ℹ️

Connect function parameters types are: ConnectOptions or ConnectOptionsWithConnectors.

ConnectOptions is used to connect with the default connectors
ConnectOptionsWithConnectors is used to connect with specific connectors (or define a custom order).

export interface ConnectOptions extends GetWalletOptions {
  dappName?: string
  modalMode?: "alwaysAsk" | "canAsk" | "neverAsk"
  modalTheme?: "light" | "dark" | "system"
  storeVersion?: StoreVersion | null
  resultType?: "connector" | "wallet"
  webWalletUrl?: string
  readyOptions: ReadyConnectorOptions
}
 
export interface ConnectOptionsWithConnectors
  extends Omit<ConnectOptions, "webWalletUrl" | "readyOptions"> {
  connectors?: StarknetkitConnector[]
}

To reconnect to a previously connected wallet on load:

const { wallet, connectorData } = await connect({ modalMode: "neverAsk" })

Example:

useEffect(() => {
  const connectToStarknet = async () => {
    const { wallet, connectorData } = await connect({ modalMode: "neverAsk" })
 
    if (wallet && connectorData != null) {
      setConnection(wallet)
      setAddress(wallet.selectedAddress)
    }
  }
 
  connectToStarknet()
}, [])

Connection parameters

  interface ConnectOptions {
    readyOptions?: ReadyConnectorOptions
    dappName?: string
    connectors?: StarknetkitConnector[] // can be used to define a custom order for the connectors
    modalMode?: "alwaysAsk" | "canAsk" | "neverAsk"
    modalTheme?: "light" | "dark" | "system"
    storeVersion?: StoreVersion | null
    webWalletUrl?: string
    resultType?: "connector" | "wallet"
    sort?: Sort
    include?: FilterList
    exclude?: FilterList
  }
 
  interface ReadyConnectorOptions {
    dappName?: string
    projectId?: string // wallet connect project id
    chainId?: constants.NetworkName
    description?: string
    url?: string
    icons?: string[]
    rpcUrl?: string
  }

Disconnecting wallet

To disconnect an existing connection, simply call the disconnect method from our imports, then set previously defined states to undefined:

await disconnect()

Example:

const disconnectWallet = async () => {
  await disconnect()
 
  setConnection(undefined)
  setAddress("")
}

Disconnection Params

await disconnect({ clearLastWallet: true })

General UX Guidelines Starknetkit Modal