Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edakturk14/devcon24-cls
BuidlGuidl Community led session @devcon bangkok
https://github.com/edakturk14/devcon24-cls
Last synced: about 2 months ago
JSON representation
BuidlGuidl Community led session @devcon bangkok
- Host: GitHub
- URL: https://github.com/edakturk14/devcon24-cls
- Owner: edakturk14
- Created: 2024-11-13T06:21:11.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-13T06:27:05.000Z (about 2 months ago)
- Last Synced: 2024-11-13T07:25:19.001Z (about 2 months ago)
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Devcon 2024 Workshop
Welcome to the Devcon 2024 Workshop! In this session, we’ll build a **gasless NFT minting app** using **Scaffold-ETH 2**. You'll learn to set up your development environment, deploy an ERC721 NFT contract, and integrate a paymaster to cover gas fees for your users. By the end, you'll have a fully functional and user-friendly NFT minting app that allows users to mint NFTs without paying for gas, using the Coinbase Smart Wallet.
### Tools & Resources We'll Use
- Scaffold-ETH 2: A developer toolset for building decentralized apps quickly.
- Foundry: Modular toolkit for Ethereum smart contract development.
- ERC-721: Standard for NFT contracts.
- DaisyUI: A Tailwind CSS-based component library for styling.
---
## Step-by-step
### 1. Set Up an SE2 App
- **Prerequisites**: Ensure you have **Foundry** installed and ready to use.
- **Note**: When creating the app, **do not add extra spaces** in the title.
```
npx create-eth@latest
```
- Make sure to choose foundry as your smart contract development environment
> ? What solidity framework do you want to use? foundry"
### 2. Start the app and test it out
```
yarn chain // start your local anvil env
yarn deploy // deploys a test smart contract to the local network
yarn start // start your NextJS app
```
Visit: http://localhost:3000
### 3. Add a new NFT Contract
- Install the requirments for solmate/openzepplin:
`forge install transmissions11/solmate Openzeppelin/openzeppelin-contracts`
- Create a new contract file called `NFTContract.sol` in the `packages/foundry/contracts` folder.
- Implement an **ERC721 contract** using **Solmate**. Refer to this guide for help: [Solmate NFT Tutorial](https://book.getfoundry.sh/tutorials/solmate-nft).
```
// Example ERC721 Contract
contract MyNFT is ERC721 {
// NFT logic here
}
```
### 4. Create a new deployment script and deploy the NFT Contract
- Create a new deployment script in the `packages/foundry/script` folder. You can check the contents of the `DeployYourContract.s`to give an idea on what the script should look like.
- _Hint:_ make sure to adjust the parameters based on your constructor.
- Add the new deployment script to `Deploy.s.sol`
- _Note: you may need to update the solidity version on the contract file._
- Go to the **Debug** tab in your SE2 app to review the contract details and confirm the deployment.
### 5. Start Building the Frontend
- Create a new folder named `/nft` in your project directory.
- Use **DaisyUI components** to build an intuitive and visually appealing NFT minting interface. Check them out here: https://daisyui.com/components/card/
```
Mint a Bird
NFTs left: {remaining}
```
- **Test** the frontend to make sure it works smoothly and provides a good user experience.
### 6. Add contract function calls to the frontend
- We want to be able to mint the nft from the frontend. Here is how: https://docs.scaffoldeth.io/hooks/useScaffoldWriteContract
- Get the address of the connected account. You can use the useAccount hook in wagmi (more: https://docs.scaffoldeth.io/recipes/GetCurrentBalanceFromAccount)
### 7. Edit the NFT Contract
- Add a **maximum cap** to restrict the number of users who can mint your NFT.
- Once you've made the edits, **re-deploy the contract** to update your app.
```
uint256 public constant maxSupply = 10; // Set the max supply to 10
function mintTo(address recipient) public payable returns (uint256) {
require(currentTokenId < maxSupply, "Max supply reached");
uint256 newItemId = ++currentTokenId;
_safeMint(recipient, newItemId);
return newItemId;
}
```
### 8. Add the max supply to your frontend
- You want to have the tokenId and the max supply. Simply use the useScaffoldRead hooks for this.
- _Hint: When interacting with Ethereum smart contracts, numeric values are often returned as BigNumber so you'll need to change the values to Number(xx)_
### 10. Ship Your Project!
- Run `yarn generate` to create an account for deployment.
- Deploy your project with `yarn deploy --network baseSepolia`.
- **Test the app thoroughly** to ensure everything works perfectly!
There you go, a gassless nft app! 🚀