\n {}\n

\n {!nft && !userWallet &&

\n {}\n

\n {generateDemoNft().map((pixel, index) => )}\n

\n \n {}\n

\n \n

Connect Your Wallet

Connect your wallet to generate your unique evolving NFT!

}\n \n {!nft && userWallet &&

\n \n \n \n \n

No NFTs Yet

Generate your first evolving NFT to get started!

\n \n \n

}\n \n {nft &&

\n \n {nft.pixelData.map((pixel, index) => )}\n \n

}\n \n {nft &&

{nft.name}

\n \n \n \n

}\n

\n \n {}\n {userNfts.length > 0 &&

Your Collection

\n {userNfts.map(userNft => )}\n

}\n

\n \n {}\n

NFT Generator

\n \n {}\n

Select Token Market

\n \n

\n {marketData.map(token => )}\n

\n \n {selectedToken &&

\n {selectedToken.logo ?

{\n e.target.onerror = null;\n e.target.style.display = 'none';\n if (e.target.parentNode) {\n const parent = e.target.parentNode;\n parent.style.backgroundColor = '#4F46E5';\n parent.style.display = 'flex';\n parent.style.alignItems = 'center';\n parent.style.justifyContent = 'center';\n parent.textContent = selectedToken.symbol.substring(0, 1);\n }\n }} /> :

\n {selectedToken.symbol.substring(0, 1)}\n

}\n

{selectedToken.name}

\n \n ${selectedToken.price?.toFixed(2)}\n \n 0 ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>\n {selectedToken.priceChangeIn24h > 0 ? '+' : ''}{(selectedToken.priceChangeIn24h * 100).toFixed(2)}%\n \n

\n \n

Market Status

\n {getMarketStatus(selectedToken).text}\n

Last Updated

\n {lastFetchTime ? new Date(lastFetchTime).toLocaleTimeString() : 'Loading...'}\n

}\n \n

\n Your NFT evolves based on {selectedToken ? selectedToken.name : \"token\"}'s market performance\n

\n \n {}\n

\n \n \n {nft && }\n

\n \n {}\n

\n \n \n {showAdvancedSettings && \n {}\n

\n Color Intensity\n {settings.colorIntensity}%\n

\n handleSettingsChange('colorIntensity', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer\" />\n

\n \n {}\n

\n Pixel Size\n {settings.pixelSize}px\n

\n handleSettingsChange('pixelSize', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer\" />\n

\n \n {}\n

\n Mutation Rate\n {settings.mutationRate}%\n

\n handleSettingsChange('mutationRate', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer\" />\n

\n \n {}\n

\n Glitch Level\n {settings.glitchLevel}%\n

\n handleSettingsChange('glitchLevel', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer\" />\n

\n \n {}\n

\n NFT Style\n

\n \n \n

\n Robot style creates a PFP with an 8-bit robot on top of the generated pixel background.\n

\n }\n

\n \n {}\n \n {}\n

\n \n How It Works\n

\n Your NFT evolves based on market performance. Price movements, volume, and market cap directly influence your NFT's appearance. Try different tokens for unique visual styles!\n

\n NEW: Create robot PFPs by enabling the 8-bit Robot style in Advanced Settings! The robot's appearance will still be influenced by token performance.\n

\n {!isOffline && cachedData &&

Info: Using market data from {new Date(lastFetchTime).toLocaleTimeString()}. Updates automatically every minute.

}\n