Migrating to Starknet Start

Starknet Start React (formerly Starknet React) represents a major rewrite of the library. The core packages have been renamed and restructured to support multiple frameworks (React, Vue) and provide a more consistent experience with the wider Starknet ecosystem via get-starknet.

The most significant change is the renaming of the package from @starknet-react/core (or starknet-react) to @starknet-start/react.

Package Renaming

The monorepo structure has changed to separate core logic from framework-specific bindings.

Installation

Uninstall the old packages and install the new ones along with their peer dependencies.

npm uninstall @starknet-react/core
npm install @starknet-start/react starknet @tanstack/react-query

Enhancements to StarknetConfig

The StarknetConfig component to track the dapps current state is now a lightweight wrapper around the GetStarknetProvider from @starknet-io/get-starknet-modal.

1. Update Imports

Update your imports to point to the new package.

- import { StarknetConfig, useConnect } from "@starknet-react/core";
+ import { StarknetConfig, useConnect } from "@starknet-start/react";

2. Update Provider Props

The StarknetConfig now simplifies wallet connection management. You no longer need to manually instantiate connectors for common wallets; get-starknet handles discovery.

import { StarknetConfig, InjectedConnector } from "@starknet-react/core";
 
// ... manually creating connectors
const connectors = [
  new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
  new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
];
 
function App() {
  return (
    <StarknetConfig connectors={connectors} ... >
      {children}
    </StarknetConfig>
  )
}

import { StarknetConfig } from "@starknet-start/react";
import { mainnet, sepolia } from "@starknet-start/chains";
import { jsonRpcProvider } from "@starknet-start/providers";
 
function App() {
  return (
    <StarknetConfig
      chains={[mainnet, sepolia]}
      provider={jsonRpcProvider({ rpc: (chain) => ... })}
    >
      {children}
    </StarknetConfig>
  )
}

The chains are now imported from @starknet-start/chains. Providers are imported from @starknet-start/providers.

Shared Logic & Consistency

By moving shared logic to @starknet-start/core packages, the library ensures that both React and Vue adapters behave consistently. This also brings the library closer to the get-starknet standard, ensuring better compatibility with future wallet updates.

Notice that this is only relevant for developers who wish to use a framework other than React.

Chains and Providers

Chains are no longer hardcoded or internal types but are exported from @starknet-start/chains.

import { mainnet, sepolia } from "@starknet-start/chains";

Similarly, RPC providers and other network logic reside in @starknet-start/providers.

import { jsonRpcProvider } from "@starknet-start/providers";

Breaking Changes Checklist

• Package Name: Update package.json dependencies.
• Imports: Global find/replace @starknet-react/core (or starknet-react) with @starknet-start/react.
• Connectors: Remove manual InjectedConnector setup unless you have custom needs; rely on the provider's default discovery or recommendedWallets prop.
• Chains: Import chain objects from @starknet-start/chains.

Get Starknet Integration

Starknet Start integrates deeply with the Get Starknet ecosystem to provide a unified wallet connection experience. This ensures your dApp behaves consistently with other major Starknet applications and automatically supports new wallets as they adhere to the standard.

Wallet Discovery

The StarknetConfig automatically handles wallet discovery using the underlying get-starknet library.

• Automatic Detection: Standard Starknet wallets (like Argent X and Braavos) are detected automatically via the window object.
• No Manual Connectors: You no longer need to instantiate InjectedConnector classes for standard wallets.

Customizing Wallets

You can customize which wallets are displayed or highlighted using props on the StarknetConfig. These are passed through to the GetStarknetProvider.

• recommendedWallets: An array of wallet objects to prioritize (e.g. show at the top of the list).
• extraWallets: An array of additional non-standard or custom wallets to include in the discovery list.

import { StarknetConfig } from "@starknet-start/react";
import { mainnet } from "@starknet-start/chains";
 
function App() {
  return (
    <StarknetConfig
      chains={[mainnet]}
      // highlight optional specific wallets
      recommendedWallets={[...]}
    >
      {/* ... */}
    </StarknetConfig>
  );
}

Using @starknet-io/get-starknet-ui

For a complete UI solution (connect modal, wallet lists), you can use @starknet-io/get-starknet-ui. Since StarknetConfig already effectively includes the logic of GetStarknetProvider, you can use the UI components directly inside your app.

Installation:

npm install @starknet-io/get-starknet-ui@next

Example Usage: Use the WalletConnectModal to handle the connection flow.

import { WalletConnectModal } from "@starknet-io/get-starknet-ui";
import { useConnect } from "@starknet-start/react";
 
function ConnectWallet() {
  // StarknetConfig manages the state, so we just use the UI component
  return <WalletConnectModal />;
}

Manual Connection

If you prefer to build your own UI without the modal, you can use useConnect to iterate over available wallets and connect to them programmatically.

import { useConnect } from "@starknet-start/react";
 
function WalletList() {
  const { connectors, connect } = useConnect();
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.id} onClick={() => connect({ connector })}>
          Connect {connector.name}
        </button>
      ))}
    </div>
  );
}