Technical Evolution: What Actually Changed
๐ Navigation: ๐ INDEX | ๐ Diary Home | ๐ Analysis | ๐ Reports
Related Reads: Challenges & Solutions | Technical Achievements | Development Timeline
Stack Migrationsโ
Hardhat โ Foundry (Session 4-5)โ
Why: Hardhat tests were slow, deployment scripts clunky
When: After 45 commits, June 3-4
Result: Faster tests, better deployment tools
Web3.js โ Viem (Session 7-8)โ
Why: Web3.js feels outdated, TypeScript support poor
When: June 5 during first frontend work
Result: Cleaner code, better developer experience
Sequential โ Multicall3 (Session 9)โ
Why: Loading 210 NFTs took 30+ seconds
When: June 6 performance optimization
Result: Load time dropped to 3 seconds
Contract Iterationsโ
Version 1: Basic ERC721โ
contract CarbonCreditNFT is ERC721, Ownable {
mapping(uint256 => uint256) public carbonAmount;
}
Problem: No class system, manual minting only
Version 2: Added Classesโ
enum NFTClass { Standard, Platinum }
mapping(uint256 => NFTClass) public nftClass;
Problem: Still no batch operations
Version 3: Production Systemโ
function batchMintWithClass(
address[] memory recipients,
NFTClass class,
uint256 amount,
string memory unit
) external onlyOwner
Result: Current production version
Frontend Evolutionโ
Phase 1: Basic HTML + Web3.jsโ
- Single page NFT viewer
- Manual wallet connection
- No error handling
Phase 2: Modular Viem Integrationโ
- Component-based architecture
- Shared constants across files
- Better error messages
Phase 3: Production Interfacesโ
- 6 different HTML pages
- Glassmorphism CSS
- Multicall3 optimization
- Real-time updates
Deployment Historyโ
Local Only (Sessions 1-3)โ
- Hardhat local network
- Manual testing
First Testnet (Session 6)โ
- Sichang chain deployment
- Contract verification working
Multi-Chain (Sessions 11-12)โ
- Added JIBCHAIN L1
- Deterministic addresses achieved
- Same contracts on both networks
Performance Dataโ
Before Multicall3โ
- 210 sequential RPC calls
- 30+ second load time
- Poor user experience
After Multicall3โ
- 21 batched calls
- 3 second load time
- Production ready
Gas Optimizationโ
Early Contractsโ
- Individual minting: ~50k gas
- No batch operations
Current Contractsโ
- Batch minting: ~45k gas per NFT
- Manager contract handles distribution
Key Technical Decisionsโ
Smart Contract Architectureโ
- All NFTs minted to manager contract
- Two-tier system: Standard (1 tCO2), Platinum (10 tCO2)
- On-chain SVG generation
Multi-Chain Strategyโ
- Identical addresses via nonce synchronization
- Same deployment sequence on all networks
- Consistent RPC configurations
Frontend Performanceโ
- Multicall3 for all batch reads
- Component reuse across interfaces
- Aggressive caching where possible
What Didn't Workโ
Template Literals in HTMLโ
<!-- This doesn't work -->
<p>Contract: ${CONTRACT_ADDRESS}</p>
Fix: Use actual addresses in HTML, template literals only in JS
Hardcoded Display Limitsโ
// This was wrong
const loadCount = Math.min(totalSupply, 20);
Fix: Always show all tokens or paginate properly
Mixed RPC URLsโ
- Used both localhost and white.local Fix: Standardize on localhost:8545
Deployment Timeoutsโ
- Large batch mints would timeout Fix: Manual completion with cast commands
Current Architectureโ
Smart Contractsโ
- NimmanCarbonPass: Main ERC721 with carbon features
- NimmanNFTManagerSimple: Batch transfer management
- UniservLogoStorageDynamic: On-chain SVG storage
Frontend Stackโ
- Vanilla HTML/JS with ES modules
- Viem for Web3 interactions
- Shared component architecture
- Multicall3 for performance
Networksโ
- Sichang: Chain ID 700011, primary testnet
- JIBCHAIN L1: Chain ID 8899, secondary testnet
- Anvil: Local development and testing
Lessons Appliedโ
- Use modern tools: Foundry > Hardhat, Viem > Web3.js
- Optimize early: Multicall3 integration from start
- Standardize everything: RPC URLs, contract addresses
- Document decisions: Why choices were made
- Test thoroughly: All functions, all networks