DApp Frontend (wagmi + React)

wagmi adalah React hooks library untuk Ethereum. Dibangun di atas viem, wagmi menyediakan hooks yang type-safe dan reactive untuk membangun DApp frontend.

Setup

// npm install wagmi viem @tanstack/react-query

// config.ts
import { createConfig, http } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { injected, walletConnect } from "wagmi/connectors";

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    injected(),           // MetaMask, dll
    walletConnect({ projectId: "..." }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
});

Provider Setup

// App.tsx
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./config";

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <YourApp />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

useAccount — Status Wallet

import { useAccount, useConnect, useDisconnect } from "wagmi";

function WalletButton() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.id} onClick={() => connect({ connector })}>
          Connect {connector.name}
        </button>
      ))}
    </div>
  );
}

useReadContract — Baca Data Contract

import { useReadContract } from "wagmi";
import { erc20Abi } from "viem";

function TokenBalance({ address }) {
  const { data: balance, isLoading } = useReadContract({
    address: "0xTokenAddress...",
    abi: erc20Abi,
    functionName: "balanceOf",
    args: [address],
  });

  if (isLoading) return <span>Loading...</span>;

  return <span>{formatUnits(balance, 18)} tokens</span>;
}

useWriteContract — Kirim Transaksi

import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";

function MintButton() {
  const { writeContract, data: hash, isPending } = useWriteContract();
  const { isLoading: isConfirming, isSuccess } =
    useWaitForTransactionReceipt({ hash });

  return (
    <div>
      <button
        disabled={isPending}
        onClick={() => writeContract({
          address: nftAddress,
          abi: nftAbi,
          functionName: "mint",
          args: [metadataURI],
          value: parseEther("0.01"),
        })}
      >
        {isPending ? "Confirm in wallet..." : "Mint NFT"}
      </button>
      {isConfirming && <p>Waiting for confirmation...</p>}
      {isSuccess && <p>Minted! TX: {hash}</p>}
    </div>
  );
}

Key Hooks

• useAccount — Address, connection status, chain
• useBalance — ETH balance
• useReadContract — Baca view function (auto-refetch)
• useWriteContract — Kirim transaksi
• useWaitForTransactionReceipt — Tunggu konfirmasi
• useWatchContractEvent — Listen real-time events