Getting Started

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 { wallet } = await connect();

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

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

And to reconnect to a previously connected wallet on load:

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

Example:

useEffect(() => {
 
  const connectToStarknet = async () => {
	
    const { wallet } = await connect( { modalMode: "neverAsk" } )
	
    if (wallet && wallet.isConnected) {
      setConnection(wallet);
      setProvider(wallet.account);
      setAddress(wallet.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 = [],
}

Custom providers

We provide you with the option to use a custom provider with StarknetKit. To do this, simply pass in a provider parameter to the connect method:

const connection = await connect({
  provider: new RpcProvider({
    nodeUrl: <RPC_PROVIDER>
  }),
})

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.

General UX guidelines

We've created StarknetKit to be the all-in-one SDK for Starknet development, catering for users across both mobile and web browsers. To fully take advantage of StarknetKit, we recommend you heed to the guidelines below.

For Desktops

For desktop users, depending on your use case, you can go with either the full connection options or choose to implement particular connectors.

For Mobile web

For mobile web browsers, we recommend showing options to connect with either mobile apps or web wallet (since extensions are not suppported).

For In-App Mobile browsers

For in-app mobile browsers, e.g Argent Mobile, we recommend auto-connecting users to the mobile app once the "connect" button is clicked, without popping up a modal.

For dapps that use starknet-react, you could achieve this by checking if the user is in an in-app browser and if yes connect automatically. You could make reference to the Argent Mobile (opens in a new tab) section.

Integrating the network switcher

For dApps across both Starknet mainnet and testnet, you would find the network switcher very useful.

The wallet_switchStarknetChain can be used by dapps to request that the wallet switches its active Starknet Network.

For integration guides, check out our official docs (opens in a new tab).