Effortlessly connect your dapps to Starknet with StarknetKit

StarknetKit is a development SDK that enables developers to effortlessly build and connect their dApps to Starknet with Starknet.js.

Some of the amazing features that come with the StarknetKit SDK are:

1. Easy implementation: No matter your skill level, you shouldn’t have trouble with integrating StarknetKit. This can be done with one line of code, and there’s detailed documentation to help you get started.
2. Flexible customizations: With StarknetKit unlike the existing get-starknet, you have the ability to choose which wallets you want to show to dApps and the order in which you show them.
3. Easily add custom connectors: one of the biggest advantages StarknetKit presents is the ability to easily add custom connectors to the existing package thanks to the modular structure we’ve implemented (inspired by starknet-react).

Integrating the StarknetKit SDK in your dApp

We've made it easy for you to integrate this SDK. In this section, I’m going to walk you through integrating the StarknetKit SDK in your dApps.

To get started, we need to set up a React application. You could do this, by running the create-react-app command:

npx create-react-app my-app

Having done that, we’d need to install the `starknetkit` SDK. To do this, run the command below:

yarn add starknetkit

or for use with npm:

npm install starknetkit

Installing the starknetkit package exposes some important methods for use in your dApps.

For the purpose of this guide, we are going to import just two major ones: connect and disconnect

import { connect, disconnect } from 'starknetkit'

Establishing a connection

To establish a wallet connection, we need to call the connect method which was earlier imported like this:

const connection = await connect();

This method exposes some further methods that can be useful to get the connected address, check the status of the connection, etc. Here are a few we’ll be using as we go forward:

• isConnected - This method available after an attempt to establish a connection, can be used to confirm if an account was truly connected.
• selectedAddress - This method can be called to get the wallet address of a connected account.
• account - This method gives us access to the account object. It uses starknet.js AccountInterface and extends the starknet.js Provider.

const [connection, setConnection] = useState('');

const [account, setAccount] = useState('');

const [address, setAddress] = useState('');

PS: Remember to import the useState and useEffect Hooks, to avoid compilation errors.

import  { useState, useEffect } from 'react'

Now we’d write our full function logic for establishing a connection:

const connectWallet = async() => {

const connection = await connect({ 

    modalMode: "neverAsk", webWalletUrl: "https://web.argent.xyz" 

});

 if(connection && connection.isConnected){

     setConnection(connection);

     setProvider(connection.account);

     setAddress(connection.selectedAddress);

 }

}

First, we call the connect method and save the promise returned to the `connection` variable, then we check if the connection was established, and if yes, we go ahead to initialize the connection , account , and address states from earlier.

NB: the `webWalletUrl` argument is only necessary if you want to include the email login option.

Disconnection Logic

To disconnect an existing connection, simply call the disconnect method from our imports:

const disconnectWallet = async() => {

   await disconnect();

   setConnection(undefined);

   setProvider(undefined);

   setAddress('');
}

Connecting on Reload

Lastly, we might want to check for an existing connection on browser reload, and automatically re-establish our connection if one exists:

useEffect(() => {

const connectToStarknet = async () => {

   const connection = await connect({ 

       modalMode: "neverAsk", webWalletUrl: "https://web.argent.xyz" 
 
   }); 

   if(connection && connection.isConnected){

     setConnection(connection);

     setProvider(connection.account);

     setAddress(connection.selectedAddress);

   }

 };

 connectToStarknet();

}, [])

Having done all these, we just successfully integrated the StarknetKit SDK into our dApp 🎉.

Integrating StarknetKit with Starknet-react

Starknet-react is an open-source collection of React providers and hooks designed by the Apibara team for Starknet.

Our modular design greatly inspired by starknet-react, ensures you can easily integrate StarknetKit into any existing or new starknet-react project in a few simple steps.

Firstly, we’ll need to install starknet-react dependencies. To do that, simply run:

npm install @starknet-react/chains @starknet-react/core

Then we’ll go ahead to create a starknet-provider component which will contain all our configurations. In here we’ll need to specify the `chains` our dApp exists on, the `provider` we’ll be using for calls, and our `connectors`.

import { InjectedConnector } from "starknetkit/injected";

import { ArgentMobileConnector } from "starknetkit/argentMobile";

import { WebWalletConnector } from "starknetkit/webwallet";

import { mainnet } from "@starknet-react/chains";

import { StarknetConfig, publicProvider } from "@starknet-react/core";


export default function StarknetProvider({children}) {

   const chains = [mainnet]

   const providers = [publicProvider()]

   const connectors = [

      new InjectedConnector({ options: {id: "braavos", name: "Braavos" }}),

      new InjectedConnector({ options: {id: "argentX", name: "Argent X" }}),

      new WebWalletConnector({ url: "https://web.argent.xyz" }),

      new ArgentMobileConnector(),

   ]

   return(

      <StarknetConfig

        chains={chains}

        providers={providers}

        connectors={connectors}

      >

         {children}

      </StarknetConfig>

   )

}

NB: for this guide, we used the default publicProvider(), available with starknet-react, but you can decide to use custom RPCs from providers such as Infura, Alchemy, etc.

Having configured and exported our starknet-provider, we are going to then wrap our app with the provider we just created:

<StarknetProvider>
    <Home />
</StarknetProvider>

Having done these we should now be able to access starknet-react hooks from any component wrapped by the root provider.

You can refer to the documentation for a more detailed guide.

Conclusion

In conclusion, we’re very excited about StarknetKit and are proud to have launched with AVNU, briqNFT, and StarknetID, we can’t wait to see how it’s adopted by the Starknet community!

If you have any questions, please contact me @0xdarlington, I’d love to help you build on Starknet with Argent.

For more developer resources, follow us across our socials:

Twitter — @argentHq

Engineering Twitter — @argentDeveloper

LinkedIn — @argentHq

Youtube — @argentHQ

‍