[{"_1":2,"_142":-5,"_143":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_140":-5,"_131":-7,"_141":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":59,"_65":59,"_66":59,"_67":59,"_68":59,"_69":17,"_70":27,"_71":19,"_72":73,"_74":75,"_76":77,"_78":79,"_97":-5,"_98":17,"_99":100,"_131":32,"_132":133,"_134":17,"_135":136},"id","0675439a97e8fba1cc4f","isMyApp",false,"projectId","BoynUYved6iQVJ3wUG3pJ5HPZcK8iPk5yEzRwnVjpump","name","Decentalk","description","Free your voice on the blockchain with this Solana-powered Twitter alternative where every post is an NFT and every like puts money in creators' pockets. Stake $DECENTALK tokens to boost your content, join exclusive conversations, and vote on platform features while maintaining complete ownership of your digital identity.","brief","The Twitter where you own your words, earn from your wit, and govern the platform—all on Solana.","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/0675439a97e8fba1cc4f/76411_63bb1575.webp","cdnUrl","https://cdn.dev.fun/app/0675439a97e8fba1cc4f/76411","createdAt",["D",1749432023445],"updatedAt",["D",1749434021355],"lastCommitId",["B","76411"],"tier",1,"credits",-28,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"3b4b0bb6-bf16-4219-9994-10d04f3538d1","uniqueId","9SNw9F233DEdRtBBoU1hjw6SEb3ESYSSj4HJ56QFDUti","username","solanaWallet","displayName","9SN...Uti","bio","avatar","/avatar.svg","commitCount",3,"forkCount",0,"likeCount","runsCount",16,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect } from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nimport { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { Home, Search, Bell, Mail, Bookmark, User, Users, Settings, TrendingUp, Heart, Repeat, MessageSquare, MoreHorizontal, Send, Award, Shield, ArrowLeft, X, Image, Lock, Vote, BarChart, Trophy, Crown, Star, Zap, PieChart, Activity } from 'lucide-react';\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '0675439a97e8fba1cc4f'\n});\nconst mockPosts = [{\n id: 1,\n content: \"Just released the $DECENTALK whitepaper! Decentralized social is the future 🚀\",\n username: \"founder\",\n displayName: \"DecentalkFounder\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=founder\",\n timestamp: \"2h\",\n likes: 245,\n tips: 12.5,\n comments: 42,\n reposts: 89,\n verified: true,\n nftAddress: \"8xft7MfJ...2KLMr\",\n isGated: false,\n gateType: \"none\"\n}, {\n id: 2,\n content: \"Staking my $DECENTALK tokens to boost this post. Let's see how the algorithm treats it!\",\n username: \"crypto_sarah\",\n displayName: \"Sarah | Web3 Builder\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=sarah\",\n timestamp: \"4h\",\n likes: 128,\n tips: 5.8,\n comments: 24,\n reposts: 37,\n verified: false,\n nftAddress: \"3xGHt9mQ...8pRLs\",\n isGated: false,\n gateType: \"none\"\n}, {\n id: 3,\n content: \"What I love about Decentalk is that my content is truly mine. Each post is an NFT that I own on Solana. Traditional platforms could never! 🔒\",\n username: \"nft_collector\",\n displayName: \"NFT Whale\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=whale\",\n timestamp: \"6h\",\n likes: 392,\n tips: 28.3,\n comments: 56,\n reposts: 124,\n verified: true,\n nftAddress: \"7dRt5xZP...9QsVb\",\n isGated: false,\n gateType: \"none\"\n}, {\n id: 4,\n content: \"Just proposed a new feature through governance. If you hold $DECENTALK tokens, make sure to vote! Community-driven development FTW.\",\n username: \"dev_alex\",\n displayName: \"Alex | Solana Dev\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=alex\",\n timestamp: \"12h\",\n likes: 201,\n tips: 15.2,\n comments: 38,\n reposts: 45,\n verified: true,\n nftAddress: \"2qBn4jLs...6TpWx\",\n isGated: false,\n gateType: \"none\"\n}, {\n id: 5,\n content: \"Got tipped 25 $DECENTALK tokens for my thread on DeFi yesterday! Creator monetization is so seamless here compared to Web2 platforms.\",\n username: \"defi_guru\",\n displayName: \"DeFi Maestro\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=defi\",\n timestamp: \"1d\",\n likes: 315,\n tips: 42.1,\n comments: 67,\n reposts: 93,\n verified: false,\n nftAddress: \"5xJp7qRT...3KvBn\",\n isGated: false,\n gateType: \"none\"\n}, {\n id: 6,\n content: \"This post is exclusively for my token holders! Inside scoop on my upcoming NFT collection launch... 🔥\",\n username: \"nft_artist\",\n displayName: \"NFT Creator\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=artist\",\n timestamp: \"3h\",\n likes: 87,\n tips: 23.5,\n comments: 19,\n reposts: 42,\n verified: true,\n nftAddress: \"4qLm5nZx...7WfRd\",\n isGated: true,\n gateType: \"token\",\n minTokens: 50\n}, {\n id: 7,\n content: \"My deep analysis on $SOL's future and how it affects the $DECENTALK ecosystem. Premium content for my supporters!\",\n username: \"crypto_sarah\",\n displayName: \"Sarah | Web3 Builder\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=sarah\",\n timestamp: \"5h\",\n likes: 145,\n tips: 38.2,\n comments: 32,\n reposts: 56,\n verified: false,\n nftAddress: \"2xTp9vBr...1QwLk\",\n isGated: true,\n gateType: \"follower\"\n}];\nconst trendingTopics = [{\n name: \"$DECENTALK\",\n posts: \"12.4K\"\n}, {\n name: \"Solana DeFi\",\n posts: \"8.3K\"\n}, {\n name: \"NFT Market\",\n posts: \"6.7K\"\n}, {\n name: \"Web3 Social\",\n posts: \"5.2K\"\n}, {\n name: \"DAO Governance\",\n posts: \"3.8K\"\n}];\nconst topUsers = [{\n username: \"founder\",\n displayName: \"DecentalkFounder\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=founder\",\n verified: true,\n engagement: 9845,\n tokenHolding: 125000,\n badges: [\"founder\", \"whale\", \"influencer\"]\n}, {\n username: \"nft_collector\",\n displayName: \"NFT Whale\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=whale\",\n verified: true,\n engagement: 7632,\n tokenHolding: 87500,\n badges: [\"whale\", \"early-adopter\"]\n}, {\n username: \"dev_alex\",\n displayName: \"Alex | Solana Dev\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=alex\",\n verified: true,\n engagement: 6518,\n tokenHolding: 45000,\n badges: [\"builder\", \"contributor\"]\n}, {\n username: \"defi_guru\",\n displayName: \"DeFi Maestro\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=defi\",\n verified: false,\n engagement: 5942,\n tokenHolding: 38750,\n badges: [\"educator\"]\n}, {\n username: \"crypto_sarah\",\n displayName: \"Sarah | Web3 Builder\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=sarah\",\n verified: false,\n engagement: 5126,\n tokenHolding: 32500,\n badges: [\"creator\"]\n}];\nconst governanceProposals = [{\n id: \"PROP-001\",\n title: \"Implement Token Burning Mechanism\",\n description: \"Proposal to implement a 1% burn on all transactions to create deflationary pressure on $DECENTALK token.\",\n creator: \"founder\",\n status: \"active\",\n votesFor: 385000,\n votesAgainst: 125000,\n timeRemaining: \"2d 5h\",\n category: \"tokenomics\"\n}, {\n id: \"PROP-002\",\n title: \"Increase Creator Fund Allocation\",\n description: \"Increase monthly creator fund allocation from 5% to 8% of treasury to boost content quality.\",\n creator: \"nft_collector\",\n status: \"active\",\n votesFor: 425000,\n votesAgainst: 175000,\n timeRemaining: \"3d 12h\",\n category: \"treasury\"\n}, {\n id: \"PROP-003\",\n title: \"Introduce Community Moderation\",\n description: \"Create a decentralized moderation system where token holders can vote to moderate content.\",\n creator: \"dev_alex\",\n status: \"active\",\n votesFor: 315000,\n votesAgainst: 285000,\n timeRemaining: \"1d 8h\",\n category: \"governance\"\n}, {\n id: \"PROP-004\",\n title: \"Reduce Premium Feature Requirements\",\n description: \"Lower the token threshold required for accessing premium features from 100 to 50 $DECENTALK.\",\n creator: \"crypto_sarah\",\n status: \"passed\",\n votesFor: 525000,\n votesAgainst: 275000,\n timeRemaining: \"0d 0h\",\n category: \"feature\"\n}, {\n id: \"PROP-005\",\n title: \"Add Support for NFT Comment Reactions\",\n description: \"Implement a feature allowing users to react to comments with their NFTs for greater engagement.\",\n creator: \"defi_guru\",\n status: \"failed\",\n votesFor: 225000,\n votesAgainst: 375000,\n timeRemaining: \"0d 0h\",\n category: \"feature\"\n}];\nconst suggestedUsers = [{\n username: \"solana_core\",\n displayName: \"Solana\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=solana\",\n verified: true,\n engagement: 8520,\n tokenHolding: 150000,\n badges: [\"partner\", \"verified\"]\n}, {\n username: \"blockchain_news\",\n displayName: \"Crypto News\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=news\",\n verified: true,\n engagement: 7340,\n tokenHolding: 65000,\n badges: [\"verified\", \"news\"]\n}, {\n username: \"nft_artist\",\n displayName: \"NFT Creator\",\n avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=artist\",\n verified: false,\n engagement: 4920,\n tokenHolding: 28500,\n badges: [\"creator\"]\n}];\nconst badgeInfo = {\n \"founder\": {\n icon: Crown,\n color: \"text-yellow-400\",\n title: \"Founder\",\n description: \"Original creator of Decentalk\"\n },\n \"whale\": {\n icon: Trophy,\n color: \"text-blue-400\",\n title: \"Whale\",\n description: \"Holds significant $DECENTALK tokens\"\n },\n \"influencer\": {\n icon: Zap,\n color: \"text-purple-400\",\n title: \"Influencer\",\n description: \"Top engagement across the platform\"\n },\n \"early-adopter\": {\n icon: Star,\n color: \"text-green-400\",\n title: \"Early Adopter\",\n description: \"Joined during platform launch\"\n },\n \"builder\": {\n icon: Shield,\n color: \"text-red-400\",\n title: \"Builder\",\n description: \"Contributes to platform development\"\n },\n \"contributor\": {\n icon: Award,\n color: \"text-pink-400\",\n title: \"Contributor\",\n description: \"Regular platform contributor\"\n },\n \"educator\": {\n icon: BarChart,\n color: \"text-orange-400\",\n title: \"Educator\",\n description: \"Creates educational content\"\n },\n \"creator\": {\n icon: Image,\n color: \"text-indigo-400\",\n title: \"Creator\",\n description: \"Top content creator\"\n },\n \"partner\": {\n icon: Users,\n color: \"text-cyan-400\",\n title: \"Partner\",\n description: \"Official Decentalk partner\"\n },\n \"verified\": {\n icon: Award,\n color: \"text-green-400\",\n title: \"Verified\",\n description: \"Verified account\"\n },\n \"news\": {\n icon: Bell,\n color: \"text-blue-400\",\n title: \"News\",\n description: \"Official news source\"\n }\n};\nfunction getBadgeElement(badgeType, size = 16) {\n if (!badgeInfo[badgeType]) return null;\n const BadgeIcon = badgeInfo[badgeType].icon;\n return \n \n ;\n}\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/0675439a97e8fba1cc4f';\n const wallets = [new PhantomWalletAdapter()];\n return \n \n \n \n \n \n ;\n};\nconst LeaderboardPage = ({\n topUsers\n}) => {\n const [leaderboardFilter, setLeaderboardFilter] = useState('engagement');\n const sortedUsers = [...topUsers].sort((a, b) => {\n return leaderboardFilter === 'engagement' ? b.engagement - a.engagement : b.tokenHolding - a.tokenHolding;\n });\n return <>\n

Leaderboard

\n \n

\n \n \n

\n \n

User

\n {leaderboardFilter === 'engagement' ? 'Engagement Score' : '$DECENTALK Held'}\n

\n \n {sortedUsers.map((user, index) =>

\n {index + 1}\n

\n {user.displayName}\n {user.verified && }\n

\n @{user.username}\n

\n {user.badges.slice(0, 3).map(badge => {getBadgeElement(badge, 14)})}\n {user.badges.length > 3 && +{user.badges.length - 3}}\n

\n {leaderboardFilter === 'engagement' ? {user.engagement.toLocaleString()} : {user.tokenHolding.toLocaleString()}}\n

)}\n

\n \n

Seasonal Rewards

Season 1 ends in: 27 days 14 hours

\n \n

Top Engagement Rewards

5,000 $DECENTALK tokens for Top 3 users
Exclusive Season 1 Champion badge
Featured placement on homepage for 2 weeks

\n \n

Top Token Holder Rewards

Access to exclusive Whale Club community
Early access to new platform features
Higher voting power in governance decisions

\n ;\n};\nconst GovernancePage = ({\n userProfile,\n governanceProposals\n}) => {\n const [selectedCategory, setSelectedCategory] = useState('all');\n const [newProposal, setNewProposal] = useState({\n title: '',\n description: '',\n category: 'feature'\n });\n const [showNewProposalForm, setShowNewProposalForm] = useState(false);\n const filteredProposals = selectedCategory === 'all' ? governanceProposals : governanceProposals.filter(prop => prop.category === selectedCategory);\n const handleCreateProposal = e => {\n e.preventDefault();\n setShowNewProposalForm(false);\n setNewProposal({\n title: '',\n description: '',\n category: 'feature'\n });\n };\n const handleVote = (proposalId, voteType) => {\n console.log(`Voted ${voteType} on proposal ${proposalId}`);\n };\n return <>\n

Governance

\n \n

Decentalk DAO

\n \n Voting Power: {(userProfile.tokenBalance + userProfile.staked).toLocaleString()}\n

\n \n

\n Shape the future of Decentalk by voting on proposals with your staked $DECENTALK tokens. Each token represents one vote.\n

\n \n \n \n {showNewProposalForm && \n

Create Proposal

\n Proposal Title\n setNewProposal({\n ...newProposal,\n title: e.target.value\n })} className=\"w-full bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400\" placeholder=\"Enter a clear, concise title\" required />\n

\n \n

\n Category\n \n

\n \n

\n Description\n

setNewProposal({\n                  ...newProposal,\n                  description: e.target.value\n                })} className=\"w-full bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 resize-none\" rows=\"4\" placeholder=\"Explain your proposal in detail...\" required />\n                  </div>\n                  \n                  <div className=\"pt-2 flex gap-3\">\n                    <button type=\"submit\" className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-200\">\n                      Submit Proposal\n                    </button>\n                    <button type=\"button\" onClick={() => setShowNewProposalForm(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-full transition duration-200\">\n                      Cancel\n                    </button>\n                  </div>\n                </div>\n              </form>\n            </motion.div>}\n        </div>\n        \n        <div className=\"mb-6\">\n          <div className=\"flex overflow-x-auto pb-2 mb-4 gap-2\">\n            <button onClick={() => setSelectedCategory('all')} className={`py-2 px-4 rounded-full whitespace-nowrap ${selectedCategory === 'all' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n              All Proposals\n            </button>\n            <button onClick={() => setSelectedCategory('feature')} className={`py-2 px-4 rounded-full whitespace-nowrap ${selectedCategory === 'feature' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n              Features\n            </button>\n            <button onClick={() => setSelectedCategory('tokenomics')} className={`py-2 px-4 rounded-full whitespace-nowrap ${selectedCategory === 'tokenomics' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n              Tokenomics\n            </button>\n            <button onClick={() => setSelectedCategory('treasury')} className={`py-2 px-4 rounded-full whitespace-nowrap ${selectedCategory === 'treasury' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n              Treasury\n            </button>\n            <button onClick={() => setSelectedCategory('governance')} className={`py-2 px-4 rounded-full whitespace-nowrap ${selectedCategory === 'governance' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n              Governance\n            </button>\n          </div>\n          \n          <div className=\"space-y-4\">\n            {filteredProposals.map(proposal => <div key={proposal.id} className=\"bg-gray-900 rounded-xl overflow-hidden\">\n                <div className=\"p-4\">\n                  <div className=\"flex justify-between items-start mb-2\">\n                    <h3 className=\"font-bold text-lg\">{proposal.title}</h3>\n                    <div className={`px-3 py-1 rounded-full text-sm font-medium ${proposal.status === 'active' ? 'bg-blue-400/20 text-blue-400' : proposal.status === 'passed' ? 'bg-green-400/20 text-green-400' : 'bg-red-400/20 text-red-400'}`}>\n                      {proposal.status.charAt(0).toUpperCase() + proposal.status.slice(1)}\n                    </div>\n                  </div>\n                  \n                  <p className=\"text-gray-300 mb-3\">{proposal.description}</p>\n                  \n                  <div className=\"flex items-center text-sm text-gray-500 mb-4\">\n                    <span>Proposed by @{proposal.creator}</span>\n                    <span className=\"mx-2\">•</span>\n                    <span>ID: {proposal.id}</span>\n                    <span className=\"mx-2\">•</span>\n                    <span className={`px-2 py-0.5 rounded-full text-xs ${getCategoryStyle(proposal.category)}`}>\n                      {proposal.category.charAt(0).toUpperCase() + proposal.category.slice(1)}\n                    </span>\n                  </div>\n                  \n                  <div className=\"mb-3\">\n                    <div className=\"flex justify-between mb-1 text-sm\">\n                      <span>For: {(proposal.votesFor / 1000).toFixed(1)}K</span>\n                      <span>Against: {(proposal.votesAgainst / 1000).toFixed(1)}K</span>\n                    </div>\n                    <div className=\"h-2 bg-gray-800 rounded-full overflow-hidden\">\n                      <div className=\"h-full bg-green-500\" style={{\n                    width: `${proposal.votesFor / (proposal.votesFor + proposal.votesAgainst) * 100}%`\n                  }}></div>\n                    </div>\n                  </div>\n                  \n                  {proposal.status === 'active' && <div className=\"flex justify-between\">\n                      <div className=\"text-sm text-gray-400\">\n                        <span>Time remaining: {proposal.timeRemaining}</span>\n                      </div>\n                      <div className=\"flex gap-2\">\n                        <button onClick={() => handleVote(proposal.id, 'for')} className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-1.5 px-4 rounded-full text-sm transition duration-200\">\n                          Vote For\n                        </button>\n                        <button onClick={() => handleVote(proposal.id, 'against')} className=\"bg-gray-700 hover:bg-gray-600 text-white font-bold py-1.5 px-4 rounded-full text-sm transition duration-200\">\n                          Vote Against\n                        </button>\n                      </div>\n                    </div>}\n                </div>\n              </div>)}\n          </div>\n        </div>\n      </div>\n    </>;\n};\nfunction getCategoryStyle(category) {\n  switch (category) {\n    case 'feature':\n      return 'bg-purple-400/20 text-purple-400';\n    case 'tokenomics':\n      return 'bg-yellow-400/20 text-yellow-400';\n    case 'treasury':\n      return 'bg-blue-400/20 text-blue-400';\n    case 'governance':\n      return 'bg-green-400/20 text-green-400';\n    default:\n      return 'bg-gray-400/20 text-gray-400';\n  }\n}\nconst CreatorStudioPage = ({\n  userProfile\n}) => {\n  const [activeTab, setActiveTab] = useState('monetization');\n  const mockAnalytics = {\n    followers: {\n      total: 128,\n      growth: 12,\n      engagement: 4.2,\n      demographics: [{\n        name: 'US',\n        value: 42\n      }, {\n        name: 'Europe',\n        value: 28\n      }, {\n        name: 'Asia',\n        value: 18\n      }, {\n        name: 'Other',\n        value: 12\n      }]\n    },\n    content: {\n      totalPosts: 42,\n      avgLikes: 87,\n      avgComments: 23,\n      avgTips: 3.5,\n      topPerforming: {\n        id: 123,\n        content: \"Thread about $DECENTALK tokenomics\",\n        engagement: 345\n      }\n    },\n    earnings: {\n      total: 287.5,\n      thisMonth: 42.8,\n      fromTips: 156.3,\n      fromContent: 131.2\n    }\n  };\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Creator Studio</h1>\n      </div>\n      \n      <div className=\"p-4\">\n        <div className=\"flex items-center space-x-4 mb-6\">\n          <img src={userProfile.avatar} alt=\"Profile\" className=\"w-16 h-16 rounded-full\" />\n          <div>\n            <h2 className=\"text-xl font-bold\">{userProfile.displayName}</h2>\n            <p className=\"text-gray-400\">@{userProfile.username}</p>\n          </div>\n        </div>\n        \n        <div className=\"mb-6 flex overflow-x-auto gap-2 pb-2\">\n          <button onClick={() => setActiveTab('monetization')} className={`py-2 px-4 rounded-full whitespace-nowrap ${activeTab === 'monetization' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n            Monetization\n          </button>\n          <button onClick={() => setActiveTab('analytics')} className={`py-2 px-4 rounded-full whitespace-nowrap ${activeTab === 'analytics' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n            Analytics\n          </button>\n          <button onClick={() => setActiveTab('posts')} className={`py-2 px-4 rounded-full whitespace-nowrap ${activeTab === 'posts' ? 'bg-green-500 text-white' : 'bg-gray-800 hover:bg-gray-700'}`}>\n            Post Management\n          </button>\n        </div>\n        \n        {activeTab === 'monetization' && <div className=\"space-y-6\">\n            <div className=\"bg-gray-900 rounded-xl p-6\">\n              <h3 className=\"text-lg font-bold mb-4 flex items-center\">\n                <Lock size={18} className=\"text-green-400 mr-2\" />\n                Gated Content\n              </h3>\n              <p className=\"text-gray-300 mb-4\">\n                Create exclusive content available only to token holders or followers.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between bg-gray-800 p-3 rounded-lg\">\n                  <div className=\"flex items-center\">\n                    <Shield size={18} className=\"text-green-400 mr-2\" />\n                    <span>Token-gated posts</span>\n                  </div>\n                  <label className=\"relative inline-flex items-center cursor-pointer\">\n                    <input type=\"checkbox\" className=\"sr-only peer\" checked />\n                    <div className=\"w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500\"></div>\n                  </label>\n                </div>\n                <div className=\"flex items-center justify-between bg-gray-800 p-3 rounded-lg\">\n                  <div className=\"flex items-center\">\n                    <Users size={18} className=\"text-green-400 mr-2\" />\n                    <span>Follower-only content</span>\n                  </div>\n                  <label className=\"relative inline-flex items-center cursor-pointer\">\n                    <input type=\"checkbox\" className=\"sr-only peer\" checked />\n                    <div className=\"w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500\"></div>\n                  </label>\n                </div>\n                <div className=\"bg-gray-800 p-3 rounded-lg\">\n                  <div className=\"flex items-center justify-between mb-2\">\n                    <span>Minimum tokens required:</span>\n                    <span className=\"text-green-400 font-bold\">50 $DECENTALK</span>\n                  </div>\n                  <input type=\"range\" min=\"10\" max=\"1000\" value=\"50\" className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500\" />\n                  <div className=\"flex justify-between text-xs text-gray-500 mt-1\">\n                    <span>10</span>\n                    <span>1000</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            \n            <div className=\"bg-gray-900 rounded-xl p-6\">\n              <h3 className=\"text-lg font-bold mb-4 flex items-center\">\n                <Trophy size={18} className=\"text-green-400 mr-2\" />\n                Tip Jar Settings\n              </h3>\n              <p className=\"text-gray-300 mb-4\">\n                Customize how users can support you with $DECENTALK tokens.\n              </p>\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between bg-gray-800 p-3 rounded-lg\">\n                  <span>Enable tipping</span>\n                  <label className=\"relative inline-flex items-center cursor-pointer\">\n                    <input type=\"checkbox\" className=\"sr-only peer\" checked />\n                    <div className=\"w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500\"></div>\n                  </label>\n                </div>\n                <div>\n                  <label className=\"block text-gray-400 mb-2\">Suggested tip amounts ($DECENTALK)</label>\n                  <div className=\"flex gap-2\">\n                    <input type=\"text\" value=\"1\" className=\"w-1/4 bg-gray-800 text-white p-2 rounded-lg text-center\" />\n                    <input type=\"text\" value=\"5\" className=\"w-1/4 bg-gray-800 text-white p-2 rounded-lg text-center\" />\n                    <input type=\"text\" value=\"10\" className=\"w-1/4 bg-gray-800 text-white p-2 rounded-lg text-center\" />\n                    <input type=\"text\" value=\"25\" className=\"w-1/4 bg-gray-800 text-white p-2 rounded-lg text-center\" />\n                  </div>\n                </div>\n                <div>\n                  <label className=\"block text-gray-400 mb-2\">Custom thank you message</label>\n                  <textarea className=\"w-full bg-gray-800 text-white p-3 rounded-lg resize-none\" rows=\"3\" defaultValue=\"Thank you for supporting my content on Decentalk! Your tips help me create more value for our community.\">

\n \n

\n \n NFT Post Settings\n

\n Configure how your posts are minted as NFTs on Solana.\n

\n Auto-mint posts as NFTs\n \n \n

\n \n

\n Allow collectors to resell your post NFTs\n \n \n

\n \n

\n Enable creator royalties (5%)\n \n \n

\n \n

}\n \n {activeTab === 'analytics' &&

Total Followers

{mockAnalytics.followers.total}

+{mockAnalytics.followers.growth} this week

Avg. Engagement Rate

{mockAnalytics.followers.engagement}%

Industry avg: 2.1%

Total Earnings

{mockAnalytics.earnings.total} $DCTK

{mockAnalytics.earnings.thisMonth} this month

\n \n

Content Performance

Total Posts

{mockAnalytics.content.totalPosts}

Avg. Likes

{mockAnalytics.content.avgLikes}

Avg. Comments

{mockAnalytics.content.avgComments}

Avg. Tips

{mockAnalytics.content.avgTips} $DCTK

\n \n

Follower Demographics

\n {mockAnalytics.followers.demographics.map((item, index) =>

{item.name}

{item.value}%

)}\n

\n \n

Earnings Breakdown

From Tips

{mockAnalytics.earnings.fromTips} $DCTK

From Content

{mockAnalytics.earnings.fromContent} $DCTK

}\n \n {activeTab === 'posts' &&

Post Management

\n \n \n

\n \n

Thread about $DECENTALK tokenomics

\n Regular\n \n

Posted 3d ago

\n 345\n 42\n 21.5 $DCTK\n

\n \n

Exclusive market analysis for token holders

\n Token-gated\n \n

Posted 1w ago

\n 124\n 18\n 67.2 $DCTK\n

\n \n

Weekly update for my followers

\n Follower-only\n \n

Posted 5d ago

\n 98\n 26\n 12.4 $DCTK\n

}\n \n ;\n};\nconst HomePage = ({\n posts,\n setPosts,\n newPost,\n setNewPost,\n handleSubmitPost,\n handleLike,\n handleTip,\n userProfile,\n connected\n}) => {\n const [postType, setPostType] = useState('regular');\n const [gateSettings, setGateSettings] = useState({\n tokenAmount: 50,\n followerOnly: false\n });\n const handlePostTypeChange = type => {\n setPostType(type);\n };\n return <>\n

Home

\n \n

\n $\"Your$ \n

setNewPost(e.target.value)} className=\"w-full bg-transparent text-lg outline-none resize-none mb-3\" placeholder={connected ? \"What's happening on-chain?\" : \"Connect your wallet to post...\"} rows=\"3\" disabled={!connected} />\n              \n              {connected && <>\n                  <div className=\"flex space-x-2 mb-3 overflow-x-auto pb-1\">\n                    <button type=\"button\" onClick={() => handlePostTypeChange('regular')} className={`px-3 py-1 rounded-full text-sm whitespace-nowrap ${postType === 'regular' ? 'bg-green-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                      Regular Post\n                    </button>\n                    <button type=\"button\" onClick={() => handlePostTypeChange('token-gated')} className={`px-3 py-1 rounded-full text-sm whitespace-nowrap flex items-center ${postType === 'token-gated' ? 'bg-green-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                      <Lock size={14} className=\"mr-1\" /> Token-gated\n                    </button>\n                    <button type=\"button\" onClick={() => handlePostTypeChange('follower-only')} className={`px-3 py-1 rounded-full text-sm whitespace-nowrap flex items-center ${postType === 'follower-only' ? 'bg-green-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                      <Users size={14} className=\"mr-1\" /> Follower-only\n                    </button>\n                  </div>\n                  \n                  {postType === 'token-gated' && <div className=\"bg-gray-800 p-3 rounded-lg mb-3\">\n                      <div className=\"flex justify-between items-center mb-1\">\n                        <label className=\"text-sm\">Required $DECENTALK tokens:</label>\n                        <span className=\"text-green-400 font-medium\">{gateSettings.tokenAmount}</span>\n                      </div>\n                      <input type=\"range\" min=\"10\" max=\"1000\" value={gateSettings.tokenAmount} onChange={e => setGateSettings({\n                  ...gateSettings,\n                  tokenAmount: parseInt(e.target.value)\n                })} className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500\" />\n                      <div className=\"flex justify-between text-xs text-gray-500 mt-1\">\n                        <span>10</span>\n                        <span>1000</span>\n                      </div>\n                    </div>}\n                  \n                  <div className=\"flex justify-between items-center\">\n                    <div className=\"flex space-x-2 text-green-400\">\n                      <button type=\"button\" className=\"p-2 rounded-full hover:bg-green-400/20\">\n                        <Image size={18} />\n                      </button>\n                      <button type=\"button\" className=\"p-2 rounded-full hover:bg-green-400/20\">\n                        <Award size={18} />\n                      </button>\n                      <button type=\"button\" className=\"p-2 rounded-full hover:bg-green-400/20\">\n                        <Shield size={18} />\n                      </button>\n                      <div className=\"flex items-center\">\n                        <input type=\"checkbox\" id=\"mint-nft\" className=\"mr-2\" checked />\n                        <label htmlFor=\"mint-nft\" className=\"text-sm\">Mint as NFT</label>\n                      </div>\n                    </div>\n                    <button type=\"submit\" className={`bg-green-500 hover:bg-green-600 text-white font-bold px-5 py-2 rounded-full transition duration-200 ${!newPost.trim() ? 'opacity-50 cursor-not-allowed' : ''}`} disabled={!newPost.trim()}>\n                      Post\n                    </button>\n                  </div>\n                </>}\n            </div>\n          </div>\n        </form>\n      </div>\n      \n      <div>\n        {posts.map(post => <motion.div key={post.id} className={`p-4 border-b border-gray-800 hover:bg-gray-900/50 transition duration-200 ${post.isGated ? 'relative' : ''}`} initial={{\n        opacity: 0,\n        y: 20\n      }} animate={{\n        opacity: 1,\n        y: 0\n      }} transition={{\n        duration: 0.3\n      }}>\n            {post.isGated && <div className=\"absolute inset-0 bg-black/80 backdrop-blur-sm flex flex-col items-center justify-center z-10 rounded-md\">\n                {post.gateType === 'token' ? <>\n                    <Lock size={24} className=\"text-green-400 mb-2\" />\n                    <p className=\"text-center px-6 mb-2\">This content requires {post.minTokens} $DECENTALK tokens to view</p>\n                    <button className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full text-sm transition duration-200\">\n                      Unlock with Tokens\n                    </button>\n                  </> : <>\n                    <Users size={24} className=\"text-green-400 mb-2\" />\n                    <p className=\"text-center px-6 mb-2\">This content is only visible to followers</p>\n                    <button className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full text-sm transition duration-200\">\n                      Follow to Unlock\n                    </button>\n                  </>}\n              </div>}\n            \n            <div className=\"flex\">\n              <img src={post.avatar} alt={post.username} className=\"w-12 h-12 rounded-full mr-4\" />\n              <div className=\"flex-1\">\n                <div className=\"flex items-center mb-1\">\n                  <span className=\"font-bold mr-1\">{post.displayName}</span>\n                  {post.verified && <span className=\"text-green-400 mr-1\">\n                      <Award size={16} />\n                    </span>}\n                  <span className=\"text-gray-500\">@{post.username} · {post.timestamp}</span>\n                  {post.isGated && <span className={`ml-2 text-xs px-2 py-0.5 rounded-full ${post.gateType === 'token' ? 'bg-green-400/20 text-green-400' : 'bg-purple-400/20 text-purple-400'}`}>\n                      {post.gateType === 'token' ? <span className=\"flex items-center\"><Lock size={10} className=\"mr-1\" /> Token-gated</span> : <span className=\"flex items-center\"><Users size={10} className=\"mr-1\" /> Follower-only</span>}\n                    </span>}\n                </div>\n                <p className=\"mb-3\">{post.content}</p>\n                <div className=\"text-xs text-gray-500 mb-3\">\n                  NFT Address: {post.nftAddress}\n                </div>\n                <div className=\"flex justify-between text-gray-500\">\n                  <button onClick={() => handleLike(post.id)} className=\"flex items-center space-x-1 hover:text-green-400 group\">\n                    <span className=\"p-2 rounded-full group-hover:bg-green-400/20\">\n                      <Heart size={18} />\n                    </span>\n                    <span>{post.likes}</span>\n                  </button>\n                  <button className=\"flex items-center space-x-1 hover:text-green-400 group\">\n                    <span className=\"p-2 rounded-full group-hover:bg-green-400/20\">\n                      <MessageSquare size={18} />\n                    </span>\n                    <span>{post.comments}</span>\n                  </button>\n                  <button className=\"flex items-center space-x-1 hover:text-green-400 group\">\n                    <span className=\"p-2 rounded-full group-hover:bg-green-400/20\">\n                      <Repeat size={18} />\n                    </span>\n                    <span>{post.reposts}</span>\n                  </button>\n                  <button onClick={() => handleTip(post.id)} className=\"flex items-center space-x-1 hover:text-green-400 group\">\n                    <span className=\"p-2 rounded-full group-hover:bg-green-400/20\">\n                      <Send size={18} />\n                    </span>\n                    <span>{post.tips} $DCTK</span>\n                  </button>\n                  <button className=\"p-2 rounded-full hover:bg-green-400/20 hover:text-green-400\">\n                    <MoreHorizontal size={18} />\n                  </button>\n                </div>\n              </div>\n            </div>\n          </motion.div>)}\n      </div>\n    </>;\n};\nconst ExplorePage = ({\n  trendingTopics\n}) => {\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Explore</h1>\n      </div>\n      <div className=\"p-4\">\n        <div className=\"mb-4\">\n          <input type=\"text\" placeholder=\"Search Decentalk\" className=\"w-full bg-gray-800 text-white p-3 rounded-full focus:outline-none focus:ring-2 focus:ring-green-400\" />\n        </div>\n        \n        <h2 className=\"text-xl font-bold mb-4\">Trending Topics</h2>\n        <div className=\"space-y-4 bg-gray-900 rounded-xl p-4\">\n          {trendingTopics.map((topic, index) => <div key={index} className=\"flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg transition duration-200\">\n              <div>\n                <div className=\"flex items-center\">\n                  <TrendingUp size={16} className=\"text-green-400 mr-2\" />\n                  <span className=\"font-medium\">{topic.name}</span>\n                </div>\n                <div className=\"text-sm text-gray-500\">{topic.posts} posts</div>\n              </div>\n              <button className=\"text-green-400 hover:bg-green-400/10 p-2 rounded-full\">\n                <MoreHorizontal size={18} />\n              </button>\n            </div>)}\n        </div>\n        \n        <h2 className=\"text-xl font-bold my-4\">NFT Trending</h2>\n        <div className=\"grid grid-cols-2 gap-4\">\n          {[1, 2, 3, 4].map(item => <div key={item} className=\"bg-gray-900 rounded-xl overflow-hidden\">\n              <div className=\"h-40 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center\">\n                <Shield size={40} className=\"text-white\" />\n              </div>\n              <div className=\"p-3\">\n                <div className=\"font-bold\">Top NFT #{item}</div>\n                <div className=\"text-sm text-gray-400\">Floor: 2.5 SOL</div>\n              </div>\n            </div>)}\n        </div>\n      </div>\n    </>;\n};\nconst NotificationsPage = () => {\n  const mockNotifications = [{\n    id: 1,\n    type: 'like',\n    user: 'crypto_sarah',\n    action: 'liked your post',\n    time: '2h ago'\n  }, {\n    id: 2,\n    type: 'tip',\n    user: 'nft_collector',\n    action: 'tipped you 5 $DECENTALK',\n    time: '5h ago'\n  }, {\n    id: 3,\n    type: 'follow',\n    user: 'dev_alex',\n    action: 'followed you',\n    time: '1d ago'\n  }, {\n    id: 4,\n    type: 'mention',\n    user: 'defi_guru',\n    action: 'mentioned you in a post',\n    time: '2d ago'\n  }];\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Notifications</h1>\n      </div>\n      <div>\n        {mockNotifications.map(notification => <motion.div key={notification.id} className=\"p-4 border-b border-gray-800 hover:bg-gray-900/50 transition duration-200\" initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} transition={{\n        duration: 0.2\n      }}>\n            <div className=\"flex items-start\">\n              <div className=\"mr-3 p-2 rounded-full bg-green-400/10 text-green-400\">\n                {notification.type === 'like' && <Heart size={20} />}\n                {notification.type === 'tip' && <Send size={20} />}\n                {notification.type === 'follow' && <User size={20} />}\n                {notification.type === 'mention' && <MessageSquare size={20} />}\n              </div>\n              <div>\n                <span className=\"font-semibold\">@{notification.user}</span> {notification.action}\n                <div className=\"text-sm text-gray-500\">{notification.time}</div>\n              </div>\n            </div>\n          </motion.div>)}\n      </div>\n    </>;\n};\nconst MessagesPage = () => {\n  const mockConversations = [{\n    id: 1,\n    user: 'crypto_sarah',\n    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=sarah',\n    lastMessage: 'Hey, saw your post about $DECENTALK!',\n    time: '2h'\n  }, {\n    id: 2,\n    user: 'nft_collector',\n    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=whale',\n    lastMessage: 'Are you minting that post as an NFT?',\n    time: '5h'\n  }, {\n    id: 3,\n    user: 'dev_alex',\n    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=alex',\n    lastMessage: 'Let\\'s collaborate on a Solana project',\n    time: '1d'\n  }];\n  const [activeChat, setActiveChat] = useState(null);\n  const [message, setMessage] = useState('');\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Messages</h1>\n      </div>\n      \n      {!activeChat ? <div>\n          {mockConversations.map(convo => <div key={convo.id} onClick={() => setActiveChat(convo)} className=\"p-4 border-b border-gray-800 hover:bg-gray-900/50 transition duration-200 cursor-pointer\">\n              <div className=\"flex items-center\">\n                <img src={convo.avatar} alt={convo.user} className=\"w-12 h-12 rounded-full mr-4\" />\n                <div className=\"flex-1\">\n                  <div className=\"flex justify-between\">\n                    <span className=\"font-semibold\">@{convo.user}</span>\n                    <span className=\"text-sm text-gray-500\">{convo.time}</span>\n                  </div>\n                  <p className=\"text-gray-400 truncate\">{convo.lastMessage}</p>\n                </div>\n              </div>\n            </div>)}\n        </div> : <div className=\"flex flex-col h-[calc(100vh-64px)]\">\n          <div className=\"p-4 border-b border-gray-800 flex items-center\">\n            <button onClick={() => setActiveChat(null)} className=\"mr-3\">\n              <ArrowLeft size={20} />\n            </button>\n            <img src={activeChat.avatar} alt={activeChat.user} className=\"w-10 h-10 rounded-full mr-3\" />\n            <span className=\"font-semibold\">@{activeChat.user}</span>\n          </div>\n          \n          <div className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n            <div className=\"flex justify-start\">\n              <div className=\"bg-gray-800 rounded-2xl rounded-tl-none p-3 max-w-[80%]\">\n                <p>{activeChat.lastMessage}</p>\n                <span className=\"text-xs text-gray-500 block text-right mt-1\">2h ago</span>\n              </div>\n            </div>\n            \n            {activeChat.id === 1 && <div className=\"flex justify-end\">\n                <div className=\"bg-green-500 text-white rounded-2xl rounded-tr-none p-3 max-w-[80%]\">\n                  <p>Yes! I'm really excited about the project's potential!</p>\n                  <span className=\"text-xs text-green-200 block text-right mt-1\">1h ago</span>\n                </div>\n              </div>}\n          </div>\n          \n          <div className=\"p-4 border-t border-gray-800\">\n            <form className=\"flex items-center\" onSubmit={e => e.preventDefault()}>\n              <input type=\"text\" value={message} onChange={e => setMessage(e.target.value)} placeholder=\"Type a message...\" className=\"flex-1 bg-gray-800 text-white p-3 rounded-full focus:outline-none focus:ring-2 focus:ring-green-400\" />\n              <button className=\"ml-2 p-3 bg-green-500 rounded-full hover:bg-green-600 transition duration-200\">\n                <Send size={18} className=\"text-white\" />\n              </button>\n            </form>\n          </div>\n        </div>}\n    </>;\n};\nconst BookmarksPage = () => {\n  const mockBookmarks = [{\n    id: 101,\n    content: \"A comprehensive guide to Solana development for beginners. Start building your first dApp today!\",\n    username: \"solana_dev\",\n    displayName: \"Solana Dev\",\n    avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=soldev\",\n    timestamp: \"3d\",\n    likes: 532,\n    tips: 45.2,\n    comments: 87,\n    reposts: 124,\n    verified: true,\n    nftAddress: \"9xRt8mF...4WsTz\"\n  }, {\n    id: 102,\n    content: \"Just released a tutorial on how to integrate $DECENTALK token into your own Solana project. Check it out!\",\n    username: \"dev_alex\",\n    displayName: \"Alex | Solana Dev\",\n    avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=alex\",\n    timestamp: \"1w\",\n    likes: 321,\n    tips: 28.7,\n    comments: 56,\n    reposts: 78,\n    verified: true,\n    nftAddress: \"7pQs2vL...8JfDn\"\n  }];\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Bookmarks</h1>\n      </div>\n      \n      <div>\n        {mockBookmarks.map(post => <motion.div key={post.id} className=\"p-4 border-b border-gray-800 hover:bg-gray-900/50 transition duration-200\" initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }}>\n            <div className=\"flex\">\n              <img src={post.avatar} alt={post.username} className=\"w-12 h-12 rounded-full mr-4\" />\n              <div className=\"flex-1\">\n                <div className=\"flex items-center mb-1\">\n                  <span className=\"font-bold mr-1\">{post.displayName}</span>\n                  {post.verified && <span className=\"text-green-400 mr-1\">\n                      <Award size={16} />\n                    </span>}\n                  <span className=\"text-gray-500\">@{post.username} · {post.timestamp}</span>\n                </div>\n                <p className=\"mb-3\">{post.content}</p>\n                <div className=\"text-xs text-gray-500 mb-3\">\n                  NFT Address: {post.nftAddress}\n                </div>\n                <div className=\"flex justify-between text-gray-500\">\n                  <div className=\"flex items-center space-x-1\">\n                    <Heart size={18} />\n                    <span>{post.likes}</span>\n                  </div>\n                  <div className=\"flex items-center space-x-1\">\n                    <MessageSquare size={18} />\n                    <span>{post.comments}</span>\n                  </div>\n                  <div className=\"flex items-center space-x-1\">\n                    <Repeat size={18} />\n                    <span>{post.reposts}</span>\n                  </div>\n                  <div className=\"flex items-center space-x-1\">\n                    <Send size={18} />\n                    <span>{post.tips} $DCTK</span>\n                  </div>\n                  <button className=\"p-2 rounded-full hover:bg-green-400/20 hover:text-green-400\">\n                    <Bookmark size={18} fill=\"currentColor\" />\n                  </button>\n                </div>\n              </div>\n            </div>\n          </motion.div>)}\n      </div>\n    </>;\n};\nconst ProfilePage = ({\n  userProfile,\n  posts\n}) => {\n  return <>\n      <div className=\"sticky top-0 bg-black z-10\">\n        <div className=\"h-32 bg-gradient-to-r from-green-400 to-green-600\"></div>\n        <div className=\"px-4 pb-4 border-b border-gray-800\">\n          <div className=\"flex justify-between\">\n            <div className=\"relative -mt-16\">\n              <img src={userProfile.avatar} alt=\"Profile\" className=\"w-32 h-32 rounded-full border-4 border-black\" />\n            </div>\n            <button className=\"mt-4 border border-green-500 text-green-500 hover:bg-green-500/10 font-bold py-2 px-4 rounded-full transition duration-200\">\n              Edit Profile\n            </button>\n          </div>\n          \n          <div className=\"mt-4\">\n            <h1 className=\"text-2xl font-bold\">{userProfile.displayName}</h1>\n            <div className=\"text-gray-500\">@{userProfile.username}</div>\n            \n            <p className=\"mt-4 text-gray-300\">{userProfile.bio}</p>\n            \n            <div className=\"mt-4 flex space-x-6\">\n              <div>\n                <span className=\"font-bold\">{userProfile.following}</span> <span className=\"text-gray-500\">Following</span>\n              </div>\n              <div>\n                <span className=\"font-bold\">{userProfile.followers}</span> <span className=\"text-gray-500\">Followers</span>\n              </div>\n              <div>\n                <span className=\"font-bold\">{userProfile.posts}</span> <span className=\"text-gray-500\">Posts</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <div className=\"p-4 grid grid-cols-2 gap-4\">\n        <div className=\"bg-gray-900 rounded-xl p-4\">\n          <h2 className=\"text-lg font-semibold mb-2\">$DECENTALK Stats</h2>\n          <div className=\"space-y-3\">\n            <div className=\"flex justify-between items-center\">\n              <span className=\"text-gray-400\">Balance:</span>\n              <span className=\"font-medium text-green-400\">{userProfile.tokenBalance}</span>\n            </div>\n            <div className=\"flex justify-between items-center\">\n              <span className=\"text-gray-400\">Staked:</span>\n              <span className=\"font-medium text-green-400\">{userProfile.staked}</span>\n            </div>\n            <div className=\"flex justify-between items-center\">\n              <span className=\"text-gray-400\">Earned:</span>\n              <span className=\"font-medium text-green-400\">152.8</span>\n            </div>\n          </div>\n        </div>\n        \n        <div className=\"bg-gray-900 rounded-xl p-4\">\n          <h2 className=\"text-lg font-semibold mb-2\">NFT Collection</h2>\n          <div className=\"text-center py-4\">\n            <Shield size={32} className=\"mx-auto text-green-400 mb-2\" />\n            <p className=\"text-gray-400\">You own {posts.length} post NFTs</p>\n          </div>\n        </div>\n      </div>\n      \n      <div className=\"p-4 border-t border-gray-800\">\n        <h2 className=\"text-xl font-bold mb-4\">Your Posts</h2>\n        {posts.length > 0 ? posts.map(post => <div key={post.id} className=\"p-4 border-b border-gray-800 hover:bg-gray-900/50 transition duration-200\">\n              <div className=\"flex\">\n                <img src={post.avatar} alt={post.username} className=\"w-12 h-12 rounded-full mr-4\" />\n                <div className=\"flex-1\">\n                  <div className=\"flex items-center mb-1\">\n                    <span className=\"font-bold mr-1\">{post.displayName}</span>\n                    <span className=\"text-gray-500\">@{post.username} · {post.timestamp}</span>\n                  </div>\n                  <p className=\"mb-3\">{post.content}</p>\n                  <div className=\"text-xs text-gray-500 mb-3\">\n                    NFT Address: {post.nftAddress}\n                  </div>\n                </div>\n              </div>\n            </div>) : <div className=\"text-center py-8 text-gray-500\">\n            <MessageSquare size={48} className=\"mx-auto mb-4 opacity-50\" />\n            <p>You haven't created any posts yet</p>\n          </div>}\n      </div>\n    </>;\n};\nconst CommunitiesPage = () => {\n  const mockCommunities = [{\n    id: 1,\n    name: \"Solana Developers\",\n    members: 5823,\n    posts: 245,\n    avatar: \"https://api.dicebear.com/7.x/identicon/svg?seed=soldev\"\n  }, {\n    id: 2,\n    name: \"NFT Collectors\",\n    members: 3942,\n    posts: 178,\n    avatar: \"https://api.dicebear.com/7.x/identicon/svg?seed=nftcollectors\"\n  }, {\n    id: 3,\n    name: \"DeFi Discussions\",\n    members: 2753,\n    posts: 132,\n    avatar: \"https://api.dicebear.com/7.x/identicon/svg?seed=defi\"\n  }, {\n    id: 4,\n    name: \"DAO Governance\",\n    members: 1584,\n    posts: 87,\n    avatar: \"https://api.dicebear.com/7.x/identicon/svg?seed=dao\"\n  }];\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Communities</h1>\n      </div>\n      \n      <div className=\"p-4\">\n        <div className=\"mb-6\">\n          <button className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-200 w-full\">\n            Create Community\n          </button>\n        </div>\n        \n        <h2 className=\"text-lg font-semibold mb-4\">Your Communities</h2>\n        <div className=\"space-y-4 mb-8\">\n          {mockCommunities.slice(0, 2).map(community => <div key={community.id} className=\"bg-gray-900 rounded-xl p-4 flex items-center\">\n              <img src={community.avatar} alt={community.name} className=\"w-12 h-12 rounded-full mr-4\" />\n              <div className=\"flex-1\">\n                <h3 className=\"font-semibold\">{community.name}</h3>\n                <div className=\"text-sm text-gray-500\">{community.members} members · {community.posts} posts</div>\n              </div>\n              <button className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-1 px-4 rounded-full text-sm transition duration-200\">\n                View\n              </button>\n            </div>)}\n        </div>\n        \n        <h2 className=\"text-lg font-semibold mb-4\">Discover Communities</h2>\n        <div className=\"space-y-4\">\n          {mockCommunities.slice(2).map(community => <div key={community.id} className=\"bg-gray-900 rounded-xl p-4 flex items-center\">\n              <img src={community.avatar} alt={community.name} className=\"w-12 h-12 rounded-full mr-4\" />\n              <div className=\"flex-1\">\n                <h3 className=\"font-semibold\">{community.name}</h3>\n                <div className=\"text-sm text-gray-500\">{community.members} members · {community.posts} posts</div>\n              </div>\n              <button className=\"border border-green-500 text-green-500 hover:bg-green-500/10 font-bold py-1 px-4 rounded-full text-sm transition duration-200\">\n                Join\n              </button>\n            </div>)}\n        </div>\n      </div>\n    </>;\n};\nconst SettingsPage = ({\n  userProfile\n}) => {\n  return <>\n      <div className=\"p-4 border-b border-gray-800 sticky top-0 bg-black z-10\">\n        <h1 className=\"text-xl font-bold\">Settings</h1>\n      </div>\n      \n      <div className=\"p-4\">\n        <div className=\"bg-gray-900 rounded-xl p-4 mb-6\">\n          <h2 className=\"text-lg font-semibold mb-4\">Account Settings</h2>\n          \n          <div className=\"space-y-4\">\n            <div>\n              <label className=\"block text-gray-400 mb-2\">Username</label>\n              <input type=\"text\" value={userProfile.username} readOnly className=\"w-full bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400\" />\n            </div>\n            \n            <div>\n              <label className=\"block text-gray-400 mb-2\">Display Name</label>\n              <input type=\"text\" defaultValue={userProfile.displayName} className=\"w-full bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400\" />\n            </div>\n            \n            <div>\n              <label className=\"block text-gray-400 mb-2\">Bio</label>\n              <textarea defaultValue={userProfile.bio} rows=\"3\" className=\"w-full bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 resize-none\">

\n \n \n

\n \n

Wallet & Security

\n \n

Connected Wallet

7x...F3d

\n \n

\n Two-Factor Authentication\n \n \n

\n \n

\n Email Notifications\n \n \n

\n \n

Token Preferences

\n \n

\n Default Tip Amount\n

\n \n

\n $DCTK\n

\n \n

\n Auto-stake from earnings\n \n \n

\n \n

\n \n \n

\n \n ;\n};\nconst ComposePage = ({\n newPost,\n setNewPost,\n handleSubmitPost,\n userProfile\n}) => {\n return <>\n

\n \n \n \n

New Post

\n \n

\n $\"Your$ \n

setNewPost(e.target.value)} className=\"w-full bg-transparent text-xl outline-none resize-none mb-6\" placeholder=\"What's happening on-chain?\" rows=\"6\" autoFocus />\n              \n              <div className=\"border-t border-gray-800 pt-4 flex justify-between items-center\">\n                <div className=\"flex space-x-4 text-green-400\">\n                  <button type=\"button\" className=\"p-2 rounded-full hover:bg-green-400/20\">\n                    <Image size={20} />\n                  </button>\n                  <button type=\"button\" className=\"p-2 rounded-full hover:bg-green-400/20\">\n                    <Award size={20} />\n                  </button>\n                  <button type=\"button\" className=\"p-2 rounded-full hover:bg-green-400/20\">\n                    <Shield size={20} />\n                  </button>\n                  <div className=\"flex items-center\">\n                    <input type=\"checkbox\" id=\"mint-nft\" className=\"mr-2\" />\n                    <label htmlFor=\"mint-nft\" className=\"text-sm\">Mint as NFT</label>\n                  </div>\n                </div>\n                <button type=\"submit\" className={`bg-green-500 hover:bg-green-600 text-white font-bold px-6 py-3 rounded-full transition duration-200 ${!newPost.trim() ? 'opacity-50 cursor-not-allowed' : ''}`} disabled={!newPost.trim()}>\n                  Post\n                </button>\n              </div>\n            </div>\n          </div>\n        </form>\n      </div>\n    </>;\n};\nfunction MainApp() {\n  const {\n    connected,\n    publicKey\n  } = useWallet();\n  const [posts, setPosts] = useState(mockPosts);\n  const [newPost, setNewPost] = useState('');\n  const [showModal, setShowModal] = useState(false);\n  const location = useLocation();\n  const [userProfile, setUserProfile] = useState({\n    username: \"you\",\n    displayName: \"Your Profile\",\n    avatar: \"https://api.dicebear.com/7.x/avataaars/svg?seed=you\",\n    bio: \"Web3 enthusiast and early $DECENTALK adopter\",\n    followers: 128,\n    following: 95,\n    posts: 42,\n    verified: false,\n    tokenBalance: 487.25,\n    staked: 250,\n    badges: [\"early-adopter\", \"creator\"]\n  });\n  useEffect(() => {\n    if (connected && publicKey) {\n      const walletAddress = publicKey.toString();\n      const shortenedAddress = walletAddress.slice(0, 8);\n      const newProfile = {\n        username: `user_${shortenedAddress}`,\n        displayName: `${shortenedAddress.slice(0, 4)}`,\n        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${walletAddress}`,\n        bio: \"Web3 enthusiast and $DECENTALK user\",\n        followers: Math.floor(Math.random() * 500),\n        following: Math.floor(Math.random() * 200),\n        posts: Math.floor(Math.random() * 50),\n        verified: false,\n        tokenBalance: 487.25,\n        staked: 250,\n        badges: [\"early-adopter\"]\n      };\n      const checkAndCreateProfile = async () => {\n        try {\n          const existingProfile = await stateClient.getEntity('profiles', walletAddress);\n          if (!existingProfile) {\n            await stateClient.createEntity('profiles', {\n              id: walletAddress,\n              ...newProfile\n            });\n            setUserProfile(newProfile);\n          } else {\n            setUserProfile(existingProfile);\n          }\n        } catch (error) {\n          console.error(\"Error checking/creating profile:\", error);\n          setUserProfile(newProfile);\n        }\n      };\n      checkAndCreateProfile();\n    }\n  }, [connected, publicKey]);\n  const handleLike = postId => {\n    if (!connected) {\n      setShowModal(true);\n      return;\n    }\n    setPosts(posts.map(post => post.id === postId ? {\n      ...post,\n      likes: post.likes + 1\n    } : post));\n    trackEngagement(postId, 'like');\n  };\n  const handleTip = postId => {\n    if (!connected) {\n      setShowModal(true);\n      return;\n    }\n    setPosts(posts.map(post => post.id === postId ? {\n      ...post,\n      tips: parseFloat((post.tips + 0.1).toFixed(1))\n    } : post));\n    setUserProfile({\n      ...userProfile,\n      tokenBalance: parseFloat((userProfile.tokenBalance - 0.1).toFixed(2))\n    });\n    trackEngagement(postId, 'tip');\n  };\n  const trackEngagement = async (postId, action) => {\n    if (!connected || !publicKey) return;\n    try {\n      const engagementData = {\n        id: `${Date.now()}-${publicKey.toString().substring(0, 8)}`,\n        user: publicKey.toString(),\n        postId,\n        action,\n        timestamp: Date.now()\n      };\n      await stateClient.createEntity('engagements', engagementData);\n    } catch (error) {\n      console.error(\"Error tracking engagement:\", error);\n    }\n  };\n  const handleSubmitPost = e => {\n    e.preventDefault();\n    if (!connected) {\n      setShowModal(true);\n      return;\n    }\n    if (newPost.trim() === '') return;\n    const form = e.target;\n    let isGated = false;\n    let gateType = \"none\";\n    let minTokens = 0;\n    const postTypeElements = form.querySelectorAll('button[type=\"button\"]');\n    postTypeElements.forEach(el => {\n      if (el.classList.contains('bg-green-500')) {\n        if (el.textContent.includes('Token-gated')) {\n          isGated = true;\n          gateType = \"token\";\n          minTokens = parseInt(form.querySelector('input[type=\"range\"]')?.value || 50);\n        } else if (el.textContent.includes('Follower-only')) {\n          isGated = true;\n          gateType = \"follower\";\n        }\n      }\n    });\n    const newPostObj = {\n      id: Date.now(),\n      content: newPost,\n      username: userProfile.username,\n      displayName: userProfile.displayName,\n      avatar: userProfile.avatar,\n      timestamp: \"now\",\n      likes: 0,\n      tips: 0,\n      comments: 0,\n      reposts: 0,\n      verified: userProfile.verified,\n      nftAddress: `${Math.random().toString(36).substring(2, 8)}...${Math.random().toString(36).substring(2, 6)}`,\n      isGated,\n      gateType,\n      minTokens\n    };\n    const savePost = async () => {\n      try {\n        if (connected && publicKey) {\n          const postData = {\n            id: newPostObj.id.toString(),\n            walletAddress: publicKey.toString(),\n            ...newPostObj\n          };\n          await stateClient.createEntity('posts', postData);\n        }\n      } catch (error) {\n        console.error(\"Error saving post:\", error);\n      }\n    };\n    savePost();\n    setPosts([newPostObj, ...posts]);\n    setNewPost('');\n  };\n  return <div className=\"min-h-screen bg-black text-white\">\n      <div className=\"container mx-auto max-w-6xl\">\n        <div className=\"flex\">\n          {}\n          <div className=\"w-1/5 fixed h-screen p-4 border-r border-gray-800\">\n            <div className=\"flex items-center mb-8\">\n              <span className=\"text-3xl font-bold text-green-400\">D</span>\n              <span className=\"text-xl font-semibold ml-1\">ecentalk</span>\n            </div>\n            \n            <nav className=\"space-y-4\">\n              <Link to=\"/\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Home className={location.pathname === '/' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Home</span>\n              </Link>\n              \n              <Link to=\"/explore\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/explore' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Search className={location.pathname === '/explore' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Explore</span>\n              </Link>\n              \n              <Link to=\"/notifications\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/notifications' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Bell className={location.pathname === '/notifications' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Notifications</span>\n              </Link>\n              \n              <Link to=\"/messages\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/messages' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Mail className={location.pathname === '/messages' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Messages</span>\n              </Link>\n              \n              <Link to=\"/bookmarks\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/bookmarks' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Bookmark className={location.pathname === '/bookmarks' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Bookmarks</span>\n              </Link>\n              \n              <Link to=\"/profile\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/profile' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <User className={location.pathname === '/profile' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Profile</span>\n              </Link>\n              \n              <Link to=\"/communities\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/communities' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Users className={location.pathname === '/communities' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Communities</span>\n              </Link>\n              \n              <Link to=\"/leaderboard\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/leaderboard' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Trophy className={location.pathname === '/leaderboard' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Leaderboard</span>\n              </Link>\n              \n              <Link to=\"/governance\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/governance' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Vote className={location.pathname === '/governance' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Governance</span>\n              </Link>\n              \n              {connected && <Link to=\"/creator-studio\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/creator-studio' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                  <PieChart className={location.pathname === '/creator-studio' ? 'text-green-400' : ''} size={24} />\n                  <span className=\"text-lg\">Creator Studio</span>\n                </Link>}\n              \n              <Link to=\"/settings\" className={`flex items-center space-x-3 p-2 rounded-full w-full ${location.pathname === '/settings' ? 'bg-green-400/10 text-green-400' : 'hover:bg-gray-800'}`}>\n                <Settings className={location.pathname === '/settings' ? 'text-green-400' : ''} size={24} />\n                <span className=\"text-lg\">Settings</span>\n              </Link>\n            </nav>\n            \n            <div className=\"mt-8 w-full\">\n              <Link to=\"/compose\" className=\"block\">\n                <button className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-full w-full transition duration-200\">\n                  Post\n                </button>\n              </Link>\n            </div>\n            \n            {connected ? <div className=\"absolute bottom-4 left-4 right-4 p-3 rounded-xl bg-gray-800 flex items-center\">\n                <img src={userProfile.avatar} alt=\"Profile\" className=\"w-10 h-10 rounded-full\" />\n                <div className=\"ml-2 truncate\">\n                  <div className=\"font-semibold\">{userProfile.displayName}</div>\n                  <div className=\"text-sm text-gray-400\">@{userProfile.username}</div>\n                </div>\n              </div> : <div className=\"absolute bottom-4 left-4 right-4\">\n                <WalletMultiButton className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-full w-full transition duration-200\" />\n              </div>}\n          </div>\n          \n          {}\n          <div className=\"w-1/2 ml-[20%] border-r border-gray-800 min-h-screen\">\n            <Routes>\n              <Route path=\"/\" element={<HomePage posts={posts} setPosts={setPosts} newPost={newPost} setNewPost={setNewPost} handleSubmitPost={handleSubmitPost} handleLike={handleLike} handleTip={handleTip} userProfile={userProfile} connected={connected} />} />\n              <Route path=\"/explore\" element={<ExplorePage trendingTopics={trendingTopics} />} />\n              <Route path=\"/notifications\" element={<NotificationsPage />} />\n              <Route path=\"/messages\" element={<MessagesPage />} />\n              <Route path=\"/bookmarks\" element={<BookmarksPage />} />\n              <Route path=\"/profile\" element={<ProfilePage userProfile={userProfile} posts={posts.filter(post => post.username === userProfile.username)} />} />\n              <Route path=\"/communities\" element={<CommunitiesPage />} />\n              <Route path=\"/leaderboard\" element={<LeaderboardPage topUsers={topUsers} />} />\n              <Route path=\"/governance\" element={<GovernancePage userProfile={userProfile} governanceProposals={governanceProposals} />} />\n              <Route path=\"/creator-studio\" element={<CreatorStudioPage userProfile={userProfile} />} />\n              <Route path=\"/settings\" element={<SettingsPage userProfile={userProfile} />} />\n              <Route path=\"/compose\" element={<ComposePage newPost={newPost} setNewPost={setNewPost} handleSubmitPost={handleSubmitPost} userProfile={userProfile} />} />\n            </Routes>\n          </div>\n          \n          {}\n          <div className=\"w-[30%] p-4 sticky top-0 h-screen overflow-y-auto\">\n            {connected ? <div className=\"bg-gray-900 rounded-xl p-4 mb-6\">\n                <div className=\"flex items-center mb-3\">\n                  <img src={userProfile.avatar} alt=\"Profile\" className=\"w-12 h-12 rounded-full mr-3\" />\n                  <div>\n                    <div className=\"font-bold flex items-center\">\n                      {userProfile.displayName}\n                      <div className=\"flex ml-1\">\n                        {userProfile.badges.map(badge => <span key={badge} className=\"ml-1\">\n                            {getBadgeElement(badge, 14)}\n                          </span>)}\n                      </div>\n                    </div>\n                    <div className=\"text-gray-500\">@{userProfile.username}</div>\n                  </div>\n                </div>\n                \n                <div className=\"bg-gray-800 rounded-lg p-3 mb-3\">\n                  <div className=\"flex justify-between mb-2\">\n                    <span className=\"text-gray-400\">$DECENTALK Balance:</span>\n                    <span className=\"font-semibold text-green-400\">{userProfile.tokenBalance}</span>\n                  </div>\n                  <div className=\"flex justify-between\">\n                    <span className=\"text-gray-400\">Staked:</span>\n                    <span className=\"font-semibold text-green-400\">{userProfile.staked}</span>\n                  </div>\n                  <div className=\"flex justify-between\">\n                    <span className=\"text-gray-400\">Voting Power:</span>\n                    <span className=\"font-semibold text-green-400\">{userProfile.tokenBalance + userProfile.staked}</span>\n                  </div>\n                </div>\n                \n                <div className=\"flex gap-2 mb-2\">\n                  <button className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full flex-1 transition duration-200\">\n                    Stake Tokens\n                  </button>\n                  <Link to=\"/governance\" className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full flex-1 transition duration-200 text-center\">\n                    Vote\n                  </Link>\n                </div>\n                \n                <button className=\"border border-green-500 text-green-500 hover:bg-green-500/10 font-bold py-2 px-4 rounded-full w-full transition duration-200\">\n                  Buy $DECENTALK\n                </button>\n              </div> : <div className=\"bg-gray-900 rounded-xl p-4 mb-6\">\n                <h2 className=\"text-xl font-bold mb-2\">Welcome to Decentalk</h2>\n                <p className=\"text-gray-400 mb-4\">Connect your wallet to generate your on-chain profile, start posting, and join the Decentalk DAO.</p>\n                <WalletMultiButton className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full transition duration-200\" />\n              </div>}\n            \n            {}\n            <div className=\"bg-gray-900 rounded-xl p-4 mb-6\">\n              <h2 className=\"text-xl font-bold mb-4\">Trending Topics</h2>\n              <div className=\"space-y-4\">\n                {trendingTopics.map((topic, index) => <div key={index} className=\"flex items-center justify-between\">\n                    <div>\n                      <div className=\"flex items-center\">\n                        <TrendingUp size={16} className=\"text-green-400 mr-2\" />\n                        <span className=\"font-medium\">{topic.name}</span>\n                      </div>\n                      <div className=\"text-sm text-gray-500\">{topic.posts} posts</div>\n                    </div>\n                    <button className=\"text-green-400 hover:bg-green-400/10 p-2 rounded-full\">\n                      <MoreHorizontal size={18} />\n                    </button>\n                  </div>)}\n              </div>\n            </div>\n            \n            {}\n            <div className=\"bg-gray-900 rounded-xl p-4\">\n              <h2 className=\"text-xl font-bold mb-4\">Who to Follow</h2>\n              <div className=\"space-y-4\">\n                {suggestedUsers.map((user, index) => <div key={index} className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center\">\n                      <img src={user.avatar} alt={user.username} className=\"w-10 h-10 rounded-full mr-3\" />\n                      <div>\n                        <div className=\"flex items-center\">\n                          <span className=\"font-medium mr-1\">{user.displayName}</span>\n                          {user.verified && <Award size={14} className=\"text-green-400\" />}\n                        </div>\n                        <div className=\"text-sm text-gray-500\">@{user.username}</div>\n                      </div>\n                    </div>\n                    <button className=\"bg-white text-black hover:bg-gray-200 font-semibold text-sm py-1 px-4 rounded-full transition duration-200\">\n                      Follow\n                    </button>\n                  </div>)}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      {}\n      <AnimatePresence>\n        {showModal && <motion.div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50\" initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} onClick={() => setShowModal(false)}>\n            <motion.div className=\"bg-gray-900 rounded-2xl p-6 max-w-md w-full\" initial={{\n          scale: 0.9,\n          opacity: 0\n        }} animate={{\n          scale: 1,\n          opacity: 1\n        }} exit={{\n          scale: 0.9,\n          opacity: 0\n        }} onClick={e => e.stopPropagation()}>\n              <h2 className=\"text-2xl font-bold mb-4 text-center\">Connect Your Wallet</h2>\n              <p className=\"text-gray-400 mb-6 text-center\">You need to connect your Solana wallet to interact with Decentalk.</p>\n              \n              <div className=\"space-y-3\">\n                <WalletMultiButton className=\"bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-full w-full transition duration-200\" />\n                \n                <button onClick={() => setShowModal(false)} className=\"border border-gray-600 text-gray-400 hover:bg-gray-800 font-bold py-3 px-4 rounded-full w-full transition duration-200\">\n                  Maybe Later\n                </button>\n              </div>\n            </motion.div>\n          </motion.div>}\n      </AnimatePresence>\n    </div>;\n}\nfunction App() {\n  return <Router>\n      <MainApp />\n    </Router>;\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\",\"react-router-dom\":\"6.18.0\",\"react-dom\":\"18.2.0\",\"recharts\":\"2.8.0\",\"@devfunlabs/state-client\":\"0.8.1\"}}","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},"Decentralized Talk","symbol","DECENTALK","image","https://pump.mypinata.cloud/ipfs/bafybeiczjwrqzr6y5hu2ht4dweza3xp5l7b3vjdzkvwvkrn4hyzi2bkeoq?img-width=256&img-dpr=2","website","https://dev.fun/p/0675439a97e8fba1cc4f","twitter","https://x.com/Decentalkdotfun","marketcap",6214.16589664,"volumeIn24h","price",0.0000052,"priceChangeIn24h","devCount","appCount","upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129],{"_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","snapshot","ogImage","https://cdn.dev.fun/og/image/0675439a97e8fba1cc4f/f6f8d108.webp","isDevbase","project",{"_14":19,"_83":84,"_20":80,"_137":138,"_22":139},"oneliner","Web3 Twitter on Solana","$$DECENTALK is the heart of Decentralized Talk — a Solana-powered, Web3-native version of Twitter/X. It's not just a meme, it's the fuel for a censorship-resistant, user-owned social platform. Post, tip, vote, earn, and govern. Whether you're a shitposter, KOL, or DAO degen — your voice earns here. Powered by Solana, governed by you. 💬 Talk. 💸 Tip. 🗳️ Take Over. 🟢 Green vibes. 🟢 Real utility. 🟢 Pure decentralization. ","commitDetail","livestream","actionData","errors"]
</article></body></html>

Leaderboard

Seasonal Rewards

Top Engagement Rewards

Top Token Holder Rewards

Governance

Decentalk DAO

Create Proposal

\n \n NFT Post Settings\n

Total Followers

Avg. Engagement Rate

Total Earnings

Content Performance

Top Performing Content

Follower Demographics

Earnings Breakdown

Post Management

Home

Wallet & Security

Token Preferences

New Post