How to Display Positions and PnL in a Prediction Market App

npm install decimal.js

curl $BASE/v2/trade/positions \
  -H "Authorization: Bearer $BRAVADO_API_KEY"

{
  "positions": [
    {
      "symbol": "71321045679252212594626385532706912750332728571942532289631379312455583992646",
      "outcome": "YES",
      "size": "16.129032",
      "average_entry_price": "0.62",
      "current_price": "0.63",
      "unrealized_pnl": "0.161290",
      "collateral_value": "10.161290",
      "side": "long"
    }
  ],
  "total_unrealized_pnl": "0.161290"
}

curl $BASE/traders/{address}/pnl \
  -H "Authorization: Bearer $BRAVADO_API_KEY"

type PositionState =
  | "open"                  // market still trading
  | "awaiting_resolution"   // event over, outcome not final on-chain
  | "resolved_unredeemed"   // outcome final, collateral not claimed
  | "redeemed";             // collateral back in the wallet

function stateOf(p: Position): PositionState {
  if (!p.market_resolved) return p.event_concluded ? "awaiting_resolution" : "open";
  return p.redeemed ? "redeemed" : "resolved_unredeemed";
}

{state === "awaiting_resolution" && (
  <Badge tone="muted" title="The event has concluded. The outcome is being finalised on-chain.">
    Awaiting resolution
  </Badge>
)}

{state === "resolved_unredeemed" && (
  <Button onClick={() => redeem(p.symbol)}>
    Redeem {formatUsd(p.collateral_value)}
  </Button>
)}

curl -X POST $BASE/v2/trade/positions/redeem \
  -H "Authorization: Bearer $BRAVADO_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: $(uuidgen)" \
  -d '{"symbol": "..."}'

{Number(p.current_price) === 0 && (
  <Row muted>
    <span>{p.market_title}</span>
    <span>Resolved against, {formatUsd(p.cost_basis)} loss</span>
  </Row>
)}

import { Decimal } from "decimal.js";

const size  = new Decimal(pos.size);
const price = new Decimal(pos.current_price);
const entry = new Decimal(pos.average_entry_price);

const value  = size.times(price);
const pnl    = new Decimal(pos.unrealized_pnl);
const pnlPct = pnl.div(entry.times(size)).times(100);

const cents = `${price.times(100).toFixed(1)}¢`;
const pct   = `${price.times(100).toFixed(0)}%`;

if (res.status === 503) {
  const body = await res.json();
  if (body.available === false) return { state: "processing" };
}