add more P&L visuals

2026-03-20 23:59:44 -04:00
parent 81f7d90be1
commit 05a9d8f7af
1 changed files with 24 additions and 12 deletions
@@ -102,23 +102,35 @@ export function TradePanel({ hashtag, balance, longPosition, shortPosition, fund
      <div className="grid grid-cols-2 gap-3 text-sm">
        <div className="bg-surface rounded-lg p-3">
          <p className="text-slate-500 text-xs mb-1">LONG position</p>
-          {longPosition ? (
+          {longPosition ? (() => {
+            const pnl = (hashtag.currentPrice - longPosition.avgBuyPrice) * longPosition.shares
+            return (
              <>
                <p className="font-medium">{formatNumber(longPosition.shares)} shares</p>
                <p className="text-slate-400 text-xs">avg {formatCurrency(longPosition.avgBuyPrice)}</p>
+                <p className={`text-xs font-medium mt-1 ${pnl >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {pnl >= 0 ? '+' : ''}{formatCurrency(pnl)}
+                </p>
              </>
-          ) : (
+            )
+          })() : (
            <p className="text-slate-600">None</p>
          )}
        </div>
        <div className="bg-surface rounded-lg p-3">
          <p className="text-slate-500 text-xs mb-1">SHORT position</p>
-          {shortPosition ? (
+          {shortPosition ? (() => {
+            const pnl = (shortPosition.avgBuyPrice - hashtag.currentPrice) * shortPosition.shares
+            return (
              <>
                <p className="font-medium">{formatNumber(shortPosition.shares)} shares</p>
                <p className="text-slate-400 text-xs">avg {formatCurrency(shortPosition.avgBuyPrice)}</p>
+                <p className={`text-xs font-medium mt-1 ${pnl >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {pnl >= 0 ? '+' : ''}{formatCurrency(pnl)}
+                </p>
              </>
-          ) : (
+            )
+          })() : (
            <p className="text-slate-600">None</p>
          )}
        </div>