Skip to content

Getting Started

Overview

Starknet Start is a collection of React hooks for Starknet. It combines the following packages:

Setup

Installation

Start by installing Starknet React.

npm
npm add @starknet-start/chains @starknet-start/providers @starknet-start/react

Configure the provider

The next step is to configure the Starknet provider. You need to configure the following:

  • chains: a list of chains supported by your dapp.
  • provider: the JSON-RPC provider you want to use.
  • connectors: the wallet connectors supported by your dapp. See the wallets page for more information.

Starknet React provides the useInjectedConnectors hook to merge a static list of recommended connectors with a dynamic list of injected connectors.

components/starknet-provider.tsx
"use client";
import { mainnet, sepolia } from "@starknet-start/chains";
import { publicProvider } from "@starknet-start/providers";
import { StarknetConfig } from "@starknet-start/react";
 
export function StarknetProvider({ children }: { children: React.ReactNode }) {
  const chains = [sepolia, mainnet];
 
  const provider = publicProvider();
 
  return (
    <StarknetConfig chains={chains} provider={provider}>
      {children}
    </StarknetConfig>
  );
}

Wrap your app in the provider

Wrap your app in the provider just created.

app.tsx
import { StarknetProvider } from "@/components/starknet-provider";
 
export function App() {
  return (
    <StarknetProvider>
      <YourApp />
    </StarknetProvider>
  );
}

Notice that if you are using Next.js app routes, you should place the provider in the root layout file.

app/layout.tsx
import { StarknetProvider } from "@/components/starknet-provider";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <StarknetProvider>{children}</StarknetProvider>
      </body>
    </html>
  );
}

Using hooks

You can now use the Starknet React hooks from any component wrapped by the root provider!