Docs
Getting Started

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 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.

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.