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

# Wallet Setup

> Add RainbowKit, wagmi and viem, and a Connect Wallet button

# Wallet Setup (RainbowKit + wagmi)

[RainbowKit](https://rainbowkit.com) adds wallet connection on top of **wagmi**
and **viem**. We'll add the providers and a Connect button.

## Install

```bash theme={null}
npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query
```

| Package                  | Role                                                  |
| ------------------------ | ----------------------------------------------------- |
| `@rainbow-me/rainbowkit` | Wallet connection UI (`ConnectButton`, modal, themes) |
| `wagmi`                  | React hooks for reading/writing contracts             |
| `viem`                   | Low-level Ethereum client (used by wagmi)             |
| `@tanstack/react-query`  | Data fetching/caching (peer dependency)               |

## The Web3 provider

Create one component that wires the three providers in order
(`WagmiProvider → QueryClientProvider → RainbowKitProvider`) and syncs RainbowKit's
modal theme with the app's light/dark mode.

```tsx title="src/components/web3-provider.tsx" theme={null}
import "@rainbow-me/rainbowkit/styles.css"

import type { ReactNode } from "react"
import {
  darkTheme,
  getDefaultConfig,
  lightTheme,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { fallback, http } from "viem"
import { WagmiProvider } from "wagmi"
import { sepolia } from "wagmi/chains"

import { useTheme } from "@/components/theme-provider"

// Get a free projectId at https://cloud.reown.com (WalletConnect Cloud).
const config = getDefaultConfig({
  appName: "DevWeb3Jogja Workshop Amikom",
  projectId: "YOUR_PROJECT_ID",
  chains: [sepolia],
  // Reliable Sepolia RPCs with fallback (see the gotcha below).
  transports: {
    [sepolia.id]: fallback([
      http("https://sepolia.drpc.org"),
      http("https://ethereum-sepolia.publicnode.com"),
      http("https://rpc.sepolia.org"),
    ]),
  },
})

const queryClient = new QueryClient()

export function Web3Provider({ children }: Readonly<{ children: ReactNode }>) {
  const { resolvedTheme } = useTheme()
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider
          theme={resolvedTheme === "dark" ? darkTheme() : lightTheme()}
        >
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

Wrap your app with it (inside `ThemeProvider`, so it can read the theme):

```tsx title="src/main.tsx" theme={null}
<ThemeProvider>
  <Web3Provider>
    <App />
  </Web3Provider>
</ThemeProvider>
```

<Warning>
  **Pick a reliable RPC.** With the default RPC, `useWaitForTransactionReceipt`
  can get stuck "loading" even after a tx succeeds, and some public RPCs reject
  transactions with a confusing **"gas limit too high"**. The `fallback([...])`
  above (dRPC first) avoids both — viem switches RPC automatically if one fails.
</Warning>

## The Connect button

Render RainbowKit's `ConnectButton` anywhere — e.g. above the main card:

```tsx title="src/App.tsx" theme={null}
import { ConnectButton } from "@rainbow-me/rainbowkit"

<ConnectButton accountStatus="avatar" showBalance={false} />
```

`getDefaultConfig` also auto-detects injected wallets (MetaMask) via EIP-6963, so
they work even without a WalletConnect `projectId` (only WalletConnect/mobile
wallets need it).

<Info>
  Make sure MetaMask is on the **Sepolia** network. Need test ETH? Use a Sepolia
  faucet (e.g. Google Cloud Web3 faucet or Alchemy).
</Info>

<Card title="Next: Smart Contracts" icon="arrow-right" href="/evm/workshop-amikom/04-smart-contracts" horizontal>
  Deploy the RupiahToken + Vault contracts to Sepolia.
</Card>