Dapp Launch Checklist for Frontend Developers | Hashtag Web3

0 of 48 complete

Wallet Integration

Ensure seamless wallet connectivity.

Support all major walletscritical

MetaMask, WalletConnect, Coinbase Wallet, Rainbow at minimum.

Handle wallet not installed gracefullyimportant

Show installation links when wallet extension is missing.

Persist connection across sessionsimportant

Remember connected wallet. Auto-reconnect on page load.

Support mobile wallet browserscritical

Test in MetaMask mobile, Trust Wallet, and Coinbase Wallet browsers.

Handle account changes correctlycritical

React to accountsChanged event. Update UI and refetch data.

Handle chain changes correctlycritical

React to chainChanged event. Prompt network switch if wrong chain.

Implement clean disconnect flowimportant

Clear connection state and cached data on disconnect.

Show connected wallet addressimportant

Display truncated address and ENS name if available.

Transaction Handling

Manage the full transaction lifecycle.

Show clear transaction previewcritical

Display what will happen before user signs. Show amounts, recipients.

Estimate gas accuratelyimportant

Show estimated gas cost in native token and USD.

Handle pending state correctlycritical

Show loading indicator, disable retry, display pending toast.

Track transaction confirmationcritical

Poll for receipt. Update UI when confirmed.

Handle transaction failure gracefullycritical

Parse error messages. Show user-friendly failure reason.

Provide block explorer linksimportant

Link to Etherscan/explorer for transaction details.

Handle user rejectioncritical

Detect when user cancels in wallet. Reset UI appropriately.

Support transaction speed-up/cancelnice-to-have

Allow users to speed up or cancel pending transactions.

Error Handling & Edge Cases

Handle all error scenarios gracefully.

Handle RPC errorscritical

Catch and display RPC failures. Offer retry option.

Handle insufficient fundscritical

Check balance before enabling actions. Show clear message.

Handle insufficient allowancecritical

Detect when approval is needed. Guide user through approval.

Handle contract revertscritical

Parse revert reasons. Display human-readable error.

Handle network congestionimportant

Suggest higher gas when transaction is stuck.

Handle stale dataimportant

Show loading states. Prevent actions on outdated data.

Handle offline stateimportant

Detect offline. Show appropriate message and disable actions.

Implement global error boundaryimportant

Catch unexpected errors. Show recovery option.

Security & Safety

Protect users from attacks and mistakes.

Validate all user inputscritical

Sanitize addresses, amounts, and other inputs.

Verify contract addressescritical

Hardcode or validate contract addresses. Never trust URL params.

Show transaction simulation resultsimportant

Use Tenderly or similar to show expected outcome.

Warn on high slippageimportant

Alert users when slippage exceeds safe thresholds.

Implement phishing protectionimportant

Show domain verification. Warn about suspicious sites.

Secure API keyscritical

Use environment variables. Never expose private keys in frontend.

Validate network before transactionscritical

Confirm user is on correct chain before sending.

Rate limit sensitive operationsimportant

Prevent rapid-fire transactions that could drain wallets.

Performance & Reliability

Ensure fast, reliable user experience.

Configure RPC fallbackscritical

Multiple RPC providers with automatic failover.

Implement request cachingimportant

Cache contract reads. Use SWR or React Query.

Optimize bundle sizeimportant

Tree-shake unused code. Lazy load heavy components.

Set up CDN and cachingimportant

Use CDN for static assets. Configure cache headers.

Implement loading skeletonsimportant

Show placeholder content during data fetching.

Test under poor network conditionsimportant

Verify app works on slow/unstable connections.

Set up error monitoringimportant

Use Sentry or similar for production error tracking.

Monitor RPC usage and costsnice-to-have

Track API calls. Optimize to reduce costs.

Production Deployment

Deploy and verify production build.

Update contract addresses for mainnetcritical

Switch from testnet to mainnet contract addresses.

Configure production RPC endpointscritical

Use paid RPC services for reliability.

Enable production analyticsimportant

Set up Mixpanel, Amplitude, or custom analytics.

Verify CSP and security headersimportant

Configure Content Security Policy to prevent XSS.

Test production build thoroughlycritical

Full end-to-end testing on production deployment.

Set up IPFS backupnice-to-have

Deploy to IPFS for censorship-resistant hosting.

Configure custom domaincritical

Set up domain, SSL, and DNS correctly.

Monitor uptimeimportant

Set up uptime monitoring and alerts.

Tips from the field

1.
Test with real wallets on testnet first: Don't rely only on local testing. Real wallets behave differently.
2.
Parse every possible error type: Users blame your app, not their wallet. Make errors crystal clear.
3.
Cache aggressively, invalidate correctly: Balance between fast UI and accurate data. Invalidate on tx confirmation.
4.
Support hardware wallets explicitly: Ledger and Trezor have different flows. Test them specifically.
5.
Build for mobile-first: More users access dapps via mobile wallets than desktop extensions.

Create the user interfaces that make blockchain accessible to everyone.