Z/trumpsignal-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pre-launch UI hardening + KOL reduce-action type, proxy IP relay, settings redesign

Browse Source 
Frontend half of the pre-launch audit campaign:

- types/index.ts + kol/KolPageClient.tsx: add missing 'reduce' KolAction
  (backend emits it; frontend lacked the type + color/label maps → undefined
  styling). Adds ACTION_COLOR/actionLabel/postActionLabel entries.
- proxy/[...path]/route.ts: relay real client IP (x-forwarded-for / x-real-ip)
  so the backend rate limiter buckets per-user instead of per-Next-server (BUG-02).
- Settings/BotConfigPanel redesign, paper-mode clarity, copy cleanup.
- Assorted page/display fixes, loading states, Pagination component.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
k
2026-05-29 11:57:43 +08:00
parent b76de36af0
commit d50c05b120
32 changed files with 1003 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/DashboardClient.tsx
+12 -2
View File
@@ -1,6 +1,7 @@
'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'
@@ -11,11 +12,17 @@ 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 ChartPanel from '@/components/dashboard/ChartPanel'
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: () => <div style={{ height: 320, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 16 }} />,
})
interface Props {
initialPosts: TrumpPost[]
}
@@ -211,7 +218,10 @@ export default function DashboardClient({ initialPosts }: Props) {
getPrices(asset, timeframe)
.then(c => { setCandles(c); setChartErr('') })
.catch(e => setChartErr(e instanceof Error ? e.message : (isZh ? '价格数据加载失败' : 'Failed to load price data')))
}, [asset, timeframe, chartReload, isZh])
// 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
app/[locale]/archive/page.tsx
+21 -5
View File
@@ -6,6 +6,9 @@ import type { TrumpPost } from '@/types'
import { getPosts } from '@/lib/api'
import PostRow from '@/components/dashboard/PostCards'
import PageHint from '@/components/ui/PageHint'
import Pagination from '@/components/ui/Pagination'
const ARCHIVE_PAGE_SIZE = 30
const LIVE_SOURCES = new Set([
'truth',
@@ -25,6 +28,7 @@ export default function ArchivePage() {
const [loading, setLoading] = useState(true)
const [loadErr, setLoadErr] = useState('')
const [src, setSrc] = useState<string>('all')
const [archivePage, setArchivePage] = useState(1)
useEffect(() => {
getPosts(500, 1)
@@ -49,6 +53,9 @@ export default function ArchivePage() {
() => src === 'all' ? archivePosts : archivePosts.filter(p => p.source === src),
[archivePosts, src],
)
const archiveTotalPages = Math.max(1, Math.ceil(filtered.length / ARCHIVE_PAGE_SIZE))
const archiveSafePage = Math.min(archivePage, archiveTotalPages)
const archivePageItems = filtered.slice((archiveSafePage - 1) * ARCHIVE_PAGE_SIZE, archiveSafePage * ARCHIVE_PAGE_SIZE)
return (
<div className="page">
@@ -67,7 +74,7 @@ export default function ArchivePage() {
{[['all', archivePosts.length] as [string, number], ...sources].map(([s, n]) => (
<button
key={s}
onClick={() => setSrc(s)}
onClick={() => { setSrc(s); setArchivePage(1) }}
style={{
padding: '4px 10px', borderRadius: 6, border: '1px solid var(--line)',
background: src === s ? 'var(--ink)' : 'transparent',
@@ -95,10 +102,19 @@ export default function ArchivePage() {
{isZh ? '没有可显示的历史信号。' : 'No archived signals.'}
</div>
)}
{!loading && filtered.length > 0 && (
<div className="post-stream">
{filtered.map(p => <PostRow key={p.id} post={p} />)}
</div>
{!loading && archivePageItems.length > 0 && (
<>
<div className="post-stream">
{archivePageItems.map(p => <PostRow key={p.id} post={p} />)}
</div>
<Pagination
page={archiveSafePage}
total={archiveTotalPages}
count={filtered.length}
pageSize={ARCHIVE_PAGE_SIZE}
onChange={setArchivePage}
/>
</>
)}
</div>
)
app/[locale]/globals.css
+8 -8
View File
@@ -363,7 +363,7 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2);
.page {
max-width: 1360px;
margin: 0 auto;
padding: 32px 28px 80px;
padding: 28px 28px 64px;
width: 100%;
}
.page.wide { max-width: 1600px; }
@@ -372,20 +372,20 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2);
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 28px;
margin-bottom: 24px;
gap: 24px;
}
.page-title {
font-size: 34px;
letter-spacing: -0.02em;
font-weight: 600;
line-height: 1.05;
font-size: 28px;
letter-spacing: -0.025em;
font-weight: 700;
line-height: 1.1;
margin: 0;
}
.page-sub {
color: var(--ink-3);
font-size: 14px;
margin-top: 6px;
font-size: 13px;
margin-top: 5px;
margin-bottom: 0;
}
app/[locale]/kol/KolPageClient.tsx
+26 -5
View File
@@ -10,6 +10,7 @@ import type {
import { getKolPosts, getKolPost, getKolDigest, getKolChanges, getKolDivergence } from '@/lib/api'
import { swrFetch } from '@/lib/cache'
import PageHint from '@/components/ui/PageHint'
import Pagination from '@/components/ui/Pagination'
/**
* KOL feed — independent module. Lists analyzed posts from tracked KOLs
@@ -22,6 +23,7 @@ const ACTION_COLOR: Record<KolTicker['action'], string> = {
bullish: '#16a34a',
sell: '#dc2626',
bearish: '#dc2626',
reduce: '#f59e0b',
mention: '#9ca3af',
}
@@ -31,6 +33,7 @@ function actionLabel(action: KolTicker['action'], isZh: boolean) {
const labels: Record<KolTicker['action'], string> = {
buy: 'BUY',
sell: 'SELL',
reduce: 'Reduce',
bullish: 'Bullish',
bearish: 'Bearish',
mention: 'Mention',
@@ -78,6 +81,7 @@ function postActionLabel(action: string, isZh: boolean) {
const labels: Record<string, string> = {
buy: 'BUY',
sell: 'SELL',
reduce: 'Reducing',
bullish: 'Bullish post',
bearish: 'Bearish post',
}
@@ -780,12 +784,14 @@ export default function KolPage({
const locale = useLocale()
const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
const dateLocale = isZh ? 'zh-CN' : 'en-US'
const KOL_PAGE_SIZE = 20
const [posts, setPosts] = useState<KolPostSummary[]>(initialPosts ?? [])
const [loading, setLoading] = useState(initialPosts === null)
const [err, setErr] = useState('')
const [openPost, setOpenPost] = useState<KolPostDetail | null>(null)
const [handleFilter, setHandleFilter] = useState<string>('all')
const [tickerFilter, setTickerFilter] = useState<string | null>(null)
const [kolPage, setKolPage] = useState(1)
useEffect(() => {
swrFetch(
@@ -812,6 +818,10 @@ export default function KolPage({
return out
}, [posts, handleFilter, tickerFilter])
const kolTotalPages = Math.max(1, Math.ceil(filtered.length / KOL_PAGE_SIZE))
const kolSafePage = Math.min(kolPage, kolTotalPages)
const kolPageItems = filtered.slice((kolSafePage - 1) * KOL_PAGE_SIZE, kolSafePage * KOL_PAGE_SIZE)
async function openDetail(id: number) {
try {
const detail = await getKolPost(id)
@@ -837,8 +847,10 @@ export default function KolPage({
isZh={isZh}
initialDigest={initialDigest}
activeTicker={tickerFilter}
onTickerClick={(sym) =>
setTickerFilter(prev => prev === sym ? null : sym)}
onTickerClick={(sym) => {
setTickerFilter(prev => prev === sym ? null : sym)
setKolPage(1)
}}
/>
<WalletCheckWidget
@@ -858,7 +870,7 @@ export default function KolPage({
<span style={{ color: 'var(--ink-3)' }}>{isZh ? '当前筛选标的：' : 'Filtered asset:'}</span>
<strong>{tickerFilter}</strong>
<button
onClick={() => setTickerFilter(null)}
onClick={() => { setTickerFilter(null); setKolPage(1) }}
style={{
background: 'var(--bg-sunk)', border: '1px solid var(--line)',
borderRadius: 4, padding: '2px 8px',
@@ -873,7 +885,7 @@ export default function KolPage({
{handles.map(h => (
<button
key={h}
onClick={() => setHandleFilter(h)}
onClick={() => { setHandleFilter(h); setKolPage(1) }}
className={`nav-tab ${handleFilter === h ? 'active' : ''}`}
style={{ border: 'none', cursor: 'pointer' }}
>
@@ -895,7 +907,7 @@ export default function KolPage({
: 'No data yet. Wait for the next feed ingestion run (daily 01:15 UTC).'}
</div>
)}
{filtered.map(p => (
{kolPageItems.map(p => (
<div
key={p.id}
onClick={() => openDetail(p.id)}
@@ -954,6 +966,15 @@ export default function KolPage({
<TickerChips tickers={p.tickers} isZh={isZh} />
</div>
))}
<Pagination
page={kolSafePage}
total={kolTotalPages}
count={filtered.length}
pageSize={KOL_PAGE_SIZE}
onChange={setKolPage}
scrollTop={false}
/>
</div>
)}
app/[locale]/macro/MacroVibesPageClient.tsx
+7 -1
View File
@@ -1,6 +1,7 @@
'use client'
import { useState, useEffect, useMemo } from 'react'
import dynamic from 'next/dynamic'
import { useLocale } from 'next-intl'
import type { TrumpPost } from '@/types'
import { getPosts, getFundingSnapshot, type FundingSnapshot } from '@/lib/api'
@@ -9,7 +10,12 @@ import PostRow from '@/components/dashboard/PostCards'
import SystemControl from '@/components/signals/SystemControl'
import InfoTip from '@/components/ui/InfoTip'
import PageHint from '@/components/ui/PageHint'
import MacroPanel from '@/components/btc/MacroPanel'
// MacroPanel is 631 lines with heavy indicator math — split it out.
const MacroPanel = dynamic(() => import('@/components/btc/MacroPanel'), {
ssr: false,
loading: () => <div style={{ height: 280, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 20 }} />,
})
/**
* System 2 — BTC bottom-reversal. Its own dedicated page.
app/[locale]/settings/SettingsClient.tsx
+7 -1
View File
@@ -1,14 +1,20 @@
'use client'
import { useState, useEffect } from 'react'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useLocale } from 'next-intl'
import { useAccount } from 'wagmi'
import BotConfigPanel from '@/components/trades/BotConfigPanel'
import TelegramCard from '@/components/telegram/TelegramCard'
import PageHint from '@/components/ui/PageHint'
// BotConfigPanel is 867 lines and only needed after wallet connect — lazy load it.
const BotConfigPanel = dynamic(() => import('@/components/trades/BotConfigPanel'), {
ssr: false,
loading: () => <div style={{ height: 200, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 16 }} />,
})
/**
* Settings page — the home for all configuration.
*
app/[locale]/trades/TradesPageClient.tsx
+3 -1
View File
@@ -69,7 +69,9 @@ export default function TradesPageClient() {
}
})()
return () => { cancelled = true }
}, [address, isConnected, isZh])
// isZh intentionally excluded: compile-time constant (always false).
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [address, isConnected])
const needsSetup = mounted && isConnected && (!isSubscribed || !hlApiKeySet)
app/[locale]/trades/loading.tsx
+21
View File
@@ -0,0 +1,21 @@
export default function TradesLoading() {
return (
<div className="page">
<div className="page-head">
<div className="skeleton sk-title" style={{ width: 140, marginBottom: 8 }} />
</div>
<div style={{ marginTop: 16 }}>
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="skeleton-card" style={{ marginBottom: 8, padding: 16 }}>
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
<div className="skeleton sk-line" style={{ width: 40 }} />
<div className="skeleton sk-line" style={{ width: 60 }} />
<div className="skeleton sk-line" style={{ width: 80 }} />
<div className="skeleton sk-line" style={{ width: 100 }} />
</div>
</div>
))}
</div>
</div>
)
}
app/[locale]/trump/TrumpPageClient.tsx
+44 -30
View File
@@ -9,11 +9,9 @@ import PostRow from '@/components/dashboard/PostCards'
import SystemControl from '@/components/signals/SystemControl'
import PageHint from '@/components/ui/PageHint'
import InfoTip from '@/components/ui/InfoTip'
import Pagination from '@/components/ui/Pagination'
/**
* System 1 — Trump (event-driven scalp). Its own dedicated page.
* Shows ONLY source === 'truth'. No scanner panel (that's System 2).
*/
const PAGE_SIZE = 30
const SENTIMENTS = ['all', 'bullish', 'bearish', 'neutral'] as const
type SentimentFilter = (typeof SENTIMENTS)[number]
@@ -25,29 +23,32 @@ interface TrumpSignalPageProps {
export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPageProps) {
const locale = useLocale()
const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
const [posts, setPosts] = useState<TrumpPost[]>(initialPosts ?? [])
const [loading, setLoading] = useState(initialPosts === null)
const [loadErr, setLoadErr] = useState('')
const isZh = false
const [posts, setPosts] = useState<TrumpPost[]>(initialPosts ?? [])
const [loading, setLoading] = useState(initialPosts === null)
const [loadErr, setLoadErr] = useState('')
const [sentFilter, setSentFilter] = useState<SentimentFilter>('all')
const [sigFilter, setSigFilter] = useState<SignalFilter>('all')
const [page, setPage] = useState(1)
useEffect(() => {
swrFetch(
'posts-500',
3 * 60_000, // 3 min TTL
3 * 60_000,
() => getPosts(500, 1),
fresh => setPosts(fresh), // background revalidation callback
fresh => setPosts(fresh),
)
.then(p => { setPosts(p); setLoadErr('') })
.catch(e => setLoadErr(e instanceof Error ? e.message : (isZh ? '帖子加载失败' : 'Failed to load posts')))
.catch(e => setLoadErr(e instanceof Error ? e.message : 'Failed to load posts'))
.finally(() => setLoading(false))
}, [isZh])
}, [])
const trumpPosts = useMemo(
() => posts.filter(p => (p.source || '') === 'truth'),
[posts],
)
const filtered = useMemo(() => trumpPosts.filter(p => {
if (sentFilter !== 'all' && p.sentiment !== sentFilter) return false
if (sigFilter === 'actionable' && p.signal !== 'buy' && p.signal !== 'short') return false
@@ -56,6 +57,10 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
return true
}), [trumpPosts, sentFilter, sigFilter])
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
const safePage = Math.min(page, totalPages)
const pageItems = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE)
const sigCounts = useMemo(() => ({
all: trumpPosts.length,
actionable: trumpPosts.filter(p => p.signal === 'buy' || p.signal === 'short').length,
@@ -64,24 +69,17 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
}), [trumpPosts])
const signalLabels: Record<SignalFilter, string> = {
all: isZh ? '全部' : 'All',
actionable: isZh ? '可执行' : 'Actionable',
buy: isZh ? '做多' : 'Buy',
short: isZh ? '做空' : 'Short',
all: 'All', actionable: 'Actionable', buy: 'Buy', short: 'Short',
}
const sentimentLabels: Record<SentimentFilter, string> = {
all: isZh ? '全部' : 'All',
bullish: isZh ? '看多' : 'Bullish',
bearish: isZh ? '看空' : 'Bearish',
neutral: isZh ? '中性' : 'Neutral',
all: 'All', bullish: 'Bullish', bearish: 'Bearish', neutral: 'Neutral',
}
return (
<div className="page">
<div className="page-head">
<div>
<h1 className="page-title">{isZh ? '① Trump 信号' : '① Trump Signal'}</h1>
<h1 className="page-title">① Trump Signal</h1>
<PageHint count={`${sigCounts.actionable} actionable / ${trumpPosts.length} posts`}>
Watches Trump's Truth Social posts in real time, AI-scores each one,
and only fires a trade when the conviction is high enough to move price.
@@ -96,6 +94,7 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
gap: 12, margin: '16px 0 12px', flexWrap: 'wrap',
}}>
{/* Signal filter tabs */}
<div className="nav-tabs" style={{ background: 'var(--bg-sunk)' }}>
{([
{ key: 'all', hint: 'Every post the scraper has captured.' },
@@ -106,7 +105,7 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
<button
key={f.key}
className={`nav-tab ${sigFilter === f.key ? 'active' : ''}`}
onClick={() => setSigFilter(f.key)}
onClick={() => { setSigFilter(f.key); setPage(1) }}
>
{f.key === 'actionable' ? '🔥 ' : ''}
{signalLabels[f.key]}
@@ -114,6 +113,8 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
</button>
))}
</div>
{/* Sentiment filter */}
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
<span style={{ fontSize: 11, color: 'var(--ink-4)', marginRight: 4 }}>
Sentiment
@@ -125,7 +126,7 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
{SENTIMENTS.map(f => (
<button
key={f}
onClick={() => setSentFilter(f)}
onClick={() => { setSentFilter(f); setPage(1) }}
style={{
padding: '4px 10px', borderRadius: 6, border: '1px solid var(--line)',
background: sentFilter === f ? 'var(--ink)' : 'transparent',
@@ -140,24 +141,37 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
</div>
{loading && <TrumpSkeleton />}
{!loading && loadErr && (
<div className="card" style={{ padding: 24, textAlign: 'center', color: 'var(--down)' }}>
⚠️ {`Couldn’t load signals — ${loadErr}`}
⚠️ {`Couldn't load signals — ${loadErr}`}
<div style={{ marginTop: 10 }}>
<button className="btn ghost" style={{ fontSize: 12, padding: '6px 14px' }}
onClick={() => location.reload()}>{isZh ? '重试' : 'Retry'}</button>
onClick={() => location.reload()}>Retry</button>
</div>
</div>
)}
{!loading && !loadErr && filtered.length === 0 && (
<div className="card" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
No Trump signals match the current filter.
</div>
)}
{!loading && filtered.length > 0 && (
<div className="post-stream">
{filtered.map(p => <PostRow key={p.id} post={p} />)}
</div>
{!loading && pageItems.length > 0 && (
<>
<div className="post-stream">
{pageItems.map(p => <PostRow key={p.id} post={p} />)}
</div>
<Pagination
page={safePage}
total={totalPages}
count={filtered.length}
pageSize={PAGE_SIZE}
onChange={setPage}
/>
</>
)}
</div>
)
app/[locale]/trump/loading.tsx
+26
View File
@@ -0,0 +1,26 @@
/** Instant skeleton shown by Next.js while TrumpPage compiles / fetches. */
export default function TrumpLoading() {
return (
<div className="page">
<div className="page-head">
<div>
<div className="skeleton sk-title" style={{ width: 180, marginBottom: 8 }} />
<div className="skeleton sk-line" style={{ width: 320 }} />
</div>
</div>
<div className="post-stream" style={{ marginTop: 16 }}>
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="skeleton-card" style={{ marginBottom: 8 }}>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<div className="skeleton sk-line sk-w-q" />
<div className="skeleton sk-line" style={{ width: 60 }} />
</div>
<div className="skeleton sk-title sk-w-3q" />
<div className="skeleton sk-line sk-w-full" />
<div className="skeleton sk-line sk-w-half" />
</div>
))}
</div>
</div>
)
}