'use client' import { useState, useEffect } from 'react' import dynamic from 'next/dynamic' import Link from 'next/link' import { useParams } from 'next/navigation' import { useLocale } from 'next-intl' import { useAccount } from 'wagmi' import type { TrumpPost, BotPerformance, Candle } from '@/types' import { useDashboardStore } from '@/store/dashboard' import { usePriceSocket } from '@/lib/useRealtimeData' import { getMacroSnapshot, getPerformance, getPrices, getUserPublic, type MacroSnapshot } from '@/lib/api' import { getCachedViewEnvelope } from '@/lib/signedRequest' import { swrFetch } from '@/lib/cache' import PostRow, { SignalPill, SourceIcon, fmtPct, TimeAgo, LocalDateTime } from '@/components/dashboard/PostCards' import OpenPositions from '@/components/positions/OpenPositions' import PageHint from '@/components/ui/PageHint' // Heavy components — lazy-loaded so they don't bloat the initial JS bundle. // ChartPanel pulls in lightweight-charts (~200KB gz); split it out. const ChartPanel = dynamic(() => import('@/components/dashboard/ChartPanel'), { ssr: false, loading: () =>
, }) interface Props { initialPosts: TrumpPost[] } // ── Inline post detail panel shown in the right rail ────────────────────────── function PostDetail({ post, onClose }: { post: TrumpPost; onClose: () => void }) { const impact = post.price_impact function fmtImpactPct(v: number | null | undefined) { if (v == null || isNaN(v)) return '—' const s = Math.abs(v).toFixed(2) + '%' return v >= 0 ? '+' + s : '-' + s } return (
{/* header */}
Signal detail
{/* source + time */}
@realDonaldTrump
·
{/* post text */}

{post.text}

{/* signal + sentiment */}
{post.sentiment}
{/* AI confidence */}
AI confidence {post.ai_confidence}%
{/* AI reasoning */} {post.ai_reasoning && ( <>
AI reasoning
{post.ai_reasoning}
)} {/* Price impact grid */} {impact && ( <>
Price impact · {impact.asset}
{([['m5', '5m'], ['m15', '15m'], ['m1h', '1h']] as const).map(([key, label]) => { const v = impact[key] const correct = impact[`correct_${key}` as 'correct_m5' | 'correct_m15' | 'correct_m1h'] return (
{label}
= 0 ? 'up' : 'down'}`} style={{ fontSize: 14, fontWeight: 600 }}> {fmtImpactPct(v)}
{correct != null && (
{correct ? '✓' : '✗'}
)}
) })}
)}
) } // ── Empty state for when nothing is selected ────────────────────────────────── function SelectHint() { return (

Click any marker on the chart or a post below to see details

) } // ── Main dashboard ───────────────────────────────────────────────────────────── export default function DashboardClient({ initialPosts }: Props) { const intlLocale = useLocale() const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json const { asset, setAsset, timeframe, setTimeframe: _setTimeframe, setLivePrice, setSubscribed, setBotReadiness, setHlApiKeySet, isSubscribed, hlApiKeySet, botReadiness, livePrices } = useDashboardStore() function setTimeframe(tf: string) { _setTimeframe(tf as '5m' | '15m' | '1H' | '4H' | '1D' | '1W') } const { address, isConnected } = useAccount() const params = useParams() const locale = (typeof params?.locale === 'string' ? params.locale : 'en') const [posts, setPosts] = useState(initialPosts) const [performance, setPerformance] = useState(undefined) const [candles, setCandles] = useState([]) const [chartErr, setChartErr] = useState('') const [chartReload, setChartReload] = useState(0) const [selectedPostId, setSelectedPostId] = useState(null) const [macro, setMacro] = useState(null) // For 1D: show all posts from selected day const [selectedDayPosts, setSelectedDayPosts] = useState(null) useEffect(() => { if (!isConnected || !address) { setSubscribed(false) setHlApiKeySet(false) setBotReadiness('unknown') setPerformance(undefined) return } // Clear account-scoped bot state immediately when the connected wallet // changes so a previous wallet's status never leaks into the next one. setSubscribed(false) setHlApiKeySet(false) setBotReadiness('unknown') getUserPublic(address.toLowerCase()) .then((user) => { setSubscribed(user.active) setHlApiKeySet(user.hl_api_key_set) setBotReadiness(user.hl_api_key_set ? 'saved' : 'unknown') }) .catch(() => {}) }, [address, isConnected, setSubscribed, setHlApiKeySet, setBotReadiness]) useEffect(() => { if (!isConnected || !address) { setPerformance(undefined) return } let cancelled = false ;(async () => { try { const env = getCachedViewEnvelope('view_performance', address) ?? getCachedViewEnvelope('view_user', address) if (!env) { if (!cancelled) setPerformance(undefined) return } const data = await getPerformance(address, env) if (!cancelled) setPerformance(data) } catch { if (!cancelled) setPerformance(undefined) } })() return () => { cancelled = true } }, [address, isConnected]) usePriceSocket({ onPrice: (a, price) => setLivePrice(a, price), onNewPost: (post) => setPosts((prev) => [post as TrumpPost, ...prev].slice(0, 500)), }) useEffect(() => { setCandles([]) setChartErr('') getPrices(asset, timeframe) .then(c => { setCandles(c); setChartErr('') }) .catch(e => setChartErr(e instanceof Error ? e.message : (isZh ? '价格数据加载失败' : 'Failed to load price data'))) // isZh intentionally excluded: it is a compile-time constant (always false) // and including it would restart the chart fetch on every render. // eslint-disable-next-line react-hooks/exhaustive-deps }, [asset, timeframe, chartReload]) useEffect(() => { let alive = true function load() { swrFetch( 'macro-snapshot', 10 * 60_000, () => getMacroSnapshot(), fresh => { if (alive) setMacro(fresh) }, ) .then((snap) => { if (alive) setMacro(snap) }) .catch(() => {}) } load() const id = setInterval(load, 10 * 60_000) return () => { alive = false; clearInterval(id) } }, []) const selectedPost = posts.find(p => p.id === selectedPostId) ?? null // Show actionable signals first (buy/short), then most recent hold/neutral. // Cap at 8 total so the list doesn't get too long. const actionable = posts.filter(p => p.signal === 'buy' || p.signal === 'short').slice(0, 4) const recentOthers = posts.filter(p => p.signal !== 'buy' && p.signal !== 'short').slice(0, 4) const recentPosts = [...actionable, ...recentOthers].slice(0, 8) const lastCandle = candles[candles.length - 1] // Live price beats the most recent candle close — the candle is only // refreshed when the user changes asset/timeframe, so without WS the number // is frozen at page load. const livePrice = livePrices[asset] const displayPrice = livePrice ?? lastCandle?.close ?? null // 24-hour change. Picking by candle index is wrong (200×4H = 33 days). // Find the candle whose `time` is closest to (now − 24h) and use its open. const now = lastCandle ? lastCandle.time : Math.floor(Date.now() / 1000) const target24h = now - 24 * 3600 let baseline24h: typeof lastCandle | undefined if (candles.length) { baseline24h = candles[0] for (const c of candles) { if (c.time <= target24h) baseline24h = c else break } } const priceChange = displayPrice != null && baseline24h ? ((displayPrice - baseline24h.open) / baseline24h.open) * 100 : 0 const totalPosts = posts.length const todayKey = new Date().toISOString().slice(0, 10) const signalsToday = posts.filter(p => p.published_at?.slice(0, 10) === todayKey).length const actionablePosts = posts.filter(p => p.signal === 'buy' || p.signal === 'short').length const trumpActionable = posts.filter(p => (p.source || '') === 'truth' && (p.signal === 'buy' || p.signal === 'short')).length const macroActionable = posts.filter(p => ((p.source || '') === 'btc_bottom_reversal' || (p.source || '') === 'funding_reversal') && (p.signal === 'buy' || p.signal === 'short')).length const kolMentions = posts.filter(p => (p.source || '') === 'kol').length const winRate = performance?.win_rate ?? 0 const netPnl = performance?.net_pnl_usd ?? 0 const hasPriceData = candles.length > 0 const hasPerformanceData = Boolean(performance) const macroScore = macro?.composite_score ?? null const macroRegime = macro?.regime_label ?? null const macroPct = macroScore == null ? 50 : Math.max(0, Math.min(100, (macroScore + 100) / 2)) const macroTone = macroScore == null ? 'neutral' : macroScore > 15 ? 'bull' : macroScore < -15 ? 'bear' : 'neutral' const macroSummary = macroScore == null ? 'Daily macro composite not loaded yet.' : macroTone === 'bull' ? 'Risk backdrop is supportive. Trend-following setups get more room.' : macroTone === 'bear' ? 'Backdrop is defensive. Preserve size and expect cleaner downside moves.' : 'Backdrop is mixed. Useful for context, not a blind directional trigger.' return (

{isZh ? '信号总览' : 'Signal monitor'}

Four signals that move crypto before the crowd sees them — Trump posts, BTC macro bottoms, funding extremes, and what KOLs do vs say. Tracked live, in public, every call timestamped.
Live feed
{/* Open positions — what's on the book right now. Renders only when a subscribed wallet is connected, so guests see the normal feed. */}
Market and macro
{displayPrice != null ? '$' + Math.round(displayPrice).toLocaleString() : '—'}
= 0 ? 'up' : 'down'}`}>{hasPriceData ? fmtPct(priceChange) : 'Feed pending'} · 24h
BTC spot with live signal context
{(['5m', '15m', '1H', '4H', '1D'] as const).map(t => ( ))}
Macro composite
today · 8 indicators
{macroSummary}
{macroScore == null ? '—' : `${macroScore > 0 ? '+' : ''}${macroScore.toFixed(1)}`}
{macroRegime ?? 'Waiting'}
−100 bear 0 neutral +100 bull
Trump {trumpActionable} Macro {macroActionable} KOL {kolMentions}
Signals today {signalsToday}
Execution
{actionablePosts}
actionable signals tracked in feed
Performance
{hasPerformanceData ? `${netPnl >= 0 ? '+$' : '-$'}${Math.abs(netPnl).toLocaleString('en-US', { maximumFractionDigits: 0 })}` : '—'}
{hasPerformanceData ? '30d bot net P&L' : 'Load settings once to unlock private performance'}
{/* Left: Chart + signal stream */}
Price · {asset}
{displayPrice != null ? '$' + Math.round(displayPrice).toLocaleString() : '—'}
= 0 ? 'up' : 'down'}`}>{hasPriceData ? fmtPct(priceChange) : 'Feed pending'} · 24h
Live chart with signal markers
{chartErr && (
⚠️ {asset} {timeframe} chart failed to load — {chartErr}{' '}
)}
{ setSelectedDayPosts(null) setSelectedPostId(id) }} onSelectDayPosts={(dayPosts) => { setSelectedDayPosts(dayPosts) setSelectedPostId(null) }} />
Buy signal
Short signal
Hold / filtered
{asset === 'BTC' &&
Macro reversal highlight
}
Binance candles via backend API · click marker to inspect
{/* Recent signals list */}

Recent signals

{actionable.length > 0 ? `${actionable.length} actionable · ` : ''} {`${totalPosts} tracked`}
{recentPosts.map(p => ( ))}
{/* Right rail */}
{/* Day-view: all posts from clicked day */} {selectedDayPosts ? (
{selectedDayPosts.length} posts · this candle
{selectedDayPosts.map(p => { const expanded = selectedPostId === p.id const impact = p.price_impact function fmtImpactPct(v: number | null | undefined) { if (v == null || isNaN(v)) return '—' const s = Math.abs(v).toFixed(2) + '%' return v >= 0 ? '+' + s : '-' + s } return (
{/* collapsed row — always visible */}
setSelectedPostId(expanded ? null : p.id)} style={{ padding:12, cursor:'pointer', background: expanded ? 'var(--bg-sunk)' : 'transparent' }}>
{p.sentiment}

{p.text}

{p.ai_confidence}% conf
{/* expanded detail */} {expanded && (
{p.ai_reasoning && ( <>
AI reasoning
{p.ai_reasoning}
)} {impact && ( <>
Price impact · {impact.asset}
{(['m5','m15','m1h'] as const).map((key) => { const label = key === 'm5' ? '5m' : key === 'm15' ? '15m' : '1h' const v = impact[key] const correct = impact[`correct_${key}` as 'correct_m5'|'correct_m15'|'correct_m1h'] return (
{label}
=0?'up':'down'}`} style={{ fontSize:13, fontWeight:600 }}> {fmtImpactPct(v)}
{correct != null && (
{correct ? '✓' : '✗'}
)}
) })}
)}
)}
) })}
) : selectedPost ? ( setSelectedPostId(null)} /> ) : ( )}
) }