first day of vibe coding

2026-04-20 22:11:18 +08:00
commit 1747fc489f
38 changed files with 15267 additions and 0 deletions
@@ -0,0 +1,124 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+import { useAccount } from 'wagmi'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+import type { BotPerformance } from '@/types'
+import { useDashboardStore } from '@/store/dashboard'
+import { formatPct, formatHold } from '@/lib/utils'
+
+const MOCK_PERFORMANCE: BotPerformance = {
+  period_days: 30,
+  total_trades: 89,
+  win_rate: 0.73,
+  net_pnl_usd: 12840,
+  avg_hold_seconds: 14 * 60,
+  max_drawdown_pct: 8.2,
+}
+
+interface BotPanelProps {
+  performance?: BotPerformance
+}
+
+export default function BotPanel({ performance = MOCK_PERFORMANCE }: BotPanelProps) {
+  const t = useTranslations('bot')
+  const { isSubscribed, setSubscribed } = useDashboardStore()
+  const { address, isConnected } = useAccount()
+  const { openConnectModal } = useConnectModal()
+  const [apiKey, setApiKey] = useState('')
+
+  const stats = [
+    { label: t('winRate'), value: formatPct(performance.win_rate * 100 - 100 + performance.win_rate * 100), display: `${Math.round(performance.win_rate * 100)}%` },
+    { label: t('netPnl'), value: `+$${performance.net_pnl_usd.toLocaleString()}`, positive: true },
+    { label: t('totalTrades'), value: String(performance.total_trades) },
+    { label: t('avgHold'), value: formatHold(performance.avg_hold_seconds) },
+  ]
+
+  return (
+    <div className="w-[300px] shrink-0 flex flex-col gap-3">
+      {/* Performance card */}
+      <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5">
+        <p className="text-[11px] uppercase tracking-wider text-[#555555] mb-4">
+          {t('title')} · {t('period')}
+        </p>
+        <div className="grid grid-cols-2 gap-3">
+          {stats.map((stat) => (
+            <div key={stat.label}>
+              <p className="text-[10px] text-[#555555] mb-0.5">{stat.label}</p>
+              <p className={`text-[16px] font-medium ${stat.positive ? 'text-[#4ade80]' : 'text-white'}`}>
+                {stat.display ?? stat.value}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="h-px bg-[#141414]" />
+
+      {/* Conditional bottom section */}
+      {!isConnected && (
+        <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 flex flex-col gap-3">
+          <p className="text-[14px] font-medium text-white">{t('connectCta')}</p>
+          <p className="text-[12px] text-[#555555] leading-relaxed">{t('connectDesc')}</p>
+          <button
+            onClick={openConnectModal}
+            className="w-full bg-[#f97316] text-black font-medium text-[13px] rounded-lg py-2.5 hover:bg-[#fb923c] transition-colors"
+          >
+            {t('connectWalletFree')}
+          </button>
+        </div>
+      )}
+
+      {isConnected && !isSubscribed && (
+        <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 flex flex-col gap-3">
+          <div className="flex items-center justify-between">
+            <p className="text-[13px] font-medium text-[#333333]">{t('settingsTitle')}</p>
+            <span className="text-[10px] text-[#333333] border border-[#1e1e1e] rounded-full px-2 py-0.5">
+              Locked
+            </span>
+          </div>
+          {/* Disabled API key input */}
+          <div className="opacity-40">
+            <label className="text-[11px] text-[#555555] block mb-1">{t('apiKeyLabel')}</label>
+            <input
+              disabled
+              placeholder={t('apiKeyPlaceholder')}
+              className="w-full bg-[#060606] border border-[#141414] rounded-lg px-3 py-2 text-[12px] text-[#333333] placeholder-[#222222] cursor-not-allowed"
+            />
+          </div>
+          <button
+            onClick={() => setSubscribed(true)}
+            className="w-full bg-[#f97316] text-black font-medium text-[13px] rounded-lg py-2.5 hover:bg-[#fb923c] transition-colors"
+          >
+            {t('subscribeBtn')}
+          </button>
+        </div>
+      )}
+
+      {isConnected && isSubscribed && (
+        <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 flex flex-col gap-3">
+          <div className="flex items-center justify-between">
+            <p className="text-[13px] font-medium text-white">{t('settingsTitle')}</p>
+            <span className="text-[10px] text-[#4ade80] border border-[#1a4a2a] bg-[#0d2e1a] rounded-full px-2 py-0.5">
+              {t('activeStatus')}
+            </span>
+          </div>
+          <div>
+            <label className="text-[11px] text-[#555555] block mb-1">{t('apiKeyLabel')}</label>
+            <input
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={t('apiKeyPlaceholder')}
+              className="w-full bg-[#060606] border border-[#141414] rounded-lg px-3 py-2 text-[12px] text-white placeholder-[#333333] focus:outline-none focus:border-[#222222]"
+            />
+          </div>
+          <button className="w-full bg-[#141414] text-white border border-[#1a1a1a] text-[13px] rounded-lg py-2 hover:bg-[#0d0d0d] transition-colors">
+            {t('saveKey')}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}