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

We'll also need to replace the Injectors from starknet-react with the ones from starknetkit to ensure we have full access to all Injectors.

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";

Defining chains, providers and connectors

Within our App, we'll create an array of chains, providers and connectors. This will be further passed as a prop to the StarknetConfig component.

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

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={provider}
  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 } 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" }}), 
      ]
 
      return(
          <StarknetConfig
          chains={chains}
          providers={providers}
          connectors={connectors}
          >
              {children}
          </StarknetConfig>
      )
  }

ℹ️

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

Starknekit Modal Starknetjs 101