Upgrading to V4

Upgrading to Starknet React V4

Overview

Starknet React V4 is a major revision that includes the upgrade to starknet.js v7, removal of the Nethermind provider, and new paymaster features for gasless transactions.

Update Dependencies

pnpm update starknet@latest @starknet-react/core@latest @starknet-react/chains@latest

RPC Specification Version

The default RPC specification version is now 0.8.1. This change affects how providers connect to Starknet nodes and is handled automatically by the library.

Breaking Changes

Nethermind Provider Removed

The nethermindProvider has been completely removed. If you were using it, migrate to an alternative provider:

Before (V3):

import { nethermindProvider } from "@starknet-react/core";
 
const provider = nethermindProvider({ apiKey: "your-key" });

After (V4):

// Use alternative providers
import {
  blastProvider,
  lavaProvider,
  publicProvider,
} from "@starknet-react/core";
 
// Option 1: Blast API
const provider = blastProvider({ apiKey: "your-blast-key" });
 
// Option 2: Lava Network
const provider = lavaProvider({ apiKey: "your-lava-key" });
 
// Option 3: Public provider
const provider = publicProvider();

New Features

Paymaster Support

V4 introduces comprehensive paymaster support for gasless and sponsored transactions with three new hooks:

Configure Paymaster Provider

import { avnuPaymasterProvider, StarknetConfig } from "@starknet-react/core";
 
// Configure paymaster provider
const paymasterProvider = avnuPaymasterProvider({
  apiKey: "your-api-key",
});
 
// Add to StarknetConfig
<StarknetConfig
  chains={chains}
  provider={provider}
  paymasterProvider={paymasterProvider} // New optional prop
  connectors={connectors}
>
  {children}
</StarknetConfig>;

New Paymaster Hooks

import {
  usePaymasterGasTokens,
  usePaymasterEstimateFees,
  usePaymasterSendTransaction,
} from "@starknet-react/core";
 
// 1. Fetch supported gas tokens
const { data: gasTokens } = usePaymasterGasTokens();
 
// 2. Estimate fees in alternative gas tokens (e.g., USDC)
const { data: estimate } = usePaymasterEstimateFees({
  calls,
  options: {
    feeMode: {
      mode: "default",
      gasToken:
        "0x053c91253bc9682c04929ca02ed00b3e423f6710d2ee7e0d5ebb06f3ecf368a8", // USDC address
    },
  },
});
 
// 3. Send gasless transactions
const { sendAsync } = usePaymasterSendTransaction({
  calls,
  options: {
    feeMode: {
      mode: "default",
      gasToken:
        "0x053c91253bc9682c04929ca02ed00b3e423f6710d2ee7e0d5ebb06f3ecf368a8",
    },
  },
  maxFeeInGasToken: estimate?.suggested_max_fee_in_gas_token,
});

Wallet Connector Rebranding

Argent X has been rebranded to Ready Wallet. The new ready() function is recommended:

import { ready, braavos } from "@starknet-react/core";
 
// Recommended: Use new ready() function
const connectors = [ready(), braavos()];

Backward Compatibility: The argent() function still works but is deprecated:

import { argent, braavos } from "@starknet-react/core";
 
// Still works, but shows as "Ready Wallet (formerly Argent)"
const connectors = [argent(), braavos()];