> ## 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 the required providers for your Sui dApp

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

```typescript title="src/lib/dapp-kit.ts" theme={null}
// 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`:

```typescript title="src/components/providers.tsx" theme={null}
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:

```typescript title="src/main.tsx" theme={null}
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

<Card title="Connect Wallet" icon="arrow-right" href="/sui/frontend/workshop-1/03-connect-wallet" horizontal>
  Add wallet connection with UI components
</Card>