StarknetKit SDK

A beginner's guide to the StarknetKit SDK

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 which we should import for use in our application:

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 connection = await connect();

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

const connectWallet = async() => {
  const connection = await connect();
 
  if(connection && connection.isConnected) {
    setConnection(connection)
    setProvider(connection.account)
    setAddress(connection.selectedAddress)
  }
 }

And to reconnect to a previously connected wallet on load:

const connection = await connect( { modalMode: "neverAsk" } )

Example:

useEffect(() => {
 
  const connectToStarknet = async () => {
	
    const connection = await connect( { modalMode: "neverAsk" } )
	
    if (connection && connection.isConnected) {
      setConnection(connection);
      setProvider(connection.account);
      setAddress(connection.selectedAddress);
    }
  };
	
  connectToStarknet();
}, [])

Connection Parameters

{
  alwaysShowDiscovery = true,
  modalMode = {"canAsk", "neverAsk"},
  storeVersion = getStoreVersionFromBrowser(),
  modalTheme -> "system" is the default | "dark" | "light"
  dappName -> name of dapp
  webWalletUrl = DEFAULT_WEBWALLET_URL,
  argentMobileOptions,
  connectors = [],
}

Please refer to the ArgentMobileConnector section to view available options for argentMobileOptions

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);
  setProvider(undefined);
  setAddress('');
}

Disconnection Params

await disconnect({ clearLastWallet: true })

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. It uses starknet.js(opens in a new tab) AccountInterface and extends the starknet.js Provider.

For more detailed info on the different connectors, how to use StarknetKit with starknet-react and many more guides, please check out the official starknetkit docs.