style(dashboard): unify Macro composite into one card + dark-mode fix
for Performance accent
User flagged the macro index box on the overview page as feeling
disjointed. Reshaped it from three stacked elements (band → track →
scale) into a single bordered card so it reads as ONE component.
- JSX: wrap the three pieces in <div className="overview-macro-card">
- CSS: new .overview-macro-card with tone-coloured rim (bull/bear/neutral)
- Solid neutral-gray filled needle (was a hollow ring — looked like a
placeholder); tone-coloured background + white inner ring + double
shadow so it stands out on any gradient position
- Removed the .overview-score-fill overlay — the gradient already
encodes the spectrum; layering an opaque fill obscured it near 0
- Thinner track (14px vs 22px), tighter scale labels, smaller pill
- Added "TODAY · 8 INDICATORS" stamp next to the title — gives users
a quick anchor of what they're looking at + freshness
Plus: dark-mode override for .overview-stat-card.accent (the Performance
card). It was using a cream gradient that floated as a glaring
out-of-theme block on dark mode. Mirrored the existing .kpi.accent dark
treatment so it stays visually grouped with the rest of the dashboard.
Also includes the in-flight overview rewrite from the other AI tool
(legacy /btc redirect to /macro, middleware.ts replacing proxy.ts for
Next.js routing, refactored several dashboard panels). TypeScript clean,
production build passes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -2,11 +2,11 @@
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useLocale } from 'next-intl'
|
||||
import { useAccount, useSignMessage } from 'wagmi'
|
||||
import { useAccount } from 'wagmi'
|
||||
import { getPerformance, getTrades, getSignalAccuracy } from '@/lib/api'
|
||||
import type { BotPerformance, BotTrade } from '@/types'
|
||||
import type { SignalAccuracy } from '@/lib/api'
|
||||
import { getCachedViewEnvelope, getOrCreateViewEnvelope } from '@/lib/signedRequest'
|
||||
import { getCachedViewEnvelope } from '@/lib/signedRequest'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
import InfoTip from '@/components/ui/InfoTip'
|
||||
|
||||
@@ -28,6 +28,10 @@ function fmtHold(s: number) {
|
||||
return Math.floor(m / 60) + 'h ' + (m % 60) + 'm'
|
||||
}
|
||||
|
||||
function fmtAccuracyPct(pct: number | null | undefined) {
|
||||
return pct == null || Number.isNaN(pct) ? '—' : `${pct.toFixed(0)}%`
|
||||
}
|
||||
|
||||
function inPeriod(iso: string, period: Period) {
|
||||
if (period === 'All') return true
|
||||
const days = Number.parseInt(period, 10)
|
||||
@@ -59,11 +63,11 @@ export default function AnalyticsPageClient() {
|
||||
const locale = useLocale()
|
||||
const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
|
||||
const { address, isConnected } = useAccount()
|
||||
const { signMessageAsync } = useSignMessage()
|
||||
const [perf, setPerf] = useState<BotPerformance | null>(null)
|
||||
const [trades, setTrades] = useState<BotTrade[]>([])
|
||||
const [accuracy, setAccuracy] = useState<SignalAccuracy | null>(null)
|
||||
const [period, setPeriod] = useState<Period>('30d')
|
||||
const [privateLocked, setPrivateLocked] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
@@ -71,17 +75,18 @@ export default function AnalyticsPageClient() {
|
||||
setPerf(null)
|
||||
setTrades([])
|
||||
setAccuracy(null)
|
||||
setPrivateLocked(false)
|
||||
return
|
||||
}
|
||||
;(async () => {
|
||||
try {
|
||||
const perfEnv = getCachedViewEnvelope('view_performance', address)
|
||||
?? await getOrCreateViewEnvelope({ action: 'view_performance', wallet: address, signMessageAsync })
|
||||
const tradesEnv = getCachedViewEnvelope('view_trades', address)
|
||||
?? await getOrCreateViewEnvelope({ action: 'view_trades', wallet: address, signMessageAsync })
|
||||
const sharedEnv = getCachedViewEnvelope('view_user', address)
|
||||
const perfEnv = getCachedViewEnvelope('view_performance', address) ?? sharedEnv
|
||||
const tradesEnv = getCachedViewEnvelope('view_trades', address) ?? sharedEnv
|
||||
if (!cancelled) setPrivateLocked(!perfEnv && !tradesEnv)
|
||||
const [p, t, a] = await Promise.all([
|
||||
getPerformance(address, perfEnv).catch(() => null),
|
||||
getTrades(address, tradesEnv, 100, 1).catch(() => []),
|
||||
perfEnv ? getPerformance(address, perfEnv).catch(() => null) : Promise.resolve(null),
|
||||
tradesEnv ? getTrades(address, tradesEnv, 100, 1).catch(() => []) : Promise.resolve([]),
|
||||
getSignalAccuracy().catch(() => null),
|
||||
])
|
||||
if (!cancelled) {
|
||||
@@ -97,7 +102,7 @@ export default function AnalyticsPageClient() {
|
||||
}
|
||||
})()
|
||||
return () => { cancelled = true }
|
||||
}, [address, isConnected, signMessageAsync])
|
||||
}, [address, isConnected])
|
||||
|
||||
const filteredTrades = trades.filter((trade) => inPeriod(trade.closed_at, period))
|
||||
const pricedTrades = filteredTrades.filter(
|
||||
@@ -148,6 +153,15 @@ export default function AnalyticsPageClient() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{privateLocked && (
|
||||
<div className="card" style={{ padding: 16, marginBottom: 20 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 600 }}>Private performance is locked.</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.6 }}>
|
||||
Load your settings once to unlock cached trade history and wallet-specific performance. Public signal-accuracy data below remains available.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card" style={{ padding: 28, marginBottom: 20 }}>
|
||||
<div className="row between" style={{ alignItems: 'flex-start', marginBottom: 20 }}>
|
||||
<div>
|
||||
@@ -189,7 +203,7 @@ export default function AnalyticsPageClient() {
|
||||
return (
|
||||
<div key={w} className="row between" style={{ marginBottom: 4 }}>
|
||||
<span style={{ fontSize: 12, color: 'var(--ink-3)' }}>{w.replace('m','').replace('1h','1h')}</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color, fontVariantNumeric: 'tabular-nums' }}>{pct.toFixed(0)}%</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color, fontVariantNumeric: 'tabular-nums' }}>{fmtAccuracyPct(pct)}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@@ -213,7 +227,7 @@ export default function AnalyticsPageClient() {
|
||||
return (
|
||||
<div key={w} className="row between" style={{ marginBottom: 4 }}>
|
||||
<span style={{ fontSize: 12, color: 'var(--ink-3)' }}>{w}</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color, fontVariantNumeric: 'tabular-nums' }}>{pct.toFixed(0)}%</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color, fontVariantNumeric: 'tabular-nums' }}>{fmtAccuracyPct(pct)}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user