Upgrade UI Web3 App + Event Blockchain + Data Lengkap

Kita akan:

✅ Menambahkan Tailwind CSS untuk tampilan modern
✅ Menampilkan waktu pengiriman pesan
✅ Menambahkan alamat pengirim
✅ Menghubungkan frontend dengan event dari smart contract

Update Smart Contract untuk Tambah Data

📂 Buka MessagePortal.sol, ubah jadi seperti ini:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

contract MessagePortal {
    event NewMessage(address indexed sender, string message, uint256 timestamp);

    struct Message {
        address sender;
        string text;
        uint256 timestamp;
    }

    Message[] public messages;

    function sendMessage(string memory _message) public {
        messages.push(Message(msg.sender, _message, block.timestamp));
        emit NewMessage(msg.sender, _message, block.timestamp);
    }

    function getAllMessages() public view returns (Message[] memory) {
        return messages;
    }

    function getMessageCount() public view returns (uint) {
        return messages.length;
    }
}

📌 Penambahan:

Struct Message
Event NewMessage
Data lengkap: alamat pengirim & timestamp

Deploy Ulang Kontrak

Jangan lupa ganti nama file deploy.js jika perlu

npx hardhat compile
npx hardhat run scripts/deploy.js --network sepolia

→ Salin alamat kontraknya ke frontend

Update ABI di Frontend

Untuk menyesuaikan ABI (karena data sekarang lebih kompleks), gunakan ABI baru dari artifacts/contracts/MessagePortal.sol/MessagePortal.json
→ Salin bagian abi dan tempel ke frontend

Contoh ABI function-nya:

{
  "inputs": [],
  "name": "getAllMessages",
  "outputs": [
    {
      "components": [
        { "internalType": "address", "name": "sender", "type": "address" },
        { "internalType": "string", "name": "text", "type": "string" },
        { "internalType": "uint256", "name": "timestamp", "type": "uint256" }
      ],
      "internalType": "struct MessagePortal.Message[]",
      "name": "",
      "type": "tuple[]"
    }
  ],
  "stateMutability": "view",
  "type": "function"
}

Update Tampilan `App.js`

Ganti App.js agar menampilkan data lengkap:

<ul>
  {messages.map((msg, idx) => (
    <li key={idx} style={{ marginBottom: "10px" }}>
      <div>🧑 From: {msg.sender}</div>
      <div>🕒 {new Date(msg.timestamp * 1000).toLocaleString()}</div>
      <div>💬 {msg.text}</div>
    </li>
  ))}
</ul>

(Opsional) Tambahkan Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

Edit tailwind.config.js dan index.css seperti dokumentasi resmi
→ Gunakan class-class Tailwind di komponen React kamu (misal: className="text-lg font-bold")

Bonus: Dengar Event dari Blockchain

Kamu bisa mendengar event NewMessage langsung dari blockchain:

useEffect(() => {
  const listenToEvents = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const contract = new ethers.Contract(contractAddress, abi, provider);

    contract.on("NewMessage", (sender, text, timestamp) => {
      setMessages(prev => [...prev, { sender, text, timestamp: timestamp.toNumber() }]);
    });
  };

  listenToEvents();
}, []);

Ringkasan

✅ Tampilan lebih informatif: nama pengirim + waktu
✅ Smart contract emit event yang ditangkap di frontend
✅ Tampilan lebih cantik bisa dicapai dengan Tailwind
✅ dApp kamu kini terasa seperti produk beneran Web3 🎯

Projek Belajar Rantissi