Center funds bar and stack USDT/USDC on two lines.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-29 18:03:08 +08:00
parent 81e51236c0
commit 6be46a1126
3 changed files with 64 additions and 25 deletions
+29 -11
View File
@@ -26,11 +26,31 @@ function fmtU(n: number | null | undefined) {
return `${n.toFixed(2)}U`;
}
function fmtUsdc(n: number | null | undefined) {
if (n == null || Number.isNaN(n)) return "—";
return `${n.toFixed(2)} USDC`;
}
function pnlClass(n: number | null | undefined) {
if (n == null || Number.isNaN(n) || n === 0) return "";
return n > 0 ? "pos-pnl-profit" : "pos-pnl-loss";
}
function DualCcy({
usdt,
usdc,
}: {
usdt: number | null | undefined;
usdc: number | null | undefined;
}) {
return (
<div className="funds-dual">
<div className="funds-value mono">{fmtU(usdt)}</div>
<div className="funds-value funds-value--sub mono">{fmtUsdc(usdc)}</div>
</div>
);
}
export default function FundsBar() {
const [s, setS] = useState<FundsSummary | null>(null);
@@ -80,26 +100,24 @@ export default function FundsBar() {
: "—"}
</div>
</div>
<div className="funds-item funds-item--money">
<div className="funds-item">
<div className="funds-label"></div>
<div className="funds-value mono">{fmtU(s.total_funds)}</div>
</div>
<div className="funds-item funds-item--money">
<div className="funds-item funds-item--dual">
<div className="funds-label"></div>
<div className="funds-value mono">
{s.funding_label || fmtU(s.funding_usdt)}
</div>
<DualCcy usdt={s.funding_usdt} usdc={s.funding_usdc} />
</div>
<div className="funds-item funds-item--money">
<div className="funds-item funds-item--dual">
<div className="funds-label"></div>
<div className="funds-value mono">
{s.trading_label || fmtU(s.trading_usdt)}
</div>
<DualCcy usdt={s.trading_usdt} usdc={s.trading_usdc} />
</div>
<div className="funds-item funds-item--pnl funds-item--money">
<div className="funds-item funds-item--pnl">
<div className="funds-label"></div>
<div className={`funds-value mono ${pnlClass(s.realtime_pnl)}`}>
{s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)}
{s.realtime_pnl == null
? "—"
: `${s.realtime_pnl > 0 ? "+" : ""}${fmtU(s.realtime_pnl)}`}
</div>
</div>
</div>