Getting Started
Overview
Starknet Start is a collection of React hooks for Starknet. It combines the following packages:
- Tanstack Query for data fetching.
- Starknet.js for interacting with Starknet.
- abi-wan-kanabi for type-safe contract calls.
Setup
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.
Wallets installed in the user's browser are discovered automatically; use the
recommendedWallets and extraWallets props to adjust the list shown to users.
components/starknet-provider.tsx
"use client";
import { mainnet, sepolia } from "@starknetfoundation/starknet-start-chains";
import { publicProvider } from "@starknetfoundation/starknet-start-providers";
import { StarknetConfig } from "@starknetfoundation/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>
);
}