Integrasi dengan Drizzle/Front-end

Penjelasan

Drizzle adalah library front-end resmi dari Truffle Suite (kini kurang aktif dikembangkan dibanding dulu) yang dirancang khusus menyinkronkan state contract Truffle ke aplikasi React secara reaktif — perubahan on-chain otomatis tercermin di state Redux aplikasi tanpa perlu polling manual. Meski begitu, pendekatan yang lebih umum dipakai sekarang adalah mengimpor artifact JSON Truffle langsung ke front-end dan menghubungkannya lewat ethers.js atau web3.js secara manual. Baik memakai Drizzle atau pendekatan manual, kunci integrasinya sama: front-end butuh ABI (dari file artifact `build/contracts/*.json`) dan alamat contract hasil deployment, lalu membuat instance contract di sisi client untuk memanggil fungsi read/write, biasanya dipicu lewat koneksi wallet seperti MetaMask di browser.

Contoh Konsep

// Pendekatan manual: import artifact Truffle ke front-end (ethers.js)
import { ethers } from "ethers";
import SimpleBankArtifact from "../build/contracts/SimpleBank.json";

async function connectBank() {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  const networkId = (await provider.getNetwork()).chainId.toString();
  const address = SimpleBankArtifact.networks[networkId].address;

  const bank = new ethers.Contract(address, SimpleBankArtifact.abi, signer);
  return bank;
}

Praktikum

Tulis fungsi front-end yang membaca artifact SimpleBank.json, mengambil alamat contract sesuai network ID MetaMask yang aktif, dan membuat instance contract siap dipakai memanggil deposit().

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kalau tim memilih ekosistem React modern, pertimbangkan library yang lebih aktif dipelihara seperti wagmi/viem dibanding Drizzle — tapi pola membaca artifact JSON Truffle di atas tetap relevan untuk sumber ABI dan alamat.