ThaMunsta/hashex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add more P&L visuals
Build Images and Deploy / Update-PROD-Stack (push) Successful in 1m25s
Details

Browse Source
This commit is contained in:
Mike Johnston
2026-03-20 23:59:44 -04:00
parent 81f7d90be1
commit 05a9d8f7af
1 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/hashtag/[tag]/TradePanel.tsx
+24 -12
View File
@@ -102,23 +102,35 @@ export function TradePanel({ hashtag, balance, longPosition, shortPosition, fund
<div className="grid grid-cols-2 gap-3 text-sm"> <div className="grid grid-cols-2 gap-3 text-sm">
<div className="bg-surface rounded-lg p-3"> <div className="bg-surface rounded-lg p-3">
<p className="text-slate-500 text-xs mb-1">LONG position</p> <p className="text-slate-500 text-xs mb-1">LONG position</p>
{longPosition ? ( {longPosition ? (() => {
<> const pnl = (hashtag.currentPrice - longPosition.avgBuyPrice) * longPosition.shares
<p className="font-medium">{formatNumber(longPosition.shares)} shares</p> return (
<p className="text-slate-400 text-xs">avg {formatCurrency(longPosition.avgBuyPrice)}</p> <>
</> <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> <p className="text-slate-600">None</p>
)} )}
</div> </div>
<div className="bg-surface rounded-lg p-3"> <div className="bg-surface rounded-lg p-3">
<p className="text-slate-500 text-xs mb-1">SHORT position</p> <p className="text-slate-500 text-xs mb-1">SHORT position</p>
{shortPosition ? ( {shortPosition ? (() => {
<> const pnl = (shortPosition.avgBuyPrice - hashtag.currentPrice) * shortPosition.shares
<p className="font-medium">{formatNumber(shortPosition.shares)} shares</p> return (
<p className="text-slate-400 text-xs">avg {formatCurrency(shortPosition.avgBuyPrice)}</p> <>
</> <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> <p className="text-slate-600">None</p>
)} )}
</div> </div>