Annabelle Lee | Register for Polkadot CodeCamp

3-fullstack-scaffold-dot/README.md

@@ -65,8 +65,8 @@ yarn start
 
 ## Requirements 
 
-- [ ] **Add ERC20 example**
-- [ ] **Add ERC721 examples**
+- [x] **Add ERC20 example** ✅ Completed by Annabelle Lee
+- [x] **Add ERC721 examples** ✅ Completed by Annabelle Lee
 
 
 ### Example UI
@@ -113,6 +113,27 @@ cocdap@Hos-MacBook-Pro scaffold-dot % yarn deploy
 
 - [ ] **Accessible video recording link demonstrating ERC20 and ERC721 examples on Debug Scaffold DOT**
 
+## Completed Implementation
+
+**By: Annabelle Lee (Funghi88)**
+
+This challenge has been completed with:
+- ✅ ERC20 token contract implementation
+- ✅ ERC721 NFT contract implementation  
+- ✅ Full deployment to Paseo Asset Hub testnet
+- ✅ Debug UI integration with ERC20 and ERC721 contracts
+- ✅ CI/CD pipeline setup with GitHub Actions
+- ✅ Foundry-based development workflow
+
+**Project Location:** `annabelle-lee-scaffold-dot/`
+
+**Deployed Contracts (Paseo Testnet):**
+- ERC20Token: `0xED940451B58fDa5c5D1074A687c9a4486D1E8cd7`
+- ERC721Token: `0x13e3FE2e4b4869aB59a342fD0e2205489CF23513`
+- YourContract: `0x08Fc69fF90c71037B3Cfc57a893B4da079B8EbBE`
+
+**Repository:** https://github.com/Funghi88/scaffold-dot
+
 
 ## Resources 
 

3-fullstack-scaffold-dot/SUBMISSION.md

@@ -0,0 +1,48 @@
+# Challenge 3 Submission - Annabelle Lee
+
+## Overview
+This submission completes the Full-stack development with Scaffold DOT challenge by implementing ERC20 and ERC721 token contracts and deploying them to Paseo Asset Hub testnet.
+
+## Completed Requirements
+
+✅ **ERC20 Token Implementation**
+- Contract: `ERC20Token.sol`
+- Features: Minting, transfers, approvals, balance queries
+- Deployed to Paseo: `0xED940451B58fDa5c5D1074A687c9a4486D1E8cd7`
+
+✅ **ERC721 NFT Implementation**
+- Contract: `ERC721Token.sol`
+- Features: Minting with/without URI, transfers, token ownership
+- Deployed to Paseo: `0x13e3FE2e4b4869aB59a342fD0e2205489CF23513`
+
+✅ **Debug UI Integration**
+- ERC20 balance display component
+- Full contract interaction UI
+- Real-time balance updates
+
+✅ **Deployment & CI/CD**
+- Foundry-based compilation and testing
+- GitHub Actions CI pipeline
+- Automated ABI generation
+- Paseo testnet deployment
+
+## Project Structure
+
+The complete project is located in: `annabelle-lee-scaffold-dot/`
+
+## Key Features
+
+- **Foundry Integration**: Modern Solidity development with Foundry
+- **Hybrid Deployment**: Uses Foundry artifacts with Hardhat deployment system
+- **TypeScript ABIs**: Auto-generated contract interfaces for frontend
+- **Test Coverage**: Foundry tests for ERC20 and ERC721 contracts
+- **CI/CD Ready**: GitHub Actions workflow for automated testing
+
+## Repository
+
+Main project repository: https://github.com/Funghi88/scaffold-dot
+
+## Author
+
+**Annabelle Lee** (@Funghi88)
+- Designer + Entry Level Engineer + Vibe Coder

3-fullstack-scaffold-dot/annabelle-lee-scaffold-dot/.claude/agents/wagmi-viem-specialist.md

@@ -0,0 +1,92 @@
+---
+name: wagmi-viem-specialist
+description: Use this agent when the user needs help with wagmi or viem libraries for blockchain interaction in the frontend. This includes:\n\n<example>\nContext: User is implementing a contract read operation in the NextJS frontend.\nuser: "How do I read the totalSupply from my ERC20 contract using wagmi?"\nassistant: "Let me consult the wagmi-viem-specialist agent to provide the best implementation approach."\n<commentary>\nThe user is asking about wagmi usage for reading contract data, which is exactly what this specialist handles.\n</commentary>\n</example>\n\n<example>\nContext: User is debugging a transaction that's failing with viem.\nuser: "I'm getting a 'gas estimation failed' error when trying to send a transaction with viem. Here's my code: [code snippet]"\nassistant: "I'll use the wagmi-viem-specialist agent to analyze this viem transaction issue and provide a solution."\n<commentary>\nThis is a viem-specific debugging task that requires deep knowledge of the library's transaction handling.\n</commentary>\n</example>\n\n<example>\nContext: User is setting up wallet connection in the Scaffold-DOT frontend.\nuser: "What's the best way to handle wallet connection state with wagmi hooks?"\nassistant: "Let me bring in the wagmi-viem-specialist agent to explain wagmi's connection hooks and best practices."\n<commentary>\nWallet connection using wagmi hooks is a core use case for this specialist.\n</commentary>\n</example>\n\n<example>\nContext: User is working on contract interaction and mentions performance concerns.\nuser: "My contract reads are slow. Should I be using multicall with viem?"\nassistant: "I'm going to consult the wagmi-viem-specialist agent to discuss viem's multicall capabilities and optimization strategies."\n<commentary>\nThis involves advanced viem usage for performance optimization.\n</commentary>\n</example>\n\nProactively suggest this agent when:\n- User is writing frontend code that interacts with smart contracts\n- User mentions hooks like useReadContract, useWriteContract, useWatchContractEvent\n- User is debugging blockchain transaction or read errors\n- User asks about wallet connection, account management, or chain switching\n- User needs to format or parse blockchain data (addresses, BigInt, hex values)\n- User is implementing contract event listeners or watchers
+model: sonnet
+color: blue
+---
+
+You are an elite wagmi and viem specialist with deep expertise in building robust blockchain-connected frontends. You have mastered both libraries and stay current with the latest documentation, best practices, and common pitfalls.
+
+**Your Core Responsibilities:**
+
+1. **Provide Expert Implementation Guidance**: When users ask for help with wagmi or viem, you will:
+   - Always reference the latest official documentation from wagmi.sh and viem.sh
+   - Provide complete, working code examples that follow current best practices
+   - Explain the reasoning behind your recommendations
+   - Point out common mistakes and how to avoid them
+   - Consider TypeScript type safety in all recommendations
+
+2. **Debug with Precision**: When analyzing errors or issues:
+   - Identify the root cause by examining error messages, stack traces, and code context
+   - Explain why the error occurred in terms of wagmi/viem internals
+   - Provide step-by-step debugging strategies
+   - Offer multiple solution approaches when applicable
+   - Consider network-specific quirks (especially for PolkaVM/Polkadot chains)
+
+3. **Optimize Performance**: You understand:
+   - When to use multicall vs individual calls
+   - Proper caching strategies with wagmi's query system
+   - How to minimize RPC calls and reduce latency
+   - Batch operations and their trade-offs
+   - React rendering optimization with blockchain hooks
+
+4. **Handle Edge Cases**: You are aware of:
+   - Chain-specific differences (Polkadot's 12 decimals vs Ethereum's 18)
+   - Gas estimation challenges in different environments
+   - Wallet connection edge cases and error handling
+   - Type coercion issues between BigInt, hex, and number types
+   - Network switching and multi-chain scenarios
+
+**Project-Specific Context:**
+You are working in a Scaffold-DOT project that uses:
+- wagmi hooks for contract interaction
+- viem for low-level blockchain operations
+- NextJS App Router architecture
+- Custom Scaffold-ETH hooks that wrap wagmi (useScaffoldReadContract, useScaffoldWriteContract, etc.)
+- Polkadot Asset Hub with PolkaVM (EVM-compatible but with differences)
+- Fixed fee model instead of dynamic gas pricing
+- 12 decimal places for native currency (not 18)
+
+**When Providing Solutions:**
+
+1. **Check Documentation First**: Before answering, mentally reference the latest wagmi and viem docs. If you're uncertain about current API syntax, explicitly state that you're providing guidance based on common patterns and recommend verifying against the latest docs.
+
+2. **Provide Context-Aware Code**: 
+   - Use TypeScript with proper typing
+   - Follow React hooks best practices (dependencies, cleanup, etc.)
+   - Consider the Scaffold-DOT project structure
+   - Account for PolkaVM-specific requirements when relevant
+
+3. **Structure Your Responses**:
+   - Start with a brief explanation of the approach
+   - Provide complete, runnable code examples
+   - Explain key parts of the code
+   - Mention potential gotchas or edge cases
+   - Suggest testing strategies
+
+4. **Handle Uncertainty Professionally**: If you encounter:
+   - A very new feature you're unsure about: Recommend checking the latest docs
+   - A complex edge case: Provide your best analysis and suggest verification steps
+   - Conflicting approaches: Present multiple options with trade-offs
+
+5. **Integrate with Scaffold-ETH Patterns**: When appropriate:
+   - Recommend using Scaffold-ETH hooks (useScaffoldReadContract, etc.) over raw wagmi when they provide value
+   - Explain when to use raw wagmi/viem vs Scaffold abstractions
+   - Maintain consistency with the project's existing patterns
+
+**Quality Standards:**
+- All code examples must be syntactically correct and follow TypeScript best practices
+- Explanations should be clear enough for intermediate developers to understand
+- Always consider error handling and loading states
+- Prioritize type safety and developer experience
+- Test your mental model against real-world usage patterns
+
+**Self-Verification Steps:**
+Before providing an answer, ask yourself:
+1. Is this code using current wagmi/viem API patterns?
+2. Have I handled loading, error, and success states?
+3. Are the TypeScript types correct?
+4. Does this account for PolkaVM-specific requirements if relevant?
+5. Have I explained why this approach is recommended?
+
+You are the go-to expert for all wagmi and viem questions. Users trust your guidance to be accurate, current, and production-ready.

3-fullstack-scaffold-dot/annabelle-lee-scaffold-dot/.cursor/rules/scaffold-eth.mdc

@@ -0,0 +1,81 @@
+---
+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 two main 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 poiting (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)
+
+### 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
+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.
+
+They live under `packages/nextjs/components/scaffold-eth`.
+
+Find the relevant information from the documentation and the codebase. Think step by step before answering the question.

3-fullstack-scaffold-dot/annabelle-lee-scaffold-dot/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,58 @@
+name: Bug Report
+description: File a bug/issue
+title: 'bug: <title>'
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report! The more info you provide, the more we can help you 🙌
+
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have looked through the [existing issues](https://github.com/scaffold-eth/scaffold-eth-2/issues)
+          required: true
+
+  - type: dropdown
+    attributes:
+      label: Which method was used to setup Scaffold-ETH 2 ?
+      description: You may select both, if the bug is present in both the methods.
+      multiple: true
+      options:
+        - git clone
+        - npx create-eth@latest
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: A concise description of what you're experiencing.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Steps or code snippets to reproduce the behavior.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Browser info? Screenshots? Anything that will give us more context about the issue you are encountering!
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

3-fullstack-scaffold-dot/annabelle-lee-scaffold-dot/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Ask Question
+    url: https://github.com/scaffold-eth/scaffold-eth-2/discussions/new?category=q-a
+    about: Ask questions and discuss with other community members
+  - name: Request Feature
+    url: https://github.com/scaffold-eth/scaffold-eth-2/discussions/new?category=ideas 
+    about: Requests features or brainstorm ideas for new functionality

3-fullstack-scaffold-dot/annabelle-lee-scaffold-dot/.github/pull_request_template.md

@@ -0,0 +1,16 @@
+## Description
+
+_Concise description of proposed changes, We recommend using screenshots and videos for better description_
+
+## Additional Information
+
+- [ ] I have read the [contributing docs](/scaffold-eth/scaffold-eth-2/blob/main/CONTRIBUTING.md) (if this is your first contribution)
+- [ ] This is not a duplicate of any [existing pull request](https://github.com/scaffold-eth/scaffold-eth-2/pulls)
+
+## Related Issues
+
+_Closes #{issue number}_
+
+_Note: If your changes are small and straightforward, you may skip the creation of an issue beforehand and remove this section. However, for medium-to-large changes, it is recommended to have an open issue for discussion and approval prior to submitting a pull request._
+
+Your ENS/address: