\n {error &&

\n \n

{error}

\n \n

}\n \n {userWallet ? <>\n {!isCreating ? setIsCreating(true)} className=\"w-full mb-6 py-3 px-4 rounded-xl flex items-center justify-center bg-gradient-to-r from-pink-500 to-purple-600 font-medium shadow-lg hover:shadow-pink-500/20\">\n \n Mine New Mood\n : \n

Create Your Mood NFT

\n \n

\n\n

\n Select Mood Emoji\n {selectedEmoji ?

\n {selectedEmoji}\n

\n \n

: }\n \n {showEmojiPicker &&

\n \n

Choose Your Mood

\n \n

\n {emojis.map((emoji, index) => )}\n

\n \n

}\n

\n \n

\n Why This Mood?\n

setComment(e.target.value)} placeholder=\"Tell us why you're feeling this way...\" className=\"w-full p-3 rounded-lg bg-black/30 border border-white/10 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none text-white placeholder-gray-500\" rows={3} maxLength={150} />\n                  <div className=\"text-right text-xs text-gray-400\">\n                    {comment.length}/150\n                  </div>\n                </div>\n                \n                <div className=\"flex justify-end\">\n                  <motion.button whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }} onClick={handleCreateMood} disabled={!selectedEmoji || !comment} className={`py-2 px-6 rounded-lg font-medium ${!selectedEmoji || !comment ? 'bg-gray-700 text-gray-400 cursor-not-allowed' : 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-lg'}`}>\n                    Mine Mood NFT\n                  </motion.button>\n                </div>\n              </motion.div>}\n\n            <div className=\"bg-black/20 backdrop-blur-sm rounded-xl overflow-hidden mb-6 shadow-lg\">\n              <div className=\"flex border-b border-white/10\">\n                <button onClick={() => {\n              setActiveTab('popular');\n              setError(null);\n            }} className={`flex-1 py-3 px-4 flex justify-center items-center space-x-2 ${activeTab === 'popular' ? 'bg-purple-900/50 text-white' : 'text-gray-400 hover:bg-white/5'}`}>\n                  <Star size={18} />\n                  <span>Popular</span>\n                </button>\n                <button onClick={() => {\n              setActiveTab('latest');\n              setError(null);\n            }} className={`flex-1 py-3 px-4 flex justify-center items-center space-x-2 ${activeTab === 'latest' ? 'bg-purple-900/50 text-white' : 'text-gray-400 hover:bg-white/5'}`}>\n                  <Clock size={18} />\n                  <span>Latest</span>\n                </button>\n              </div>\n\n              {isLoading ? <div className=\"p-8 text-center\">\n                  <div className=\"inline-block h-12 w-12 border-4 border-purple-500/30 border-t-purple-500 rounded-full animate-spin\"></div>\n                  <p className=\"mt-4 text-purple-300\">Mining moods...</p>\n                </div> : moods.length === 0 ? <div className=\"p-8 text-center text-gray-400\">\n                  <p className=\"mb-2\">No mood NFTs found</p>\n                  <p className=\"text-sm\">Be the first to mine your mood!</p>\n                </div> : <ul className=\"divide-y divide-white/5\">\n                  <AnimatePresence>\n                    {moods.map(mood => <motion.li key={mood.id} initial={{\n                opacity: 0,\n                y: 20\n              }} animate={{\n                opacity: 1,\n                y: 0\n              }} exit={{\n                opacity: 0,\n                y: -20\n              }} transition={{\n                duration: 0.3\n              }} className=\"p-4 hover:bg-white/5 transition-colors\">\n                        <div className=\"flex items-start\">\n                          <div className=\"text-5xl mr-4 bg-black/30 rounded-xl p-3 shadow-inner\">\n                            {mood.emoji}\n                          </div>\n                          <div className=\"flex-1\">\n                            <p className=\"mb-2 text-gray-200\">{mood.comment}</p>\n                            <div className=\"flex justify-between items-center text-sm\">\n                              <div className=\"text-gray-400\">\n                                By: {mood.userId.substring(0, 6)}...{mood.userId.substring(mood.userId.length - 4)}\n                              </div>\n                              <div className=\"flex space-x-3\">\n                                <span className=\"text-gray-400 flex items-center\">\n                                  <ThumbsUp size={14} className=\"mr-1\" />\n                                  <span>{mood.mintCount}</span>\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                        <div className=\"mt-4 flex justify-end\">\n                          <motion.button whileHover={{\n                    scale: 1.05\n                  }} whileTap={{\n                    scale: 0.95\n                  }} onClick={() => {\n                    setError(null);\n                    handleMintMood(mood.id);\n                  }} disabled={hasMinted(mood)} className={`flex items-center space-x-2 py-1.5 px-4 rounded-lg text-sm font-medium ${hasMinted(mood) ? 'bg-purple-800/30 text-purple-300 cursor-not-allowed' : 'bg-gradient-to-r from-blue-500 to-purple-600 shadow-lg hover:shadow-blue-500/20'}`}>\n                            <Wallet size={14} />\n                            <span>{hasMinted(mood) ? 'Minted' : 'Mint to Wallet'}</span>\n                          </motion.button>\n                        </div>\n                      </motion.li>)}\n                  </AnimatePresence>\n                </ul>}\n            </div>\n          </> : <div className=\"flex flex-col items-center justify-center py-20 text-center\">\n            <motion.div initial={{\n          scale: 0\n        }} animate={{\n          scale: 1\n        }} transition={{\n          type: \"spring\",\n          stiffness: 260,\n          damping: 20\n        }} className=\"text-7xl mb-6\">\n              🪄✨\n            </motion.div>\n            <h2 className=\"text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-purple-300\">\n              Connect Wallet to Start Mining Moods\n            </h2>\n            <p className=\"text-purple-300 mb-8 max-w-md\">\n              Express your emotions as collectible NFTs! Select the perfect emoji, add your explanation, and watch as your feelings become digital assets.\n            </p>\n            <div className=\"flex flex-col items-center gap-4\">\n              <UserButton bgColor=\"#3d1c59\" textColor=\"#ffffff\" hoverBgColor=\"#5a2a85\" radius=\"lg\" />\n              <p className=\"text-sm text-purple-300 mt-2\">\n                Connect with Phantom, Backpack or Farcaster Solana wallet\n              </p>\n              {solanaConnected && solanaAddress && <div className=\"mt-2 px-4 py-2 bg-blue-900/40 rounded-lg border border-blue-500/30 flex items-center\">\n                  <div className=\"w-2 h-2 rounded-full bg-blue-400 mr-2\"></div>\n                  <span className=\"text-sm text-blue-300\">Solana Connected</span>\n                </div>}\n            </div>\n          </div>}\n      </main>\n      <meta name=\"fc:frame\" content='{\"version\":\"1\",\"button\":{\"title\":\"☺ Explore the mood!\",\"action\":{\"type\":\"launch_frame\",\"name\":\"Mood!\",\"url\":\"https://dev.fun/p/922d350c703dbcf7abbc\"}}}' />\n      {userWallet && <div className=\"fixed bottom-4 right-4 bg-black/50 backdrop-blur-md p-3 rounded-lg border border-purple-500/30 shadow-lg text-xs text-purple-300 flex flex-col gap-2\">\n          {farcasterDetected && <div className=\"flex items-center\">\n              <div className=\"w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse\"></div>\n              <span>Farcaster Connected</span>\n            </div>}\n          {solanaConnected && solanaAddress && <div className=\"flex items-center\">\n              <div className=\"w-2 h-2 rounded-full bg-blue-400 mr-2 animate-pulse\"></div>\n              <span>Solana Connected: {solanaAddress.substring(0, 4)}...{solanaAddress.substring(solanaAddress.length - 4)}</span>\n            </div>}\n        </div>}\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"framer-motion\":\"10.16.4\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/web3.js\":\"1.87.6\",\"@solana/wallet-adapter-wallets\":\"0.19.23\",\"@solana/wallet-adapter-react-ui\":\"0.9.34\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_20":80,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":59,"_92":93,"_94":59,"_95":42,"_96":42,"_61":62,"_71":19},"Mood coin","symbol","MOOD","image","https://pump.mypinata.cloud/ipfs/bafybeig6uik6zxqyeg7u5w7ypajgqwpepyuajfz2a4tec7f4n6mjed2v2i?img-width=256&img-dpr=2","website","https://dev.fun/p/922d350c703dbcf7abbc","twitter","https://x.com/denis_skripnik","marketcap",6340.26071576,"volumeIn24h","price",0.00000547,"priceChangeIn24h","devCount","appCount","upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129,131,132,133],{"_102":103,"_104":59},"day","2025-09-24","runCount",{"_102":106,"_104":59},"2025-09-25",{"_102":108,"_104":59},"2025-09-26",{"_102":110,"_104":59},"2025-09-27",{"_102":112,"_104":59},"2025-09-28",{"_102":114,"_104":59},"2025-09-29",{"_102":116,"_104":59},"2025-09-30",{"_102":118,"_104":59},"2025-10-01",{"_102":120,"_104":59},"2025-10-02",{"_102":122,"_104":59},"2025-10-03",{"_102":124,"_104":59},"2025-10-04",{"_102":126,"_104":59},"2025-10-05",{"_102":128,"_104":59},"2025-10-06",{"_102":130,"_104":59},"2025-10-07",{"_102":114,"_104":42},{"_102":122,"_104":42},{"_102":128,"_104":134},3,"snapshot","ogImage","https://cdn.dev.fun/og/image/922d350c703dbcf7abbc/7163b64f.webp","isDevbase","project",{"_14":19,"_83":84,"_20":80,"_141":142,"_22":143},"oneliner","Moodchain's currency","Coin for Moodchain app from dev.fun: https://dev.fun/p/922d350c703dbcf7abbc","commitDetail","livestream","actionData","errors"]
</article></body></html>