Scaffold Eth Patterns

npx create-eth@latest my-dapp
cd my-dapp
yarn install

# Terminal 1: Local chain
yarn chain

# Terminal 2: Deploy contracts
yarn deploy

# Terminal 3: Start frontend
yarn start

my-dapp/
├── packages/
│   ├── foundry/            # Smart contracts
│   │   ├── contracts/      # Solidity sources
│   │   ├── script/         # Deploy scripts
│   │   ├── test/           # Contract tests
│   │   └── foundry.toml
│   └── nextjs/             # Frontend
│       ├── app/            # Next.js app router pages
│       ├── components/     # React components
│       ├── contracts/      # Auto-generated contract data
│       ├── hooks/scaffold-eth/ # Custom hooks
│       ├── scaffold.config.ts  # Global config
│       └── utils/scaffold-eth/ # Utilities
├── package.json
└── yarn.lock

import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";

function GreeterDisplay() {
  const { data: greeting, isLoading } = useScaffoldReadContract({
    contractName: "YourContract",
    functionName: "greeting",
  });

  // With arguments
  const { data: balance } = useScaffoldReadContract({
    contractName: "YourContract",
    functionName: "balanceOf",
    args: ["0xAddress"],
  });

  if (isLoading) return <p>Loading...</p>;
  return <p>Greeting: {greeting}</p>;
}

import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";

function SetGreeting() {
  const { writeContractAsync, isPending } = useScaffoldWriteContract("YourContract");

  const handleSubmit = async () => {
    try {
      // This waits for the tx to be confirmed (unlike raw wagmi)
      await writeContractAsync({
        functionName: "setGreeting",
        args: ["Hello from Scaffold-ETH!"],
        value: parseEther("0.01"), // Optional ETH value
      });
      console.log("Transaction confirmed!");
    } catch (e) {
      console.error("Transaction failed:", e);
    }
  };

  return (
    <button onClick={handleSubmit} disabled={isPending}>
      {isPending ? "Sending..." : "Set Greeting"}
    </button>
  );
}

import { useScaffoldContract } from "~~/hooks/scaffold-eth";

function ContractInfo() {
  const { data: contract } = useScaffoldContract({
    contractName: "YourContract",
  });

  // Access contract address and ABI
  console.log("Address:", contract?.address);
  console.log("ABI:", contract?.abi);
}

import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";

function EventLog() {
  const { data: events, isLoading } = useScaffoldEventHistory({
    contractName: "YourContract",
    eventName: "GreetingChange",
    fromBlock: 0n,
    watch: true,  // Live updates
  });

  return (
    <ul>
      {events?.map((event, i) => (
        <li key={i}>
          {event.args.greetingSetter}: {event.args.newGreeting}
        </li>
      ))}
    </ul>
  );
}

// packages/foundry/script/Deploy.s.sol
pragma solidity ^0.8.20;

import {ScaffoldETHDeploy} from "./DeployHelpers.s.sol";
import {YourContract} from "../contracts/YourContract.sol";

contract DeployScript is ScaffoldETHDeploy {
    function run() external ScaffoldEthDeployerRunner {
        YourContract yourContract = new YourContract(deployer);
        console.logString(string.concat("YourContract deployed at: ", vm.toString(address(yourContract))));
    }
}

# Deploy to local chain
yarn deploy

# Deploy to a specific network
yarn deploy --network base

# Reset deployments
yarn deploy --reset

// Scaffold-ETH: writeContractAsync waits for confirmation
await writeContractAsync({ functionName: "setGreeting", args: ["Hello"] });
// Transaction is CONFIRMED here

// Raw wagmi: need separate hook for confirmation
const { writeContract, data: hash } = useWriteContract();
const { isSuccess } = useWaitForTransactionReceipt({ hash });
// Must track isSuccess separately

// packages/nextjs/scaffold.config.ts
import { defineConfig } from "~~/utils/scaffold-eth/defineConfig";

export default defineConfig({
  targetNetworks: [chains.foundry],  // Local dev
  // targetNetworks: [chains.base],  // Production
  pollingInterval: 30000,
  onlyLocalBurnerWallet: true,       // Dev only
  walletAutoConnect: true,
});

// packages/foundry/contracts/Vault.sol
pragma solidity ^0.8.20;

contract Vault {
    mapping(address => uint256) public balances;

    event Deposited(address indexed user, uint256 amount);

    function deposit() external payable {
        balances[msg.sender] += msg.value;
        emit Deposited(msg.sender, msg.value);
    }

    function withdraw(uint256 amount) external {
        require(balances[msg.sender] >= amount, "Insufficient");
        balances[msg.sender] -= amount;
        (bool ok,) = msg.sender.call{value: amount}("");
        require(ok, "Transfer failed");
    }
}

# Build frontend
yarn next:build

# Deploy contracts to production chain
yarn deploy --network base

# The frontend reads from the generated contract data
# Deploy frontend to Vercel, IPFS, etc.