StarknetKit
Docs
Getting Started
Without starknet-react

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:

  • Argent X
  • Braavos
  • Argent Mobile
  • Argent Web Wallet

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: "Argent X" },
        }),
        new InjectedConnector({
          options: { id: "braavos", name: "Braavos" },
        }),
        new WebWalletConnector({ url: "https://web.argent.xyz" }),
      ],
    });
 
    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
  argentMobileOptions: ArgentMobileConnectorOptions
}
 
export interface ConnectOptionsWithConnectors
  extends Omit<ConnectOptions, "webWalletUrl" | "argentMobileOptions"> {
  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 && wallet.isConnected) {
      setConnection(wallet)
      setAddress(wallet.selectedAddress)
    }
  }
 
  connectToStarknet()
}, [])
Connection parameters
  interface ConnectOptions {
    argentMobileOptions?: ArgentMobileConnectorOptions
    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 ArgentMobileConnectorOptions {
    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 })
Last updated on
General UX GuidelinesStarknetkit Modal