Skip to main content

​
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
PackageRole
@rainbow-me/rainbowkitWallet connection UI (ConnectButton, modal, themes)
wagmiReact hooks for reading/writing contracts
viemLow-level Ethereum client (used by wagmi)
@tanstack/react-queryData 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.