Getting Started
Overview
Starknet React is a collection of React hooks for Starknet. It combines the following packages:
- Tankstack Query for data fetching.
- Starknet.js for interacting with Starknet.
- abi-wan-kanabi for type-safe contract calls.
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>
);
}