Wallet Setup (RainbowKit + wagmi)

RainbowKit adds wallet connection on top of wagmi and viem. We’ll add the providers and a Connect button.

Install

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.

src/components/web3-provider.tsx

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):

src/main.tsx

<ThemeProvider>
  <Web3Provider>
    <App />
  </Web3Provider>
</ThemeProvider>

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.

The Connect button

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

src/App.tsx

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).

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

Next: Smart Contracts

Deploy the RupiahToken + Vault contracts to Sepolia.

​Wallet Setup (RainbowKit + wagmi)

​Install

​The Web3 provider

​The Connect button

Next: Smart Contracts

Wallet Setup (RainbowKit + wagmi)

Install

The Web3 provider

The Connect button