Deploy Your Project

\n Launch your token across multiple platforms with just a few clicks.\n

\n \n {}\n

\n {[1, 2, 3].map(stepNumber =>

\n {stepNumber < step ? : stepNumber}\n

\n \n {stepNumber === 1 ? 'Project Details' : stepNumber === 2 ? 'Select Platforms' : 'Deploy'}\n \n

)}\n

\n \n

\n \n {}\n

\n {step === 1 && \n

Project Details

\n \n Token Name*\n \n \n

\n \n

\n \n Token Symbol*\n \n \n

\n \n

\n \n Description\n \n

\n                      </div>\n                      \n                      <div>\n                        <label htmlFor=\"supply\" className=\"block text-sm font-medium mb-2\">\n                          Total Supply\n                        </label>\n                        <input type=\"text\" id=\"supply\" name=\"supply\" value={formData.supply} onChange={handleFormChange} placeholder=\"e.g. 1000000000\" className=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none\" />\n                      </div>\n                      \n                      <div>\n                        <label htmlFor=\"logoUrl\" className=\"block text-sm font-medium mb-2\">\n                          Logo URL\n                        </label>\n                        <input type=\"text\" id=\"logoUrl\" name=\"logoUrl\" value={formData.logoUrl} onChange={handleFormChange} placeholder=\"https://example.com/logo.png\" className=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none\" />\n                      </div>\n                      \n                      <div>\n                        <label htmlFor=\"website\" className=\"block text-sm font-medium mb-2\">\n                          Website\n                        </label>\n                        <input type=\"text\" id=\"website\" name=\"website\" value={formData.website} onChange={handleFormChange} placeholder=\"https://yourtoken.com\" className=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none\" />\n                      </div>\n                      \n                      <div>\n                        <label htmlFor=\"twitter\" className=\"block text-sm font-medium mb-2\">\n                          Twitter\n                        </label>\n                        <input type=\"text\" id=\"twitter\" name=\"twitter\" value={formData.twitter} onChange={handleFormChange} placeholder=\"@yourtoken\" className=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none\" />\n                      </div>\n                      \n                      <div>\n                        <label htmlFor=\"telegram\" className=\"block text-sm font-medium mb-2\">\n                          Telegram\n                        </label>\n                        <input type=\"text\" id=\"telegram\" name=\"telegram\" value={formData.telegram} onChange={handleFormChange} placeholder=\"https://t.me/yourtoken\" className=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none\" />\n                      </div>\n                    </div>\n                  </motion.div>}\n                \n                {step === 2 && <motion.div 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            }}>\n                    <h3 className=\"text-xl font-semibold mb-4\">Select Platforms</h3>\n                    <p className=\"text-slate-300 mb-6\">\n                      Choose the platforms where you want to deploy your token. Each platform has different\n                      audiences and requirements.\n                    </p>\n                    \n                    <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                      {platforms.map(platform => <div key={platform.id} className={`border rounded-xl overflow-hidden transition-all ${selectedPlatforms[platform.id] ? `border-2 ${platform.style} shadow-lg shadow-${platform.color.split(' ')[1]}/20` : 'border-slate-700'}`}>\n                          <div className={`p-4 flex items-center justify-between ${selectedPlatforms[platform.id] ? platform.style : 'bg-slate-800'}`}>\n                            <div className=\"flex items-center gap-3\">\n                              <span className=\"text-2xl\">{platform.logo}</span>\n                              <h4 className=\"font-bold\">{platform.name}</h4>\n                            </div>\n                            <div className=\"flex items-center gap-4\">\n                              <button type=\"button\" onClick={() => handleExpandPlatform(platform.id)} className=\"text-white/80 hover:text-white\">\n                                <ChevronDown size={20} className={`transition-transform ${platformExpanded === platform.id ? 'rotate-180' : ''}`} />\n                              </button>\n                              <label className=\"relative inline-flex items-center cursor-pointer\">\n                                <input type=\"checkbox\" className=\"sr-only peer\" checked={selectedPlatforms[platform.id]} onChange={() => togglePlatform(platform.id)} />\n                                <div className=\"w-11 h-6 bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-400 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500\"></div>\n                              </label>\n                            </div>\n                          </div>\n                          \n                          {platformExpanded === platform.id && <div className=\"p-4 bg-slate-900/50 space-y-4\">\n                              <p className=\"text-sm\">{platform.description}</p>\n                              <div className=\"grid grid-cols-2 gap-4\">\n                                <div className=\"bg-slate-800/50 p-3 rounded-lg\">\n                                  <h5 className=\"text-xs text-slate-400 mb-1\">Platform Fee</h5>\n                                  <p className=\"font-medium\">{platform.fee}</p>\n                                </div>\n                                <div className=\"bg-slate-800/50 p-3 rounded-lg\">\n                                  <h5 className=\"text-xs text-slate-400 mb-1\">Audience</h5>\n                                  <p className=\"font-medium\">{platform.audiences}</p>\n                                </div>\n                              </div>\n                              <div className=\"pt-2\">\n                                <a href=\"#\" className=\"text-sm text-indigo-400 hover:text-indigo-300 inline-flex items-center gap-1\">\n                                  View platform details\n                                  <ExternalLink size={14} />\n                                </a>\n                              </div>\n                            </div>}\n                        </div>)}\n                    </div>\n                  </motion.div>}\n                \n                {step === 3 && <motion.div 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            }}>\n                    <h3 className=\"text-xl font-semibold mb-4\">Review & Deploy</h3>\n                    \n                    {!isDeploying && !deploymentSuccess ? <>\n                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n                          <div className=\"bg-slate-900/50 rounded-lg p-4 space-y-4\">\n                            <h4 className=\"font-medium border-b border-slate-700 pb-2\">Token Information</h4>\n                            <div className=\"space-y-2\">\n                              <div className=\"flex justify-between\">\n                                <span className=\"text-slate-400\">Name:</span>\n                                <span className=\"font-medium\">{formData.name || 'Not specified'}</span>\n                              </div>\n                              <div className=\"flex justify-between\">\n                                <span className=\"text-slate-400\">Symbol:</span>\n                                <span className=\"font-medium\">{formData.symbol || 'Not specified'}</span>\n                              </div>\n                              <div className=\"flex justify-between\">\n                                <span className=\"text-slate-400\">Supply:</span>\n                                <span className=\"font-medium\">{formData.supply.toLocaleString() || 'Not specified'}</span>\n                              </div>\n                            </div>\n                          </div>\n                          \n                          <div className=\"bg-slate-900/50 rounded-lg p-4\">\n                            <h4 className=\"font-medium border-b border-slate-700 pb-2 mb-4\">Selected Platforms</h4>\n                            <div className=\"space-y-2\">\n                              {platforms.map(platform => selectedPlatforms[platform.id] && <div key={platform.id} className=\"flex items-center gap-2\">\n                                    <span className=\"text-lg\">{platform.logo}</span>\n                                    <span>{platform.name}</span>\n                                  </div>)}\n                              \n                              {!Object.values(selectedPlatforms).some(Boolean) && <p className=\"text-yellow-500\">No platforms selected</p>}\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <div className=\"bg-indigo-900/20 border border-indigo-800/50 rounded-lg p-4 mb-8\">\n                          <div className=\"flex items-start gap-3\">\n                            <div className=\"text-indigo-400 mt-1\">\n                              <AlertCircle size={20} />\n                            </div>\n                            <div>\n                              <h4 className=\"font-medium text-indigo-300 mb-1\">Ready to deploy</h4>\n                              <p className=\"text-sm text-indigo-200\">\n                                You're about to deploy your token to {Object.values(selectedPlatforms).filter(Boolean).length} platform(s).\n                                This action will require you to approve transactions in your wallet. Make sure you have enough SOL to cover the fees.\n                              </p>\n                            </div>\n                          </div>\n                        </div>\n                      </> : isDeploying ? <div className=\"space-y-8\">\n                        <div className=\"flex justify-center\">\n                          <motion.div initial={{\n                    y: 0\n                  }} animate={{\n                    y: [0, -10, 0]\n                  }} transition={{\n                    repeat: Infinity,\n                    duration: 1.5\n                  }} className=\"relative\">\n                            <motion.div initial={{\n                      scale: 1\n                    }} animate={{\n                      scale: [1, 1.05, 1]\n                    }} transition={{\n                      repeat: Infinity,\n                      duration: 1.5\n                    }} className=\"text-6xl\">\n                              🚀\n                            </motion.div>\n                            <motion.div initial={{\n                      opacity: 0,\n                      width: 0,\n                      height: 0\n                    }} animate={{\n                      opacity: [0, 1, 0],\n                      width: [0, 40, 60],\n                      height: [0, 40, 60]\n                    }} transition={{\n                      repeat: Infinity,\n                      duration: 1\n                    }} className=\"absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-indigo-500/30 rounded-full z-[-1]\" />\n                          </motion.div>\n                        </div>\n                        \n                        <div className=\"text-center\">\n                          <h4 className=\"text-xl font-medium mb-2\">Deploying your token...</h4>\n                          <p className=\"text-slate-300 mb-6\">This might take a few moments. Please approve any wallet transactions.</p>\n                        </div>\n                        \n                        <div className=\"space-y-4 max-w-lg mx-auto\">\n                          {deployments.map((deployment, index) => <div key={index} className=\"flex items-center justify-between bg-slate-800/50 rounded-lg p-3\">\n                              <div className=\"flex items-center gap-3\">\n                                <span className=\"text-xl\">\n                                  {platforms.find(p => p.name === deployment.platform)?.logo}\n                                </span>\n                                <span>{deployment.platform}</span>\n                              </div>\n                              <div>\n                                {deployment.status === 'pending' && <div className=\"flex items-center gap-2 text-yellow-400\">\n                                    <Loader2 size={18} className=\"animate-spin\" />\n                                    <span>Deploying...</span>\n                                  </div>}\n                                \n                                {deployment.status === 'success' && <div className=\"flex items-center gap-2 text-green-400\">\n                                    <CheckCircle size={18} />\n                                    <span>Deployed</span>\n                                  </div>}\n                                \n                                {deployment.status === 'failed' && <div className=\"flex items-center gap-2 text-red-400\">\n                                    <AlertCircle size={18} />\n                                    <span>Failed</span>\n                                  </div>}\n                              </div>\n                            </div>)}\n                        </div>\n                      </div> : <div className=\"space-y-8 text-center\">\n                        <div className=\"flex justify-center\">\n                          <motion.div initial={{\n                    rotate: 0,\n                    scale: 1\n                  }} animate={{\n                    rotate: 360,\n                    scale: [1, 1.2, 1]\n                  }} transition={{\n                    duration: 2\n                  }} className=\"text-6xl\">\n                            🎉\n                          </motion.div>\n                        </div>\n                        \n                        <div>\n                          <h3 className=\"text-2xl font-bold mb-2 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent\">\n                            Deployment Successful!\n                          </h3>\n                          <p className=\"text-slate-300 mb-6\">\n                            Your token {formData.name} ({formData.symbol}) has been deployed successfully.\n                          </p>\n                        </div>\n                        \n                        <div className=\"space-y-4 max-w-lg mx-auto\">\n                          {deployments.map((deployment, index) => <div key={index} className=\"flex items-center justify-between bg-slate-800/50 rounded-lg p-3\">\n                              <div className=\"flex items-center gap-3\">\n                                <span className=\"text-xl\">\n                                  {platforms.find(p => p.name === deployment.platform)?.logo}\n                                </span>\n                                <span>{deployment.platform}</span>\n                              </div>\n                              <div className=\"flex items-center gap-2\">\n                                {deployment.status === 'success' ? <div className=\"flex items-center text-green-400\">\n                                    <CheckCircle size={18} />\n                                    <span className=\"ml-1 mr-2\">Success</span>\n                                    <button className=\"text-slate-400 hover:text-white transition-colors\" title=\"Copy Transaction ID\">\n                                      <Copy size={16} />\n                                    </button>\n                                  </div> : <div className=\"flex items-center text-red-400\">\n                                    <AlertCircle size={18} />\n                                    <span>Failed</span>\n                                  </div>}\n                              </div>\n                            </div>)}\n                        </div>\n                        \n                        <div className=\"pt-4 flex justify-center\">\n                          <button onClick={resetDeployment} className=\"px-8 py-3 bg-indigo-500 hover:bg-indigo-600 rounded-lg font-medium transition-colors\">\n                            Deploy Another Token\n                          </button>\n                        </div>\n                      </div>}\n                  </motion.div>}\n              </div>\n              \n              {}\n              {!deploymentSuccess && <div className=\"flex justify-between\">\n                  <button onClick={handlePrevStep} disabled={step === 1} className={`px-6 py-2 rounded-lg border border-slate-600 ${step === 1 ? 'bg-slate-700/30 text-slate-500 cursor-not-allowed' : 'bg-slate-800 hover:bg-slate-700 text-white'} transition-colors`}>\n                    Back\n                  </button>\n                  \n                  {step < 3 ? <button onClick={handleNextStep} className=\"px-6 py-2 bg-indigo-500 hover:bg-indigo-600 rounded-lg transition-colors\">\n                      Continue\n                    </button> : !isDeploying && <button onClick={handleDeploy} disabled={!Object.values(selectedPlatforms).some(Boolean)} className={`px-6 py-2 rounded-lg flex items-center gap-2 transition-colors ${!Object.values(selectedPlatforms).some(Boolean) ? 'bg-indigo-500/50 cursor-not-allowed' : 'bg-indigo-500 hover:bg-indigo-600'}`}>\n                        <Rocket size={18} />\n                        Deploy Now\n                      </button>}\n                </div>}\n            </div>}\n          \n          {activeTab === 'history' && <div>\n              <div className=\"mb-8\">\n                <h2 className=\"text-3xl font-bold mb-2\">Deployment History</h2>\n                <p className=\"text-slate-300\">\n                  View your past token deployments across all platforms.\n                </p>\n              </div>\n              \n              <div className=\"bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 border border-slate-700/50\">\n                <div className=\"overflow-x-auto\">\n                  <table className=\"w-full\">\n                    <thead>\n                      <tr className=\"border-b border-slate-700\">\n                        <th className=\"text-left py-3 px-4\">Date</th>\n                        <th className=\"text-left py-3 px-4\">Token</th>\n                        <th className=\"text-left py-3 px-4\">Platforms</th>\n                        <th className=\"text-left py-3 px-4\">Status</th>\n                        <th className=\"text-left py-3 px-4\">Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      {deploymentHistory.map((deployment, index) => <tr key={index} className=\"border-b border-slate-700/50 hover:bg-slate-700/20 transition-colors\">\n                          <td className=\"py-3 px-4\">{deployment.date}</td>\n                          <td className=\"py-3 px-4\">\n                            <div>\n                              <div>{deployment.name}</div>\n                              <div className=\"text-slate-400 text-sm\">{deployment.symbol}</div>\n                            </div>\n                          </td>\n                          <td className=\"py-3 px-4\">\n                            <div className=\"flex gap-1\">\n                              {deployment.platforms.map((platform, i) => <div key={i} className=\"inline-flex items-center bg-slate-700 rounded-full px-2 py-1 text-xs\">\n                                  <span className=\"mr-1\">\n                                    {platform === 'PumpFun' ? '🎪' : platform === 'Bonk.fun' ? '🐕' : '🚀'}\n                                  </span>\n                                  {platform}\n                                </div>)}\n                            </div>\n                          </td>\n                          <td className=\"py-3 px-4\">\n                            {deployment.status === 'success' ? <span className=\"inline-flex items-center gap-1 text-green-400\">\n                                <CheckCircle size={14} />\n                                Success\n                              </span> : <span className=\"inline-flex items-center gap-1 text-red-400\">\n                                <AlertCircle size={14} />\n                                Failed\n                              </span>}\n                          </td>\n                          <td className=\"py-3 px-4\">\n                            <div className=\"flex gap-2\">\n                              <button className=\"p-1 bg-slate-700 rounded hover:bg-slate-600 transition-colors\">\n                                <ExternalLink size={14} />\n                              </button>\n                              <button className=\"p-1 bg-slate-700 rounded hover:bg-slate-600 transition-colors\">\n                                <Copy size={14} />\n                              </button>\n                            </div>\n                          </td>\n                        </tr>)}\n                    </tbody>\n                  </table>\n                </div>\n                \n                {deploymentHistory.length === 0 && <div className=\"text-center py-12\">\n                    <p className=\"text-slate-400\">You haven't deployed any tokens yet.</p>\n                    <button onClick={() => setActiveTab('deploy')} className=\"mt-4 px-6 py-2 bg-indigo-500 hover:bg-indigo-600 rounded-lg transition-colors\">\n                      Deploy Your First Token\n                    </button>\n                  </div>}\n              </div>\n            </div>}\n          \n          {activeTab === 'settings' && <div>\n              <div className=\"mb-8\">\n                <h2 className=\"text-3xl font-bold mb-2\">Settings</h2>\n                <p className=\"text-slate-300\">\n                  Configure your deployment preferences and account settings.\n                </p>\n              </div>\n              \n              <div className=\"bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 border border-slate-700/50 mb-6\">\n                <h3 className=\"text-xl font-semibold mb-4\">Platform Preferences</h3>\n                <div className=\"space-y-6\">\n                  <div className=\"flex items-center justify-between pb-4 border-b border-slate-700/50\">\n                    <div>\n                      <h4 className=\"font-medium\">Default Platform Selection</h4>\n                      <p className=\"text-sm text-slate-400\">\n                        Select which platforms are enabled by default when creating a new deployment\n                      </p>\n                    </div>\n                    <button className=\"px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors\">\n                      Edit\n                    </button>\n                  </div>\n                  \n                  <div className=\"flex items-center justify-between pb-4 border-b border-slate-700/50\">\n                    <div>\n                      <h4 className=\"font-medium\">Default Token Parameters</h4>\n                      <p className=\"text-sm text-slate-400\">\n                        Set your preferred defaults for token supply, decimals, and other parameters\n                      </p>\n                    </div>\n                    <button className=\"px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors\">\n                      Edit\n                    </button>\n                  </div>\n                  \n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <h4 className=\"font-medium\">API Keys</h4>\n                      <p className=\"text-sm text-slate-400\">\n                        Manage your API keys for automated deployments\n                      </p>\n                    </div>\n                    <button className=\"px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors\">\n                      Manage\n                    </button>\n                  </div>\n                </div>\n              </div>\n              \n              <div className=\"bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 border border-slate-700/50\">\n                <h3 className=\"text-xl font-semibold mb-4\">Account Settings</h3>\n                <div className=\"space-y-6\">\n                  <div className=\"flex items-center justify-between pb-4 border-b border-slate-700/50\">\n                    <div>\n                      <h4 className=\"font-medium\">Notification Preferences</h4>\n                      <p className=\"text-sm text-slate-400\">\n                        Choose how and when you receive notifications about your deployments\n                      </p>\n                    </div>\n                    <button className=\"px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors\">\n                      Edit\n                    </button>\n                  </div>\n                  \n                  <div className=\"flex items-center justify-between pb-4 border-b border-slate-700/50\">\n                    <div>\n                      <h4 className=\"font-medium\">Theme Settings</h4>\n                      <p className=\"text-sm text-slate-400\">\n                        Customize the appearance of your dashboard\n                      </p>\n                    </div>\n                    <button className=\"px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors\">\n                      Edit\n                    </button>\n                  </div>\n                  \n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <h4 className=\"font-medium\">Connected Wallets</h4>\n                      <p className=\"text-sm text-slate-400\">\n                        Manage wallets used for token deployments\n                      </p>\n                    </div>\n                    <button className=\"px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors\">\n                      Manage\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>}\n        </div>\n      </main>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-dom\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"canvas-confetti\":\"1.9.2\"}}","token","upstreamApp","isLordOfDev","analytics",[76,80,82,84,86,88,90,92,94,96,98,100,102,104],{"_77":78,"_79":40},"day","2025-05-04","runCount",{"_77":81,"_79":40},"2025-05-05",{"_77":83,"_79":40},"2025-05-06",{"_77":85,"_79":40},"2025-05-07",{"_77":87,"_79":40},"2025-05-08",{"_77":89,"_79":40},"2025-05-09",{"_77":91,"_79":40},"2025-05-10",{"_77":93,"_79":40},"2025-05-11",{"_77":95,"_79":40},"2025-05-12",{"_77":97,"_79":40},"2025-05-13",{"_77":99,"_79":40},"2025-05-14",{"_77":101,"_79":40},"2025-05-15",{"_77":103,"_79":40},"2025-05-16",{"_77":105,"_79":40},"2025-05-17","snapshot","ogImage","https://cdn.dev.fun/og/image/0aa78139196c763f6df1/4f726407.webp","actionData","errors"]
</article></body></html>

say something