Initial commit with 🏗️ create-eth @ 2.0.4

.cursor/rules/scaffold-eth.mdc

@@ -0,0 +1,114 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+
+This codebase contains Scaffold-ETH 2 (SE-2), everything you need to build dApps on Ethereum. Its tech stack is NextJS, RainbowKit, Wagmi and Typescript. Supports Hardhat and Foundry.
+
+It's a yarn monorepo that contains following packages:
+
+- Hardhat (`packages/hardhat`): The solidity framework to write, test and deploy EVM Smart Contracts.
+- NextJS (`packages/nextjs`): The UI framework extended with utilities to make interacting with Smart Contracts easy (using Next.js App Router, not Pages Router).
+
+
+The usual dev flow is:
+
+- Start SE-2 locally:
+  - `yarn chain`: Starts a local blockchain network
+  - `yarn deploy`: Deploys SE-2 default contract
+  - `yarn start`: Starts the frontend
+- Write a Smart Contract (modify the deployment script in `packages/hardhat/deploy` if needed)
+- Deploy it locally (`yarn deploy`)
+- Go to the `http://locahost:3000/debug` page to interact with your contract with a nice UI
+- Iterate until you get the functionality you want in your contract
+- Write tests for the contract in `packages/hardhat/test`
+- Create your custom UI using all the SE-2 components, hooks, and utilities.
+- Deploy your Smart Contrac to a live network
+- Deploy your UI (`yarn vercel` or `yarn ipfs`)
+  - You can tweak which network the frontend is pointing (and some other configurations) in `scaffold.config.ts`
+
+## Smart Contract UI interactions guidelines
+SE-2 provides a set of hooks that facilitates contract interactions from the UI. It reads the contract data from `deployedContracts.ts` and `externalContracts.ts`, located in `packages/nextjs/contracts`.
+
+### Reading data from a contract
+Use the `useScaffoldReadContract` (`packages/nextjs/hooks/scaffold-eth/useScaffoldReadContract.ts`) hook. 
+
+Example:
+```typescript
+const { data: someData } = useScaffoldReadContract({
+  contractName: "YourContract",
+  functionName: "functionName",
+  args: [arg1, arg2], // optional
+});
+```
+
+### Writing data to a contract
+Use the `useScaffoldWriteContract` (`packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts`) hook.
+1. Initilize the hook with just the contract name
+2. Call the `writeContractAsync` function.
+
+Example:
+```typescript
+const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract(
+  { contractName: "YourContract" }
+);
+// Usage (this will send a write transaction to the contract)
+await writeContractAsync({
+  functionName: "functionName",
+  args: [arg1, arg2], // optional
+  value: parseEther("0.1"), // optional, for payable functions
+});
+```
+
+Never use any other patterns for contract interaction. The hooks are:
+- useScaffoldReadContract (for reading)
+- useScaffoldWriteContract (for writing)
+
+### Reading events from a contract
+
+Use the `useScaffoldEventHistory` (`packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts`) hook.
+
+Example:
+
+```typescript
+const {
+  data: events,
+  isLoading,
+  error,
+} = useScaffoldEventHistory({
+  contractName: "YourContract",
+  eventName: "GreetingChange",
+  watch: true, // optional, if true, the hook will watch for new events
+});
+```
+
+The `data` property consists of an array of events and can be displayed as:
+
+```jsx
+<div>
+  {events?.map((event) => (
+    <div key={event.logIndex}>
+      <p>{event.args.greetingSetter}</p>
+      <p>{event.args.newGreeting}</p>
+      <p>{event.args.premium}</p>
+      <p>{event.args.value}</p>
+    </div>
+  ))}
+</div>
+```
+
+### Other Hooks
+SE-2 also provides other hooks to interact with blockchain data: `useScaffoldWatchContractEvent`, `useScaffoldEventHistory`, `useDeployedContractInfo`, `useScaffoldContract`, `useTransactor`. They live under `packages/nextjs/hooks/scaffold-eth`.
+
+## Display Components guidelines
+With the `@scaffold-ui/components` library, SE-2 provides a set of pre-built React components for common Ethereum use cases:
+
+- `Address`: Always use this when displaying an ETH address
+- `AddressInput`: Always use this when users need to input an ETH address
+- `Balance`: Display the ETH/USDC balance of a given address
+- `EtherInput`: An extended number input with ETH/USD conversion.
+
+For fully customizable components, you can use the hooks from the `@scaffold-ui/hooks` library to get the data you need.
+
+Find the relevant information from the documentation and the codebase. Think step by step before answering the question.