Projek Belajar Rantissi

Kita akan membuat halaman web sederhana yang:

• Menampilkan semua pesan dari smart contract
• Punya form untuk mengirim pesan ke blockchain
• Terkoneksi langsung ke MetaMask dan Sepolia Testnet

---

Persiapan Awal

📂 Kembali ke direktori root, lalu buat project React baru:

npx create-react-app frontend
cd frontend
npm install ethers

---

Struktur Folder

Pastikan kamu sekarang punya struktur seperti ini:

hello-web3/
├── contracts/
├── scripts/
├── hardhat.config.js
└── frontend/
    ├── public/
    └── src/
        └── App.js

---

Ganti Isi App.js dengan Kode Ini

import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import "./App.css";

// Ganti dengan alamat kontrakmu sendiri!
const contractAddress = "0x123...ABC";
const abi = [
  {
    "inputs": [{"internalType": "string","name": "_message","type": "string"}],
    "name": "sendMessage",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "getAllMessages",
    "outputs": [{"internalType": "string[]","name": "","type": "string[]"}],
    "stateMutability": "view",
    "type": "function"
  }
];

function App() {
  const [currentAccount, setCurrentAccount] = useState("");
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  const checkWallet = async () => {
    if (window.ethereum) {
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      setCurrentAccount(accounts[0]);
    } else {
      alert("Install MetaMask dulu ya!");
    }
  };

  const fetchMessages = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const contract = new ethers.Contract(contractAddress, abi, provider);
    const data = await contract.getAllMessages();
    setMessages(data);
  };

  const sendMessage = async () => {
    if (!input) return;
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(contractAddress, abi, signer);
    const tx = await contract.sendMessage(input);
    await tx.wait();
    setInput("");
    fetchMessages();
  };

  useEffect(() => {
    checkWallet();
    fetchMessages();
  }, []);

  return (
    <div className="App">
      <h2>📨 Message Portal Web3</h2>
      <p>Wallet: {currentAccount || "Belum terhubung"}</p>
      <input
        placeholder="Ketik pesanmu..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>Kirim</button>
      <h3>Semua Pesan:</h3>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>📝 {msg}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

Jalankan Frontend Web3

npm start

🔗 Akses di http://localhost:3000
💡 MetaMask akan muncul minta konfirmasi transaksi saat kamu mengirim pesan!

---

Tips Tambahan

• Jangan lupa ganti contractAddress di kode dengan alamat kontrakmu
• Kamu bisa ubah gaya UI sesuka hati di App.css
• Pastikan jaringan MetaMask kamu ada di Sepolia

---

Ringkasan

✅ Kamu sudah punya aplikasi Web3 lengkap:

• Smart Contract: MessagePortal.sol
• Frontend React yang bisa baca dan kirim data ke blockchain
• Terhubung ke wallet pengguna (MetaMask)