⚗️ Ethereum Hands-on Lab

{
  "from":     "0xYourEOA…",         // who signed → becomes msg.sender
  "to":       "0xContract…",        // destination; null when deploying a new contract
  "value":    "0x2386f26fc10000",    // 0.01 ETH, in wei, hex → becomes msg.value
  "data":     "0xa9059cbb000…",       // calldata: function selector (4 bytes) + ABI-encoded args
  "gas":      "0x15F90",             // max gas the sender is willing to pay for
  "gasPrice": "0x77359400",          // wei per gas unit
  "nonce":    "0x4",                 // per-sender counter, prevents replay
  "v", "r", "s": /* the ECDSA signature components */
}

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

contract Counter {
    uint256 public count;
    address public owner;

    event Incremented(address indexed by, uint256 newValue);

    constructor() {
        owner = msg.sender;
    }

    function increment() external {
        count += 1;
        emit Incremented(msg.sender, count);
    }

    function reset() external {
        require(msg.sender == owner, "not owner");
        count = 0;
    }

    function read() external view returns (uint256) {
        return count;
    }
}

[
  { "type": "constructor", "inputs": [], "stateMutability": "nonpayable" },
  {
    "type": "function", "name": "increment",
    "inputs": [], "outputs": [], "stateMutability": "nonpayable"
  },
  {
    "type": "function", "name": "count",
    "inputs": [], "outputs": [{ "type": "uint256" }], "stateMutability": "view"
  },
  {
    "type": "event", "name": "Incremented",
    "inputs": [
      { "name": "by",       "type": "address", "indexed": true  },
      { "name": "newValue", "type": "uint256", "indexed": false }
    ]
  }
]

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

contract DonationPool {
    // ── Immutable config (locked at construction) ────
    address public immutable owner;        // deployer — recorded only, NO privileges
    address public immutable beneficiary;  // the only address that can withdraw
    uint256 public immutable targetAmount; // in wei

    // ── Mutable state ────────────────────────────────
    uint256 public totalRaised;
    bool    public withdrawn;

    mapping(address => uint256) public donations;

    // ── Events ───────────────────────────────────────
    event Donated(address indexed donor, uint256 amount, uint256 newTotal);
    event TargetReached(uint256 finalAmount);
    event Withdrawn(address indexed by, uint256 amount);

    // ── Errors (gas-cheap reverts) ───────────────────
    error ZeroDonation();
    error AlreadyWithdrawn();
    error OnlyBeneficiary();
    error TargetNotReached(uint256 raised, uint256 target);
    error TransferFailed();

    constructor(address _beneficiary, uint256 _targetWei) {
        // TODO 1: assign the three immutables.
        //   owner ← msg.sender (the deployer; not a constructor arg).
        //   beneficiary  ← _beneficiary.
        //   targetAmount ← _targetWei.
    }

    // TODO 2: write donate() — payable
    //   - revert ZeroDonation() if msg.value == 0
    //   - revert AlreadyWithdrawn() if `withdrawn` is true
    //   - remember whether totalRaised was below targetAmount BEFORE this donation
    //     (you'll need it to decide whether to emit TargetReached)
    //   - add msg.value to donations[msg.sender] and to totalRaised
    //   - emit Donated(msg.sender, msg.value, totalRaised)
    //   - if we just crossed the threshold (was below, now ≥), emit TargetReached

    // TODO 3: write withdraw() — anyone calls but only the beneficiary succeeds
    //   - revert OnlyBeneficiary() if msg.sender != beneficiary
    //   - revert TargetNotReached(totalRaised, targetAmount) if totalRaised < targetAmount
    //   - revert AlreadyWithdrawn() if `withdrawn` is true
    //   - set withdrawn = true BEFORE the external call (Checks-Effects-Interactions)
    //   - send address(this).balance to the beneficiary via payable(...).call{value: ...}("")
    //   - emit Withdrawn(beneficiary, amount)

    function progressPercent() external view returns (uint256) {
        // TODO 4: return (totalRaised * 100) / targetAmount, capped at 100
    }

    function isTargetReached() external view returns (bool) {
        // TODO 5
    }

    function remaining() external view returns (uint256) {
        // TODO 6: return targetAmount - totalRaised, or 0 if already at/past target
    }
}

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

/// @title  DonationPool
/// @notice Collects ETH donations toward a fixed target. Once the target is met,
///         only the beneficiary can withdraw the funds. The deployer is recorded
///         in `owner` for transparency but has NO functions they can call — they
///         cannot change the beneficiary, cancel the campaign, or withdraw funds.
contract DonationPool {
    address public immutable owner;
    address public immutable beneficiary;
    uint256 public immutable targetAmount;

    uint256 public totalRaised;
    bool    public withdrawn;

    mapping(address => uint256) public donations;

    event Donated(address indexed donor, uint256 amount, uint256 newTotal);
    event TargetReached(uint256 finalAmount);
    event Withdrawn(address indexed by, uint256 amount);

    error ZeroDonation();
    error AlreadyWithdrawn();
    error OnlyBeneficiary();
    error TargetNotReached(uint256 raised, uint256 target);
    error TransferFailed();

    constructor(address _beneficiary, uint256 _targetWei) {
        owner        = msg.sender;
        beneficiary  = _beneficiary;
        targetAmount = _targetWei;
    }

    /// @notice Anyone can donate any non-zero amount of ETH.
    function donate() external payable {
        if (msg.value == 0) revert ZeroDonation();
        if (withdrawn)      revert AlreadyWithdrawn();

        bool wasBelowTarget = totalRaised < targetAmount;

        donations[msg.sender] += msg.value;
        totalRaised           += msg.value;

        emit Donated(msg.sender, msg.value, totalRaised);

        // Fire TargetReached exactly once — the moment we cross the threshold.
        if (wasBelowTarget && totalRaised >= targetAmount) {
            emit TargetReached(totalRaised);
        }
    }

    /// @notice Only the beneficiary can withdraw, only after the target is met,
    ///         and only once. Pulls the entire contract balance (handles any
    ///         over-donation that pushed totalRaised past the target).
    function withdraw() external {
        if (msg.sender != beneficiary)   revert OnlyBeneficiary();
        if (totalRaised < targetAmount)  revert TargetNotReached(totalRaised, targetAmount);
        if (withdrawn)                   revert AlreadyWithdrawn();

        withdrawn = true;                            // CEI: effect before interaction
        uint256 amount = address(this).balance;

        (bool ok, ) = payable(beneficiary).call{value: amount}("");
        if (!ok) revert TransferFailed();

        emit Withdrawn(beneficiary, amount);
    }

    // ── Views ────────────────────────────────────
    function progressPercent() external view returns (uint256) {
        if (targetAmount == 0) return 0;
        uint256 p = (totalRaised * 100) / targetAmount;
        return p > 100 ? 100 : p;
    }

    function isTargetReached() external view returns (bool) {
        return totalRaised >= targetAmount;
    }

    function remaining() external view returns (uint256) {
        return totalRaised >= targetAmount ? 0 : targetAmount - totalRaised;
    }
}

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Donation Pool</title></head>
<body>
  <button id="connect">Connect MetaMask</button>
  <span id="account">not connected</span>

  Beneficiary: <code id="beneficiary">…</code>
  Raised: <code id="raised">…</code> / <code id="target">…</code> ETH
  (<code id="progress">…</code>%)

  <input id="amount" type="number" step="0.001" min="0.001" placeholder="0.01">
  <button id="donate">Donate ETH</button>

  <button id="withdraw" hidden>Withdraw (beneficiary only)</button>

  <script type="module">
    // everything below goes here — we'll add it step by step
  </script>
</body>
</html>

import { BrowserProvider } from "https://cdn.jsdelivr.net/npm/ethers@6/+esm";

document.getElementById("connect").addEventListener("click", async () => {
  if (!window.ethereum) { alert("Install MetaMask first"); return; }

  // 1. wrap the injected EIP-1193 provider
  const provider = new BrowserProvider(window.ethereum);

  // 2. ask the user for permission — this is what triggers the MetaMask popup
  await provider.send("eth_requestAccounts", []);

  // 3. get a Signer (knows the address, can sign txs)
  const signer  = await provider.getSigner();
  const account = await signer.getAddress();
  document.getElementById("account").textContent = account;
});

import { Contract, formatEther } from "https://cdn.jsdelivr.net/npm/ethers@6/+esm";

// ⚠ Replace this placeholder with the address Remix gave you after deploying
// DonationPool.sol on Sepolia. A real address is 42 chars: "0x" + 40 hex digits.
const CONTRACT_ADDRESS = "0xPASTE_YOUR_SEPOLIA_CONTRACT_ADDRESS_HERE";
const ABI = [
  "function beneficiary() view returns (address)",
  "function targetAmount() view returns (uint256)",
  "function totalRaised() view returns (uint256)",
  "function progressPercent() view returns (uint256)",
  "function isTargetReached() view returns (bool)",
  "function donations(address) view returns (uint256)",
];

// bound to the PROVIDER ⇒ read-only, free, no popup
const readonly = new Contract(CONTRACT_ADDRESS, ABI, provider);

// Parallel fetch with Promise.all — one round-trip per call.
const [beneficiary, targetWei, raisedWei, percent, reached] = await Promise.all([
  readonly.beneficiary(),
  readonly.targetAmount(),  // uint256 → BigInt
  readonly.totalRaised(),
  readonly.progressPercent(),
  readonly.isTargetReached(),
]);

console.log(
  "beneficiary:", beneficiary,
  "raised:", formatEther(raisedWei), "/", formatEther(targetWei), "ETH",
  "(" + percent + "%)",
  reached ? "🎉 target reached" : ""
);

import { Contract, parseEther } from "https://cdn.jsdelivr.net/npm/ethers@6/+esm";

// bound to the SIGNER ⇒ can send transactions
const writable = new Contract(
  CONTRACT_ADDRESS,
  ["function donate() payable", "function withdraw()"],
  signer
);

// ── Donate (anyone can call) ─────────────────────────────────
document.getElementById("donate").addEventListener("click", async () => {
  try {
    const ethAmount = document.getElementById("amount").value;
    if (!ethAmount || Number(ethAmount) <= 0) { alert("enter a positive amount"); return; }

    // parseEther turns "0.05" → 50000000000000000n (BigInt, in wei).
    // `{ value: ... }` is ethers' "call overrides" — what becomes msg.value.
    const tx = await writable.donate({ value: parseEther(ethAmount) });
    console.log("donate submitted, hash =", tx.hash);

    const receipt = await tx.wait();
    console.log("confirmed in block", receipt.blockNumber);
  } catch (e) {
    console.error(e.shortMessage || e.message);
  }
});

// ── Withdraw (only the beneficiary; only after target is reached) ────
document.getElementById("withdraw").addEventListener("click", async () => {
  try {
    const tx = await writable.withdraw();   // no value, no args
    console.log("withdraw submitted, hash =", tx.hash);
    await tx.wait();
    console.log("funds released to beneficiary");
  } catch (e) {
    // e.g. OnlyBeneficiary, TargetNotReached, AlreadyWithdrawn
    console.error(e.shortMessage || e.message);
  }
});

// Add the events to the ABI used by `readonly` so ethers can decode them:
//   "event Donated(address indexed donor, uint256 amount, uint256 newTotal)"
//   "event TargetReached(uint256 finalAmount)"
//   "event Withdrawn(address indexed by, uint256 amount)"

readonly.on("Donated", (donor, amount, newTotal) => {
  console.log(
    "❤️", donor, "donated", formatEther(amount),
    "ETH · running total:", formatEther(newTotal), "ETH"
  );
  refresh();   // re-read state, update the progress bar
});

readonly.on("TargetReached", (finalAmount) => {
  console.log("🎉 target reached!", formatEther(finalAmount), "ETH");
  refresh();   // the Withdraw button becomes visible to the beneficiary
});

readonly.on("Withdrawn", (by, amount) => {
  console.log("✅ withdrawn", formatEther(amount), "ETH by", by);
  refresh();
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Donation Pool</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 560px; margin: 2rem auto; padding: 0 1rem; }
    button { padding: 0.6rem 1rem; font-size: 1rem; cursor: pointer; }
    input[type=number] { padding: 0.5rem; font-size: 1rem; width: 8rem; }
    .row { margin: 0.5rem 0; }
    .bar { height: 14px; background: #eee; border-radius: 8px; overflow: hidden; margin: 0.4rem 0; }
    .bar > div { height: 100%; background: linear-gradient(90deg, #34d399, #22d3ee); transition: width 0.4s; }
    code { background: #f3f3f3; padding: 0 4px; border-radius: 3px; }
    #log { background: #0a0a0a; color: #b6f5b0; padding: 0.8rem; border-radius: 6px;
           font-family: ui-monospace, monospace; font-size: 0.85rem; white-space: pre-wrap;
           max-height: 220px; overflow: auto; margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>❤️ Donation Pool</h1>

  <div class="row"><button id="connect">Connect MetaMask</button>
    <span id="account">not connected</span></div>

  <div class="row">Beneficiary: <code id="beneficiary">…</code></div>
  <div class="row">Raised: <code id="raised">…</code> / <code id="target">…</code> ETH
    (<code id="progress">…</code>%)</div>
  <div class="bar"><div id="barFill" style="width:0%"></div></div>
  <div class="row">Your donations so far: <code id="mine">…</code> ETH</div>

  <div class="row">
    <input id="amount" type="number" step="0.001" min="0.001" placeholder="0.01">
    <button id="donate">Donate ETH</button>
  </div>
  <div class="row">
    <button id="withdraw" hidden>Withdraw to beneficiary</button>
    <span id="status"></span>
  </div>
  <div id="log"></div>

  <script type="module">
  import { BrowserProvider, Contract, formatEther, parseEther }
    from "https://cdn.jsdelivr.net/npm/ethers@6/+esm";

  // ── 1. PASTE YOUR DEPLOY OUTPUT HERE ─────────────────────────
  // ⚠ Replace this placeholder with the contract address Remix gave you
  //   after deploying DonationPool.sol on Sepolia. A real address is 42
  //   characters: "0x" + 40 hex digits.
  const CONTRACT_ADDRESS = "0xPASTE_YOUR_SEPOLIA_CONTRACT_ADDRESS_HERE";
  const ABI = [
    "function owner() view returns (address)",
    "function beneficiary() view returns (address)",
    "function targetAmount() view returns (uint256)",
    "function totalRaised() view returns (uint256)",
    "function withdrawn() view returns (bool)",
    "function donations(address) view returns (uint256)",
    "function progressPercent() view returns (uint256)",
    "function isTargetReached() view returns (bool)",
    "function donate() payable",
    "function withdraw()",
    "event Donated(address indexed donor, uint256 amount, uint256 newTotal)",
    "event TargetReached(uint256 finalAmount)",
    "event Withdrawn(address indexed by, uint256 amount)"
  ];

  const log = (...a) => { document.getElementById("log").textContent += a.join(" ") + "\n"; };

  let provider, signer, account, readonly, writable;

  // ── 2. CONNECT ───────────────────────────────────────────────
  document.getElementById("connect").addEventListener("click", async () => {
    if (!window.ethereum) { alert("Install MetaMask"); return; }
    provider = new BrowserProvider(window.ethereum);
    await provider.send("eth_requestAccounts", []);
    signer   = await provider.getSigner();
    account  = await signer.getAddress();
    document.getElementById("account").textContent = account;

    readonly = new Contract(CONTRACT_ADDRESS, ABI, provider);
    writable = new Contract(CONTRACT_ADDRESS, ABI, signer);

    await refresh();
    subscribe();
    log("connected as", account);
  });

  // ── 3. READ STATE ────────────────────────────────────────────
  async function refresh() {
    const [ben, target, raised, percent, reached, withdrawn, mine] =
      await Promise.all([
        readonly.beneficiary(),
        readonly.targetAmount(),
        readonly.totalRaised(),
        readonly.progressPercent(),
        readonly.isTargetReached(),
        readonly.withdrawn(),
        readonly.donations(account)
      ]);
    document.getElementById("beneficiary").textContent = ben;
    document.getElementById("target").textContent       = formatEther(target);
    document.getElementById("raised").textContent       = formatEther(raised);
    document.getElementById("progress").textContent     = percent.toString();
    document.getElementById("barFill").style.width      = percent + "%";
    document.getElementById("mine").textContent         = formatEther(mine);

    // Withdraw button: only visible when target is met, not yet withdrawn,
    // AND the connected account is the beneficiary.
    const isBeneficiary = account.toLowerCase() === ben.toLowerCase();
    document.getElementById("withdraw").hidden = !(reached && !withdrawn && isBeneficiary);

    document.getElementById("status").textContent =
      withdrawn ? "✅ Funds withdrawn — campaign closed." :
      reached   ? "🎉 Target reached — awaiting beneficiary withdrawal." :
                  "";
  }

  // ── 4. WRITE A TX ────────────────────────────────────────────
  document.getElementById("donate").addEventListener("click", async () => {
    try {
      const ethAmount = document.getElementById("amount").value;
      if (!ethAmount || Number(ethAmount) <= 0) {
        log("enter a positive amount in ETH"); return;
      }
      log("sending donate(" + ethAmount + " ETH), confirm in MetaMask…");
      const tx = await writable.donate({ value: parseEther(ethAmount) });
      log("tx hash:", tx.hash);
      const r = await tx.wait();
      log("confirmed in block", r.blockNumber);
      await refresh();
    } catch (e) { log("error:", e.shortMessage || e.message); }
  });

  document.getElementById("withdraw").addEventListener("click", async () => {
    try {
      log("sending withdraw, confirm in MetaMask…");
      const tx = await writable.withdraw();
      log("tx hash:", tx.hash);
      await tx.wait();
      log("✅ funds released to beneficiary");
      await refresh();
    } catch (e) { log("error:", e.shortMessage || e.message); }
  });

  // ── 5. LISTEN TO EVENTS ──────────────────────────────────────
  function subscribe() {
    readonly.on("Donated", (donor, amount, newTotal) => {
      log("❤️ Donated by", donor, "·", formatEther(amount), "ETH · total:", formatEther(newTotal));
      refresh();
    });
    readonly.on("TargetReached", (finalAmount) => {
      log("🎉 Target reached:", formatEther(finalAmount), "ETH");
      refresh();
    });
    readonly.on("Withdrawn", (by, amount) => {
      log("✅ Withdrawn", formatEther(amount), "ETH by", by);
      refresh();
    });
  }
  </script>
</body>
</html>