Belajar Web3 - Setup Proyek DApp (Vite + wagmi + viem)

#Pendahuluan

Setelah di episode 8 kita menyiapkan toolchain contract, pada episode ini kita membangun fondasi DApp frontend. Di sinilah series bergeser dari teori ke kode yang benar-benar berjalan di browser kalian.

Mengapa episode ini penting? Karena arsitektur awal menentukan segalanya: konfigurasi wagmi yang salah akan membuat semua hook gagal dengan error yang membingungkan. Menyiapkan proyek dengan benar — vite, wagmi, viem, chains, dan provider — adalah setengah dari debugging yang akan kalian hindari di episode 10-12.

#Scaffold dengan Vite

Mulai dari proyek React + TypeScript:

npm create vite@latest my-dapp -- --template react-ts
cd my-dapp
npm install

Install dependensi Web3:

npm install wagmi viem @tanstack/react-query

viem adalah library low-level (jaringan, transaksi, kontrak); wagmi adalah lapisan hooks React di atasnya; @tanstack/react-query dibutuhkan wagmi untuk caching data on-chain.

#Konfigurasi wagmi

Buat file konfigurasi yang menghubungkan chains dan transport:

import { http, createConfig } from "wagmi"
import { mainnet, sepolia, base, baseSepolia } from "wagmi/chains"
 
export const wagmiConfig = createConfig({
  chains: [mainnet, sepolia, base, baseSepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    [base.id]: http(),
    [baseSepolia.id]: http(),
  },
})

Hal penting:

• http() memakai RPC default publik — cukup untuk development; di episode 15 kita ganti dengan API key provider untuk produksi.
• createConfig menerima banyak chains sekaligus; wagmi otomatis paham chain mana yang aktif dari wallet.
• TypeScript: pastikan konfigurasi diketik agar IDE membantu ketika kalian salah menyebut functionName.

#Provider di Entry Point

Bungkus aplikasi dengan WagmiProvider dan QueryClientProvider:

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { WagmiProvider } from "wagmi"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { wagmiConfig } from "./wagmi"
import App from "./App"
 
const queryClient = new QueryClient()
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>
  </StrictMode>,
)

Tanpa kedua provider ini, semua hook wagmi akan melempar error "wagmi: must be used within WagmiProvider".

#Struktur Hooks Inti

Setelah fondasi siap, tiga pola yang akan kalian pakai terus:

Semua hook ini membaca konfigurasi dari WagmiProvider — kalian tidak perlu menurunkan config manual di setiap komponen.

#Konfigurasi Address Contract

Address kontrak bersifat per-chain. Pola yang benar — jangan hardcode satu address:

import type { Address } from "viem"
 
export const TOKEN_ADDRESSES: Record<number, Address> = {
  [1]: "0x0000000000000000000000000000000000000001", // mainnet
  [84532]: "0x0000000000000000000000000000000000000002", // base sepolia
}
 
export function getTokenAddress(chainId: number): Address {
  const address = TOKEN_ADDRESSES[chainId]
  if (!address) throw new Error(`Token tidak ter-deploy di chain ${chainId}`)
  return address
}

Pola ini memastikan aplikasi kalian tahu harus bicara ke kontrak mana di chain mana — dan memberi error yang jelas jika user berada di chain yang salah (kita tangani UX-nya di episode 10).

#Verifikasi Setup

Jalankan dev server dan pastikan tidak ada error saat build:

npm run dev
npx tsc --noEmit

Jika tsc bersih dan halaman terbuka, fondasi DApp kalian sudah benar — siap untuk connect wallet di episode 10.

#Ringkasan Konsep

Rangkuman yang sudah kalian pelajari di episode 9:

• Scaffold React/TS dengan Vite; install wagmi + viem + @tanstack/react-query.
• createConfig mendaftarkan chains & transports; http() cukup untuk development.
• Bungkus aplikasi dengan WagmiProvider + QueryClientProvider — wajib.
• Kelola address kontrak per-chain lewat satu file contracts.ts.

#Penutup

Inti yang harus dibawa pulang:

• Konfigurasi yang salah = semua hook gagal; periksa provider dulu saat error muncul.
• Pisahkan ABI & address ke file terpusat agar tidak inkonsisten.
• Multi-chain sejak awal — jauh lebih murah daripada retrofit.

Di episode 10 selanjutnya, kita membahas connect wallet & account management — useConnect/useAccount, injected provider MetaMask, WalletConnect QR, switch network, deteksi chain, serta disconnect/reconnect untuk UX yang halus. Sampai jumpa di episode 10!