Fix: Improve frontend code quality and null safety

- Remove unused variables and imports
- Add null/undefined safety checks for account data display
- Use optional chaining and nullish coalescing for safer data access
- Remove unused "Input Prompt" display section (keeping CoT trace)
- Fix TypeScript warnings and improve type safety
Changes:
- App.tsx: Add null checks for account fields, remove unused stats prop and input prompt display
- ComparisonChart.tsx: Remove unused imports and variables
This improves code quality without affecting functionality.
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
This commit is contained in:
PorunC
2025-10-29 20:30:17 +08:00
parent cf9fdeafb2
commit 36b75bbfc8
2 changed files with 9 additions and 30 deletions
+7 -28
View File
@@ -290,7 +290,6 @@ function TraderDetailsPage({
account,
positions,
decisions,
stats,
lastUpdate,
language,
}: {
@@ -369,25 +368,25 @@ function TraderDetailsPage({
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<StatCard
title={t('totalEquity', language)}
value={`${account?.total_equity.toFixed(2) || '0.00'} USDT`}
value={`${account?.total_equity?.toFixed(2) || '0.00'} USDT`}
change={account?.total_pnl_pct || 0}
positive={account ? account.total_pnl > 0 : false}
positive={(account?.total_pnl ?? 0) > 0}
/>
<StatCard
title={t('availableBalance', language)}
value={`${account?.available_balance.toFixed(2) || '0.00'} USDT`}
subtitle={`${((account?.available_balance / account?.total_equity) * 100 || 0).toFixed(1)}% ${t('free', language)}`}
value={`${account?.available_balance?.toFixed(2) || '0.00'} USDT`}
subtitle={`${(account?.available_balance && account?.total_equity ? ((account.available_balance / account.total_equity) * 100).toFixed(1) : '0.0')}% ${t('free', language)}`}
/>
<StatCard
title={t('totalPnL', language)}
value={`${account?.total_pnl >= 0 ? '+' : ''}${account?.total_pnl.toFixed(2) || '0.00'} USDT`}
value={`${account?.total_pnl !== undefined && account.total_pnl >= 0 ? '+' : ''}${account?.total_pnl?.toFixed(2) || '0.00'} USDT`}
change={account?.total_pnl_pct || 0}
positive={account ? account.total_pnl >= 0 : false}
positive={(account?.total_pnl ?? 0) >= 0}
/>
<StatCard
title={t('positions', language)}
value={`${account?.position_count || 0}`}
subtitle={`${t('margin', language)}: ${account?.margin_used_pct.toFixed(1) || '0.0'}%`}
subtitle={`${t('margin', language)}: ${account?.margin_used_pct?.toFixed(1) || '0.0'}%`}
/>
</div>
@@ -559,7 +558,6 @@ function StatCard({
// Decision Card Component with CoT Trace - Binance Style
function DecisionCard({ decision, language }: { decision: DecisionRecord; language: Language }) {
const [showInput, setShowInput] = useState(false);
const [showCoT, setShowCoT] = useState(false);
return (
@@ -583,25 +581,6 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
</div>
</div>
{/* AI Input Prompt - Collapsible */}
{decision.input_prompt && (
<div className="mb-3">
<button
onClick={() => setShowInput(!showInput)}
className="flex items-center gap-2 text-sm transition-colors"
style={{ color: '#8B5CF6' }}
>
<span className="font-semibold">📥 {t('inputPrompt', language)}</span>
<span className="text-xs">{showInput ? t('collapse', language) : t('expand', language)}</span>
</button>
{showInput && (
<div className="mt-2 rounded p-4 text-sm font-mono whitespace-pre-wrap max-h-96 overflow-y-auto" style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}>
{decision.input_prompt}
</div>
)}
</div>
)}
{/* AI Chain of Thought - Collapsible */}
{decision.cot_trace && (
<div className="mb-3">
+2 -2
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useMemo } from 'react';
import { useMemo } from 'react';
import {
LineChart,
Line,
@@ -275,7 +275,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
}}
/>
{traders.map((trader, index) => (
{traders.map((trader) => (
<Line
key={trader.trader_id}
type="monotone"