StarknetKit
Docs
Getting Started
Usage

Usage

New Project

The fastest way to get started is using the StarknetKit boilerplate, which includes StarknetKit, Starknet-React, and Next.js:

npx create-demo-starknetkit-app

Follow the prompts to name your project and complete the setup.

ℹ️

The template includes a basic example of how to use StarknetKit with Starknet-react. Note that you can also use StarknetKit without starknet-react.

Manual Installation

⚠️

It is assumed that you already have a starknet-react project. If not, please refer to the without starknet-react guide.

To get started with integrating the StarknetKit SDK in your dApp with starknet-react, you will need to install the StarknetKit package and its peer dependencies:

npm install starknetkit

The following steps Next up, we’ll go ahead to create a starknet-provider.jsx 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.

Imports

To get started, we'll need to import the StarknetConfig and publicProvider components.

import { InjectedConnector } from "starknetkit/injected"
import { WebWalletConnector } from "starknetkit/webwallet"
ℹ️

If you face import errors with typescript, head to your tsconfig.json, and update your moduleResolution and module to use Bundler and ES2015 respectively.

Defining chains, providers and connectors

Within our App, we'll create an array of connectors. Erase Starknet-react's connectors array and replace it with this one. We are now using StarknetKit's connectors. This will be further passed as a prop to the StarknetConfig component.

const connectors = [
  new InjectedConnector({
    options: { id: "argentX", name: "Argent X" },
  }),
  new InjectedConnector({
    options: { id: "braavos", name: "Braavos" },
  }),
  new WebWalletConnector({ url: "https://web.argent.xyz" }),
]
ℹ️

If, for some reason, you prefer to use only one of Argent X or Argent Mobile, you can do so by using the InjectedConnector of Argent X or the Argent Mobile connector.

Your app should already have a StarknetConfig component. If not, create one.

return (
  <StarknetConfig
    chains={[mainnet, sepolia]}
    provider={publicProvider()}
    connectors={connectors as Connector[]}
    explorer={voyager}
  >
    {children}
  </StarknetConfig>
)

You'll need to wrap your entire application with the provider we just created, in order to have access to all specified configurations. If you already use starknet-react, it should already be the case. Where to call the component depends on your app framework. For a basic React app, it would be in App.jsx. For Next.js, it would be either in _app.jsx for page router or in app/layout.tsx for app router.

export default function App() {
  return (
    <StarknetProvider>
      <Home />
    </StarknetProvider>
  );
}

You can now use Starknetkit connectors using starknet-react hooks. Know that Starknetkit's connect function brings more efficiency and config flexibility than starknet-react's. Something like this:

'use client';
 
import {
  Connector,
  useAccount,
  useConnect,
  useDisconnect,
} from '@starknet-react/core';
import { StarknetkitConnector, useStarknetkitConnectModal } from 'starknetkit';
 
export function WalletConnectorModal() {
  const { disconnect } = useDisconnect();
 
  const { connect, connectors } = useConnect();
  const { starknetkitConnectModal } = useStarknetkitConnectModal({
    connectors: connectors as StarknetkitConnector[],
  });
 
  async function connectWallet() {
    const { connector } = await starknetkitConnectModal();
    if (!connector) {
      return;
    }
    await connect({ connector: connector as Connector });
  }
 
  const { address } = useAccount();
 
  if (!address) {
    return (
      <button
        onClick={connectWallet}
        className=" text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors p-4"
      >
        Connect Wallet
      </button>
    );
  }
  return (
    <div className="flex flex-col gap-2">
      <div className="p-2 bg-gray-100 rounded-lg ">
        Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
      </div>
      <button
        onClick={() => disconnect()}
        className="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
      >
        Disconnect
      </button>
    </div>
  );
}
ℹ️

It is also possible to use a custom modal by directly using the connectors prop from useConnect but it is not advised.

Et voilà !

Getting StartedGeneral UX Guidelines