> ## Documentation Index
> Fetch the complete documentation index at: https://web3docs.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup Providers

> Configure dApp Kit and React Query providers

# 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`:

```typescript theme={null}
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`:

```typescript theme={null}
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`:

```typescript theme={null}
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

<Card title="Connect Wallet" icon="arrow-right" href="/sui/frontend/workshop-2/03-connect-wallet" horizontal>
  Add wallet connection to your app
</Card>