Skip to content

Getting Started

Overview

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

Setup

Installation

Start by installing Starknet React.

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

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 React from "react";
 
import { sepolia, mainnet } from "@starknet-react/chains";
import {
  StarknetConfig,
  publicProvider,
  argent,
  braavos,
  useInjectedConnectors,
  voyager
} from "@starknet-react/core";
 
export function StarknetProvider({ children }: { children: React.ReactNode }) {
  const { connectors } = useInjectedConnectors({
    // Show these connectors if the user has no connector installed.
    recommended: [
      argent(),
      braavos(),
    ],
    // Hide recommended connectors if the user has any connector installed.
    includeRecommended: "onlyIfNoConnectors",
    // Randomize the order of the connectors.
    order: "random"
  });
 
  return (
    <StarknetConfig
      chains={[mainnet, sepolia]}
      provider={publicProvider()}
      connectors={connectors}
      explorer={voyager}
    >
      {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!

Using the Cartridge Controller

The Cartridge Controller wallet is supported however, you need to install the @cartridge/connector package.

npm
npm i @cartridge/connector
"use client";
import React, { useCallback } from "react";
 
import { sepolia, mainnet } from "@starknet-react/chains";
import {
  StarknetConfig,
  publicProvider,
  argent,
  braavos,
  useInjectedConnectors,
  voyager,
  Connector,
  jsonRpcProvider,
  cartridgeProvider
} from "@starknet-react/core";
 
import { ControllerConnector } from "@cartridge/connector";
 
const cartridgeConnector = new ControllerConnector({
  rpc: cartridgeProvider().nodeUrl,
});
 
export function StarknetProvider({ children }: { children: React.ReactNode }) {
  return (
    <StarknetConfig
      chains={[mainnet, sepolia]}
      provider={cartridgeProvider()}
      connectors={[cartridgeConnector as never as Connector]}
      explorer={voyager}
    >
      {children}
    </StarknetConfig>
  );
}
## Errors were thrown in the sample, but not included in an error tag

These errors were not marked as being expected: 2305. 
Expected: // @errors: 2305

Compiler Errors:

index.tsx
  [2305] 254 - Module '"@starknet-react/core"' has no exported member 'cartridgeProvider'.