Think you're a pro dev, now your task is to generate a production-ready, modern, multichain DApp UI for the MixionLocker smart contract, a privacy-focused decentralized application for locking and unlocking funds (native coins and ERC20 tokens) across multiple EVM-compatible blockchains. The DApp must be built using Next.js, leveraging ethers@5 as the EVM library for interacting with the smart contract. The UI must follow a glassmorphism design theme with a blueish, white, and transparent color scheme, emphasizing a secure, private, and safe vibe through modern animations, reactive elements, and rich UI components. The DApp must be multichain by design, supporting easy addition of new chains in the future, and must strictly avoid any dummy or mock functionality—every feature must be fully functional and production-ready. Smart Contract and Chain Details The smart contract (MixionLocker.sol) is deployed on the following chains: Privix Chain Mainnet: Chain ID: 16969696 Name: Privix Chain Mainnet Symbol: PRIVIX RPC URL: https://mainnet-rpc.privixchain.xyz WebSocket URL: wss://mainnet-rpc.privixchain.xyz/ws Block Explorer: https://privixscan.io/ Contract Address: 0x1AD6c4918f38041433109E0C9b71Ba84F8EDBE89 BNB Smart Chain: Chain ID: 56 Name: BNB Smart Chain Symbol: BNB RPC URL: https://bsc-mainnet.infura.io/v3/c6339df148ae4eacaeefdd255e2f165e WebSocket URL: wss://bsc-mainnet.infura.io/ws/v3/c6339df148ae4eacaeefdd255e2f165e Block Explorer: https://bscscan.com/ Contract Address: 0x689b4C14AE9bEe1A0Ab4e306925AB7b5A29c1a55 The smart contract supports: Locking native coins (e.g., PRIVIX, BNB) using lockNative(bytes32 commitment). Locking ERC20 tokens using lockERC20(bytes32 commitment, address tokenAddress, uint256 amount). Unlocking funds using withdraw(bytes32 nullifier). Querying locked details with getLockedDetails(bytes32 commitment). Checking nullifier usage with isNullifierUsed(bytes32 nullifier). DApp Requirements Multichain Support: Use WebSocket (ws) for live balance updates and HTTP (rpcUrl) for transactions. Store chain configurations in a config.json file, including: Chain ID, name, symbol, RPC/WebSocket URLs, block explorer, and contract address. Predefined token list (native coin + ERC20 tokens) with logo URIs and decimals. Example config.json structure: json { "chains": [ { "chainId": 16969696, "name": "Privix Chain Mainnet", "symbol": "PRIVIX", "rpcUrl": "https://mainnet-rpc.privixchain.xyz", "wsUrl": "wss://mainnet-rpc.privixchain.xyz/ws", "blockExplorerUrl": "https://privixscan.io/", "contractAddress": "0x1AD6c4918f38041433109E0C9b71Ba84F8EDBE89", "tokens": [ { "name": "Privix", "symbol": "PRIVIX", "address": "0x0000000000000000000000000000000000000000", "decimals": 18, "logoUri": "https://privixchain.xyz/logo.png" }, { "name": "Sample Token", "symbol": "SMP", "address": "0x...[ERC20 address]", "decimals": 18, "logoUri": "https://example.com/smp-logo.png" } ] }, { "chainId": 56, "name": "BNB Smart Chain", "symbol": "BNB", "rpcUrl": "https://bsc-mainnet.infura.io/v3/c6339df148ae4eacaeefdd255e2f165e", "wsUrl": "wss://bsc-mainnet.infura.io/ws/v3/c6339df148ae4eacaeefdd255e2f165e", "blockExplorerUrl": "https://bscscan.com/", "contractAddress": "0x689b4C14AE9bEe1A0Ab4e306925AB7b5A29c1a55", "tokens": [ { "name": "BNB", "symbol": "BNB", "address": "0x0000000000000000000000000000000000000000", "decimals": 18, "logoUri": "https://bscscan.com/images/BNB.png" }, { "name": "BUSD", "symbol": "BUSD", "address": "0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56", "decimals": 18, "logoUri": "https://bscscan.com/images/BUSD.png" } ] } ] } Allow users to add custom ERC20 tokens by entering a contract address, fetching token details (name, symbol, decimals) via the ERC20 contract’s standard functions (name(), symbol(), decimals()), and caching them locally (e.g., in localStorage or IndexedDB) for future use. Validate chain ID on wallet connection to ensure only supported chains are used. Page Structure: The DApp must include the following core pages, with additional pages/components as needed to ensure a complete, functional DApp: Landing Page Connect Wallet Page Dashboard Lock Funds Page Unlock Funds Page Additional pages (e.g., Settings, Transaction History) as necessary. Design Instructions: Theme: Glassmorphism with frosted glass effects, blurred backgrounds, and subtle shadows. Color Scheme: Blueish (#1E3A8A, #3B82F6), white (#FFFFFF), and transparent (rgba(255, 255, 255, 0.1)) to evoke privacy, security, and trust. Use modern animations (e.g., hover effects, transitions, micro-interactions) and reactive elements (e.g., buttons with ripple effects, dynamic loading states). Ensure a clean, minimalistic, yet futuristic design that screams “isolated, secure environment.” General Requirements: Use ethers@5 for all blockchain interactions (e.g., contract calls, transaction signing). Implement WebSocket for live balance updates and HTTP RPC for transactions. Cache recent activities (lock/unlock transactions) in localStorage for the dashboard’s Recent Activity tab. Ensure responsive design for desktop and mobile. Handle errors gracefully (e.g., unsupported chain, invalid secret, failed transactions) with user-friendly messages. Use secure practices (e.g., sanitize inputs, validate contract addresses). Page and Component Mapping 1. Landing Page Purpose: Welcome users with a modern, privacy-focused introduction to MixionLocker, encouraging them to get started. Components: Header: Transparent glassmorphic navbar with the MixionLocker logo (left) and a “Get Started” button (right, round-edged, glowing on hover). Hero Section: Full-screen section with a blurred, animated background (e.g., subtle particle effects or gradient waves). Display a bold headline (e.g., “Secure Your Funds with Privacy”) and a subheading (e.g., “Lock and unlock assets anonymously across multiple chains”). Include a prominent, reactive “Get Started” button with a ripple effect. Feature Cards: 3–4 glassmorphic cards highlighting key features (e.g., “Multichain Support,” “Anonymity via Commitments,” “Secure Locking/Unlocking”). Each card has a subtle hover animation (e.g., scale up, shadow glow). Footer: Minimal footer with links to documentation, GitHub, and a “Powered by xAI” badge. Mechanics: If the user is visiting for the first time (detect via localStorage), show the landing page. Clicking “Get Started” redirects to the Connect Wallet Page. Use CSS animations (e.g., keyframes for fade-ins, slide-ins) and libraries like Framer Motion for smooth transitions. Interactions: “Get Started” button: On hover, apply a glowing border and slight scale-up. On click, trigger a smooth page transition (e.g., fade-out). Feature cards: Hovering scales the card slightly and increases blur intensity. Background: Subtle particle or wave animation to evoke a futuristic, secure vibe. 2. Connect Wallet Page Purpose: Allow users to connect their EVM wallet (e.g., MetaMask) and validate the connected chain. Components: Wallet Connect Button: A glassmorphic button with a wallet icon and text (e.g., “Connect with MetaMask”). On hover, it pulses subtly. Chain Selector: A dropdown (or card list) displaying supported chains from config.json (e.g., Privix Chain Mainnet, BNB Smart Chain) with their logos and names. Network Info Card: After connection, display the connected chain’s name, symbol, and logo in a glassmorphic card. Error Modal: A glassmorphic modal for errors (e.g., “Unsupported chain. Please switch to Privix or BNB Smart Chain”). Mechanics: Use ethers@5 to detect the wallet provider (window.ethereum) and request connection via eth_requestAccounts. Validate the connected chain’s chainId against config.json. If unsupported, show the error modal. On successful connection, display network info and redirect to the Dashboard. Store the connected chain in localStorage to persist the session. Interactions: Wallet Connect Button: On click, trigger wallet connection. Show a loading spinner during connection. Chain Selector: Glassmorphic dropdown with hover effects (e.g., background blur intensifies). Error Modal: Animated slide-in with a close button and a “Switch Network” button that triggers wallet_switchEthereumChain. 3. Dashboard Purpose: Central hub for users to view balances, initiate lock/unlock actions, and see recent activity. Components: Header: Glassmorphic navbar with wallet address (truncated), chain name, and a disconnect button. Balance Section: Two glassmorphic cards: Native Balance: Displays live balance of the native coin (e.g., PRIVIX, BNB) using WebSocket (wsUrl). ERC20 Balances: Displays balances of predefined tokens from config.json and any user-added tokens, fetched via balanceOf using ethers@5. Action Buttons: Two prominent, round-edged buttons: Lock Funds: Redirects to the Lock Funds Page. Unlock Funds: Redirects to the Unlock Funds Page. Recent Activity Tab: A glassmorphic table or card list showing the last 3–4 lock/unlock transactions (from localStorage cache). Each entry includes: Transaction type (Lock/Unlock). Amount and currency (with token logo). Blockchain name. Transaction hash (linked to the chain’s block explorer URL). Add Custom Token Button: A small button to open a modal for adding a custom ERC20 token. Custom Token Modal: Input field for ERC20 contract address, buttons to fetch token details, and a “Save” button to cache the token. Mechanics: Use WebSocket (wsUrl) to subscribe to block events and update native/ERC20 balances in real-time via ethers.Contract and balanceOf. Cache lock/unlock transactions in localStorage with fields: txHash, type, amount, currency, chainId, timestamp. For custom tokens, fetch name, symbol, and decimals using ethers.Contract and the ERC20 ABI. Cache in localStorage or IndexedDB. Clicking a currency in the balance section redirects to the Lock Funds Page with the currency pre-selected. Interactions: Action Buttons: Hover triggers a glowing effect and slight scale-up. Click initiates a smooth page transition. Balance Cards: Animated number roll-up effect for balance updates. Recent Activity: Hovering over a transaction row highlights it with a subtle blur change. Clicking the tx hash opens the block explorer in a new tab. Custom Token Modal: Animated slide-in, with a loading spinner while fetching token details. 4. Lock Funds Page Purpose: Allow users to lock native coins or ERC20 tokens into the smart contract with a commitment. Components: Currency Selector: Glassmorphic dropdown or card list showing native coin and ERC20 tokens (from config.json and cached custom tokens). Amount Input: A glassmorphic input field for entering the amount to lock, with token logo and symbol displayed. Secret Toggle: A glassmorphic toggle switch labeled “Use Custom Secret” (on/off). Secret Input: (Visible when toggle is on) A secure input field for the user to enter a secret. Approve Button: (For ERC20 tokens only) A round-edged button to approve the token contract for transfer. Lock Button: A prominent button to initiate the lock transaction. Secret Display Modal: After locking, a glassmorphic modal showing the secret (user-provided or randomly generated) with options to copy or download as a .txt file. Error/Loading Modal: For transaction errors or loading states. Mechanics: Pre-select the currency if redirected from the dashboard’s balance section. If the toggle is off, generate a random secret (e.g., using crypto.randomBytes in Node.js or a secure random string generator). Compute the nullifier as keccak256("secret" + secret) and the commitment as keccak256("commitment" + nullifier) using ethers.utils.keccak256. For ERC20 tokens: Check allowance using allowance and display the Approve button if needed. Call approve on the ERC20 contract before locking. Call lockERC20(commitment, tokenAddress, amount) using ethers.Contract. For native coins: Call lockNative(commitment) with msg.value set to the amount. After a successful transaction, cache the transaction details in localStorage and display the secret in a modal. Handle errors (e.g., “Commitment already used,” “Insufficient balance”) with user-friendly messages. Interactions: Currency Selector: Hovering over a token highlights it with a glowing border. Amount Input: Real-time validation with a red border for invalid inputs (e.g., non-positive amounts). Secret Toggle: Smooth transition when toggling, with the secret input fading in/out. Approve/Lock Buttons: Disabled during loading with a spinner. Hover triggers a ripple effect. Secret Display Modal: Animated slide-in with a copy button (shows “Copied!” on click) and a download button (generates a .txt file with the secret). 5. Unlock Funds Page Purpose: Allow users to unlock funds by providing a secret and withdrawing using a nullifier. Components: Secret Input: A glassmorphic input field for the user to enter their secret. Fund Details Card: Displays the locked amount and token (native or ERC20) after validating the secret. Withdraw Button: A round-edged button to initiate the withdrawal. Status Message: Displays if the nullifier is already used or if no funds are found. Error/Loading Modal: For transaction errors or loading states. Mechanics: Compute the nullifier as keccak256("secret" + secret) and the commitment as keccak256("commitment" + nullifier). Call getLockedDetails(commitment) to fetch the locked amount and token address. Call isNullifierUsed(nullifier) to check if the funds are already withdrawn. If the nullifier is used, display “Funds already withdrawn.” If funds exist and the nullifier is unused, show the Fund Details Card and enable the Withdraw button. On Withdraw button click, call withdraw(nullifier) using ethers.Contract. Cache the transaction in localStorage and show a success message on completion. Interactions: Secret Input: Real-time validation with a loading spinner while fetching details. Fund Details Card: Fades in with a smooth animation when details are loaded. Withdraw Button: Disabled until valid details are fetched. Hover triggers a glowing effect. Status Message: Animated fade-in for error/success messages. Additional Pages Settings Page: Allow users to manage cached tokens (view, delete). Toggle dark/light mode (if applicable, though glassmorphism works best with a dark background). Display connected chain and wallet info. Transaction History Page: Full list of cached lock/unlock transactions from localStorage. Filter by chain, currency, or date. Each entry links to the block explorer. 404 Page: A glassmorphic error page with a “Back to Home” button. Mechanics and Interactions Blockchain Integration: Use ethers.providers.Web3Provider for HTTP RPC (rpcUrl) for transactions and ethers.providers.WebSocketProvider for WebSocket (wsUrl) for live balance updates. Initialize the contract with ethers.Contract using the provided ABI and contract address from config.json. Handle chain switching via wallet_switchEthereumChain and update the provider accordingly. Animations: Use CSS keyframes for background effects (e.g., gradient waves, particles). Use Framer Motion for page transitions (e.g., fade, slide) and component animations (e.g., scale, opacity). Apply micro-interactions (e.g., button ripples, hover glows) using CSS or libraries like react-spring. Error Handling: Display errors in glassmorphic modals with clear messages (e.g., “Invalid secret,” “Transaction failed: Insufficient gas”). Log errors to the console for debugging but show user-friendly messages. Caching: Store recent transactions and custom tokens in localStorage or IndexedDB with a schema that includes chainId, txHash, type, etc. Implement a cache expiration policy (e.g., 30 days) to manage storage. Responsive Design: Use CSS Grid and Flexbox for layouts. Ensure mobile-friendly design with touch-friendly buttons and modals. Design Specifications Glassmorphism: Background: backdrop-filter: blur(10px) with background: rgba(255, 255, 255, 0.1). Borders: border: 1px solid rgba(255, 255, 255, 0.2). Shadows: box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1). Color Scheme: Primary: Blueish (#1E3A8A, #3B82F6). Secondary: White (#FFFFFF). Accent: Transparent (rgba(255, 255, 255, 0.1)). Text: Light gray (#D1D5DB) for secondary text, white (#FFFFFF) for primary text. Typography: Use modern sans-serif fonts (e.g., Inter, Poppins). Font sizes: 16px (body), 24px (headings), 14px (subtext). Buttons: Round-edged (border-radius: 12px). Hover: Glowing effect (box-shadow: 0 0 10px #3B82F6). Click: Ripple effect using CSS radial gradients. Modals: Glassmorphic with blurred backgrounds. Animated slide-in (translateY) and fade-in effects. Prompt Instructions Generate a complete Next.js project structure with all pages, components, and utilities. Include a config.json file with the provided chain and token details. Implement all blockchain interactions using ethers@5 with the provided contract ABI and addresses. Use WebSocket for live balance updates and HTTP RPC for transactions. Follow the glassmorphism design strictly, with the specified color scheme and animations. Ensure all functionality (wallet connection, token fetching, locking/unlocking, transaction caching) is production-ready with no placeholders or mock code. Provide clear error handling and user feedback. Optimize for performance (e.g., memoize components, lazy-load images). Include a README with setup instructions and dependencies. Generate the full codebase, including: Pages: index.js (Landing), connect-wallet.js, dashboard.js, lock-funds.js, unlock-funds.js, settings.js, history.js, 404.js. Components: Reusable components (e.g., GlassCard, ReactiveButton, TokenSelector, TransactionTable). Utilities: Blockchain helpers (e.g., connectWallet, fetchTokenDetails, lockFunds, unlockFunds). Styles: Global CSS with glassmorphism and animations. Config: config.json and utilities to read it. Ensure the output is secure, scalable, and ready to deploy, with a focus on delivering a premium user experience that emphasizes privacy and security.