NFT Mint Landing Page Development
Mint landing page is point of maximum tension in NFT project life. 10 minutes between mint opening and sold-out: thousands of simultaneous transactions, MetaMask unresponsive for half users, gallery didn't load, timer shows zeros — button doesn't exist. Such landings burn trust and money simultaneously.
Technically good mint landing — not beautiful design. It's correct wallet state handling, proper gas estimate, transaction queue processing, and graceful degradation during RPC overload.
Critical Technical Components
Timer and Blockchain Synchronization
Timer should count down to specific block or unix timestamp from contract, not hardcoded date. Otherwise: marketing announces mint "at 18:00", developer deploys contract with startTime 5 minutes later due to deployment delay — mint button inactive 5 more minutes after "start".
Correct implementation: read mintStartTime() from contract via wagmi useReadContract, calculate difference with Date.now(). Client-side timer, contract is source of truth.
Handling Mint States
Finite state machine of button states: disconnected → wrong-network → not-started → allowlist-only (if in WL) → ready → pending → success → sold-out. Each state — separate UI. Button "Mint" without handling pending state leads to double transactions: user thinks click didn't work, clicks again, both pass.
Allowlist check: if contract has public and WL phases, client should check Merkle proof before showing button. Locally — generate proof for connected address from tree, call isWhitelisted(address, proof) or MerkleProof.verify() view-function contract. Off-chain, costs no gas.
Gas Estimation and Dynamic maxFeePerGas
Fixed gasLimit in transaction — mistake. If contract added logic between test and deployment — gas changed. Use estimateGas via viem before sending + 20% buffer.
For EIP-1559 transactions: maxFeePerGas must account for current baseFee. During high load at mint moment baseFee can rise 5x. Button "Mint" with maxFeePerGas from page load, but sent 30 seconds later, can revert with max fee per gas less than block base fee. Solution: recalculate maxFeePerGas immediately before sending transaction.
RPC Fallback on Overload
During hype mint public Alchemy/Infura endpoints overload. Transactions don't send, eth_call doesn't respond. Critical to have multiple RPC endpoints with fallback via wagmi fallbackTransport:
const transport = fallback([
http(process.env.ALCHEMY_RPC),
http(process.env.INFURA_RPC),
http('https://eth.llamarpc.com'),
])
On one failure — automatically switches to next.
Collection Gallery
Lazy loading with intersection observer: load only visible images. For 10k collection — list virtualization via @tanstack/react-virtual. IPFS images via Pinata dedicated gateway (10x faster than public gateways). Fallback on IPFS unavailability — placeholder, not broken img tag.
Stack
Next.js 14 (App Router) + wagmi v2 + viem + RainbowKit for wallet connect UI. Tailwind CSS for styles. Animations via Framer Motion — collection reveal, countdown timer, success confetti after mint.
Process and Timeline
Design (1 day). Figma mockup with components, mobile version.
Development (2–3 days). Gallery, timer, mint-component with all states, wallet integration.
Contract integration (0.5 day). ABI connection, testnet testing.
QA (0.5 day). Test on different wallets (MetaMask, Coinbase, Rainbow), mobile browsers, all mint states.
Total: 3–5 days. Cost calculated individually.