114 lines
4.2 KiB
Plaintext
114 lines
4.2 KiB
Plaintext
---
|
|
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. |