Feat: show expected payout on open live orders

This commit is contained in:
2026-03-16 17:09:49 -07:00
parent f9cb0e1d7a
commit 6f208da27a

View File

@@ -11,7 +11,6 @@ export default function LiveDashboard() {
const [trades, setTrades] = useState([]); const [trades, setTrades] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [toggling, setToggling] = useState(null); const [toggling, setToggling] = useState(null);
const [activeTrade, setActiveTrade] = useState(null);
useEffect(() => { useEffect(() => {
const fetchState = async () => { const fetchState = async () => {
@@ -304,6 +303,20 @@ function LiveOrderRow({ order, isOpen }) {
const pnlColor = pnlVal == null ? 'text-gray-600' : pnlVal > 0 ? 'text-green-400' : pnlVal < 0 ? 'text-red-400' : 'text-gray-400'; const pnlColor = pnlVal == null ? 'text-gray-600' : pnlVal > 0 ? 'text-green-400' : pnlVal < 0 ? 'text-red-400' : 'text-gray-400';
const priceRaw = Number(order.priceCents ?? order.price);
const priceCents = Number.isFinite(priceRaw)
? (priceRaw > 0 && priceRaw <= 1 ? Math.round(priceRaw * 100) : Math.round(priceRaw))
: null;
const contractsRaw = Number(order.contracts ?? 1);
const contracts = Number.isFinite(contractsRaw) && contractsRaw > 0 ? contractsRaw : 1;
const hasExpected = isOpen && priceCents != null && priceCents > 0 && priceCents < 100;
const grossPayout = hasExpected ? contracts : null; // $1 per winning contract
const cost = hasExpected ? (priceCents / 100) * contracts : null;
const winPnL = hasExpected ? grossPayout - cost : null;
const losePnL = hasExpected ? -cost : null;
return ( return (
<div className="bg-gray-900 rounded-lg p-3 border border-gray-800 mb-2"> <div className="bg-gray-900 rounded-lg p-3 border border-gray-800 mb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -321,10 +334,26 @@ function LiveOrderRow({ order, isOpen }) {
{pnlVal != null ? `${pnlVal >= 0 ? '+' : ''}$${pnlVal.toFixed(2)}` : 'open'} {pnlVal != null ? `${pnlVal >= 0 ? '+' : ''}$${pnlVal.toFixed(2)}` : 'open'}
</span> </span>
</div> </div>
<div className="flex justify-between mt-1"> <div className="flex justify-between mt-1">
<span className="text-[10px] text-gray-600">{order.reason}</span> <span className="text-[10px] text-gray-600">{order.reason}</span>
<span className="text-[10px] text-gray-600 capitalize">{order.strategy}</span> <span className="text-[10px] text-gray-600 capitalize">{order.strategy}</span>
</div> </div>
{hasExpected && (
<div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[10px] text-gray-500">
<span>
If win: <span className="text-green-400 font-medium">+${winPnL.toFixed(2)}</span>
</span>
<span>
If lose: <span className="text-red-400 font-medium">${losePnL.toFixed(2)}</span>
</span>
<span>
Gross payout: <span className="text-gray-300 font-medium">${grossPayout.toFixed(2)}</span>
</span>
</div>
)}
{order.result && !isOpen && ( {order.result && !isOpen && (
<div className="flex justify-between items-center mt-0.5"> <div className="flex justify-between items-center mt-0.5">
<span className="text-[10px] text-gray-600">Result: {order.result}</span> <span className="text-[10px] text-gray-600">Result: {order.result}</span>