{"id":50496189,"url":"https://github.com/davidweb3-ctrl/my-dapp-project","last_synced_at":"2026-06-02T07:04:00.014Z","repository":{"id":318803683,"uuid":"1075821849","full_name":"davidweb3-ctrl/my-dapp-project","owner":"davidweb3-ctrl","description":"A complete Web3 frontend application built with Next.js, Wagmi, Viem, and RainbowKit for interacting with smart contracts.","archived":false,"fork":false,"pushed_at":"2025-10-15T03:46:45.000Z","size":250,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-15T13:23:06.924Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidweb3-ctrl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-14T03:22:38.000Z","updated_at":"2025-10-15T03:48:03.000Z","dependencies_parsed_at":"2025-10-16T02:04:26.752Z","dependency_job_id":"73845675-ffa2-4ac7-9988-3f73f1413a9b","html_url":"https://github.com/davidweb3-ctrl/my-dapp-project","commit_stats":null,"previous_names":["davidweb3-ctrl/my-dapp-project"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/davidweb3-ctrl/my-dapp-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidweb3-ctrl%2Fmy-dapp-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidweb3-ctrl%2Fmy-dapp-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidweb3-ctrl%2Fmy-dapp-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidweb3-ctrl%2Fmy-dapp-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidweb3-ctrl","download_url":"https://codeload.github.com/davidweb3-ctrl/my-dapp-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidweb3-ctrl%2Fmy-dapp-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33810345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-02T02:00:07.132Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-02T07:03:58.707Z","updated_at":"2026-06-02T07:04:00.006Z","avatar_url":"https://github.com/davidweb3-ctrl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 My DApp - Full-Stack Blockchain Application\n\n\u003cdiv align=\"center\"\u003e\n\n![Solidity](https://img.shields.io/badge/Solidity-0.8.20-blue)\n![Foundry](https://img.shields.io/badge/Foundry-Latest-orange)\n![Next.js](https://img.shields.io/badge/Next.js-14-black)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-blue)\n![pnpm](https://img.shields.io/badge/pnpm-10.18.3-orange)\n![License](https://img.shields.io/badge/License-MIT-green)\n\nA production-ready decentralized application featuring ERC20 tokens, NFT collection, token banking system, and NFT marketplace with whitelist functionality.\n\n[Features](#-features) • [Quick Start](#-quick-start) • [Deployment](#-deployment) • [Documentation](#-documentation)\n\n\u003c/div\u003e\n\n---\n\n## 📖 Project Overview\n\nThis is a comprehensive full-stack DApp that demonstrates modern blockchain development practices:\n\n### Smart Contracts (Solidity + Foundry)\n- **MyERC20**: ERC20 token with EIP-2612 permit signatures for gasless approvals\n- **TokenBank**: Secure token deposit/withdrawal system with permit support\n- **MyNFT**: ERC721 NFT collection with metadata URI storage\n- **NFTMarket**: NFT marketplace using ERC20 tokens with EIP-712 whitelist signatures\n\n### Frontend (Next.js + Wagmi + Viem)\n- Modern Web3 interface with RainbowKit wallet connection\n- Responsive design with TailwindCSS\n- Type-safe contract interactions with TypeScript\n- Real-time blockchain data updates\n\n---\n\n## ✨ Features\n\n### 🪙 Token Management (MyERC20)\n- ✅ ERC20 standard implementation\n- ✅ 100,000,000 MERC20 total supply\n- ✅ Transfer tokens between addresses\n- ✅ Approve and manage spending allowances\n- ✅ **EIP-2612 Permit**: Gasless approvals via signatures\n\n### 🏦 Token Banking (TokenBank)\n- ✅ Deposit tokens to earn (future: interest)\n- ✅ Withdraw tokens anytime\n- ✅ Track individual user balances\n- ✅ **EIP-2612 Permit**: Gasless deposits with ERC20 permit signatures\n- ✅ **Permit2 Integration**: Advanced gasless deposits with universal token approval\n- ✅ **Batch Deposits**: Multiple deposits with single signature authorization\n- ✅ **Real-time Balance Updates**: Automatic balance refresh after transactions\n- ✅ **Comprehensive Error Handling**: User-friendly error messages and retry mechanisms\n\n### 🎨 NFT Collection (MyNFT)\n- ✅ ERC721 standard with URI storage\n- ✅ Owner-controlled minting\n- ✅ Metadata URI support (IPFS ready)\n- ✅ Auto-incrementing token IDs\n\n### 🛒 NFT Marketplace (NFTMarket)\n- ✅ List NFTs for sale with ERC20 pricing\n- ✅ Buy NFTs with token payments\n- ✅ Cancel listings\n- ✅ **EIP-712 Whitelist**: Signature-based access control for exclusive sales\n\n---\n\n## 🛠 Environment Dependencies\n\n### Required Software\n\n| Tool | Version | Purpose |\n|------|---------|---------|\n| [Foundry](https://book.getfoundry.sh/getting-started/installation) | Latest | Smart contract development \u0026 testing |\n| [Node.js](https://nodejs.org/) | 18+ | Frontend development |\n| [pnpm](https://pnpm.io/) | Latest | Package management |\n| [Git](https://git-scm.com/) | Latest | Version control |\n| [MetaMask](https://metamask.io/) | Browser Extension | Wallet for testing |\n\n### Install Foundry\n\n```bash\n# Install Foundry\ncurl -L https://foundry.paradigm.xyz | bash\nfoundryup\n\n# Verify installation\nforge --version\ncast --version\nanvil --version\n```\n\n### Install Node.js\n\n```bash\n# Using nvm (recommended)\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash\nnvm install 18\nnvm use 18\n\n# Verify installation\nnode --version  # Should be v18.x or higher\n\n# Install pnpm\nnpm install -g pnpm\npnpm --version\n```\n\n### Why pnpm?\n\nThis project uses **pnpm** as the package manager for several advantages:\n\n- 🚀 **Faster**: Up to 2x faster than npm/yarn\n- 💾 **Disk Efficient**: Uses hard links to avoid duplicate packages\n- 🔒 **Strict**: Better dependency resolution and security\n- 📦 **Monorepo Ready**: Excellent workspace support\n- 🎯 **Compatible**: Drop-in replacement for npm commands\n\n**Alternative installation methods:**\n```bash\n# Using Homebrew (macOS)\nbrew install pnpm\n\n# Using curl\ncurl -fsSL https://get.pnpm.io/install.sh | sh -\n\n# Using npm (as shown above)\nnpm install -g pnpm\n```\n\n---\n\n## 📦 Installation \u0026 Build\n\n### 1. Clone or Navigate to Project\n\n```bash\ncd /Users/xiadawei/codeSpace/decert/my-dapp-project\n```\n\n### 2. Install Smart Contract Dependencies\n\n```bash\n# Install OpenZeppelin contracts\nforge install OpenZeppelin/openzeppelin-contracts\n\n# Verify lib directory\nls lib/\n```\n\n### 3. Configure Foundry\n\nCreate or update `foundry.toml`:\n\n```toml\n[profile.default]\nsrc = \"contracts\"\nout = \"out\"\nlibs = [\"lib\"]\nsolc = \"0.8.20\"\noptimizer = true\noptimizer_runs = 200\n\nremappings = [\n    \"@openzeppelin/=lib/openzeppelin-contracts/\"\n]\n\n[rpc_endpoints]\nlocalhost = \"http://127.0.0.1:8545\"\nsepolia = \"${SEPOLIA_RPC_URL}\"\n\n[etherscan]\nsepolia = { key = \"${ETHERSCAN_API_KEY}\" }\n```\n\n### 4. Compile Smart Contracts\n\n```bash\n# Compile all contracts\nforge build\n\n# Should output: Compiler run successful!\n\n# Check compiled artifacts\nls out/\n```\n\n### 5. Run Contract Tests\n\n```bash\n# Run all tests\nforge test\n\n# Run with verbosity\nforge test -vvv\n\n# Run specific test\nforge test --match-test testTransfer\n\n# Check coverage\nforge coverage\n```\n\n### 6. Install Frontend Dependencies\n\n```bash\ncd frontend\n\n# Install packages with pnpm\npnpm install\n\n# Verify installation\nls node_modules/\n```\n\n---\n\n## 🚀 Deployment\n\n### Local Deployment (Development)\n\n#### Step 1: Start Local Blockchain\n\n```bash\n# Terminal 1: Start Anvil (Foundry's local node)\nanvil\n\n# Anvil will display:\n# - 10 test accounts with private keys\n# - RPC URL: http://127.0.0.1:8545\n# - Chain ID: 31337\n```\n\n#### Step 2: Create Deployment Script\n\nCreate `script/Deploy.s.sol`:\n\n```solidity\n// SPDX-License-Identifier: MIT\npragma solidity ^0.8.20;\n\nimport {Script} from \"forge-std/Script.sol\";\nimport {console} from \"forge-std/console.sol\";\nimport {MyERC20} from \"../contracts/MyERC20.sol\";\nimport {TokenBank} from \"../contracts/TokenBank.sol\";\nimport {MyNFT} from \"../contracts/MyNFT.sol\";\nimport {NFTMarket} from \"../contracts/NFTMarket.sol\";\nimport {MockPermit2} from \"../contracts/mocks/MockPermit2.sol\";\n\ncontract DeployScript is Script {\n    function run() external {\n        uint256 deployerPrivateKey = vm.envUint(\"PRIVATE_KEY\");\n        vm.startBroadcast(deployerPrivateKey);\n\n        // 1. Deploy MyERC20\n        MyERC20 token = new MyERC20();\n        console.log(\"MyERC20 deployed at:\", address(token));\n\n        // 2. Deploy MockPermit2 (for testing)\n        MockPermit2 permit2 = new MockPermit2();\n        console.log(\"MockPermit2 deployed at:\", address(permit2));\n\n        // 3. Deploy TokenBank with Permit2 support\n        TokenBank bank = new TokenBank(address(token), address(permit2));\n        console.log(\"TokenBank deployed at:\", address(bank));\n\n        // 4. Deploy MyNFT\n        MyNFT nft = new MyNFT();\n        console.log(\"MyNFT deployed at:\", address(nft));\n\n        // 5. Deploy NFTMarket\n        NFTMarket market = new NFTMarket(address(token), address(nft));\n        console.log(\"NFTMarket deployed at:\", address(market));\n\n        vm.stopBroadcast();\n    }\n}\n```\n\n#### Step 3: Deploy Contracts\n\n```bash\n# Terminal 2: Deploy to local network\n# Using first Anvil account\nforge script script/Deploy.s.sol:DeployScript \\\n  --rpc-url http://127.0.0.1:8545 \\\n  --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 \\\n  --broadcast\n\n# Save the deployed addresses!\n# Example output:\n# MyERC20 deployed at: 0x5FbDB2315678afecb367f032d93F642f64180aa3\n# MockPermit2 deployed at: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512\n# TokenBank deployed at: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0\n# MyNFT deployed at: 0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9\n# NFTMarket deployed at: 0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9\n```\n\n#### Step 4: Update Frontend Configuration\n\nEdit `frontend/utils/contracts.ts`:\n\n```typescript\nexport const CONTRACT_ADDRESSES = {\n  MyERC20: '0x5FbDB2315678afecb367f032d93F642f64180aa3',\n  TokenBank: '0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0', // Updated with Permit2 support\n  MyNFT: '0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9',\n  NFTMarket: '0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9',\n  MockPermit2: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512', // MockPermit2 for testing\n} as const;\n```\n\n### Testnet Deployment (Sepolia)\n\n#### Step 1: Setup Environment Variables\n\nCreate `.env` file:\n\n```bash\nPRIVATE_KEY=your_private_key_here\nSEPOLIA_RPC_URL=https://sepolia.infura.io/v3/YOUR_INFURA_KEY\nETHERSCAN_API_KEY=your_etherscan_api_key\n```\n\n#### Step 2: Deploy to Sepolia\n\n```bash\n# Load environment variables\nsource .env\n\n# Deploy and verify\nforge script script/Deploy.s.sol:DeployScript \\\n  --rpc-url $SEPOLIA_RPC_URL \\\n  --private-key $PRIVATE_KEY \\\n  --broadcast \\\n  --verify \\\n  --etherscan-api-key $ETHERSCAN_API_KEY\n\n# Contracts will be verified on Etherscan automatically\n```\n\n---\n\n## 🔐 Permit2 Integration Details\n\n### What is Permit2?\n\nPermit2 is a universal token approval standard developed by Uniswap that allows for more efficient and secure token approvals. Unlike traditional ERC20 approvals, Permit2 enables:\n\n- **Gasless Approvals**: Sign messages instead of paying gas for approvals\n- **Universal Approvals**: One approval for multiple contracts\n- **Batch Operations**: Multiple operations with a single signature\n- **Better Security**: Time-limited and amount-limited approvals\n\n### TokenBank Permit2 Features\n\n#### 🚀 **Single Deposit with Permit2**\n```typescript\n// User signs a message authorizing the deposit\nconst signature = await signTypedDataAsync({\n  domain: permit2Domain,\n  types: permit2Types,\n  primaryType: 'PermitTransferFrom',\n  message: {\n    permitted: { token: tokenAddress, amount: depositAmount },\n    spender: bankAddress,\n    nonce: currentNonce,\n    deadline: expirationTime\n  }\n});\n\n// Single transaction: signature + deposit\nawait writeContract({\n  address: bankAddress,\n  abi: TokenBank_ABI,\n  functionName: 'depositWithPermit2',\n  args: [owner, amount, expiration, nonce, v, r, s]\n});\n```\n\n#### 📦 **Batch Deposits**\n```typescript\n// Multiple amounts with single signature\nconst batchItems = [\n  { amount: parseUnits('100', 18) },\n  { amount: parseUnits('200', 18) },\n  { amount: parseUnits('300', 18) }\n];\n\n// Single signature for all deposits\nconst totalAmount = batchItems.reduce((sum, item) =\u003e sum + item.amount, 0n);\n// ... sign and execute\n```\n\n#### 🔄 **User Experience Flow**\n1. **Select Method**: Choose between Traditional, Permit2, or Batch Permit2\n2. **Enter Amount**: Input deposit amount(s)\n3. **Sign Message**: Sign EIP-712 message (no gas cost)\n4. **Execute Deposit**: Single transaction with signature\n5. **Auto Update**: Balances refresh automatically\n\n#### 🛡️ **Security Features**\n- **Nonce Management**: Prevents replay attacks\n- **Expiration**: Time-limited approvals\n- **Amount Limits**: Precise amount control\n- **Signature Verification**: EIP-712 standard compliance\n\n### Frontend Components\n\n#### **DepositTypeSelector**\n- Traditional deposit (approve + deposit)\n- Permit2 deposit (signature + deposit)\n- Batch Permit2 (multiple amounts, one signature)\n\n#### **Permit2DepositForm**\n- Amount input with validation\n- Balance checking\n- Signature preparation\n- Error handling\n\n#### **BatchDepositForm**\n- Multiple amount inputs\n- Total calculation\n- Batch signature generation\n- Individual amount validation\n\n#### **SignatureModal**\n- EIP-712 message display\n- Signature request UI\n- User-friendly instructions\n- Error feedback\n\n### Technical Implementation\n\n#### **Custom RPC Client**\n```typescript\n// Bypasses Wagmi auto-detection issues\nconst publicClient = createPublicClient({\n  chain: hardhat,\n  transport: http('http://127.0.0.1:8545', {\n    batch: false,\n    retryCount: 0,\n    timeout: 10000,\n  }),\n});\n```\n\n#### **State Management**\n```typescript\n// Manual state management for balances\nconst [walletBalance, setWalletBalance] = useState\u003cbigint\u003e(0n);\nconst [bankBalance, setBankBalance] = useState\u003cbigint\u003e(0n);\nconst [permit2Nonce, setPermit2Nonce] = useState\u003cbigint\u003e(0n);\n\n// Auto-refresh after transactions\nuseEffect(() =\u003e {\n  if (isConfirmed \u0026\u0026 hash) {\n    fetchBalances(); // Refresh all balances\n    setSuccessMessage(SUCCESS_MESSAGES.PERMIT2_DEPOSIT);\n  }\n}, [isConfirmed, hash]);\n```\n\n#### **Error Handling**\n```typescript\n// Comprehensive error messages\nexport const ERROR_MESSAGES = {\n  INSUFFICIENT_BALANCE: 'Insufficient token balance',\n  INVALID_AMOUNT: 'Invalid deposit amount',\n  SIGNATURE_EXPIRED: 'Signature has expired',\n  INVALID_NONCE: 'Invalid nonce value',\n  PERMIT2_ERROR: 'Permit2 operation failed',\n} as const;\n```\n\n---\n\n## 🎮 Frontend Setup \u0026 Execution\n\n### Configure Frontend\n\n#### 1. Get WalletConnect Project ID\n\nVisit [WalletConnect Cloud](https://cloud.walletconnect.com/) and create a free project.\n\nUpdate `frontend/utils/wagmiConfig.ts`:\n\n```typescript\nexport const config = getDefaultConfig({\n  appName: 'My DApp',\n  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // ← Replace this\n  chains: [sepolia, hardhat],\n  // ...\n});\n```\n\n#### 2. Configure Network\n\nFor local development, `wagmiConfig.ts` is already set to use Hardhat/Anvil.\n\nFor testnet, update:\n\n```typescript\nexport const config = getDefaultConfig({\n  chains: [sepolia], // Remove hardhat for production\n  transports: {\n    [sepolia.id]: http('https://sepolia.infura.io/v3/YOUR_INFURA_KEY'),\n  },\n  // ...\n});\n```\n\n### Run Frontend Development Server\n\n```bash\ncd frontend\n\n# Start development server with pnpm\npnpm dev\n```\n\n**Open browser**: http://localhost:3000\n\n### Build for Production\n\n```bash\n# Build optimized production bundle\npnpm build\n\n# Start production server\npnpm start\n\n# Or export static site\npnpm build\npnpm export\n```\n\n---\n\n## 🎯 Interaction Demo Guide\n\n### Initial Setup\n\n1. **Start Anvil**: Keep it running in a terminal\n2. **Deploy Contracts**: Follow deployment steps above\n3. **Run Frontend**: `cd frontend \u0026\u0026 pnpm dev`\n4. **Open Browser**: http://localhost:3000\n\n### Connect Wallet\n\n1. Click **\"Connect Wallet\"** button in navigation\n2. Select **MetaMask**\n3. Switch to **Localhost 8545** network in MetaMask\n4. Import Anvil test account:\n   - Private Key: `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80`\n5. Approve connection\n\n### Demo Flow\n\n#### 1️⃣ Token Management\n- Navigate to **Token** page\n- See your balance (100M MERC20)\n- Transfer tokens to another address\n- Approve spending allowance\n\n#### 2️⃣ Token Banking\n- Navigate to **Bank** page\n- **Traditional Deposit**:\n  - Click **\"Approve\"** for desired amount\n  - Click **\"Deposit\"** to deposit tokens\n- **Permit2 Deposit** (Recommended):\n  - Select **\"Permit2\"** deposit method\n  - Enter deposit amount\n  - Click **\"Sign \u0026 Deposit\"** for gasless transaction\n  - Sign the EIP-712 message in MetaMask\n- **Batch Deposit**:\n  - Select **\"Batch Permit2\"** method\n  - Enter multiple amounts\n  - Single signature for all deposits\n- View balances update automatically\n- Try **\"Withdraw\"** to get tokens back\n\n#### 3️⃣ NFT Minting\n- Navigate to **NFT** page\n- Enter recipient address\n- Enter token URI (e.g., `ipfs://QmTest...`)\n- Click **\"Mint NFT\"** (owner only)\n- View token metadata\n\n#### 4️⃣ NFT Trading\n- Navigate to **Market** page\n- **List NFT**:\n  1. Approve NFT for market\n  2. Set price and list\n- **Buy NFT**:\n  1. View listing\n  2. Approve tokens\n  3. Click Buy\n\n---\n\n## 🔧 Contract Interaction Commands\n\n### Using Cast (Foundry CLI)\n\n```bash\n# Set variables\nTOKEN=0x5FbDB2315678afecb367f032d93F642f64180aa3\nBANK=0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512\nNFT=0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0\nMARKET=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9\nSENDER=0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266\n\n# Check token balance\ncast call $TOKEN \"balanceOf(address)\" $SENDER\n\n# Transfer tokens\ncast send $TOKEN \"transfer(address,uint256)\" \\\n  0x70997970C51812dc3A010C7d01b50e0d17dc79C8 \\\n  1000000000000000000 \\\n  --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80\n\n# Approve bank contract\ncast send $TOKEN \"approve(address,uint256)\" \\\n  $BANK 1000000000000000000 \\\n  --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80\n\n# Deposit to bank\ncast send $BANK \"deposit(uint256)\" \\\n  1000000000000000000 \\\n  --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80\n\n# Check bank balance\ncast call $BANK \"balanceOf(address)\" $SENDER\n\n# Permit2 Deposit (Advanced)\n# Note: This requires signature generation - use frontend for full experience\n# The depositWithPermit2 function signature:\n# depositWithPermit2(address owner, uint160 amount, uint48 expiration, uint48 nonce, uint8 v, bytes32 r, bytes32 s)\n\n# Mint NFT (owner only)\ncast send $NFT \"mint(address,string)\" \\\n  $SENDER \"ipfs://QmTest...\" \\\n  --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80\n```\n\n### Using Forge Scripts\n\nCreate `script/Interact.s.sol`:\n\n```solidity\n// SPDX-License-Identifier: MIT\npragma solidity ^0.8.20;\n\nimport {Script} from \"forge-std/Script.sol\";\nimport {console} from \"forge-std/console.sol\";\nimport {MyERC20} from \"../contracts/MyERC20.sol\";\nimport {TokenBank} from \"../contracts/TokenBank.sol\";\n\ncontract InteractScript is Script {\n    function run() external {\n        uint256 privateKey = vm.envUint(\"PRIVATE_KEY\");\n        address token = 0x5FbDB2315678afecb367f032d93F642f64180aa3;\n        address bank = 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512;\n        \n        vm.startBroadcast(privateKey);\n\n        MyERC20 myToken = MyERC20(token);\n        TokenBank myBank = TokenBank(bank);\n\n        // Check balance\n        uint256 balance = myToken.balanceOf(msg.sender);\n        console.log(\"Token balance:\", balance);\n\n        // Approve and deposit\n        uint256 amount = 1000 * 10**18;\n        myToken.approve(bank, amount);\n        myBank.deposit(amount);\n        \n        console.log(\"Deposited:\", amount);\n\n        vm.stopBroadcast();\n    }\n}\n```\n\nRun the script:\n\n```bash\nforge script script/Interact.s.sol:InteractScript \\\n  --rpc-url http://127.0.0.1:8545 \\\n  --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 \\\n  --broadcast\n```\n\n---\n\n## 🐛 Troubleshooting \u0026 Common Errors\n\n### Contract Compilation Issues\n\n#### Error: `Compiler not found`\n```bash\n# Solution: Install solc version\nforge install\n\n# Or specify version\nsolc-select install 0.8.20\nsolc-select use 0.8.20\n```\n\n#### Error: `Could not find @openzeppelin`\n```bash\n# Solution: Install OpenZeppelin\nforge install OpenZeppelin/openzeppelin-contracts\n\n# Verify remappings in foundry.toml\nforge remappings\n```\n\n### Deployment Issues\n\n#### Error: `Invalid RPC URL`\n```bash\n# Solution: Check Anvil is running\nanvil\n\n# Or check RPC URL format\necho $SEPOLIA_RPC_URL\n```\n\n#### Error: `Insufficient funds for gas`\n```bash\n# Solution: \n# 1. For Anvil: Use provided test accounts\n# 2. For Testnet: Get testnet ETH\n# Sepolia faucet: https://sepoliafaucet.com/\n```\n\n#### Error: `Nonce too high`\n```bash\n# Solution: Reset MetaMask account\n# Settings → Advanced → Reset Account\n```\n\n### Frontend Issues\n\n#### Error: `Cannot find module`\n```bash\n# Solution: Reinstall dependencies\ncd frontend\nrm -rf node_modules pnpm-lock.yaml\npnpm install\n```\n\n#### Error: `ChainMismatchError`\n```bash\n# Solution: Switch network in MetaMask\n# Must match the network in wagmiConfig.ts\n```\n\n#### Error: `Contract not deployed`\n```bash\n# Solution: Verify contract addresses\n# 1. Check deployment output\n# 2. Update frontend/utils/contracts.ts\n# 3. Ensure on correct network\n```\n\n#### Error: `User rejected transaction`\n```bash\n# Solution: \n# 1. Check MetaMask popup isn't blocked\n# 2. Verify gas fees are reasonable\n# 3. Try lower amounts first\n```\n\n### Transaction Issues\n\n#### Error: `Transaction reverted`\n```bash\n# Common causes:\n# 1. Insufficient balance\n# 2. Missing approval\n# 3. Wrong function parameters\n\n# Debug with cast:\ncast call $CONTRACT \"function()\" --trace\n\n# Or check transaction on block explorer\n```\n\n#### Error: `Gas estimation failed`\n```bash\n# Solutions:\n# 1. Manually set gas limit\n# 2. Check contract has required approvals\n# 3. Verify contract state allows transaction\n```\n\n### Development Tips\n\n#### Reset Local Blockchain\n```bash\n# Stop Anvil (Ctrl+C)\n# Restart Anvil\nanvil\n\n# Redeploy contracts\nforge script script/Deploy.s.sol --broadcast\n\n# Reset MetaMask nonces\n# Settings → Advanced → Reset Account\n```\n\n#### View Contract State\n```bash\n# Read public variables\ncast call $TOKEN \"balanceOf(address)\" $SENDER\ncast call $TOKEN \"totalSupply()\"\ncast call $BANK \"balances(address)\" $SENDER\n\n# Decode transaction data\ncast 4byte 0xa9059cbb\ncast 4byte-decode 0xa9059cbb000...\n```\n\n#### Monitor Events\n```bash\n# Watch for Transfer events\ncast logs --address $TOKEN \\\n  \"Transfer(address,address,uint256)\"\n\n# Get specific event\ncast logs --from-block 0 --to-block latest \\\n  --address $TOKEN \\\n  \"Transfer(address,address,uint256)\"\n```\n\n---\n\n## 📚 Additional Resources\n\n### Documentation\n- [Foundry Book](https://book.getfoundry.sh/)\n- [OpenZeppelin Contracts](https://docs.openzeppelin.com/contracts/)\n- [Wagmi Documentation](https://wagmi.sh/)\n- [Viem Documentation](https://viem.sh/)\n- [Next.js Documentation](https://nextjs.org/docs)\n\n### EIP Standards\n- [EIP-20: Token Standard](https://eips.ethereum.org/EIPS/eip-20)\n- [EIP-721: NFT Standard](https://eips.ethereum.org/EIPS/eip-721)\n- [EIP-2612: Permit Extension](https://eips.ethereum.org/EIPS/eip-2612)\n- [EIP-712: Typed Data Signing](https://eips.ethereum.org/EIPS/eip-712)\n- [Permit2: Universal Token Approval](https://github.com/Uniswap/permit2) - Advanced gasless token approvals\n\n### Tools\n- [Remix IDE](https://remix.ethereum.org/)\n- [Etherscan](https://etherscan.io/)\n- [OpenZeppelin Wizard](https://wizard.openzeppelin.com/)\n\n---\n\n## 📝 Project Structure\n\n```\nmy-dapp-project/\n├── contracts/              # Smart contracts\n│   ├── MyERC20.sol        # ERC20 token\n│   ├── TokenBank.sol      # Banking system with Permit2 support\n│   ├── MyNFT.sol          # NFT collection\n│   ├── NFTMarket.sol      # NFT marketplace\n│   ├── interfaces/        # Contract interfaces\n│   │   └── IPermit2.sol   # Permit2 interface\n│   └── mocks/             # Mock contracts for testing\n│       └── MockPermit2.sol # Mock Permit2 implementation\n├── script/                 # Deployment scripts\n│   ├── Deploy.s.sol       # Main deployment\n│   └── TestPermit2Basic.s.sol # Permit2 testing script\n├── test/                   # Contract tests\n│   ├── MyERC20.t.sol\n│   ├── TokenBank.t.sol\n│   ├── TokenBankPermit2.t.sol # Permit2 specific tests\n│   ├── MyNFT.t.sol\n│   └── NFTMarket.t.sol\n├── frontend/               # Next.js frontend\n│   ├── app/               # Pages\n│   │   ├── bank/          # Bank page with Permit2 UI\n│   │   ├── token/         # Token management\n│   │   ├── nft/           # NFT minting\n│   │   └── market/        # NFT marketplace\n│   ├── components/        # React components\n│   │   ├── BatchDepositForm.tsx    # Batch deposit form\n│   │   ├── DepositTypeSelector.tsx # Deposit method selector\n│   │   ├── Permit2DepositForm.tsx  # Permit2 deposit form\n│   │   └── SignatureModal.tsx      # Signature request modal\n│   ├── utils/             # Config \u0026 utilities\n│   │   ├── contracts.ts   # Contract addresses \u0026 ABIs\n│   │   ├── customRpcClient.ts # Custom RPC client\n│   │   ├── permit2.ts     # Permit2 utilities\n│   │   └── wagmiConfig.ts # Wagmi configuration\n│   ├── styles/            # CSS\n│   ├── package.json       # Dependencies \u0026 scripts\n│   └── pnpm-lock.yaml     # pnpm lock file\n├── lib/                    # Dependencies\n├── foundry.toml           # Foundry config\n├── anvil-config.toml      # Anvil configuration\n└── README.md              # This file\n```\n\n---\n\n## 🔒 Security Notes\n\n⚠️ **Important**: This project is for educational purposes.\n\n- **Never** commit private keys to Git\n- **Always** audit contracts before mainnet deployment\n- **Test** thoroughly on testnets\n- **Use** hardware wallets for production\n- **Keep** dependencies updated\n- **Review** all transactions before signing\n\n---\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details\n\n---\n\n## 🤝 Contributing\n\nContributions welcome! Please:\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Submit a pull request\n\n---\n\n## 💬 Support\n\n- Issues: [GitHub Issues](https://github.com/yourusername/my-dapp-project/issues)\n- Discussions: [GitHub Discussions](https://github.com/yourusername/my-dapp-project/discussions)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Built with ❤️ using Foundry, OpenZeppelin, Next.js, Wagmi, and Viem**\n\n⭐ Star this repo if you find it helpful!\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidweb3-ctrl%2Fmy-dapp-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidweb3-ctrl%2Fmy-dapp-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidweb3-ctrl%2Fmy-dapp-project/lists"}