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 in any existing or new starknet-react project.

One big plus of using starknet-react is that it provides you with the opportunity to customize the look and feel of your pop-up modal for wallet connections.

Installations

To get started, you will need to install the StarknetKit and starknet-react packages.

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

ℹ️

The connectors we provide are currently just compatible with starknet-react v2

Starknet Provider

Next up, 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.

Imports

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

import { InjectedConnector } from "starknetkit/injected";
import { ArgentMobileConnector } from "starknetkit/argentMobile";
import { WebWalletConnector } from "starknetkit/webwallet";
import { mainnet, sepolia } from "@starknet-react/chains";
import { StarknetConfig, publicProvider } from "@starknet-react/core";

ℹ️

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 chains, and connectors. This will be further passed as a prop to the StarknetConfig component.

const chains = [mainnet, sepolia]
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(),
]

We'll then proceed by Swaddling our app with the StarknetConfig component. This provides a React Context for the application beneath to utilize shared data and hooks.

return(
  <StarknetConfig
  chains={chains}
  provider={publicProvider()}
  connectors={connectors}
  >
    {children}
  </StarknetConfig>
)

Finally, we'll head to our App.js and wrap our entire application with the provider we just created, in order to have access to all specified configurations.

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

Establishing connection

Having configured our starknet-provider component, we can now easily utilize hooks from starknet-react to establish wallet connections, carry out dapp interactions and so many more.

Here's a simple application that utilizes starknet-react to establish wallet connections:

  import React from "react";
 
  import { InjectedConnector } from "starknetkit/injected";
  import { ArgentMobileConnector } from "starknetkit/argentMobile";
  import { WebWalletConnector } from "starknetkit/webwallet";
  import { mainnet, sepolia } from "@starknet-react/chains";
  import { StarknetConfig, publicProvider } from "@starknet-react/core";
 
  interface StarknetProviderProps {
      children: React.ReactNode;
  }
 
  export default function StarknetProvider({children}: StarknetProviderProps) {
      const chains = [
          mainnet, sepolia
      ]
      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}
          provider={publicProvider()}
          connectors={connectors}
          >
            {children}
          </StarknetConfig>
      )
  }

Starknekit Modal Starknetjs 101