Secure. Private. Decentralized.

Connect your wallet to send encrypted messages on Solana

\n \n :

\n {}\n

\n \n \n \n \n

\n\n \n {isSuccess ? \n

\n \n \n \n

\n \n

Message sent successfully!

\n Your encrypted message has been delivered\n \n \n \n

\n \n : activeTab === \"compose\" ? \n

\n \n

Send Encrypted Message

\n \n \n

\n \n

\n \n Recipient Address\n \n

\n {\n setRecipient(e.target.value);\n setIsVerified(false);\n }} placeholder=\"Enter Solana address\" className={`flex-1 ${darkMode ? 'bg-slate-900/70 text-white placeholder:text-slate-500' : 'bg-white/70 text-slate-800 placeholder:text-slate-400'} border ${isVerified ? 'border-green-600' : darkMode ? 'border-slate-700' : 'border-slate-300'} rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-200`} />\n \n

\n {isVerified && \n \n Valid mailbox verified\n }\n

\n \n

\n \n Message\n \n

setMessage(e.target.value)} placeholder=\"Type your secure message...\" rows={5} className={`w-full ${darkMode ? 'bg-slate-900/70 border-slate-700 text-white placeholder:text-slate-500' : 'bg-white/70 border-slate-300 text-slate-800 placeholder:text-slate-400'} border rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-200`} />\n                      <div className=\"flex justify-between mt-1\">\n                    <div className=\"flex items-center space-x-4\">\n                        <label className=\"flex items-center cursor-pointer group\" onClick={() => triggerHapticFeedback(\"light\")}>\n                          <input type=\"checkbox\" checked={burnAfterReading} onChange={e => {\n                          setBurnAfterReading(e.target.checked);\n                          if (e.target.checked && blurMode) {\n                            setBlurMode(false);\n                          }\n                        }} className=\"sr-only\" />\n                          <div className={`h-4 w-4 rounded ${burnAfterReading ? 'bg-red-500' : darkMode ? 'bg-slate-700' : 'bg-slate-300'} flex items-center justify-center transition-colors group-hover:${burnAfterReading ? 'bg-red-600' : darkMode ? 'bg-slate-600' : 'bg-slate-400'}`}>\n                            {burnAfterReading && <Flame className=\"h-3 w-3 text-white\" />}\n                          </div>\n                          <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-600'} ml-1`}>Burn after reading</span>\n                        </label>\n                        \n                        <label className=\"flex items-center cursor-pointer group\" onClick={() => triggerHapticFeedback(\"light\")}>\n                          <input type=\"checkbox\" checked={ghostMode} onChange={e => setGhostMode(e.target.checked)} className=\"sr-only\" />\n                          <div className={`h-4 w-4 rounded ${ghostMode ? 'bg-violet-500' : darkMode ? 'bg-slate-700' : 'bg-slate-300'} flex items-center justify-center transition-colors group-hover:${ghostMode ? 'bg-violet-600' : darkMode ? 'bg-slate-600' : 'bg-slate-400'}`}>\n                            {ghostMode && <Ghost className=\"h-3 w-3 text-white\" />}\n                          </div>\n                          <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-600'} ml-1`}>Ghost mode</span>\n                        </label>\n                        \n                        <label className=\"flex items-center cursor-pointer group\" onClick={() => triggerHapticFeedback(\"light\")}>\n                          <input type=\"checkbox\" checked={blurMode} onChange={e => {\n                          setBlurMode(e.target.checked);\n                          if (e.target.checked) {\n                            setBurnAfterReading(false);\n                            setShowBlurRevealOptions(true);\n                          } else {\n                            setShowBlurRevealOptions(false);\n                          }\n                        }} className=\"sr-only\" />\n                          <div className={`h-4 w-4 rounded ${blurMode ? 'bg-blue-500' : darkMode ? 'bg-slate-700' : 'bg-slate-300'} flex items-center justify-center transition-colors group-hover:${blurMode ? 'bg-blue-600' : darkMode ? 'bg-slate-600' : 'bg-slate-400'}`}>\n                            {blurMode && <EyeOff className=\"h-3 w-3 text-white\" />}\n                          </div>\n                          <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-600'} ml-1`}>Blur mode</span>\n                        </label>\n                      </div>\n                        <div className=\"flex items-center\">\n                          <Lock className={`h-3 w-3 ${darkMode ? 'text-slate-500' : 'text-slate-400'} mr-1`} />\n                          <span className={`text-xs ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>\n                            End-to-end encrypted\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                    \n                    {showBlurRevealOptions && <motion.div initial={{\n                  opacity: 0,\n                  height: 0\n                }} animate={{\n                  opacity: 1,\n                  height: 'auto'\n                }} exit={{\n                  opacity: 0,\n                  height: 0\n                }} className={`p-3 rounded-lg ${darkMode ? 'bg-slate-700/50' : 'bg-slate-100'}`}>\n                        <div className=\"mb-2\">\n                          <h4 className={`text-sm font-medium ${darkMode ? 'text-blue-300' : 'text-blue-600'} flex items-center`}>\n                            <EyeOff className=\"h-4 w-4 mr-1\" />\n                            Blur Reveal Options\n                          </h4>\n                          <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-600'} mt-1`}>\n                            Choose how the recipient can reveal your blurred message:\n                          </p>\n                        </div>\n                        \n                        <div className=\"grid grid-cols-3 gap-2\">\n                          <label className={`p-2 rounded-lg text-center text-sm cursor-pointer transition-colors \n                            ${blurRevealType === \"once\" ? darkMode ? \"bg-blue-600 text-white\" : \"bg-blue-500 text-white\" : darkMode ? \"bg-slate-800 text-slate-400 hover:bg-slate-700\" : \"bg-slate-200 text-slate-700 hover:bg-slate-300\"}`}>\n                            <input type=\"radio\" value=\"once\" checked={blurRevealType === \"once\"} onChange={() => setBlurRevealType(\"once\")} className=\"sr-only\" />\n                            <span className=\"flex flex-col items-center\">\n                              <Eye className=\"h-4 w-4 mb-1\" />\n                              <span>Once Only</span>\n                            </span>\n                          </label>\n                          \n                          <label className={`p-2 rounded-lg text-center text-sm cursor-pointer transition-colors \n                            ${blurRevealType === \"timed\" ? darkMode ? \"bg-blue-600 text-white\" : \"bg-blue-500 text-white\" : darkMode ? \"bg-slate-800 text-slate-400 hover:bg-slate-700\" : \"bg-slate-200 text-slate-700 hover:bg-slate-300\"}`}>\n                            <input type=\"radio\" value=\"timed\" checked={blurRevealType === \"timed\"} onChange={() => setBlurRevealType(\"timed\")} className=\"sr-only\" />\n                            <span className=\"flex flex-col items-center\">\n                              <Clock className=\"h-4 w-4 mb-1\" />\n                              <span>5 Seconds</span>\n                            </span>\n                          </label>\n                          \n                          <label className={`p-2 rounded-lg text-center text-sm cursor-pointer transition-colors \n                            ${blurRevealType === \"dare\" ? darkMode ? \"bg-blue-600 text-white\" : \"bg-blue-500 text-white\" : darkMode ? \"bg-slate-800 text-slate-400 hover:bg-slate-700\" : \"bg-slate-200 text-slate-700 hover:bg-slate-300\"}`}>\n                            <input type=\"radio\" value=\"dare\" checked={blurRevealType === \"dare\"} onChange={() => setBlurRevealType(\"dare\")} className=\"sr-only\" />\n                            <span className=\"flex flex-col items-center\">\n                              <AlertTriangle className=\"h-4 w-4 mb-1\" />\n                              <span>If You Dare</span>\n                            </span>\n                          </label>\n                        </div>\n                      </motion.div>}\n                    \n                    <div className={`border-t ${darkMode ? 'border-slate-700/50' : 'border-slate-300/50'} pt-4`}>\n                      <button type=\"button\" onClick={() => {\n                    setShowAdvanced(!showAdvanced);\n                    triggerHapticFeedback(\"light\");\n                  }} className={`flex items-center text-sm ${darkMode ? 'text-slate-400 hover:text-cyan-400' : 'text-slate-600 hover:text-cyan-500'} transition-colors mb-4`}>\n                        <span>Advanced options</span>\n                        <ChevronDown className={`h-4 w-4 ml-1 transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />\n                      </button>\n                      \n                      <AnimatePresence>\n                        {showAdvanced && <motion.div initial={{\n                      height: 0,\n                      opacity: 0\n                    }} animate={{\n                      height: \"auto\",\n                      opacity: 1\n                    }} exit={{\n                      height: 0,\n                      opacity: 0\n                    }} className=\"overflow-hidden space-y-4\">\n                            <div>\n                              <label className={`block text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-600'} mb-2`} htmlFor=\"file\">\n                                <div className=\"flex items-center space-x-1\">\n                                  <FileUp className=\"h-4 w-4\" />\n                                  <span>Encrypted Attachment</span>\n                                </div>\n                              </label>\n                              \n                              {file ? <motion.div initial={{\n                          scale: 0.98\n                        }} animate={{\n                          scale: 1\n                        }} className={`flex justify-between items-center p-3 ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg`}>\n                                  <span className={`text-sm truncate max-w-[80%] ${darkMode ? 'text-white' : 'text-slate-700'}`}>\n                                    {file.name} ({(file.size / 1024).toFixed(1)} KB)\n                                  </span>\n                                  <button type=\"button\" onClick={() => {\n                            setFile(null);\n                            triggerHapticFeedback(\"light\");\n                          }} className={`${darkMode ? 'text-red-400 hover:text-red-300' : 'text-red-500 hover:text-red-400'} transition-colors`}>\n                                    <Trash2 className=\"h-4 w-4\" />\n                                  </button>\n                                </motion.div> : <div className=\"relative\">\n                                  <input id=\"file\" type=\"file\" onChange={e => {\n                            handleFileChange(e);\n                            if (e.target.files.length > 0) {\n                              triggerHapticFeedback(\"medium\");\n                            }\n                          }} className=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\" />\n                                  <div className={`w-full border-2 border-dashed ${darkMode ? 'border-slate-700 hover:border-cyan-500' : 'border-slate-300 hover:border-cyan-500'} rounded-lg p-4 text-center transition-colors`}>\n                                    <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                      Click to select a file (10MB max)\n                                    </p>\n                                  </div>\n                                </div>}\n                            </div>\n                            \n                            <div>\n                              <label className=\"block text-sm font-medium text-slate-300 mb-2\" htmlFor=\"schedule\">\n                                <div className=\"flex items-center space-x-1\">\n                                  <Calendar className=\"h-4 w-4\" />\n                                  <span>Schedule Sending</span>\n                                </div>\n                              </label>\n                              <input id=\"schedule\" type=\"datetime-local\" value={scheduleTime} onChange={e => setScheduleTime(e.target.value)} min={new Date().toISOString().slice(0, 16)} className=\"w-full bg-slate-900/70 border border-slate-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-200\" />\n                            </div>\n                            \n                            <div>\n                              <label className=\"block text-sm font-medium text-slate-300 mb-2\">\n                                <div className=\"flex items-center space-x-1\">\n                                  <Database className=\"h-4 w-4\" />\n                                  <span>Storage Option</span>\n                                </div>\n                              </label>\n                              <div className=\"grid grid-cols-3 gap-2\">\n                                <button type=\"button\" onClick={() => setStorageOption(\"blockchain\")} className={`p-2 rounded-lg text-center text-sm transition-colors ${storageOption === \"blockchain\" ? \"bg-cyan-600 text-white\" : \"bg-slate-800 text-slate-400 hover:bg-slate-700\"}`}>\n                                  Blockchain\n                                </button>\n                                <button type=\"button\" onClick={() => setStorageOption(\"ipfs\")} className={`p-2 rounded-lg text-center text-sm transition-colors ${storageOption === \"ipfs\" ? \"bg-cyan-600 text-white\" : \"bg-slate-800 text-slate-400 hover:bg-slate-700\"}`}>\n                                  IPFS\n                                </button>\n                                <button type=\"button\" onClick={() => setStorageOption(\"arweave\")} className={`p-2 rounded-lg text-center text-sm transition-colors ${storageOption === \"arweave\" ? \"bg-cyan-600 text-white\" : \"bg-slate-800 text-slate-400 hover:bg-slate-700\"}`}>\n                                  Arweave\n                                </button>\n                              </div>\n                            </div>\n                            \n                            <div>\n                              <label className=\"block text-sm font-medium text-slate-300 mb-2\">\n                                <div className=\"flex items-center space-x-1\">\n                                  <Palette className=\"h-4 w-4\" />\n                                  <span>Message Skin</span>\n                                </div>\n                              </label>\n                              <div className=\"grid grid-cols-3 gap-2\">\n                                {messageSkins.map(skin => <button key={skin.id} type=\"button\" onClick={() => setMessageSkin(skin.id)} className={`p-2 rounded-lg text-center text-sm transition-colors ${messageSkin === skin.id ? \"text-white\" : \"text-slate-400 hover:text-white\"} ${skin.color}`}>\n                                    {skin.name}\n                                  </button>)}\n                              </div>\n                            </div>\n                            \n                            <div>\n                              <label className=\"flex items-center text-sm font-medium text-slate-300 mb-2\">\n                                <Wand2 className=\"h-4 w-4 mr-1\" />\n                                <span>Visual Effects</span>\n                              </label>\n                              <div className=\"flex items-center\">\n                                <input type=\"checkbox\" checked={showSpecialEffects} onChange={e => setShowSpecialEffects(e.target.checked)} className=\"sr-only\" id=\"specialEffects\" />\n                                <label htmlFor=\"specialEffects\" className={`relative inline-flex items-center h-6 rounded-full w-11 transition-colors ${showSpecialEffects ? 'bg-cyan-600' : 'bg-slate-700'}`}>\n                                  <span className={`inline-block w-4 h-4 transform transition-transform bg-white rounded-full ${showSpecialEffects ? 'translate-x-6' : 'translate-x-1'}`} />\n                                </label>\n                                <span className=\"ml-2 text-sm text-slate-400\">\n                                  {showSpecialEffects ? 'Enabled' : 'Disabled'}\n                                </span>\n                              </div>\n                            </div>\n                            \n                            <div>\n                              <label className=\"block text-sm font-medium text-slate-300 mb-2\" htmlFor=\"solAmount\">\n                                <div className=\"flex items-center space-x-1\">\n                                  <Coins className=\"h-4 w-4\" />\n                                  <span>Attach SOL (Optional)</span>\n                                </div>\n                              </label>\n                              <div className=\"flex items-center space-x-2\">\n                                <input id=\"solAmount\" type=\"number\" min=\"0\" step=\"0.01\" value={solAmount} onChange={e => setSolAmount(parseFloat(e.target.value || 0))} placeholder=\"0.00\" className=\"w-full bg-slate-900/70 border border-slate-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-200\" />\n                                <span className=\"text-slate-400\">SOL</span>\n                              </div>\n                              <p className=\"text-xs text-slate-500 mt-1\">\n                                {solAmount > 0 && `≈ ${(solAmount * 150).toFixed(2)} USD`}\n                              </p>\n                            </div>\n                          </motion.div>}\n                      </AnimatePresence>\n                    </div>\n                    \n                    {error && <div className=\"bg-red-900/30 border border-red-800 text-red-300 rounded-lg p-3 flex items-center\">\n                        <X className=\"h-5 w-5 mr-2 flex-shrink-0\" />\n                        <span>{error}</span>\n                      </div>}\n                    \n                    <motion.button type=\"submit\" disabled={isSending} animate={sendButtonControls} whileTap={{\n                  scale: 0.98\n                }} className={`w-full flex items-center justify-center space-x-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 rounded-lg px-4 py-3 text-white font-medium transition-all duration-300 ${isSending ? 'opacity-70 cursor-not-allowed' : `hover:shadow-lg ${darkMode ? 'hover:shadow-cyan-500/20' : 'hover:shadow-cyan-500/30'}`}`}>\n                      {isSending ? <>\n                        <div className=\"relative h-5 w-5 mr-2\">\n                          <motion.div animate={{\n                        rotate: 360\n                      }} transition={{\n                        duration: 1,\n                        repeat: Infinity,\n                        ease: \"linear\"\n                      }} className=\"absolute inset-0 h-5 w-5 border-2 border-white/30 border-t-white rounded-full\" />\n                        </div>\n                        <motion.span initial={{\n                      opacity: 0.7\n                    }} animate={{\n                      opacity: 1\n                    }} transition={{\n                      duration: 0.5,\n                      repeat: Infinity,\n                      repeatType: \"reverse\"\n                    }}>\n                          {messageStatus || \"Encrypting & Sending\"}\n                        </motion.span>\n                      </> : <>\n                        <Send className=\"h-5 w-5\" />\n                        <span>\n                          {scheduleTime ? \"Schedule Message\" : \"Send Message\"}\n                          {solAmount > 0 && ` + ${solAmount} SOL`}\n                        </span>\n                      </>}\n                    </motion.button>\n                  </form>\n                </div>\n                \n                {}\n                <div className={`mt-4 ${darkMode ? 'bg-slate-800/30 border border-slate-700/60' : 'bg-white/30 border border-slate-200/60'} backdrop-blur-sm rounded-lg p-3 flex items-center justify-between`}>\n                  <div className=\"flex items-center space-x-2\">\n                    <Mail className={`h-4 w-4 ${darkMode ? 'text-slate-400' : 'text-slate-500'}`} />\n                    <span className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>From:</span>\n                  </div>\n                  <div className={`text-sm font-mono ${darkMode ? 'text-slate-300' : 'text-slate-600'} truncate max-w-[250px]`}>\n                    {publicKey?.toBase58()}\n                  </div>\n                </div>\n                \n                {}\n                <AnimatePresence>\n                  {showEncryption && <motion.div initial={{\n                opacity: 0\n              }} animate={{\n                opacity: 1\n              }} exit={{\n                opacity: 0\n              }} className=\"absolute inset-0 bg-black/70 backdrop-blur-md flex flex-col items-center justify-center rounded-2xl z-10\">\n                      <div className=\"text-center\">\n                        <motion.div className=\"mb-6 inline-block\" animate={{\n                    scale: [1, 1.1, 1],\n                    rotateY: [0, 180, 360],\n                    filter: ['drop-shadow(0 0 0px rgb(6 182 212))', 'drop-shadow(0 0 10px rgb(6 182 212))', 'drop-shadow(0 0 0px rgb(6 182 212))']\n                  }} transition={{\n                    duration: 2,\n                    repeat: Infinity,\n                    repeatDelay: 0.2\n                  }}>\n                          <div className=\"relative\">\n                            <div className=\"absolute inset-0 bg-cyan-500 blur-md opacity-20 rounded-full\"></div>\n                            <Lock className=\"h-16 w-16 text-cyan-400 relative z-10\" />\n                          </div>\n                        </motion.div>\n                        \n                        <motion.p className=\"text-cyan-300 font-bold mb-3\" initial={{\n                    opacity: 0\n                  }} animate={{\n                    opacity: 1\n                  }} transition={{\n                    delay: 0.2\n                  }}>\n                          {messageStatus || (file ? \"Encrypting message & attachment\" : \"Encrypting message\")}\n                        </motion.p>\n                        \n                        <div className=\"relative w-56 h-2 bg-slate-800/70 rounded-full overflow-hidden\">\n                          <motion.div className=\"absolute h-full bg-gradient-to-r from-cyan-500 to-blue-600\" initial={{\n                      width: 0\n                    }} animate={{\n                      width: \"100%\"\n                    }} transition={{\n                      duration: file ? 3 : 2\n                    }} />\n                        </div>\n                        \n                        {blurMode && <motion.p className=\"text-xs text-cyan-300/70 mt-2\" initial={{\n                    opacity: 0\n                  }} animate={{\n                    opacity: 1\n                  }} transition={{\n                    delay: 0.5\n                  }}>\n                            <motion.span animate={{\n                      opacity: [0.7, 1, 0.7]\n                    }} transition={{\n                      duration: 1.5,\n                      repeat: Infinity\n                    }}>\n                              Applying blur effect...\n                            </motion.span>\n                          </motion.p>}\n                        \n                        {storageOption !== \"blockchain\" && <motion.p className=\"text-xs text-cyan-300/70 mt-2\" initial={{\n                    opacity: 0\n                  }} animate={{\n                    opacity: 1\n                  }} transition={{\n                    delay: 0.5\n                  }}>\n                            <motion.span animate={{\n                      opacity: [0.7, 1, 0.7]\n                    }} transition={{\n                      duration: 1.5,\n                      repeat: Infinity\n                    }}>\n                              Storing on {storageOption === \"ipfs\" ? \"IPFS\" : \"Arweave\"}...\n                            </motion.span>\n                          </motion.p>}\n                      </div>\n                    </motion.div>}\n                </AnimatePresence>\n                \n                {}\n                <AnimatePresence>\n                  {showNicknameModal && <motion.div initial={{\n                opacity: 0\n              }} animate={{\n                opacity: 1\n              }} exit={{\n                opacity: 0\n              }} className=\"fixed inset-0 flex items-center justify-center z-50 p-4\">\n                      <div className=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" onClick={() => {\n                  setShowNicknameModal(false);\n                  triggerHapticFeedback(\"light\");\n                }} />\n                      <motion.div initial={{\n                  scale: 0.9\n                }} animate={{\n                  scale: 1\n                }} exit={{\n                  scale: 0.9\n                }} className={`${darkMode ? 'bg-slate-800' : 'bg-white'} rounded-xl p-6 w-full max-w-md relative z-10 shadow-xl ${darkMode ? 'shadow-black/50' : 'shadow-slate-300/50'}`}>\n                        <div className=\"flex justify-between items-center mb-4\">\n                          <h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>Set Display Name</h3>\n                          <button onClick={() => {\n                      setShowNicknameModal(false);\n                      triggerHapticFeedback(\"light\");\n                    }} className={`${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-800'}`}>\n                            <X className=\"h-5 w-5\" />\n                          </button>\n                        </div>\n                        \n                        <div className=\"mb-4\">\n                          <label className={`block text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-600'} mb-1`} htmlFor=\"nickname\">\n                            Your Nickname\n                          </label>\n                          <input id=\"nickname\" type=\"text\" value={nickname} onChange={e => setNickname(e.target.value)} placeholder=\"Enter a display name\" className={`w-full ${darkMode ? 'bg-slate-900/70 border-slate-700 text-white' : 'bg-slate-100 border-slate-300 text-slate-800'} border rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-200`} />\n                          <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'} mt-1`}>\n                            This will be shown instead of your wallet address\n                          </p>\n                        </div>\n                        \n                        <div className=\"flex justify-end space-x-3\">\n                          <button onClick={() => {\n                      setShowNicknameModal(false);\n                      triggerHapticFeedback(\"light\");\n                    }} className={`px-4 py-2 rounded-lg ${darkMode ? 'bg-slate-700 text-white hover:bg-slate-600' : 'bg-slate-200 text-slate-800 hover:bg-slate-300'} transition-colors`}>\n                            Cancel\n                          </button>\n                          <motion.button whileTap={{\n                      scale: 0.95\n                    }} onClick={() => {\n                      if (nickname.trim()) {\n                        setShowNicknameModal(false);\n                        triggerHapticFeedback(\"medium\");\n                      }\n                    }} className=\"px-4 py-2 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 text-white hover:from-cyan-600 hover:to-blue-700 transition-all\">\n                            Save\n                          </motion.button>\n                        </div>\n                      </motion.div>\n                    </motion.div>}\n                </AnimatePresence>\n                \n                {}\n                <AnimatePresence>\n                  {showIntro && renderIntroScreen()}\n                </AnimatePresence>\n          </motion.div> : activeTab === \"trades\" ? <motion.div key=\"trade-analytics\" initial={{\n            opacity: 0\n          }} animate={{\n            opacity: 1\n          }} exit={{\n            opacity: 0\n          }} className=\"w-full\">\n                <div className={`backdrop-blur-md rounded-2xl ${darkMode ? 'bg-slate-800/40 border border-slate-700/60 shadow-xl shadow-black/20' : 'bg-white/40 border border-slate-200/60 shadow-xl shadow-slate-200/30'} p-6 w-full`}>\n                  <div className=\"flex items-center justify-between mb-6\">\n                    <div className=\"flex items-center\">\n                      <LineChart className={`h-6 w-6 ${darkMode ? 'text-cyan-400' : 'text-cyan-500'} mr-2`} />\n                      <h2 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>Trade Tracker</h2>\n                    </div>\n                    \n                    <div className=\"flex space-x-2\">\n                      <select value={tradeTimeframe} onChange={e => setTradeTimeframe(e.target.value)} className={`text-xs px-3 py-1 rounded-lg ${darkMode ? 'bg-slate-700 text-slate-300 border-slate-600' : 'bg-slate-200 text-slate-700 border-slate-300'} border`}>\n                        <option value=\"all\">All Time</option>\n                        <option value=\"month\">Last Month</option>\n                        <option value=\"week\">Last Week</option>\n                        <option value=\"day\">Last Day</option>\n                      </select>\n                      \n                      <button onClick={() => {\n                    fetchTradeData();\n                    triggerHapticFeedback(\"light\");\n                  }} className={`text-xs flex items-center px-3 py-1 rounded-lg ${darkMode ? 'bg-slate-700 hover:bg-slate-600 text-slate-300' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'}`}>\n                        <RotateCw className=\"h-3 w-3 mr-1\" />\n                        Refresh\n                      </button>\n                    </div>\n                  </div>\n                  \n                  {isFetchingTrades ? <div className=\"flex flex-col items-center justify-center py-16\">\n                      <motion.div animate={{\n                  rotate: 360\n                }} transition={{\n                  duration: 1.5,\n                  repeat: Infinity,\n                  ease: \"linear\"\n                }} className=\"mb-4\">\n                        <LineChart className={`h-10 w-10 ${darkMode ? 'text-cyan-400' : 'text-cyan-500'}`} />\n                      </motion.div>\n                      <p className={darkMode ? 'text-slate-400' : 'text-slate-500'}>Analyzing your on-chain trading activity...</p>\n                    </div> : !tradeData.length ? <div className=\"text-center py-12\">\n                      <motion.div initial={{\n                  y: 0\n                }} animate={{\n                  y: [0, -10, 0]\n                }} transition={{\n                  duration: 2,\n                  repeat: Infinity\n                }} className=\"flex justify-center mb-4\">\n                        <Wallet className={`h-16 w-16 ${darkMode ? 'text-slate-600' : 'text-slate-400'}`} />\n                      </motion.div>\n                      <p className={darkMode ? 'text-slate-400' : 'text-slate-500'}>No trading activity found</p>\n                      <p className=\"text-sm mt-2 max-w-md mx-auto text-slate-500\">\n                        Connect your wallet to sync your trading activity\n                      </p>\n                    </div> : <>\n                      {}\n                      <div className=\"flex border-b mb-6 overflow-x-auto pb-1 space-x-1 no-scrollbar\">\n                        <button onClick={() => setActiveTradeTab(\"overview\")} className={`px-4 py-2 rounded-t-lg text-sm flex items-center ${activeTradeTab === \"overview\" ? `${darkMode ? 'bg-slate-700 text-cyan-400 border-b-2 border-cyan-400' : 'bg-slate-200 text-cyan-600 border-b-2 border-cyan-500'}` : `${darkMode ? 'text-slate-400 hover:text-slate-300' : 'text-slate-500 hover:text-slate-700'}`}`}>\n                          <Activity className=\"h-4 w-4 mr-1\" />\n                          Overview\n                        </button>\n                        <button onClick={() => setActiveTradeTab(\"performance\")} className={`px-4 py-2 rounded-t-lg text-sm flex items-center ${activeTradeTab === \"performance\" ? `${darkMode ? 'bg-slate-700 text-cyan-400 border-b-2 border-cyan-400' : 'bg-slate-200 text-cyan-600 border-b-2 border-cyan-500'}` : `${darkMode ? 'text-slate-400 hover:text-slate-300' : 'text-slate-500 hover:text-slate-700'}`}`}>\n                          <TrendingUp className=\"h-4 w-4 mr-1\" />\n                          Performance\n                        </button>\n                        <button onClick={() => setActiveTradeTab(\"analyzer\")} className={`px-4 py-2 rounded-t-lg text-sm flex items-center ${activeTradeTab === \"analyzer\" ? `${darkMode ? 'bg-slate-700 text-cyan-400 border-b-2 border-cyan-400' : 'bg-slate-200 text-cyan-600 border-b-2 border-cyan-500'}` : `${darkMode ? 'text-slate-400 hover:text-slate-300' : 'text-slate-500 hover:text-slate-700'}`}`}>\n                          <Brain className=\"h-4 w-4 mr-1\" />\n                          Analyzer\n                        </button>\n                        <button onClick={() => setActiveTradeTab(\"tokens\")} className={`px-4 py-2 rounded-t-lg text-sm flex items-center ${activeTradeTab === \"tokens\" ? `${darkMode ? 'bg-slate-700 text-cyan-400 border-b-2 border-cyan-400' : 'bg-slate-200 text-cyan-600 border-b-2 border-cyan-500'}` : `${darkMode ? 'text-slate-400 hover:text-slate-300' : 'text-slate-500 hover:text-slate-700'}`}`}>\n                          <Coins className=\"h-4 w-4 mr-1\" />\n                          Tokens\n                        </button>\n                        <button onClick={() => setActiveTradeTab(\"timing\")} className={`px-4 py-2 rounded-t-lg text-sm flex items-center ${activeTradeTab === \"timing\" ? `${darkMode ? 'bg-slate-700 text-cyan-400 border-b-2 border-cyan-400' : 'bg-slate-200 text-cyan-600 border-b-2 border-cyan-500'}` : `${darkMode ? 'text-slate-400 hover:text-slate-300' : 'text-slate-500 hover:text-slate-700'}`}`}>\n                          <Clock className=\"h-4 w-4 mr-1\" />\n                          Timing\n                        </button>\n                      </div>\n                      \n                      {}\n                      <AnimatePresence mode=\"wait\">\n                        {activeTradeTab === \"overview\" && <motion.div key=\"overview\" initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }} exit={{\n                    opacity: 0\n                  }}>\n                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                              {}\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Trading Summary\n                                </h3>\n                                <div className=\"grid grid-cols-2 gap-3\">\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Total Trades</p>\n                                    <p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{tradeAnalytics?.totalTrades}</p>\n                                  </div>\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Win Rate</p>\n                                    <p className={`text-2xl font-bold ${tradeAnalytics?.winRate >= 50 ? 'text-green-400' : 'text-red-400'}`}>\n                                      {tradeAnalytics?.winRate.toFixed(1)}%\n                                    </p>\n                                  </div>\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Total PnL</p>\n                                    <p className={`text-2xl font-bold ${tradeAnalytics?.totalPnl >= 0 ? 'text-green-400' : 'text-red-400'}`}>\n                                      {tradeAnalytics?.totalPnl >= 0 ? '+' : ''}{tradeAnalytics?.totalPnl.toFixed(2)}\n                                    </p>\n                                  </div>\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Avg. Hold Time</p>\n                                    <p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                      {tradeAnalytics?.avgHoldTime >= 24 ? `${(tradeAnalytics?.avgHoldTime / 24).toFixed(1)}d` : `${tradeAnalytics?.avgHoldTime.toFixed(1)}h`}\n                                    </p>\n                                  </div>\n                                </div>\n                              </div>\n                              \n                              {}\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Emotional Trading Score\n                                </h3>\n                                <div className=\"relative pt-1\">\n                                  <div className=\"flex items-center justify-between mb-2\">\n                                    <div className=\"flex items-center\">\n                                      <Brain className={`h-5 w-5 mr-2 ${tradeAnalytics?.emotionalScore >= 70 ? 'text-green-400' : tradeAnalytics?.emotionalScore >= 40 ? 'text-yellow-400' : 'text-red-400'}`} />\n                                      <span className={`text-lg font-bold ${tradeAnalytics?.emotionalScore >= 70 ? 'text-green-400' : tradeAnalytics?.emotionalScore >= 40 ? 'text-yellow-400' : 'text-red-400'}`}>\n                                        {tradeAnalytics?.emotionalScore.toFixed(0)}\n                                      </span>\n                                    </div>\n                                    <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                      {tradeAnalytics?.emotionalScore >= 70 ? 'Rational' : tradeAnalytics?.emotionalScore >= 40 ? 'Balanced' : 'Emotional'}\n                                    </span>\n                                  </div>\n                                  <div className=\"overflow-hidden h-3 mb-2 text-xs flex rounded-full bg-slate-200 dark:bg-slate-700\">\n                                    <motion.div initial={{\n                              width: 0\n                            }} animate={{\n                              width: `${tradeAnalytics?.emotionalScore}%`\n                            }} className={`shadow-none flex flex-col text-center whitespace-nowrap justify-center ${tradeAnalytics?.emotionalScore >= 70 ? 'bg-gradient-to-r from-green-400 to-green-500' : tradeAnalytics?.emotionalScore >= 40 ? 'bg-gradient-to-r from-yellow-400 to-yellow-500' : 'bg-gradient-to-r from-red-400 to-red-500'}`} transition={{\n                              duration: 0.5\n                            }}></motion.div>\n                                  </div>\n                                  <div className=\"flex justify-between\">\n                                    <span className=\"text-xs text-red-400\">Emotional</span>\n                                    <span className=\"text-xs text-green-400\">Rational</span>\n                                  </div>\n                                </div>\n                                \n                                <div className=\"mt-4 grid grid-cols-2 gap-2\">\n                                  <div className={`p-2 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center`}>\n                                    <div className={`p-1.5 rounded-full ${darkMode ? 'bg-slate-700' : 'bg-slate-200'} mr-2`}>\n                                      <Flame className=\"h-3 w-3 text-red-400\" />\n                                    </div>\n                                    <div>\n                                      <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Panic Sells</p>\n                                      <p className={`text-sm font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                        {tradeAnalytics?.panicSellsCount} trades\n                                      </p>\n                                    </div>\n                                  </div>\n                                  <div className={`p-2 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center`}>\n                                    <div className={`p-1.5 rounded-full ${darkMode ? 'bg-slate-700' : 'bg-slate-200'} mr-2`}>\n                                      <TrendingUp className=\"h-3 w-3 text-purple-400\" />\n                                    </div>\n                                    <div>\n                                      <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>FOMO Buys</p>\n                                      <p className={`text-sm font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                        {tradeAnalytics?.fomoCount} trades\n                                      </p>\n                                    </div>\n                                  </div>\n                                </div>\n                              </div>\n                              \n                              {}\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'} md:col-span-2`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Cumulative PnL\n                                </h3>\n                                <div className=\"h-60\">\n                                  <ResponsiveContainer width=\"100%\" height=\"100%\">\n                                    <AreaChart data={tradeAnalytics?.timeline || []} margin={{\n                              top: 10,\n                              right: 10,\n                              left: 0,\n                              bottom: 0\n                            }}>\n                                      <defs>\n                                        <linearGradient id=\"pnlGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                                          <stop offset=\"5%\" stopColor={darkMode ? \"#22d3ee\" : \"#06b6d4\"} stopOpacity={0.3} />\n                                          <stop offset=\"95%\" stopColor={darkMode ? \"#22d3ee\" : \"#06b6d4\"} stopOpacity={0} />\n                                        </linearGradient>\n                                      </defs>\n                                      <CartesianGrid strokeDasharray=\"3 3\" stroke={darkMode ? \"#334155\" : \"#e2e8f0\"} />\n                                      <XAxis dataKey=\"tradeNumber\" tickLine={false} axisLine={false} tick={{\n                                fill: darkMode ? '#94a3b8' : '#64748b'\n                              }} tickFormatter={value => `#${value}`} />\n                                      <YAxis tickLine={false} axisLine={false} tick={{\n                                fill: darkMode ? '#94a3b8' : '#64748b'\n                              }} tickFormatter={value => value >= 0 ? `+${value.toFixed(0)}` : value.toFixed(0)} />\n                                      <Tooltip contentStyle={{\n                                backgroundColor: darkMode ? '#1e293b' : '#ffffff',\n                                border: `1px solid ${darkMode ? '#334155' : '#e2e8f0'}`,\n                                borderRadius: '0.5rem',\n                                color: darkMode ? '#e2e8f0' : '#334155'\n                              }} formatter={value => [`${value >= 0 ? '+' : ''}${value.toFixed(2)}`, 'PnL']} labelFormatter={value => `Trade #${value}`} />\n                                      <Area type=\"monotone\" dataKey=\"cumulativePnl\" stroke={darkMode ? \"#22d3ee\" : \"#06b6d4\"} fillOpacity={1} fill=\"url(#pnlGradient)\" />\n                                    </AreaChart>\n                                  </ResponsiveContainer>\n                                </div>\n                              </div>\n                              \n                              {}\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'} md:col-span-2`}>\n                                <div className=\"flex justify-between items-center mb-3\">\n                                  <h3 className={`text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                    Recent Trades\n                                  </h3>\n                                  <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                    Showing {Math.min(5, tradeData.length)} of {tradeData.length}\n                                  </span>\n                                </div>\n                                <div className={`border rounded-lg overflow-hidden ${darkMode ? 'border-slate-600' : 'border-slate-200'}`}>\n                                  <div className=\"overflow-x-auto\">\n                                    <table className=\"min-w-full divide-y divide-slate-600\">\n                                      <thead className={darkMode ? 'bg-slate-800' : 'bg-slate-100'}>\n                                        <tr>\n                                          <th scope=\"col\" className={`px-4 py-2 text-left text-xs font-medium ${darkMode ? 'text-slate-400' : 'text-slate-500'} uppercase tracking-wider`}>Token</th>\n                                          <th scope=\"col\" className={`px-4 py-2 text-left text-xs font-medium ${darkMode ? 'text-slate-400' : 'text-slate-500'} uppercase tracking-wider`}>Date</th>\n                                          <th scope=\"col\" className={`px-4 py-2 text-left text-xs font-medium ${darkMode ? 'text-slate-400' : 'text-slate-500'} uppercase tracking-wider`}>Hold Time</th>\n                                          <th scope=\"col\" className={`px-4 py-2 text-left text-xs font-medium ${darkMode ? 'text-slate-400' : 'text-slate-500'} uppercase tracking-wider`}>PnL</th>\n                                        </tr>\n                                      </thead>\n                                      <tbody className={`divide-y ${darkMode ? 'divide-slate-700' : 'divide-slate-200'}`}>\n                                        {tradeData.slice(0, 5).map(trade => <tr key={trade.id} className={`cursor-pointer hover:${darkMode ? 'bg-slate-800/50' : 'bg-slate-100/50'}`} onClick={() => {\n                                  setSelectedTrade(trade);\n                                  setShowTradeDetailsModal(true);\n                                  triggerHapticFeedback(\"light\");\n                                }}>\n                                            <td className=\"px-4 py-3 whitespace-nowrap\">\n                                              <div className=\"flex items-center\">\n                                                <div className={`h-6 w-6 rounded-full flex items-center justify-center ${darkMode ? 'bg-slate-700' : 'bg-slate-200'} mr-2`}>\n                                                  {trade.token.charAt(0)}\n                                                </div>\n                                                <span className={`text-sm ${darkMode ? 'text-white' : 'text-slate-800'}`}>{trade.token}</span>\n                                              </div>\n                                            </td>\n                                            <td className={`px-4 py-3 whitespace-nowrap text-sm ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>\n                                              {new Date(trade.timestamp).toLocaleDateString()}\n                                            </td>\n                                            <td className={`px-4 py-3 whitespace-nowrap text-sm ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>\n                                              {trade.holdTime >= 24 ? `${(trade.holdTime / 24).toFixed(1)}d` : `${trade.holdTime.toFixed(1)}h`}\n                                            </td>\n                                            <td className={`px-4 py-3 whitespace-nowrap text-sm font-medium ${trade.pnl >= 0 ? 'text-green-400' : 'text-red-400'}`}>\n                                              {trade.pnl >= 0 ? '+' : ''}{trade.pnl.toFixed(2)}\n                                            </td>\n                                          </tr>)}\n                                      </tbody>\n                                    </table>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </motion.div>}\n                        \n                        {activeTradeTab === \"performance\" && <motion.div key=\"performance\" initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }} exit={{\n                    opacity: 0\n                  }}>\n                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Win/Loss Ratio\n                                </h3>\n                                <div className=\"h-40\">\n                                  <ResponsiveContainer width=\"100%\" height=\"100%\">\n                                    <RechartPieChart>\n                                      <Pie data={[{\n                                name: 'Wins',\n                                value: tradeAnalytics?.winningTrades,\n                                color: darkMode ? '#4ade80' : '#22c55e'\n                              }, {\n                                name: 'Losses',\n                                value: tradeAnalytics?.losingTrades,\n                                color: darkMode ? '#f87171' : '#ef4444'\n                              }]} cx=\"50%\" cy=\"50%\" labelLine={false} outerRadius={80} dataKey=\"value\">\n                                        {[{\n                                  name: 'Wins',\n                                  value: tradeAnalytics?.winningTrades,\n                                  color: darkMode ? '#4ade80' : '#22c55e'\n                                }, {\n                                  name: 'Losses',\n                                  value: tradeAnalytics?.losingTrades,\n                                  color: darkMode ? '#f87171' : '#ef4444'\n                                }].map((entry, index) => <Cell key={`cell-${index}`} fill={entry.color} />)}\n                                      </Pie>\n                                      <Tooltip contentStyle={{\n                                backgroundColor: darkMode ? '#1e293b' : '#ffffff',\n                                border: `1px solid ${darkMode ? '#334155' : '#e2e8f0'}`,\n                                borderRadius: '0.5rem',\n                                color: darkMode ? '#e2e8f0' : '#334155'\n                              }} />\n                                      <Legend layout=\"horizontal\" verticalAlign=\"bottom\" align=\"center\" />\n                                    </RechartPieChart>\n                                  </ResponsiveContainer>\n                                </div>\n                              </div>\n                              \n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Risk/Reward Analysis\n                                </h3>\n                                <div className=\"grid grid-cols-2 gap-3 mb-2\">\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Avg Win</p>\n                                    <p className=\"text-lg font-bold text-green-400\">\n                                      +{tradeAnalytics?.avgWinAmount.toFixed(2)}\n                                    </p>\n                                  </div>\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Avg Loss</p>\n                                    <p className=\"text-lg font-bold text-red-400\">\n                                      {tradeAnalytics?.avgLossAmount.toFixed(2)}\n                                    </p>\n                                  </div>\n                                </div>\n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} mb-2`}>\n                                  <div className=\"flex justify-between items-center\">\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                      Risk/Reward Ratio\n                                    </p>\n                                    <p className={`text-sm font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                      1:{Math.abs(tradeAnalytics?.avgWinAmount / tradeAnalytics?.avgLossAmount).toFixed(2)}\n                                    </p>\n                                  </div>\n                                  <div className=\"mt-2 h-2 bg-slate-700 rounded-full overflow-hidden\">\n                                    <div className=\"h-full bg-gradient-to-r from-red-500 to-green-500\" style={{\n                              width: `${Math.abs(tradeAnalytics?.avgWinAmount) / (Math.abs(tradeAnalytics?.avgWinAmount) + Math.abs(tradeAnalytics?.avgLossAmount)) * 100}%`\n                            }}></div>\n                                  </div>\n                                </div>\n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                  <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Hold Time Comparison</p>\n                                  <div className=\"flex items-center justify-between mt-1\">\n                                    <div className=\"flex items-center\">\n                                      <Zap className=\"h-3 w-3 text-green-400 mr-1\" />\n                                      <p className={`text-xs ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>\n                                        Wins: {tradeAnalytics?.avgWinHoldTime.toFixed(1)}h\n                                      </p>\n                                    </div>\n                                    <div className=\"flex items-center\">\n                                      <Clock className=\"h-3 w-3 text-red-400 mr-1\" />\n                                      <p className={`text-xs ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>\n                                        Losses: {tradeAnalytics?.avgLossHoldTime.toFixed(1)}h\n                                      </p>\n                                    </div>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                            \n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'} mb-4`}>\n                              <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Trade Distribution\n                              </h3>\n                              <div className=\"h-60\">\n                                <ResponsiveContainer width=\"100%\" height=\"100%\">\n                                  <ScatterChart margin={{\n                            top: 20,\n                            right: 20,\n                            bottom: 20,\n                            left: 20\n                          }}>\n                                    <CartesianGrid strokeDasharray=\"3 3\" stroke={darkMode ? \"#334155\" : \"#e2e8f0\"} />\n                                    <XAxis type=\"number\" dataKey=\"holdTime\" name=\"Hold Time\" unit=\"h\" tick={{\n                              fill: darkMode ? '#94a3b8' : '#64748b'\n                            }} tickLine={false} axisLine={false} label={{\n                              value: 'Hold Time (hours)',\n                              position: 'insideBottom',\n                              offset: -5,\n                              fill: darkMode ? '#94a3b8' : '#64748b'\n                            }} />\n                                    <YAxis type=\"number\" dataKey=\"pnl\" name=\"Profit/Loss\" tick={{\n                              fill: darkMode ? '#94a3b8' : '#64748b'\n                            }} tickLine={false} axisLine={false} label={{\n                              value: 'PnL',\n                              angle: -90,\n                              position: 'insideLeft',\n                              fill: darkMode ? '#94a3b8' : '#64748b'\n                            }} />\n                                    <Tooltip contentStyle={{\n                              backgroundColor: darkMode ? '#1e293b' : '#ffffff',\n                              border: `1px solid ${darkMode ? '#334155' : '#e2e8f0'}`,\n                              borderRadius: '0.5rem',\n                              color: darkMode ? '#e2e8f0' : '#334155'\n                            }} formatter={(value, name) => [name === \"Profit/Loss\" ? `${value >= 0 ? '+' : ''}${value.toFixed(2)}` : `${value.toFixed(1)}h`, name]} labelFormatter={(_, payload) => payload[0]?.payload?.token || ''} />\n                                    <Scatter name=\"Losing Trades\" data={tradeData.filter(t => !t.isWin)} fill={darkMode ? \"#f87171\" : \"#ef4444\"} />\n                                    <Scatter name=\"Winning Trades\" data={tradeData.filter(t => t.isWin)} fill={darkMode ? \"#4ade80\" : \"#22c55e\"} />\n                                    <Legend />\n                                  </ScatterChart>\n                                </ResponsiveContainer>\n                              </div>\n                            </div>\n                            \n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                              <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Performance Insights\n                              </h3>\n                              <div className=\"space-y-3\">\n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                  <div className=\"flex items-center justify-between\">\n                                    <div className=\"flex items-center\">\n                                      <Timer className=\"h-5 w-5 text-cyan-400 mr-2\" />\n                                      <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                        Optimal Hold Time\n                                      </p>\n                                    </div>\n                                    {tradeAnalytics?.avgWinHoldTime > tradeAnalytics?.avgLossHoldTime ? <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-600'}`}>\n                                        Holding winners pays off\n                                      </span> : <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-600'}`}>\n                                        Cut losses quickly\n                                      </span>}\n                                  </div>\n                                  <p className={`text-sm mt-2 ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>\n                                    Your winning trades are held for an average of {tradeAnalytics?.avgWinHoldTime.toFixed(1)} hours, \n                                    while losing trades are held for {tradeAnalytics?.avgLossHoldTime.toFixed(1)} hours.\n                                    {tradeAnalytics?.avgWinHoldTime > tradeAnalytics?.avgLossHoldTime ? \" You're doing well by letting winners run and cutting losses.\" : \" Consider cutting losses quicker and letting winners run longer.\"}\n                                  </p>\n                                </div>\n                              </div>\n                            </div>\n                          </motion.div>}\n                        \n                        {activeTradeTab === \"analyzer\" && <motion.div key=\"analyzer\" initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }} exit={{\n                    opacity: 0\n                  }}>\n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'} mb-4`}>\n                              <h3 className={`text-sm font-medium mb-4 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Trading Psychology Analysis\n                              </h3>\n                              \n                              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n                                {tradeAnalytics?.patterns.map((pattern, index) => <div key={index} className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} border-l-4 ${pattern.type === 'diamond' || pattern.type === 'hold' ? 'border-green-500' : pattern.type === 'paper' ? 'border-blue-500' : 'border-red-500'}`}>\n                                    <div className=\"flex items-center mb-2\">\n                                      {pattern.icon}\n                                      <h4 className={`ml-2 font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                        {pattern.title}\n                                      </h4>\n                                    </div>\n                                    <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>\n                                      {pattern.description}\n                                    </p>\n                                  </div>)}\n                              </div>\n                              \n                              <div className={`p-4 rounded-lg border ${darkMode ? 'bg-slate-800/50 border-cyan-900/50' : 'bg-cyan-50 border-cyan-200'}`}>\n                                <div className=\"flex items-start\">\n                                  <Brain className={`h-5 w-5 ${darkMode ? 'text-cyan-400' : 'text-cyan-600'} mt-0.5 mr-2 flex-shrink-0`} />\n                                  <div>\n                                    <h4 className={`font-medium mb-1 ${darkMode ? 'text-cyan-300' : 'text-cyan-700'}`}>\n                                      Trading Style Analysis\n                                    </h4>\n                                    <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-700'}`}>\n                                      Based on your trade history, you're a \n                                      {tradeAnalytics?.avgHoldTime < 5 ? \" short-term \" : tradeAnalytics?.avgHoldTime < 48 ? \" medium-term \" : \" long-term \"}\n                                      trader who \n                                      {tradeAnalytics?.emotionalScore < 40 ? \" tends to trade emotionally.\" : tradeAnalytics?.emotionalScore < 70 ? \" balances emotion and strategy.\" : \" follows a disciplined approach.\"}\n                                      {tradeAnalytics?.winRate >= 50 ? ` Your ${tradeAnalytics?.winRate.toFixed(0)}% win rate is solid.` : ` Work on improving your ${tradeAnalytics?.winRate.toFixed(0)}% win rate.`}\n                                      {tradeAnalytics?.totalPnl >= 0 ? \" Overall, your strategy is profitable.\" : \" Focus on reducing losses to reach profitability.\"}\n                                    </p>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                            \n                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Behavioral Patterns\n                                </h3>\n                                <div className=\"space-y-3\">\n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center justify-between`}>\n                                    <div className=\"flex items-center\">\n                                      <div className={`w-8 h-8 rounded-full flex items-center justify-center ${darkMode ? 'bg-slate-700' : 'bg-slate-200'} mr-3`}>\n                                        <TrendingUp className={`h-4 w-4 ${darkMode ? 'text-green-400' : 'text-green-500'}`} />\n                                      </div>\n                                      <div>\n                                        <p className={`text-sm font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>FOMO Trading</p>\n                                        <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Buying during price rallies</p>\n                                      </div>\n                                    </div>\n                                    <div className={`h-2 w-16 bg-slate-700 rounded-full overflow-hidden`}>\n                                      <div className=\"h-full bg-gradient-to-r from-green-500 to-green-300\" style={{\n                                width: `${tradeAnalytics?.fomoCount / tradeAnalytics?.totalTrades * 100}%`\n                              }}></div>\n                                    </div>\n                                  </div>\n                                  \n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center justify-between`}>\n                                    <div className=\"flex items-center\">\n                                      <div className={`w-8 h-8 rounded-full flex items-center justify-center ${darkMode ? 'bg-slate-700' : 'bg-slate-200'} mr-3`}>\n                                        <Flame className={`h-4 w-4 ${darkMode ? 'text-red-400' : 'text-red-500'}`} />\n                                      </div>\n                                      <div>\n                                        <p className={`text-sm font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>Panic Selling</p>\n                                        <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Selling during downtrends</p>\n                                      </div>\n                                    </div>\n                                    <div className={`h-2 w-16 bg-slate-700 rounded-full overflow-hidden`}>\n                                      <div className=\"h-full bg-gradient-to-r from-red-500 to-red-300\" style={{\n                                width: `${tradeAnalytics?.panicSellsCount / tradeAnalytics?.totalTrades * 100}%`\n                              }}></div>\n                                    </div>\n                                  </div>\n                                  \n                                  <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center justify-between`}>\n                                    <div className=\"flex items-center\">\n                                      <div className={`w-8 h-8 rounded-full flex items-center justify-center ${darkMode ? 'bg-slate-700' : 'bg-slate-200'} mr-3`}>\n                                        <Medal className={`h-4 w-4 ${darkMode ? 'text-blue-400' : 'text-blue-500'}`} />\n                                      </div>\n                                      <div>\n                                        <p className={`text-sm font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>Diamond Hands</p>\n                                        <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Holding through volatility</p>\n                                      </div>\n                                    </div>\n                                    <div className={`h-2 w-16 bg-slate-700 rounded-full overflow-hidden`}>\n                                      <div className=\"h-full bg-gradient-to-r from-blue-500 to-blue-300\" style={{\n                                width: `${tradeAnalytics?.diamondHandsCount / tradeAnalytics?.totalTrades * 100}%`\n                              }}></div>\n                                    </div>\n                                  </div>\n                                </div>\n                              </div>\n                              \n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Improvement Areas\n                                </h3>\n                                \n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} mb-3`}>\n                                  <h4 className={`text-sm font-medium mb-2 flex items-center ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                    <ArrowUp className=\"h-4 w-4 text-green-400 mr-1\" />\n                                    Strengths\n                                  </h4>\n                                  <ul className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'} space-y-1`}>\n                                    {tradeAnalytics?.winRate >= 50 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Solid win rate at {tradeAnalytics.winRate.toFixed(1)}%</span>\n                                      </li>}\n                                    {tradeAnalytics?.avgWinHoldTime > tradeAnalytics?.avgLossHoldTime && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>You let winners run longer than losers</span>\n                                      </li>}\n                                    {tradeAnalytics?.diamondHandsCount > 0 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Strong holding through volatility</span>\n                                      </li>}\n                                    {tradeAnalytics?.mostProfitableTokens?.length > 0 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Good token selection with {tradeAnalytics.mostProfitableTokens[0]?.token}</span>\n                                      </li>}\n                                  </ul>\n                                </div>\n                                \n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>\n                                  <h4 className={`text-sm font-medium mb-2 flex items-center ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                    <ArrowDown className=\"h-4 w-4 text-red-400 mr-1\" />\n                                    Areas to Improve\n                                  </h4>\n                                  <ul className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'} space-y-1`}>\n                                    {tradeAnalytics?.panicSellsCount / tradeAnalytics?.totalTrades > 0.2 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Reduce panic selling during drawdowns</span>\n                                      </li>}\n                                    {tradeAnalytics?.fomoCount / tradeAnalytics?.totalTrades > 0.2 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Control FOMO buying at market tops</span>\n                                      </li>}\n                                    {tradeAnalytics?.avgLossHoldTime > tradeAnalytics?.avgWinHoldTime * 1.5 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Cut losing positions earlier</span>\n                                      </li>}\n                                    {tradeAnalytics?.paperHandsCount / tradeAnalytics?.winningTrades > 0.4 && <li className=\"flex items-start\">\n                                        <div className=\"h-5 w-5 flex items-center justify-center mr-1\">•</div>\n                                        <span>Allow profitable trades to run longer</span>\n                                      </li>}\n                                  </ul>\n                                </div>\n                              </div>\n                            </div>\n                          </motion.div>}\n                        \n                        {activeTradeTab === \"tokens\" && <motion.div key=\"tokens\" initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }} exit={{\n                    opacity: 0\n                  }}>\n                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                              {}\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Most Profitable Tokens\n                                </h3>\n                                {tradeAnalytics?.mostProfitableTokens?.map((token, idx) => <div key={idx} className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} mb-2 last:mb-0 flex items-center justify-between`}>\n                                    <div className=\"flex items-center\">\n                                      <div className={`h-8 w-8 rounded-full flex items-center justify-center ${darkMode ? 'bg-green-900/40' : 'bg-green-100'} text-green-400 mr-3`}>\n                                        <Coins className=\"h-4 w-4\" />\n                                      </div>\n                                      <div>\n                                        <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>{token.token}</p>\n                                        <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>{token.tokenName}</p>\n                                      </div>\n                                    </div>\n                                    <div className=\"text-right\">\n                                      <p className=\"text-green-400 font-bold\">+{token.totalPnl.toFixed(2)}</p>\n                                      <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                        Win rate: {token.winRate.toFixed(1)}%\n                                      </p>\n                                    </div>\n                                  </div>)}\n                                \n                                {(!tradeAnalytics?.mostProfitableTokens || tradeAnalytics.mostProfitableTokens.length === 0) && <div className={`p-4 text-center ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                    No profitable tokens found\n                                  </div>}\n                              </div>\n                              \n                              {}\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Least Profitable Tokens\n                                </h3>\n                                {tradeAnalytics?.leastProfitableTokens?.map((token, idx) => <div key={idx} className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} mb-2 last:mb-0 flex items-center justify-between`}>\n                                    <div className=\"flex items-center\">\n                                      <div className={`h-8 w-8 rounded-full flex items-center justify-center ${darkMode ? 'bg-red-900/40' : 'bg-red-100'} text-red-400 mr-3`}>\n                                        <Coins className=\"h-4 w-4\" />\n                                      </div>\n                                      <div>\n                                        <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>{token.token}</p>\n                                        <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>{token.tokenName}</p>\n                                      </div>\n                                    </div>\n                                    <div className=\"text-right\">\n                                      <p className=\"text-red-400 font-bold\">{token.totalPnl.toFixed(2)}</p>\n                                      <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                        Win rate: {token.winRate.toFixed(1)}%\n                                      </p>\n                                    </div>\n                                  </div>)}\n                                \n                                {(!tradeAnalytics?.leastProfitableTokens || tradeAnalytics.leastProfitableTokens.length === 0) && <div className={`p-4 text-center ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                    No data available\n                                  </div>}\n                              </div>\n                            </div>\n                            \n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'} mb-4`}>\n                              <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Token Performance Comparison\n                              </h3>\n                              <div className=\"h-60\">\n                                <ResponsiveContainer width=\"100%\" height=\"100%\">\n                                  <RechartBarChart data={[...(tradeAnalytics?.mostProfitableTokens || []), ...(tradeAnalytics?.leastProfitableTokens || [])].slice(0, 8)} margin={{\n                            top: 10,\n                            right: 10,\n                            left: 10,\n                            bottom: 30\n                          }}>\n                                    <CartesianGrid strokeDasharray=\"3 3\" stroke={darkMode ? \"#334155\" : \"#e2e8f0\"} />\n                                    <XAxis dataKey=\"token\" tick={{\n                              fill: darkMode ? '#94a3b8' : '#64748b'\n                            }} tickLine={false} axisLine={false} angle={-45} textAnchor=\"end\" interval={0} height={50} />\n                                    <YAxis tick={{\n                              fill: darkMode ? '#94a3b8' : '#64748b'\n                            }} tickLine={false} axisLine={false} tickFormatter={value => value >= 0 ? `+${value.toFixed(0)}` : value.toFixed(0)} />\n                                    <Tooltip contentStyle={{\n                              backgroundColor: darkMode ? '#1e293b' : '#ffffff',\n                              border: `1px solid ${darkMode ? '#334155' : '#e2e8f0'}`,\n                              borderRadius: '0.5rem',\n                              color: darkMode ? '#e2e8f0' : '#334155'\n                            }} formatter={value => [`${value >= 0 ? '+' : ''}${value.toFixed(2)}`, 'PnL']} />\n                                    <Bar dataKey=\"totalPnl\" name=\"PnL\" fill=\"url(#colorPnl)\" radius={[4, 4, 0, 0]}>\n                                      {[...(tradeAnalytics?.mostProfitableTokens || []), ...(tradeAnalytics?.leastProfitableTokens || [])].slice(0, 8).map((entry, index) => <Cell key={`cell-${index}`} fill={entry.totalPnl >= 0 ? darkMode ? '#4ade80' : '#22c55e' : darkMode ? '#f87171' : '#ef4444'} />)}\n                                    </Bar>\n                                  </RechartBarChart>\n                                </ResponsiveContainer>\n                              </div>\n                            </div>\n                            \n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                              <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Token Trading Insights\n                              </h3>\n                              \n                              <div className={`p-4 rounded-lg border ${darkMode ? 'bg-slate-800/50 border-cyan-900/50' : 'bg-cyan-50 border-cyan-200'}`}>\n                                <div className=\"flex items-start\">\n                                  <Wallet className={`h-5 w-5 ${darkMode ? 'text-cyan-400' : 'text-cyan-600'} mt-0.5 mr-2 flex-shrink-0`} />\n                                  <div>\n                                    <h4 className={`font-medium mb-1 ${darkMode ? 'text-cyan-300' : 'text-cyan-700'}`}>\n                                      Token Selection Analysis\n                                    </h4>\n                                    <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-700'}`}>\n                                      {tradeAnalytics?.mostProfitableTokens?.length > 0 ? <>\n                                          Your best performing token is <span className=\"font-medium\">{tradeAnalytics.mostProfitableTokens[0].token}</span> with \n                                          a {tradeAnalytics.mostProfitableTokens[0].winRate.toFixed(1)}% win rate and \n                                          {tradeAnalytics.mostProfitableTokens[0].totalPnl >= 0 ? ' +' : ' '}\n                                          {tradeAnalytics.mostProfitableTokens[0].totalPnl.toFixed(2)} PnL.\n                                          {tradeAnalytics?.leastProfitableTokens?.length > 0 ? <> Meanwhile, <span className=\"font-medium\">{tradeAnalytics.leastProfitableTokens[0].token}</span> has \n                                            been your least profitable with a {tradeAnalytics.leastProfitableTokens[0].totalPnl.toFixed(2)} PnL.</> : ''}\n                                          {tradeAnalytics.mostProfitableTokens.length >= 2 ? <> Consider focusing more on successful tokens like {tradeAnalytics.mostProfitableTokens.slice(0, 2).map(t => t.token).join(' and ')}.</> : ''}\n                                        </> : 'Not enough token trading data to generate insights.'}\n                                    </p>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </motion.div>}\n                        \n                        {activeTradeTab === \"timing\" && <motion.div key=\"timing\" initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }} exit={{\n                    opacity: 0\n                  }}>\n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'} mb-4`}>\n                              <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Performance by Hour (UTC)\n                              </h3>\n                              <div className=\"flex flex-wrap gap-1 justify-center\">\n                                {tradeAnalytics?.heatmapData.map(hourData => <div key={hourData.hour} className={`p-2 rounded w-12 h-16 flex flex-col items-center justify-center ${hourData.trades === 0 ? darkMode ? 'bg-slate-800' : 'bg-slate-100' : hourData.pnl > 0 ? hourData.pnl > 50 ? darkMode ? 'bg-green-800/60' : 'bg-green-200' : darkMode ? 'bg-green-900/30' : 'bg-green-100' : hourData.pnl < -50 ? darkMode ? 'bg-red-800/60' : 'bg-red-200' : darkMode ? 'bg-red-900/30' : 'bg-red-100'}`}>\n                                    <span className={`text-xs ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>\n                                      {hourData.hour}:00\n                                    </span>\n                                    {hourData.trades > 0 ? <>\n                                        <span className={`text-xs mt-1 font-medium ${hourData.pnl >= 0 ? 'text-green-400' : 'text-red-400'}`}>\n                                          {hourData.pnl >= 0 ? '+' : ''}{hourData.pnl.toFixed(0)}\n                                        </span>\n                                        <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                          {hourData.trades} trades\n                                        </span>\n                                      </> : <span className={`text-xs mt-1 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>\n                                        No data\n                                      </span>}\n                                  </div>)}\n                              </div>\n                              \n                              <div className=\"mt-4 flex justify-center items-center space-x-6\">\n                                <div className=\"flex items-center\">\n                                  <div className={`h-3 w-3 ${darkMode ? 'bg-green-800/60' : 'bg-green-200'} rounded mr-1`}></div>\n                                  <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>High Profit</span>\n                                </div>\n                                <div className=\"flex items-center\">\n                                  <div className={`h-3 w-3 ${darkMode ? 'bg-green-900/30' : 'bg-green-100'} rounded mr-1`}></div>\n                                  <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Profit</span>\n                                </div>\n                                <div className=\"flex items-center\">\n                                  <div className={`h-3 w-3 ${darkMode ? 'bg-red-900/30' : 'bg-red-100'} rounded mr-1`}></div>\n                                  <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Loss</span>\n                                </div>\n                                <div className=\"flex items-center\">\n                                  <div className={`h-3 w-3 ${darkMode ? 'bg-red-800/60' : 'bg-red-200'} rounded mr-1`}></div>\n                                  <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>High Loss</span>\n                                </div>\n                              </div>\n                            </div>\n                            \n                            {}\n                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Best Trading Times\n                                </h3>\n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center justify-between`}>\n                                  <div className=\"flex items-center\">\n                                    <div className={`h-10 w-10 rounded-full flex items-center justify-center ${darkMode ? 'bg-green-900/40' : 'bg-green-100'} text-green-400 mr-3`}>\n                                      <Clock className=\"h-5 w-5\" />\n                                    </div>\n                                    <div>\n                                      <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                        {tradeAnalytics?.bestHour}:00 - {tradeAnalytics?.bestHour + 1}:00 UTC\n                                      </p>\n                                      <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                        Based on highest win rate\n                                      </p>\n                                    </div>\n                                  </div>\n                                  <div className=\"text-right\">\n                                    <p className=\"text-green-400 font-bold\">\n                                      {tradeAnalytics?.bestHourWinRate.toFixed(1)}%\n                                    </p>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                      Win rate\n                                    </p>\n                                  </div>\n                                </div>\n                              </div>\n                              \n                              <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                                <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                  Worst Trading Times\n                                </h3>\n                                <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-slate-100'} flex items-center justify-between`}>\n                                  <div className=\"flex items-center\">\n                                    <div className={`h-10 w-10 rounded-full flex items-center justify-center ${darkMode ? 'bg-red-900/40' : 'bg-red-100'} text-red-400 mr-3`}>\n                                      <Clock className=\"h-5 w-5\" />\n                                    </div>\n                                    <div>\n                                      <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                        {tradeAnalytics?.worstHour}:00 - {tradeAnalytics?.worstHour + 1}:00 UTC\n                                      </p>\n                                      <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                        Based on lowest win rate\n                                      </p>\n                                    </div>\n                                  </div>\n                                  <div className=\"text-right\">\n                                    <p className=\"text-red-400 font-bold\">\n                                      {tradeAnalytics?.worstHourWinRate.toFixed(1)}%\n                                    </p>\n                                    <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                      Win rate\n                                    </p>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                            \n                            {}\n                            <div className={`p-4 rounded-xl ${darkMode ? 'bg-slate-700/50' : 'bg-white'}`}>\n                              <h3 className={`text-sm font-medium mb-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n                                Timing Insights\n                              </h3>\n                              \n                              <div className={`p-4 rounded-lg border ${darkMode ? 'bg-slate-800/50 border-cyan-900/50' : 'bg-cyan-50 border-cyan-200'}`}>\n                                <div className=\"flex items-start\">\n                                  <Clock className={`h-5 w-5 ${darkMode ? 'text-cyan-400' : 'text-cyan-600'} mt-0.5 mr-2 flex-shrink-0`} />\n                                  <div>\n                                    <h4 className={`font-medium mb-1 ${darkMode ? 'text-cyan-300' : 'text-cyan-700'}`}>\n                                      Timing Optimization\n                                    </h4>\n                                    <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-700'}`}>\n                                      Your most successful trading occurs at <span className=\"font-medium\">{tradeAnalytics?.bestHour}:00 UTC</span> with a \n                                      {tradeAnalytics?.bestHourWinRate.toFixed(1)}% win rate, while your least successful time is {tradeAnalytics?.worstHour}:00 UTC \n                                      with only a {tradeAnalytics?.worstHourWinRate.toFixed(1)}% win rate.\n                                      \n                                      {tradeAnalytics?.bestHourWinRate - tradeAnalytics?.worstHourWinRate > 30 ? \" There's a significant performance gap between your best and worst trading hours.\" : \" Your performance is relatively consistent across different hours.\"}\n                                      \n                                      Consider focusing more of your trading activity during your peak performance hours.\n                                    </p>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </motion.div>}\n                      </AnimatePresence>\n                    </>}\n                </div>\n                \n                {}\n                <AnimatePresence>\n                  {showTradeDetailsModal && selectedTrade && <motion.div initial={{\n                opacity: 0\n              }} animate={{\n                opacity: 1\n              }} exit={{\n                opacity: 0\n              }} className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n                      <div className=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" onClick={() => {\n                  setShowTradeDetailsModal(false);\n                  triggerHapticFeedback(\"light\");\n                }} />\n                      \n                      <motion.div initial={{\n                  scale: 0.9,\n                  y: 20\n                }} animate={{\n                  scale: 1,\n                  y: 0\n                }} exit={{\n                  scale: 0.9,\n                  y: 20\n                }} className={`${darkMode ? 'bg-slate-800' : 'bg-white'} rounded-xl p-6 w-full max-w-md relative z-10 shadow-xl ${darkMode ? 'shadow-black/50' : 'shadow-slate-300/50'}`}>\n                        <div className=\"flex justify-between items-start mb-4\">\n                          <div className=\"flex items-center\">\n                            <div className={`h-10 w-10 rounded-full flex items-center justify-center ${selectedTrade.isWin ? darkMode ? 'bg-green-900/40' : 'bg-green-100' : darkMode ? 'bg-red-900/40' : 'bg-red-100'} mr-3`}>\n                              <Coins className={`h-5 w-5 ${selectedTrade.isWin ? 'text-green-400' : 'text-red-400'}`} />\n                            </div>\n                            <div>\n                              <h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                {selectedTrade.token} Trade\n                              </h3>\n                              <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                {new Date(selectedTrade.timestamp).toLocaleString()}\n                              </p>\n                            </div>\n                          </div>\n                          <button onClick={() => {\n                      setShowTradeDetailsModal(false);\n                      triggerHapticFeedback(\"light\");\n                    }} className={`${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-800'}`}>\n                            <X className=\"h-5 w-5\" />\n                          </button>\n                        </div>\n                        \n                        <div className={`p-4 mb-4 rounded-lg ${selectedTrade.isWin ? darkMode ? 'bg-green-900/20 border border-green-800/30' : 'bg-green-50 border border-green-200' : darkMode ? 'bg-red-900/20 border border-red-800/30' : 'bg-red-50 border border-red-200'}`}>\n                          <div className=\"flex justify-between items-center\">\n                            <div>\n                              <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>PnL</p>\n                              <p className={`text-2xl font-bold ${selectedTrade.isWin ? 'text-green-400' : 'text-red-400'}`}>\n                                {selectedTrade.pnl >= 0 ? '+' : ''}{selectedTrade.pnl.toFixed(2)}\n                              </p>\n                            </div>\n                            <div className={`px-3 py-1 rounded-full ${selectedTrade.isWin ? darkMode ? 'bg-green-800/30 text-green-400' : 'bg-green-100 text-green-600' : darkMode ? 'bg-red-800/30 text-red-400' : 'bg-red-100 text-red-600'}`}>\n                              {selectedTrade.isWin ? 'Winning Trade' : 'Losing Trade'}\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <div className=\"space-y-4 mb-4\">\n                          <div className=\"grid grid-cols-2 gap-3\">\n                            <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-700' : 'bg-slate-100'}`}>\n                              <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Entry Price</p>\n                              <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                ${selectedTrade.entryPrice.toFixed(2)}\n                              </p>\n                            </div>\n                            <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-700' : 'bg-slate-100'}`}>\n                              <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Exit Price</p>\n                              <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                ${selectedTrade.exitPrice.toFixed(2)}\n                              </p>\n                            </div>\n                            <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-700' : 'bg-slate-100'}`}>\n                              <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Position Size</p>\n                              <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                ${selectedTrade.positionSize.toFixed(2)}\n                              </p>\n                            </div>\n                            <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-700' : 'bg-slate-100'}`}>\n                              <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Hold Time</p>\n                              <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                                {selectedTrade.holdTime >= 24 ? `${(selectedTrade.holdTime / 24).toFixed(1)} days` : `${selectedTrade.holdTime.toFixed(1)} hours`}\n                              </p>\n                            </div>\n                          </div>\n                          \n                          <div className={`p-3 rounded-lg ${darkMode ? 'bg-slate-700' : 'bg-slate-100'}`}>\n                            <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>DEX Used</p>\n                            <p className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                              {selectedTrade.dex}\n                            </p>\n                          </div>\n                        </div>\n                        \n                        {(selectedTrade.isFOMO || selectedTrade.isPanicSell || selectedTrade.isDiamondHands || selectedTrade.isPaperHands) && <div className={`p-3 rounded-lg mb-4 ${darkMode ? 'bg-slate-700/50' : 'bg-slate-100'}`}>\n                            <p className={`text-sm font-medium mb-2 ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                              Trade Characteristics\n                            </p>\n                            <div className=\"flex flex-wrap gap-2\">\n                              {selectedTrade.isFOMO && <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>\n                                  FOMO Trade\n                                </span>}\n                              {selectedTrade.isPanicSell && <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-600'}`}>\n                                  Panic Sell\n                                </span>}\n                              {selectedTrade.isDiamondHands && <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-600'}`}>\n                                  Diamond Hands\n                                </span>}\n                              {selectedTrade.isPaperHands && <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-600'}`}>\n                                  Paper Hands\n                                </span>}\n                            </div>\n                          </div>}\n                        \n                        <button className={`text-xs flex items-center justify-center w-full py-2 rounded-lg ${darkMode ? 'bg-slate-700 hover:bg-slate-600 text-slate-300' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'} transition-colors`} onClick={() => {\n                    setShowTradeDetailsModal(false);\n                    window.open(`https://solscan.io/tx/${selectedTrade.transactionHash}`, '_blank');\n                  }}>\n                          <ArrowUpRight className=\"h-3 w-3 mr-1\" />\n                          View Transaction\n                        </button>\n                      </motion.div>\n                    </motion.div>}\n                </AnimatePresence>\n              </motion.div> : activeTab === \"sent\" ? <motion.div key=\"sent-messages\" initial={{\n            opacity: 0\n          }} animate={{\n            opacity: 1\n          }} exit={{\n            opacity: 0\n          }} className=\"w-full\">\n                <div className={`backdrop-blur-md rounded-2xl ${darkMode ? 'bg-slate-800/40 border border-slate-700/60 shadow-xl shadow-black/20' : 'bg-white/40 border border-slate-200/60 shadow-xl shadow-slate-200/30'} p-6 w-full`}>\n                  <div className=\"flex items-center justify-between mb-6\">\n                    <div className=\"flex items-center\">\n                      <Mail className={`h-6 w-6 ${darkMode ? 'text-cyan-400' : 'text-cyan-500'} mr-2`} />\n                      <h2 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>Inbox</h2>\n                    </div>\n                    <div className={`text-xs px-3 py-1 rounded-full ${darkMode ? 'bg-slate-700' : 'bg-slate-200'}`}>\n                      {receivedMessages.filter(msg => msg.read).length} of {receivedMessages.length} read\n                    </div>\n                  </div>\n                  \n                  {receivedMessages.length === 0 ? <div className={`text-center py-12 ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                      <motion.div initial={{\n                  y: 0\n                }} animate={{\n                  y: [0, -10, 0]\n                }} transition={{\n                  duration: 2,\n                  repeat: Infinity\n                }} className=\"flex justify-center mb-4\">\n                        <MessageSquare className=\"h-12 w-12 opacity-50\" />\n                      </motion.div>\n                      <p>Your inbox is empty</p>\n                      <p className=\"text-sm mt-2 max-w-md mx-auto\">When someone sends you an encrypted message, it will appear here</p>\n                    </div> : <div className=\"space-y-4 max-h-96 overflow-y-auto pr-1\">\n                      {receivedMessages.map(msg => <motion.div key={msg.id} initial={{\n                  opacity: 0,\n                  y: 10\n                }} animate={{\n                  opacity: 1,\n                  y: 0\n                }} className={`p-4 rounded-xl ${darkMode ? msg.read ? 'bg-slate-700/50 border border-slate-600/50' : 'bg-slate-700/90 border border-cyan-800/50' : msg.read ? 'bg-slate-100 border border-slate-200' : 'bg-white border border-cyan-200'} relative`}>\n                          {!msg.read && <motion.div initial={{\n                    scale: 1\n                  }} animate={{\n                    scale: [1, 1.1, 1]\n                  }} transition={{\n                    duration: 1.5,\n                    repeat: Infinity\n                  }} className={`absolute top-0 right-0 h-3 w-3 rounded-full -mt-1 -mr-1 ${darkMode ? 'bg-cyan-400' : 'bg-cyan-500'}`} />}\n                          \n                          <div className=\"mb-3\">\n                            <div className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'} mb-1`}>From:</div>\n                            <div className=\"flex justify-between items-center\">\n                              <div className={`font-mono text-sm ${darkMode ? 'text-white' : 'text-slate-800'} truncate max-w-[80%] relative`}>\n                                {}\n                                {typingUsers[msg.sender] && <motion.div className=\"absolute -left-1 top-1/2 -translate-y-1/2 -translate-x-full mr-2\" initial={{\n                          opacity: 0.7\n                        }} animate={{\n                          opacity: [0.4, 0.8, 0.4],\n                          scale: [0.95, 1.05, 0.95]\n                        }} transition={{\n                          duration: 1.8,\n                          repeat: Infinity,\n                          ease: \"easeInOut\"\n                        }}>\n                                    <div className={`h-2.5 w-2.5 rounded-full`} style={{\n                            background: `${messageSkins.find(s => s.id === (typingUsers[msg.sender]?.skin || \"default\"))?.color.replace('bg-gradient-to-r', 'radial-gradient') || (darkMode ? 'radial-gradient(circle, rgb(34 211 238 / 50%), rgb(34 211 238 / 0%))' : 'radial-gradient(circle, rgb(6 182 212 / 50%), rgb(6 182 212 / 0%))')}`,\n                            boxShadow: `0 0 10px 2px ${darkMode ? 'rgba(34, 211, 238, 0.3)' : 'rgba(6, 182, 212, 0.3)'}`\n                          }} />\n                                  </motion.div>}\n                                \n                                {}\n                                <div className=\"flex items-center\">\n                                  <div className=\"relative mr-2\">\n                                    <div className={`h-6 w-6 rounded-full flex items-center justify-center ${darkMode ? 'bg-slate-600' : 'bg-slate-300'}`}>\n                                      {msg.senderNickname ? msg.senderNickname.charAt(0).toUpperCase() : '?'}\n                                      \n                                      {}\n                                      {typingUsers[msg.sender] && <motion.div className=\"absolute inset-0 rounded-full -z-10\" animate={{\n                                boxShadow: [`0 0 0 0 ${darkMode ? 'rgba(34, 211, 238, 0)' : 'rgba(6, 182, 212, 0)'}`, `0 0 0 4px ${darkMode ? 'rgba(34, 211, 238, 0.4)' : 'rgba(6, 182, 212, 0.4)'}`, `0 0 0 0 ${darkMode ? 'rgba(34, 211, 238, 0)' : 'rgba(6, 182, 212, 0)'}`]\n                              }} transition={{\n                                duration: 2,\n                                repeat: Infinity,\n                                ease: \"easeInOut\"\n                              }} style={{\n                                background: typingUsers[msg.sender]?.skin ? `${messageSkins.find(s => s.id === typingUsers[msg.sender]?.skin)?.color.replace('bg-gradient-to-r', 'radial-gradient')}` : darkMode ? 'radial-gradient(circle, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0))' : 'radial-gradient(circle, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0))'\n                              }} />}\n                                    </div>\n                                  </div>\n                                  \n                                  <div>\n                                    {msg.senderNickname && <span className={`inline-block mr-2 px-2 py-0.5 text-xs rounded-full ${darkMode ? 'bg-slate-600' : 'bg-slate-200'}`}>\n                                      {msg.senderNickname}\n                                      {typingUsers[msg.sender] && <span className=\"ml-1 inline-flex items-center opacity-70\">\n                                          <motion.span className=\"h-1 w-1 bg-current rounded-full mx-px inline-block\" animate={{\n                                  opacity: [0.3, 1, 0.3]\n                                }} transition={{\n                                  duration: 0.8,\n                                  repeat: Infinity,\n                                  repeatDelay: 0.2\n                                }} />\n                                          <motion.span className=\"h-1 w-1 bg-current rounded-full mx-px inline-block\" animate={{\n                                  opacity: [0.3, 1, 0.3]\n                                }} transition={{\n                                  duration: 0.8,\n                                  repeat: Infinity,\n                                  delay: 0.2,\n                                  repeatDelay: 0.2\n                                }} />\n                                          <motion.span className=\"h-1 w-1 bg-current rounded-full mx-px inline-block\" animate={{\n                                  opacity: [0.3, 1, 0.3]\n                                }} transition={{\n                                  duration: 0.8,\n                                  repeat: Infinity,\n                                  delay: 0.4,\n                                  repeatDelay: 0.2\n                                }} />\n                                        </span>}\n                                    </span>}\n                                    <span className=\"font-mono text-xs\">{msg.sender.substring(0, 8)}...{msg.sender.substring(36)}</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <span className={`text-xs ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>\n                                {new Date(msg.timestamp).toLocaleTimeString([], {\n                          hour: '2-digit',\n                          minute: '2-digit'\n                        })}\n                              </span>\n                            </div>\n                          </div>\n                          \n                          <div className=\"mb-3\">\n                            <div className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'} mb-1`}>Message:</div>\n                            \n                            {}\n                            {msg.blurMode && !revealedBlurredMessages[msg.id]?.revealed && !msg.blurRevealed ? <div className=\"relative\">\n                                <div className={`text-sm p-4 rounded-lg ${darkMode ? 'bg-slate-800/50' : 'bg-slate-200/50'} blur-md select-none`}>\n                                  {msg.content}\n                                </div>\n                                <div className=\"absolute inset-0 flex flex-col items-center justify-center backdrop-blur-sm rounded-lg\">\n                                  <div className=\"bg-black/40 p-4 rounded-xl flex flex-col items-center\">\n                                    <EyeOff className={`h-8 w-8 mb-2 ${darkMode ? 'text-blue-400' : 'text-blue-500'}`} />\n                                    <div className={`font-medium mb-1 ${darkMode ? 'text-white' : 'text-slate-100'}`}>\n                                      Blurred Message\n                                    </div>\n                                    <div className=\"text-xs mb-3 text-center text-slate-300\">\n                                      {msg.blurRevealType === \"once\" && \"Can only be viewed once\"}\n                                      {msg.blurRevealType === \"timed\" && \"Disappears 5 seconds after viewing\"}\n                                      {msg.blurRevealType === \"dare\" && \"View only if you dare...\"}\n                                    </div>\n                                    \n                                    {msg.blurRevealType === \"dare\" ? <motion.button whileHover={{\n                            scale: 1.05\n                          }} whileTap={{\n                            scale: 0.95\n                          }} onClick={() => animateDareReveal(msg.id)} className=\"bg-gradient-to-r from-red-500 to-purple-600 hover:from-red-600 hover:to-purple-700 text-white px-4 py-2 rounded-lg flex items-center\">\n                                        <AlertTriangle className=\"h-4 w-4 mr-2\" />\n                                        Reveal If You Dare!\n                                      </motion.button> : <motion.button whileHover={{\n                            scale: 1.05\n                          }} whileTap={{\n                            scale: 0.95\n                          }} onClick={() => handleRevealBlurredMessage(msg.id, msg.blurRevealType)} className=\"bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700 text-white px-4 py-2 rounded-lg flex items-center\">\n                                        <Eye className=\"h-4 w-4 mr-2\" />\n                                        Tap to Reveal\n                                      </motion.button>}\n                                  </div>\n                                </div>\n                              </div> : <div className={`text-sm ${darkMode ? 'text-slate-200' : 'text-slate-700'}`}>\n                                {revealedBlurredMessages[msg.id]?.expiryTime && <div className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-2 py-1 flex items-center\">\n                                    <Clock className=\"h-3 w-3 mr-1\" />\n                                    Disappearing\n                                  </div>}\n                                \n                                {msg.content}\n                              </div>}\n                          </div>\n                          \n                          <div className=\"flex flex-wrap gap-2 mt-4\">\n                            {msg.attachment && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-slate-600' : 'bg-slate-200'} flex items-center`}>\n                                <FileUp className=\"h-3 w-3 mr-1\" />\n                                {msg.attachment} ({msg.attachmentSize} KB)\n                              </div>}\n                            \n                            {msg.burnAfterReading && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-red-900/60' : 'bg-red-100'} flex items-center`}>\n                                <Flame className={`h-3 w-3 mr-1 ${darkMode ? 'text-red-400' : 'text-red-500'}`} />\n                                <span className={darkMode ? 'text-red-400' : 'text-red-500'}>Self-destructing</span>\n                              </div>}\n                            \n                            {msg.blurMode && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-blue-900/60' : 'bg-blue-100'} flex items-center`}>\n                                <EyeOff className={`h-3 w-3 mr-1 ${darkMode ? 'text-blue-400' : 'text-blue-500'}`} />\n                                <span className={darkMode ? 'text-blue-400' : 'text-blue-500'}>\n                                  {msg.blurRevealType === \"once\" ? \"One-time view\" : msg.blurRevealType === \"timed\" ? \"Timed view\" : \"Mysterious view\"}\n                                </span>\n                              </div>}\n                            \n                            {Number(msg.solAmount) > 0 && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-amber-900/60' : 'bg-amber-100'} flex items-center`}>\n                                <Coins className={`h-3 w-3 mr-1 ${darkMode ? 'text-amber-400' : 'text-amber-500'}`} />\n                                <span className={darkMode ? 'text-amber-400' : 'text-amber-500'}>{msg.solAmount} SOL</span>\n                              </div>}\n                            \n                            <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-slate-600' : 'bg-slate-200'} flex items-center ml-auto`}>\n                              <Database className=\"h-3 w-3 mr-1\" />\n                              {msg.storageOption === \"blockchain\" ? \"Blockchain\" : msg.storageOption === \"ipfs\" ? \"IPFS\" : \"Arweave\"}\n                            </div>\n                          </div>\n                          \n                          {msg.burnAfterReading && msg.read && <div className=\"mt-3\">\n                              <div className=\"text-xs text-red-400 mb-1 flex items-center\">\n                                <Flame className=\"h-3 w-3 mr-1\" />\n                                Message will self-destruct\n                              </div>\n                              <div className=\"w-full h-2 bg-slate-700 rounded-full overflow-hidden\">\n                                <motion.div initial={{\n                        width: 0\n                      }} animate={{\n                        width: \"100%\"\n                      }} transition={{\n                        duration: 60\n                      }} className=\"relative h-full\">\n                                  <div className=\"absolute inset-0 bg-gradient-to-r from-red-500 to-amber-500\"></div>\n                                  <motion.div className=\"absolute inset-0 bg-gradient-to-r from-red-500/0 via-red-500/70 to-red-500/0\" animate={{\n                          x: [\"-100%\", \"100%\"]\n                        }} transition={{\n                          repeat: Infinity,\n                          duration: 2,\n                          ease: \"linear\"\n                        }} />\n                                  {}\n                                  {Array.from({\n                          length: 5\n                        }).map((_, i) => <motion.div key={i} className=\"absolute top-0 h-2 w-1 bg-yellow-300 rounded-full\" initial={{\n                          x: `${i * 20}%`,\n                          y: 0,\n                          opacity: 0\n                        }} animate={{\n                          y: [0, -8, 0],\n                          opacity: [0, 1, 0],\n                          scale: [0.5, 1, 0.5]\n                        }} transition={{\n                          repeat: Infinity,\n                          duration: 0.8 + i * 0.2,\n                          delay: i * 0.3,\n                          repeatDelay: 1 + i * 0.3\n                        }} />)}\n                                </motion.div>\n                              </div>\n                            </div>}\n                          \n                          {msg.ghostMode && !msg.revealed && <motion.div className=\"absolute inset-0 bg-slate-800/80 backdrop-blur-sm flex items-center justify-center rounded-xl z-10\" animate={{\n                    opacity: [0.9, 0.7, 0.9]\n                  }} transition={{\n                    duration: 3,\n                    repeat: Infinity\n                  }}>\n                              <motion.button whileHover={{\n                      scale: 1.05\n                    }} whileTap={{\n                      scale: 0.95\n                    }} onClick={() => handleRevealGhostMessage(msg.id)} className=\"bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-lg flex items-center\">\n                                <Ghost className=\"h-4 w-4 mr-2\" />\n                                Reveal Ghost Message\n                              </motion.button>\n                            </motion.div>}\n                            \n                          <div className=\"flex justify-between items-center mt-3\">\n                            <div className=\"flex space-x-1\">\n                              {['👍', '❤️', '🎉', '🚀'].map(reaction => <motion.button key={reaction} whileHover={{\n                        scale: 1.2\n                      }} whileTap={{\n                        scale: 0.9\n                      }} onClick={() => handleReaction(msg.id, reaction)} className={`text-xs rounded-full p-1 ${messageReactions[msg.id]?.includes(reaction) ? darkMode ? 'bg-cyan-800/50' : 'bg-cyan-100' : darkMode ? 'hover:bg-slate-700' : 'hover:bg-slate-200'}`}>\n                                  {reaction}\n                                </motion.button>)}\n                            </div>\n                            \n                            <button onClick={() => {\n                      const sender = msg.sender;\n                      setRecipient(sender);\n                      setActiveTab(\"compose\");\n                      triggerHapticFeedback(\"light\");\n                    }} className={`text-xs flex items-center px-3 py-1.5 rounded-lg ${darkMode ? 'bg-slate-700 hover:bg-slate-600 text-slate-300' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'} transition-colors`}>\n                              <Send className=\"h-3 w-3 mr-1\" />\n                              Reply\n                            </button>\n                          </div>\n                          \n                          {}\n                          {messageReactions[msg.id]?.length > 0 && <div className=\"flex flex-wrap gap-1 mt-2\">\n                              {messageReactions[msg.id].map((reaction, idx) => <motion.span key={`${reaction}-${idx}`} initial={{\n                      scale: 0,\n                      y: 10\n                    }} animate={{\n                      scale: 1,\n                      y: 0\n                    }} className={`text-xs px-2 py-0.5 rounded-full ${darkMode ? 'bg-slate-700' : 'bg-slate-200'}`}>\n                                  {reaction}\n                                </motion.span>)}\n                            </div>}\n                        </motion.div>)}\n                    </div>}\n                </div>\n              </motion.div> : <motion.div key=\"sent-messages\" initial={{\n            opacity: 0\n          }} animate={{\n            opacity: 1\n          }} exit={{\n            opacity: 0\n          }} className=\"w-full\">\n                <div className={`backdrop-blur-md rounded-2xl ${darkMode ? 'bg-slate-800/40 border border-slate-700/60 shadow-xl shadow-black/20' : 'bg-white/40 border border-slate-200/60 shadow-xl shadow-slate-200/30'} p-6 w-full`}>\n                  <div className=\"flex items-center justify-between mb-6\">\n                    <div className=\"flex items-center\">\n                      <Mail className={`h-6 w-6 ${darkMode ? 'text-cyan-400' : 'text-cyan-500'} mr-2`} />\n                      <h2 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>Sent Messages</h2>\n                    </div>\n                    <div className={`text-xs px-3 py-1 rounded-full ${darkMode ? 'bg-slate-700' : 'bg-slate-200'}`}>\n                      {sentMessages.filter(msg => msg.read).length} of {sentMessages.length} read\n                    </div>\n                  </div>\n                  \n                  {sentMessages.length === 0 ? <div className={`text-center py-12 ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                      <motion.div initial={{\n                  y: 0\n                }} animate={{\n                  y: [0, -10, 0]\n                }} transition={{\n                  duration: 2,\n                  repeat: Infinity\n                }} className=\"flex justify-center mb-4\">\n                        <MessageSquare className=\"h-12 w-12 opacity-50\" />\n                      </motion.div>\n                      <p>No messages sent yet</p>\n                      <button onClick={() => setActiveTab(\"compose\")} className={`mt-4 px-4 py-2 rounded-lg ${darkMode ? 'bg-slate-700 hover:bg-slate-600' : 'bg-slate-200 hover:bg-slate-300'} transition-colors`}>\n                        Compose a message\n                      </button>\n                    </div> : <div className=\"space-y-4 max-h-96 overflow-y-auto pr-1\">\n                      {sentMessages.map(msg => <motion.div key={msg.id} initial={{\n                  opacity: 0,\n                  y: 10\n                }} animate={{\n                  opacity: 1,\n                  y: 0\n                }} className={`p-4 rounded-xl ${darkMode ? msg.read ? 'bg-slate-700/50 border border-slate-600/50' : 'bg-slate-700/90 border border-cyan-800/50' : msg.read ? 'bg-slate-100 border border-slate-200' : 'bg-white border border-cyan-200'} relative`}>\n                          {}\n                          <div className=\"absolute top-3 right-3\">\n                            {msg.read ? <motion.div initial={{\n                      scale: 0.5,\n                      opacity: 0\n                    }} animate={{\n                      scale: 1,\n                      opacity: 1\n                    }} className=\"flex items-center\">\n                                <Eye className={`h-4 w-4 ${darkMode ? 'text-cyan-400' : 'text-cyan-500'} mr-1`} />\n                                <span className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>\n                                  Read {msg.readTime ? new Date(msg.readTime).toLocaleTimeString([], {\n                          hour: '2-digit',\n                          minute: '2-digit'\n                        }) : ''}\n                                </span>\n                              </motion.div> : <motion.div animate={{\n                      opacity: [0.5, 1, 0.5]\n                    }} transition={{\n                      duration: 2,\n                      repeat: Infinity\n                    }} className=\"flex items-center\">\n                                <Clock className={`h-4 w-4 ${darkMode ? 'text-slate-500' : 'text-slate-400'} mr-1`} />\n                                <span className={`text-xs ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>Waiting</span>\n                              </motion.div>}\n                          </div>\n                          \n                          <div className=\"mb-3\">\n                            <div className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'} mb-1`}>To:</div>\n                            <div className={`font-mono text-sm ${darkMode ? 'text-white' : 'text-slate-800'} truncate`}>\n                              {msg.recipient}\n                            </div>\n                          </div>\n                          \n                          <div className=\"mb-3\">\n                            <div className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'} mb-1`}>Message:</div>\n                            <div className={`text-sm ${darkMode ? 'text-slate-200' : 'text-slate-700'}`}>\n                              {msg.blurMode ? <div className=\"blur-sm select-none\">\n                                  {msg.content}\n                                  <div className=\"mt-1 text-xs flex items-center blur-none\">\n                                    <EyeOff className=\"h-3 w-3 mr-1 inline\" />\n                                    <span className=\"inline\">Sent as blurred ({msg.blurRevealType === \"once\" ? \"once-only\" : msg.blurRevealType === \"timed\" ? \"timed\" : \"mystery\"} reveal)</span>\n                                  </div>\n                                </div> : msg.content}\n                            </div>\n                          </div>\n                          \n                          <div className=\"flex flex-wrap gap-2 mt-4\">\n                            {msg.attachment && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-slate-600' : 'bg-slate-200'} flex items-center`}>\n                                <FileUp className=\"h-3 w-3 mr-1\" />\n                                Attachment\n                              </div>}\n                            \n                            {msg.burnAfterReading && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-red-900/60' : 'bg-red-100'} flex items-center`}>\n                                <Flame className={`h-3 w-3 mr-1 ${darkMode ? 'text-red-400' : 'text-red-500'}`} />\n                                <span className={darkMode ? 'text-red-400' : 'text-red-500'}>Burn after reading</span>\n                              </div>}\n                            \n                            {msg.blurMode && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-blue-900/60' : 'bg-blue-100'} flex items-center`}>\n                                <EyeOff className={`h-3 w-3 mr-1 ${darkMode ? 'text-blue-400' : 'text-blue-500'}`} />\n                                <span className={darkMode ? 'text-blue-400' : 'text-blue-500'}>\n                                  Blur mode ({msg.blurRevealType})\n                                </span>\n                              </div>}\n                            \n                            {msg.solAmount > 0 && <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-amber-900/60' : 'bg-amber-100'} flex items-center`}>\n                                <Coins className={`h-3 w-3 mr-1 ${darkMode ? 'text-amber-400' : 'text-amber-500'}`} />\n                                <span className={darkMode ? 'text-amber-400' : 'text-amber-500'}>{msg.solAmount} SOL</span>\n                              </div>}\n                            \n                            <div className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-slate-600' : 'bg-slate-200'} flex items-center ml-auto`}>\n                              <Clock className=\"h-3 w-3 mr-1\" />\n                              {new Date(msg.timestamp).toLocaleString()}\n                            </div>\n                          </div>\n                          \n                          {}\n                          {msg.burnAfterReading && msg.read && <div className=\"mt-3\">\n                              <div className=\"text-xs text-red-400 mb-1 flex items-center\">\n                                <Flame className=\"h-3 w-3 mr-1\" />\n                                Self-destructing message\n                              </div>\n                              <div className=\"w-full h-1 bg-slate-700 rounded-full overflow-hidden\">\n                                <motion.div initial={{\n                        width: 0\n                      }} animate={{\n                        width: \"100%\"\n                      }} transition={{\n                        duration: 60\n                      }} className=\"h-full bg-gradient-to-r from-red-500 to-amber-500\" />\n                              </div>\n                            </div>}\n                        </motion.div>)}\n                    </div>}\n                </div>\n              </motion.div>}\n            </AnimatePresence>\n          </div>}\n      </main>\n      \n      {}\n      <AnimatePresence>\n        {showSkinsModal && <motion.div initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} className=\"fixed inset-0 flex items-center justify-center z-50 p-4\">\n            <div className=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" onClick={() => {\n          setShowSkinsModal(false);\n          triggerHapticFeedback(\"light\");\n        }} />\n            <motion.div initial={{\n          scale: 0.9,\n          y: 20\n        }} animate={{\n          scale: 1,\n          y: 0\n        }} exit={{\n          scale: 0.9,\n          y: 20\n        }} className={`${darkMode ? 'bg-slate-800' : 'bg-white'} rounded-xl p-6 w-full max-w-md relative z-10 shadow-xl`}>\n              <div className=\"flex justify-between items-center mb-4\">\n                <h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-slate-800'}`}>\n                  Message Skins & Effects\n                </h3>\n                <button onClick={() => setShowSkinsModal(false)} className={`${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-800'}`}>\n                  <X className=\"h-5 w-5\" />\n                </button>\n              </div>\n              \n              <div className=\"mb-6\">\n                <h4 className={`text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-600'} mb-3 flex justify-between items-center`}>\n                  <span>Choose Message Skin</span>\n                  {unlockedSkins.length < messageSkins.length && <button onClick={() => setShowPointsModal(true)} className=\"text-xs px-2 py-1 rounded bg-gradient-to-r from-amber-500 to-orange-600 text-white\">\n                      Unlock More\n                    </button>}\n                </h4>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {messageSkins.map(skin => <motion.button key={skin.id} whileHover={{\n                scale: unlockedSkins.includes(skin.id) ? 1.03 : 1\n              }} whileTap={{\n                scale: unlockedSkins.includes(skin.id) ? 0.97 : 1\n              }} onClick={() => {\n                if (unlockedSkins.includes(skin.id)) {\n                  setMessageSkin(skin.id);\n                  triggerHapticFeedback(\"light\");\n                  if (skin.id !== \"default\") {\n                    const updateSkinUse = async () => {\n                      try {\n                        const userPointsData = await client.getEntity('user_points', publicKey.toBase58());\n                        if (userPointsData && !userPointsData.usedSkins?.includes(skin.id)) {\n                          const usedSkins = [...(userPointsData.usedSkins || []), skin.id];\n                          await client.updateEntity('user_points', publicKey.toBase58(), {\n                            ...userPointsData,\n                            usedSkins\n                          });\n                          awardPoints(5, \"Skin Applied\");\n                        }\n                      } catch (error) {\n                        console.error(\"Error updating skin usage:\", error);\n                      }\n                    };\n                    if (connected && publicKey) {\n                      updateSkinUse();\n                    }\n                  }\n                } else {\n                  setShowPointsModal(true);\n                }\n              }} className={`relative p-4 rounded-lg flex items-center justify-center ${skin.color} text-white ${messageSkin === skin.id ? 'ring-2 ring-white' : ''} ${!unlockedSkins.includes(skin.id) ? 'opacity-50 cursor-not-allowed' : ''}`}>\n                      {messageSkin === skin.id && unlockedSkins.includes(skin.id) && <div className=\"absolute top-1 right-1\">\n                          <CheckCircle className=\"h-4 w-4\" />\n                        </div>}\n                      \n                      {!unlockedSkins.includes(skin.id) && <div className=\"absolute inset-0 flex items-center justify-center bg-black/30 rounded-lg\">\n                          <div className=\"flex flex-col items-center\">\n                            <Lock className=\"h-4 w-4 mb-1\" />\n                            <span className=\"text-xs\">{skin.points} SMP</span>\n                          </div>\n                        </div>}\n                      \n                      {skin.name}\n                    </motion.button>)}\n                </div>\n              </div>\n              \n              <div className=\"mb-6\">\n                <h4 className={`text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-600'} mb-3`}>\n                  Animation & Effects\n                </h4>\n                <div className=\"flex items-center justify-between p-3 rounded-lg bg-slate-700/50\">\n                  <div className=\"flex items-center\">\n                    <Wand2 className={`h-5 w-5 ${darkMode ? 'text-cyan-400' : 'text-cyan-500'} mr-2`} />\n                    <span>Special Effects</span>\n                  </div>\n                  <label className={`relative inline-flex items-center h-6 rounded-full w-11 transition-colors ${showSpecialEffects ? 'bg-cyan-600' : 'bg-slate-600'}`}>\n                    <input type=\"checkbox\" checked={showSpecialEffects} onChange={e => {\n                  setShowSpecialEffects(e.target.checked);\n                  triggerHapticFeedback(\"light\");\n                }} className=\"sr-only\" />\n                    <span className={`inline-block w-4 h-4 transform transition-transform bg-white rounded-full ${showSpecialEffects ? 'translate-x-6' : 'translate-x-1'}`} />\n                  </label>\n                </div>\n              </div>\n              \n              <div className=\"flex justify-end\">\n                <motion.button whileTap={{\n              scale: 0.95\n            }} onClick={() => {\n              setShowSkinsModal(false);\n              triggerHapticFeedback(\"medium\");\n            }} className=\"px-4 py-2 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 text-white hover:from-cyan-600 hover:to-blue-700 transition-all\">\n                  Done\n                </motion.button>\n              </div>\n            </motion.div>\n          </motion.div>}\n        \n        {showPointsModal && renderPointsModal()}\n        {pointAnimation.show && renderPointsAnimation()}\n        \n        {}\n        <AnimatePresence>\n          {isRevealAnimationActive && <motion.div initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} exit={{\n          opacity: 0\n        }} className=\"fixed inset-0 z-50 pointer-events-none flex items-center justify-center\">\n              <motion.div initial={{\n            opacity: 0.8,\n            scale: 0.8\n          }} animate={{\n            opacity: [0.8, 1, 0],\n            scale: [0.8, 8, 12],\n            filter: [\"blur(0px)\", \"blur(2px)\", \"blur(8px)\"]\n          }} transition={{\n            duration: 1.5\n          }} className=\"w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-600\" />\n              \n              <motion.div initial={{\n            opacity: 0,\n            scale: 0.5\n          }} animate={{\n            opacity: [0, 1, 0],\n            scale: [0.5, 1.2, 0.8],\n            y: [0, -20, -50]\n          }} transition={{\n            duration: 1.5\n          }} className=\"absolute text-white text-2xl font-bold\">\n                <Eye className=\"h-16 w-16\" />\n              </motion.div>\n            </motion.div>}\n        </AnimatePresence>\n      </AnimatePresence>\n      \n      {}\n      {connected && walletPersonality && <motion.div initial={{\n      height: 0,\n      opacity: 0\n    }} animate={{\n      height: 'auto',\n      opacity: 1\n    }} transition={{\n      delay: 0.5\n    }} className={`fixed bottom-4 right-4 ${darkMode ? 'bg-slate-800/80' : 'bg-white/80'} backdrop-blur-md p-4 rounded-xl shadow-lg border ${darkMode ? 'border-slate-700' : 'border-slate-200'} max-w-xs z-20`}>\n          <div className=\"flex items-start justify-between mb-2\">\n            <h3 className={`text-sm font-bold ${walletPersonality.color}`}>Your Wallet Personality</h3>\n            <button onClick={() => setWalletPersonality(null)} className={`${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-800'} -mt-1`}>\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n          \n          <div className=\"flex items-center mb-2\">\n            <span className=\"text-2xl mr-2\">{walletPersonality.emoji}</span>\n            <span className={`text-lg font-medium ${walletPersonality.color}`}>\n              {walletPersonality.type}\n            </span>\n          </div>\n          \n          <p className={`text-sm ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>\n            {walletPersonality.description}\n          </p>\n          \n          <div className={`text-xs mt-3 pt-2 border-t ${darkMode ? 'border-slate-700 text-slate-400' : 'border-slate-200 text-slate-500'}`}>\n            Based on your activity pattern\n          </div>\n        </motion.div>}\n      \n      <footer className={`w-full max-w-4xl p-4 text-center ${darkMode ? 'text-slate-500' : 'text-slate-500'} text-sm`}>\n        <div className=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2 mb-2\">\n          <div className={`flex items-center space-x-1 ${darkMode ? 'bg-slate-800/40' : 'bg-slate-200/50'} px-3 py-1 rounded-full`}>\n            <Info className=\"h-4 w-4\" />\n            <p>Encrypted on {storageOption === \"blockchain\" ? \"Solana blockchain\" : storageOption === \"ipfs\" ? \"IPFS\" : \"Arweave\"}</p>\n          </div>\n          <div className={`flex items-center space-x-1 ${darkMode ? 'bg-slate-800/40' : 'bg-slate-200/50'} px-3 py-1 rounded-full`}>\n            <Flame className=\"h-4 w-4\" />\n            <p>Self-destruct messages</p>\n          </div>\n          <div className={`flex items-center space-x-1 ${darkMode ? 'bg-slate-800/40' : 'bg-slate-200/50'} px-3 py-1 rounded-full`}>\n            <Ghost className=\"h-4 w-4\" />\n            <p>Ghost mode</p>\n          </div>\n          <div className={`flex items-center space-x-1 ${darkMode ? 'bg-slate-800/40' : 'bg-slate-200/50'} px-3 py-1 rounded-full`}>\n            <Eye className=\"h-4 w-4\" />\n            <p>Read receipts</p>\n          </div>\n          <div className={`flex items-center space-x-1 ${darkMode ? 'bg-slate-800/40' : 'bg-slate-200/50'} px-3 py-1 rounded-full`}>\n            <Wand2 className=\"h-4 w-4\" />\n            <p>Message effects</p>\n          </div>\n          <div className={`flex items-center space-x-1 ${darkMode ? 'bg-slate-800/40' : 'bg-slate-200/50'} px-3 py-1 rounded-full`}>\n            <EyeOff className=\"h-4 w-4\" />\n            <p>Blur messages</p>\n          </div>\n        </div>\n        <motion.p className={`mt-4 ${darkMode ? 'text-slate-500' : 'text-slate-600'}`} whileHover={{\n        scale: 1.01\n      }}>\n          © 2025 SolSecure · Ultra-secure blockchain messaging\n        </motion.p>\n      </footer>\n    </div>;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"@devfunlabs/wallet-adapter-devfun\":\"0.3.0\",\"react-router-dom\":\"6.18.0\",\"@devfunlabs/state-client\":\"0.8.1\",\"recharts\":\"2.8.0\"}}","appFunctions",[],"token",{"_18":19,"_81":19,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":41,"_93":41,"_71":72},"symbol","price",0.00000447,"marketcap",5581.61261301,"image","https://pump.mypinata.cloud/ipfs/QmYCN9Y92JEyrEuzKU5An9H4vPks39Rrj5JiJZAZCyyGsw?img-width=256&img-dpr=2","website","https://dev.fun/p/e649e2092cb708d980bd","twitter","https://x.com/SolSecureApp","devCount","appCount","upstreamApp","isLordOfDev","analytics",[98,102,104,106,108,110,112,114,116,118,120,122,124,126],{"_99":100,"_101":58},"day","2025-08-12","runCount",{"_99":103,"_101":58},"2025-08-13",{"_99":105,"_101":58},"2025-08-14",{"_99":107,"_101":58},"2025-08-15",{"_99":109,"_101":58},"2025-08-16",{"_99":111,"_101":58},"2025-08-17",{"_99":113,"_101":58},"2025-08-18",{"_99":115,"_101":58},"2025-08-19",{"_99":117,"_101":58},"2025-08-20",{"_99":119,"_101":58},"2025-08-21",{"_99":121,"_101":58},"2025-08-22",{"_99":123,"_101":58},"2025-08-23",{"_99":125,"_101":58},"2025-08-24",{"_99":127,"_101":41},"2025-08-25","snapshot","ogImage","https://cdn.dev.fun/og/image/e649e2092cb708d980bd/c75e393b.webp","isDevbase","actionData","errors"]
</article></body></html>

\n SolSecure Mail Points (SMP)\n

\n Your Points: {userPoints}\n

\n Top SMP Earners\n

\n Unlockable Message Skins\n

\n Your Badges\n

\n Ways to Earn Points\n

\n {current.title}\n

\n SolSecure\n

Secure. Private. Decentralized.

Message sent successfully!

Send Encrypted Message

say something