Skip to main content

Documentation Index

Fetch the complete documentation index at: https://suicamp.site/llms.txt

Use this file to discover all available pages before exploring further.

​
Setup Providers

Before using Sui hooks and components, we need to set up the providers.

​
Create dApp Kit Configuration

Create src/lib/dapp-kit.ts: 
import { createDAppKit } from '@mysten/dapp-kit-react';
import { SuiGrpcClient } from '@mysten/sui/grpc';

const GRPC_URLS = {
  testnet: 'https://fullnode.testnet.sui.io:443',
};

export const dAppKit = createDAppKit({
  networks: ['testnet'],
  createClient: (network) => new SuiGrpcClient({
    network,
    baseUrl: GRPC_URLS[network]
  }),
});

// Register types for hook type inference
declare module '@mysten/dapp-kit-react' {
  interface Register {
    dAppKit: typeof dAppKit;
  }
}

​
Create Providers Component

Create src/components/providers.tsx: 
import type { ReactNode } from "react";
import "@mysten/dapp-kit/dist/index.css";
import { DAppKitProvider } from "@mysten/dapp-kit-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { dAppKit } from "@/lib/dapp-kit";

const queryClient = new QueryClient();

export function Providers({ children }: { children: ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <DAppKitProvider dAppKit={dAppKit}>
        {children}
      </DAppKitProvider>
    </QueryClientProvider>
  );
}

​
Wrap App with Providers

Update src/main.tsx: 
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Providers } from "./components/providers";
import { App } from "./app";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <App />
    </Providers>
  </StrictMode>
);

​
What Each Provider Does

​
QueryClientProvider

  • Manages data fetching cache
  • Handles loading and error states
  • Provides automatic refetching

​
DAppKitProvider

  • Manages wallet connections
  • Provides access to Sui client
  • Handles network switching

​
Next Steps

Connect Wallet

Add wallet connection to your app