Skip to main content

​
Setting Up Providers

Your Sui dApp needs three providers wrapped in the correct order:
  1. DAppKitProvider - From @mysten/dapp-kit-react

​
Configure DApp Kit

Before creating the providers, we need to configure our DApp Kit. This includes setting up our RPC endpoints and registering types for hook type inference. Create a new file src/lib/dapp-kit.ts:
src/lib/dapp-kit.ts
// 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 a new file src/components/providers.tsx:
src/components/providers.tsx
import type { ReactNode } from "react";

import "@mysten/dapp-kit/dist/index.css";
import { DAppKitProvider } from "@mysten/dapp-kit-react";
import { dAppKit } from "@/lib/dapp-kit";

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

​
Update main.tsx

Wrap your app with the Providers component:
src/main.tsx
import './index.css'

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Providers } from './components/providers'
import { App } from './app'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Providers>
      <App />
    </Providers>
  </StrictMode>,
)

​
Next Steps

Connect Wallet

Add wallet connection with UI components