Initialization

Initialization

Configure Web3 providers and initialize the SDK in your application entry (e.g. App.jsx):

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "@rainbow-me/rainbowkit/styles.css";

// Solana wallet imports
import {
  WalletModalProvider as SolanaWalletModalProvider
} from '@solana/wallet-adapter-react-ui';
import {
  WalletProvider as SolanaWalletProvider,
  ConnectionProvider as SolanaConnectionProvider,
} from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork as SolanaWalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';

// Create QueryClient instance
const queryClient = new QueryClient();

// Router configuration
const router = createBrowserRouter([
  {
    path: "/",
    element: <Directory />,
  },
  // Other routes...
]);

// Fixed configuration
const fixedConfig = {
  supportedChains: defaultChains, // Imported from config file
  wagmiConfig: initialConfig      // Imported from config file
};

function App() {
  // Use fixed config to avoid recreation
  const [config] = useState(fixedConfig);

  // Solana configuration
  const network = SolanaWalletAdapterNetwork.Mainnet;
  const endpoint = clusterApiUrl(network);
  const wallets = [
    new PhantomWalletAdapter(),
    new SolflareWalletAdapter(),
  ];

  return (
    <SolanaConnectionProvider endpoint={endpoint}>
      <SolanaWalletProvider wallets={wallets} autoConnect>
        <SolanaWalletModalProvider>
          <QueryClientProvider client={queryClient}>
            <WagmiProvider config={config.wagmiConfig}>
              <RainbowKitProvider chains={config.supportedChains}>
                <RouterProvider router={router} />
              </RainbowKitProvider>
            </WagmiProvider>
          </QueryClientProvider>
        </SolanaWalletModalProvider>
      </SolanaWalletProvider>
    </SolanaConnectionProvider>
  );
}

export default App;

Minimal Configuration Example

If you only need basic EVM chain support:

import { WagmiConfig, createConfig, http } from 'wagmi';
import { mainnet, polygon } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [mainnet, polygon],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiConfig config={wagmiConfig}>
        {/* Your app content */}
      </WagmiConfig>
    </QueryClientProvider>
  );
}

Initialization Highlights

1. Provider Nesting Order: Solana Provider → QueryClient Provider → Wagmi Provider → RainbowKit Provider
2. Fixed Configuration: Avoid recreating the config object on each render
3. Chain List Caching: Store the chain list in local storage to avoid redundant requests
4. Error Handling: Add appropriate error handling when fetching the chain list