Wallet & MetaMask Integration

Wallet adalah gerbang user ke dunia Web3. MetaMask adalah browser extension wallet paling populer. Sebagai developer, kamu perlu tahu cara menghubungkan DApp dengan wallet user.

window.ethereum

MetaMask meng-inject object window.ethereum ke browser. Ini adalah "provider" yang memungkinkan DApp berkomunikasi dengan blockchain.

// Cek apakah wallet tersedia
if (typeof window.ethereum === "undefined") {
  alert("Install MetaMask dulu!");
  return;
}

// MetaMask inject EIP-1193 provider
console.log(window.ethereum); // Provider object

Connect Wallet

async function connectWallet() {
  try {
    // Request akses ke akun user
    const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    const userAddress = accounts[0];
    console.log("Connected:", userAddress);
    // "0x742d35Cc6634C0532925a3b844Bc9e7595f..."

    return userAddress;
  } catch (error) {
    if (error.code === 4001) {
      console.log("User rejected connection");
    }
  }
}

// Tampilkan alamat yang sudah terpotong
function shortenAddress(addr) {
  return addr.slice(0, 6) + "..." + addr.slice(-4);
  // "0x742d...f5a1"
}

Listen to Account & Network Changes

// User ganti akun di MetaMask
window.ethereum.on("accountsChanged", (accounts) => {
  if (accounts.length === 0) {
    console.log("Wallet disconnected");
  } else {
    console.log("Switched to:", accounts[0]);
  }
});

// User ganti network (mainnet → testnet)
window.ethereum.on("chainChanged", (chainId) => {
  console.log("Network changed to:", chainId);
  // Biasanya reload page
  window.location.reload();
});

Switch Network Programmatically

async function switchToSepolia() {
  try {
    await window.ethereum.request({
      method: "wallet_switchEthereumChain",
      params: [{ chainId: "0xaa36a7" }], // Sepolia
    });
  } catch (error) {
    // Network belum ditambahkan, tambahkan dulu
    if (error.code === 4902) {
      await window.ethereum.request({
        method: "wallet_addEthereumChain",
        params: [{
          chainId: "0xaa36a7",
          chainName: "Sepolia Testnet",
          rpcUrls: ["https://rpc.sepolia.org"],
        }],
      });
    }
  }
}

Best Practices

• Selalu cek window.ethereum sebelum berinteraksi
• Handle rejection (user bisa tolak koneksi)
• Tampilkan alamat yang dipotong (UX lebih baik)
• Listen event accountsChanged dan chainChanged
• Jangan pernah minta user sign sesuatu tanpa penjelasan