Skip to main content

Challenges and Solutions: What We Actually Fixed

๐Ÿ”— Navigation: ๐Ÿ“‹ INDEX | ๐Ÿ“ Diary | ๐Ÿ” Analysis Home | ๐Ÿ“Š Reports

Related Reads: Technical Evolution | Collaboration Failure Points | Technical Achievements

Performance Issuesโ€‹

Problem: NFT Loading Too Slowโ€‹

Session: 9
Issue: Loading 210 NFTs took 30+ seconds
Root Cause: 210 sequential RPC calls
Solution: Multicall3 batching
Result: 3 second load time
Code:

// Before: 210 calls
for (let i = 0; i < tokens.length; i++) {
    const owner = await contract.read.ownerOf([tokens[i]]);
}

// After: 1 batched call
const results = await multicall3.read.aggregate([calls]);

Problem: Gas Costs Too Highโ€‹

Session: 6
Issue: Individual minting expensive
Root Cause: No batch operations
Solution: Batch minting function
Result: Efficient mass minting
Code:

function batchMintWithClass(
    address[] memory recipients,
    NFTClass class,
    uint256 amount,
    string memory unit
) external onlyOwner

Deployment Issuesโ€‹

Problem: Timeout During Large Mintsโ€‹

Session: 13
Issue: Script times out minting 100+ NFTs
Root Cause: Single large transaction
Solution: Manual completion with cast
Result: Split into smaller batches
Command:

cast send $CONTRACT "batchMintWithClass(...)" --private-key $KEY

Problem: Different Addresses Across Networksโ€‹

Session: 11
Issue: Contract addresses don't match between chains
Root Cause: Different nonce states
Solution: Nonce synchronization
Result: Identical addresses on Sichang and JBC
Process:

# Check nonces
cast nonce $DEPLOYER --rpc-url sichang
cast nonce $DEPLOYER --rpc-url jbc

# Sync if needed
cast send $DEPLOYER --value 0 --rpc-url target_chain

Frontend Issuesโ€‹

Problem: Template Literals in HTMLโ€‹

Session: 13
Issue: ${CONTRACT_ADDRESS} showing as literal text
Root Cause: Template literals only work in JavaScript
Solution: Use actual addresses in HTML
Fix:

<!-- Wrong -->
<p>Contract: ${CONTRACT_ADDRESS}</p>

<!-- Right -->
<p>Contract: 0x99F7A99D07CBf16dcfEa87C32E53Cf1969B70350</p>

Problem: NFT Viewer Shows Limited Resultsโ€‹

Session: 13
Issue: Only showing 20 NFTs instead of all 210
Root Cause: Hardcoded limit
Solution: Remove artificial limits
Fix:

// Wrong
const loadCount = Math.min(totalSupply, 20);

// Right  
const loadCount = Number(totalSupply);

Problem: Wallet Connection Failuresโ€‹

Sessions: 7-8
Issue: MetaMask can't connect to custom networks
Root Cause: Network not configured
Solution: Auto-add network functionality
Code:

await window.ethereum.request({
    method: 'wallet_addEthereumChain',
    params: [networkConfig]
});

Smart Contract Issuesโ€‹

Problem: No NFT Classesโ€‹

Session: 6
Issue: All NFTs identical, no Standard/Platinum distinction
Root Cause: Original design too simple
Solution: Add enum and mapping
Code:

enum NFTClass { Standard, Platinum }
mapping(uint256 => NFTClass) public nftClass;

Problem: No Batch Operationsโ€‹

Session: 10
Issue: Transferring NFTs one by one is expensive
Root Cause: No manager contract
Solution: NimmanNFTManagerSimple contract
Features: Batch transfers, centralized distribution

Problem: SVG Generation Inconsistentโ€‹

Session: 8
Issue: NFT images don't reflect carbon amounts
Root Cause: Static SVG template
Solution: Dynamic logo generation based on class
Code:

function generateSVG(uint256 tokenId) internal view returns (string memory) {
    return string(abi.encodePacked(
        '<svg>',
        _getLogoForClass(nftClass[tokenId]),
        '</svg>'
    ));
}

Development Workflow Issuesโ€‹

Problem: Hardhat Too Slowโ€‹

Session: 4-5
Issue: Tests take forever, deployment scripts clunky
Root Cause: Hardhat architecture limitations
Solution: Migrate to Foundry
Result: 10x faster tests, better deployment

Problem: Web3.js TypeScript Issuesโ€‹

Session: 7
Issue: Type errors, outdated patterns
Root Cause: Legacy library
Solution: Switch to Viem
Result: Better developer experience, modern patterns

Problem: RPC URL Inconsistenciesโ€‹

Session: 13
Issue: Some files use localhost, others use white.local
Root Cause: Copy-paste without updating
Solution: Standardize on localhost:8545
Fix: Global search and replace

Multi-Chain Issuesโ€‹

Problem: Network Configuration Complexityโ€‹

Session: 11
Issue: Managing multiple network configs
Root Cause: Different chain IDs, RPC URLs
Solution: Shared constants file
Code:

export const NETWORKS = {
    sichang: { id: 700011, rpc: 'https://sichang-rpc.thaichain.org/' },
    jbc: { id: 8899, rpc: 'https://rpc2-l1.jbc.xpool.pw' }
};

Problem: Contract Verification Across Networksโ€‹

Session: 12
Issue: Verifying contracts on multiple explorers
Root Cause: Different verification processes
Solution: Network-specific deployment scripts
Result: Automated verification for each network

User Experience Issuesโ€‹

Problem: No Visual Feedback During Operationsโ€‹

Session: 8
Issue: Users don't know if transactions are pending
Root Cause: No loading states
Solution: Progress indicators and status messages
Code:

showLoading('Minting NFTs...');
await mintTransaction;
showSuccess('Minting complete!');

Problem: Complex Wallet Setupโ€‹

Session: 7
Issue: Users need to manually add networks
Root Cause: Custom testnets not in MetaMask
Solution: One-click network addition
Result: Seamless user onboarding

Problem: No Mobile Supportโ€‹

Session: 12
Issue: Interfaces don't work on mobile
Root Cause: Desktop-first CSS
Solution: Responsive design with glassmorphism
Result: Works across all devices

Error Handling Evolutionโ€‹

Early Approach (Sessions 1-3)โ€‹

  • Errors cause full stop
  • Manual debugging required
  • No graceful fallbacks

Later Approach (Sessions 10-13)โ€‹

  • Automatic error recovery
  • Graceful degradation
  • User-friendly error messages

Example:

try {
    await batchOperation();
} catch (error) {
    if (error.includes('timeout')) {
        return await fallbackOperation();
    }
    showUserFriendlyError(error);
}

Documentation Issuesโ€‹

Problem: Context Loss Between Sessionsโ€‹

Session: 4
Issue: Forgetting what was built, decisions made
Root Cause: No central documentation
Solution: CLAUDE.md with current state
Maintenance: Update after major changes

Problem: No Quick Referenceโ€‹

Session: 11
Issue: Constantly looking up contract addresses
Root Cause: Scattered information
Solution: Centralized reference with current deployments
Location: CLAUDE.md contract section

Testing Issuesโ€‹

Problem: No Comprehensive Test Coverageโ€‹

Session: 6
Issue: Bugs in production deployment
Root Cause: Minimal testing
Solution: Foundry test suite covering all functions
Coverage: 100% of critical paths

Problem: Manual Testing Onlyโ€‹

Session: 10
Issue: Regression bugs, manual verification slow
Root Cause: No automated testing
Solution: Script-based deployment verification
Result: Consistent deployment validation

Lessons for Futureโ€‹

What Always Worksโ€‹

  1. Batch operations for performance
  2. Multicall3 for frontend efficiency
  3. Clear error messages for users
  4. Comprehensive documentation

What Never Worksโ€‹

  1. Template literals outside JavaScript
  2. Hardcoded limits in viewers
  3. Mixed network configurations
  4. Manual processes without fallbacks

Prevention Strategiesโ€‹

  1. Test on actual networks, not just local
  2. Document decisions when made
  3. Use consistent patterns across files
  4. Plan for timeout scenarios