Your first dApp — a tip jar

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

import "@openzeppelin/contracts/access/Ownable.sol";

contract TipJar is Ownable {
    event Tipped(address indexed from, uint256 amount, string message);

    constructor() Ownable(msg.sender) {}

    function tip(string calldata message) external payable {
        require(msg.value > 0, "tip must be > 0");
        emit Tipped(msg.sender, msg.value, message);
    }

    function withdraw(address payable to) external onlyOwner {
        to.transfer(address(this).balance);
    }
}

typescript
// components/TipButton.tsx
"use client";
import { useWriteContract } from "wagmi";
import { parseEther } from "viem";
const TIP_ABI = [{ name: "tip", type: "function", stateMutability: "payable", inputs: [{ name: "message", type: "string" }] }] as const;
const TIP_ADDRESS = "0xYourDeployedContract";

export function TipButton() {
  const { writeContract } = useWriteContract();
  return (
    <button onClick={() => writeContract({
      address: TIP_ADDRESS,
      abi: TIP_ABI,
      functionName: "tip",
      args: ["keep up the good work"],
      value: parseEther("0.01"),
    })}>Tip 0.01 ETH</button>
  );
}

1. User clicks → wagmi opens wallet (MetaMask) 2. User signs the tx → wallet broadcasts it 3. Block includes it → TipJar contract receives ETH + emits Tipped event 4. Any indexer (e.g., your own frontend polling queryFilter) can now display the tip

Write a TipJar contract that emits the event.