@agg-build/ui 1.0.2 → 1.2.0

package/dist/{chunk-4ILR2YH3.mjs → chunk-EGCVA2AQ.mjs}

@@ -21,7 +21,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-PEVG67XU.mjs";
+} from "./chunk-TBKDLNOE.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -73,7 +73,7 @@ import {
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-TLGQ4LID.mjs";
+} from "./chunk-34L7ZKJW.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -2960,7 +2960,7 @@ var MarketDetailsOutcomeButton = ({
               as: "span",
               variant: isSelected ? "body-strong" : "body",
               className: cn("whitespace-nowrap truncate", classNames.text),
-              children: item.label
+              children: item.title
             }
           ),
           /* @__PURE__ */ jsx8(
@@ -3046,6 +3046,7 @@ var MarketDetailsContent = ({
   ariaLabel,
   classNames,
   otherContent,
+  onOutcomeSelect,
   live,
   midpointsFallback,
   midpointsFallbackVenues
@@ -3329,10 +3330,16 @@ var MarketDetailsContent = ({
   const orderBookErrorDescription = isSnapshotUnavailableError ? labels.marketDetails.orderBookUnavailableDescription : typeof orderBookError === "object" && orderBookError != null && "message" in orderBookError && typeof orderBookError.message === "string" && orderBookError.message.trim().length > 0 ? orderBookError.message : labels.marketDetails.orderBookUnavailableDescription;
   const hasNoOrderBook = isOrderBookNotFound && !isMarketResolved || !isOrderBookLoading && !hasOrderBookError && (selectedOutcomesByVenue.length === 0 || aggregatedOrderbookRows.hasNoOrderBook);
   const hasChartError = !!marketChartError;
-  const selectHeaderOutcome = (item) => {
+  const selectHeaderOutcome = ({
+    item,
+    shouldNotifyOutcomeSelect = false
+  }) => {
     if (isOutcomeSelectionLocked) return;
     if (item == null ? void 0 : item.id) {
       tradingContext == null ? void 0 : tradingContext.selectOutcome(item.id);
+      if (shouldNotifyOutcomeSelect && model) {
+        onOutcomeSelect == null ? void 0 : onOutcomeSelect({ marketId: model.market.id, outcomeId: item.id });
+      }
     }
   };
   const handleOutcomeKeyDown = (eventToHandle) => {
@@ -3346,16 +3353,19 @@ var MarketDetailsContent = ({
       return item.label === selectedOutcomeLabel;
     });
     if (eventToHandle.key === "Home") {
-      selectHeaderOutcome(headerOutcomeItems[0]);
+      selectHeaderOutcome({ item: headerOutcomeItems[0], shouldNotifyOutcomeSelect: true });
       return;
     }
     if (eventToHandle.key === "End") {
-      selectHeaderOutcome(headerOutcomeItems[headerOutcomeItems.length - 1]);
+      selectHeaderOutcome({
+        item: headerOutcomeItems[headerOutcomeItems.length - 1],
+        shouldNotifyOutcomeSelect: true
+      });
       return;
     }
     const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
-    selectHeaderOutcome(headerOutcomeItems[nextIndex]);
+    selectHeaderOutcome({ item: headerOutcomeItems[nextIndex], shouldNotifyOutcomeSelect: true });
   };
   const handleToggleExpanded = () => {
     if (!marketId) return;
@@ -3585,7 +3595,10 @@ var MarketDetailsContent = ({
                           const selectedOutcomeItem = headerOutcomeItems.find(
                             (headerOutcomeItem) => headerOutcomeItem.label === label
                           );
-                          selectHeaderOutcome(selectedOutcomeItem);
+                          selectHeaderOutcome({
+                            item: selectedOutcomeItem,
+                            shouldNotifyOutcomeSelect: true
+                          });
                         }
                       },
                       item.label
@@ -3899,6 +3912,7 @@ var MarketDetailsList = ({
   markets: providedMarkets,
   eventTradingState,
   onClick,
+  onOutcomeSelect,
   onExpandedMarketChange,
   defaultTab,
   classNames,
@@ -4092,6 +4106,7 @@ var MarketDetailsList = ({
         onClick == null ? void 0 : onClick(market);
         handleToggle(marketId, market);
       },
+      onOutcomeSelect,
       defaultTab,
       ariaLabel: market.question,
       classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) },

package/dist/{chunk-XDZLCWUZ.mjs → chunk-FDTLV74F.mjs}

@@ -7,10 +7,10 @@ import {
   getTradingValueLabel,
   getTradingVenueLabel,
   resolveOrderEligibilityMessage
-} from "./chunk-PEVG67XU.mjs";
+} from "./chunk-TBKDLNOE.mjs";
 import {
   GeoBlockBanner
-} from "./chunk-YSCHNVBZ.mjs";
+} from "./chunk-5FXMHTVR.mjs";
 import {
   AGG_TERMS_OF_SERVICE_URL,
   Button,
@@ -25,6 +25,7 @@ import {
   RemoteImage,
   Skeleton,
   SuccessCheckIcon,
+  Tooltip,
   Typography,
   UserTrustIcon,
   VenueLogo,
@@ -36,7 +37,7 @@ import {
   getMotionClassName,
   normalizeVenueMarketCluster,
   skeletonViews
-} from "./chunk-TLGQ4LID.mjs";
+} from "./chunk-34L7ZKJW.mjs";
 
 // src/trading/types.ts
 import { Venue, enumGuard, isFiniteNonNeg, safeParse } from "@agg-build/sdk";
@@ -456,14 +457,14 @@ var buildLiveRouteCards = ({
   const isPrimaryRouteGeoBlocked = quoteData.fills.length > 0 && quoteData.fills.every((f) => geoBlockedVenues.has(f.venue));
   const primaryCard = primaryResult ? isPrimaryRouteGeoBlocked ? {
     id: "live-route",
-    hint: "",
+    hint: labels.venueUnavailableInRegion,
     kind: "venue",
     label: getTradingVenueLabel(
       parsedPrimaryVenue.success ? parsedPrimaryVenue.data : void 0
     ),
-    numericValue: 0,
+    numericValue: tradeSide === "sell" ? quoteData.rawExecCost : quoteData.totalFilled,
     quoteData,
-    value: "",
+    value: primaryResult.value,
     venue: parsedPrimaryVenue.success ? parsedPrimaryVenue.data : void 0,
     isUnavailable: true
   } : {
@@ -488,12 +489,16 @@ var buildLiveRouteCards = ({
     if (geoBlockedVenues.has(sq.venue)) {
       return {
         id: `live-unavailable-${sq.venue}`,
-        hint: "",
+        hint: labels.venueUnavailableInRegion,
         kind: "venue",
         label: getTradingVenueLabel(venue),
-        numericValue: 0,
+        numericValue: sq.filledQty,
         quoteData,
-        value: "",
+        value: getTradingValueLabel({
+          amount: sq.filledQty,
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        }),
         venue,
         isUnavailable: true
       };
@@ -533,7 +538,7 @@ var buildLiveRouteCards = ({
     const venue = parsedVenue.success ? parsedVenue.data : void 0;
     return {
       id: `live-unavailable-${sq.venue}`,
-      hint: "",
+      hint: labels.venueUnavailableInRegion,
       kind: "venue",
       label: getTradingVenueLabel(venue),
       numericValue: 0,
@@ -543,7 +548,9 @@ var buildLiveRouteCards = ({
       isUnavailable: true
     };
   });
-  const baseCards = primaryCard ? [primaryCard, ...soloCards] : soloCards;
+  const baseCards = (primaryCard ? [primaryCard, ...soloCards] : soloCards).sort(
+    (left, right) => right.numericValue - left.numericValue
+  );
   const coveredVenueStrings = new Set(
     [...baseCards, ...unavailableCards].flatMap((card) => card.venue ? [card.venue] : [])
   );
@@ -553,7 +560,7 @@ var buildLiveRouteCards = ({
     return [
       {
         id: "live-geo-blocked-kalshi",
-        hint: "",
+        hint: labels.venueUnavailableInRegion,
         kind: "venue",
         label: getTradingVenueLabel(kalshiVenue),
         numericValue: 0,
@@ -1857,8 +1864,7 @@ var renderRouteCard = ({
 }) => {
   var _a, _b;
   const showSplitDetails = isSelected && isExpanded && card.kind === "split" && !!((_a = card.rows) == null ? void 0 : _a.length);
-  const valueLabel = card.isUnavailable ? tradingLabels.venueUnavailableInRegion : card.value;
-  const ariaLabel = [card.label, card.hint, valueLabel].filter(Boolean).join(" ");
+  const ariaLabel = [card.label, card.hint, card.value].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs3(
     "button",
     {
@@ -1868,14 +1874,14 @@ var renderRouteCard = ({
       disabled: card.isUnavailable,
       className: cn(
         "agg-route-card",
-        "relative w-full cursor-pointer overflow-hidden rounded-agg-lg p-3 text-left",
+        "relative w-full overflow-hidden rounded-agg-lg p-3 text-left",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary",
         getMotionClassName(
           enableAnimations,
           "transition-[background-color,border-color,color] duration-200 ease-in-out"
         ),
-        isSelected && !card.isUnavailable ? "border border-agg-trade-highlight-border bg-gradient-to-b from-agg-trade-highlight-surface-from to-agg-trade-highlight-surface-to" : "border-transparent bg-agg-secondary-hover",
-        card.isUnavailable && "cursor-not-allowed"
+        card.isUnavailable ? "cursor-not-allowed" : "cursor-pointer",
+        isSelected && !card.isUnavailable ? "border border-agg-trade-highlight-border bg-gradient-to-b from-agg-trade-highlight-surface-from to-agg-trade-highlight-surface-to" : "border-transparent bg-agg-secondary-hover"
       ),
       onClick: () => onSelect(card.id),
       children: [
@@ -1905,7 +1911,15 @@ var renderRouteCard = ({
               /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
                   /* @__PURE__ */ jsx4("p", { className: "agg-route-card-title truncate text-agg-sm leading-agg-5 text-agg-foreground", children: card.label }),
-                  card.kind === "split" && isSelected ? /* @__PURE__ */ jsx4(
+                  card.isUnavailable ? /* @__PURE__ */ jsx4(
+                    Icon,
+                    {
+                      name: "lock",
+                      size: "xs",
+                      className: "shrink-0 text-agg-muted-foreground",
+                      "aria-hidden": "true"
+                    }
+                  ) : card.kind === "split" && isSelected ? /* @__PURE__ */ jsx4(
                     Icon,
                     {
                       name: showSplitDetails ? "chevron-up" : "chevron-down",
@@ -1924,9 +1938,9 @@ var renderRouteCard = ({
                 className: cn(
                   "agg-route-card-value",
                   "shrink-0 whitespace-nowrap",
-                  card.isUnavailable ? "text-agg-xs leading-agg-4 text-agg-muted-foreground" : isSelected ? "text-agg-lg font-agg-bold leading-agg-7 text-agg-trade-highlight-accent" : "text-agg-base leading-agg-6 text-agg-foreground"
+                  isSelected && !card.isUnavailable ? "text-agg-lg font-agg-bold leading-agg-7 text-agg-trade-highlight-accent" : "text-agg-base leading-agg-6 text-agg-foreground"
                 ),
-                children: valueLabel
+                children: card.value
               }
             )
           ] }),
@@ -2225,9 +2239,9 @@ var PlaceOrder = ({
   onExecutionStateChange,
   resolvedClaim
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
   const {
-    features: { enableAnimations },
+    features: { enableAnimations, showFeesBreakdown },
     general: { locale }
   } = useSdkUiConfig();
   const labels = useLabels();
@@ -2736,16 +2750,63 @@ var PlaceOrder = ({
     submissionProgressState,
     tradingLabels
   ]);
-  const displayedToWinHint = (_B = selectedRouteCard == null ? void 0 : selectedRouteCard.hint) != null ? _B : "";
-  const displayedToWinValue = (_C = selectedRouteCard == null ? void 0 : selectedRouteCard.numericValue) != null ? _C : 0;
+  const displayedToWinHint = useMemo2(() => {
+    var _a2, _b2, _c2, _d2;
+    if (!selectedRouteCard) return "";
+    if (selectedRouteCard.isUnavailable) {
+      const avgPrice = (_c2 = (_b2 = (_a2 = selectedRouteCard.quoteData) == null ? void 0 : _a2.fills) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.avgPrice;
+      return avgPrice != null ? tradingLabels.averagePrice(avgPrice) : "";
+    }
+    return (_d2 = selectedRouteCard.hint) != null ? _d2 : "";
+  }, [selectedRouteCard, tradingLabels]);
+  const displayedToWinValue = (_B = selectedRouteCard == null ? void 0 : selectedRouteCard.numericValue) != null ? _B : 0;
+  const activeFeeBreakdown = activeQuoteData == null ? void 0 : activeQuoteData.feeBreakdown;
+  const estimatedFeesValue = useMemo2(() => {
+    if (!activeFeeBreakdown) return null;
+    const totalFees = activeFeeBreakdown.venueFees + activeFeeBreakdown.bridgeFees + activeFeeBreakdown.executionGas;
+    return formatUsd(totalFees, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }, [activeFeeBreakdown]);
+  const feeBreakdownRows = useMemo2(() => {
+    if (!activeFeeBreakdown) return [];
+    return [
+      {
+        label: tradingLabels.feeBreakdownVenueFees,
+        value: formatUsd(activeFeeBreakdown.venueFees, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      },
+      {
+        label: tradingLabels.feeBreakdownBridgeFees,
+        value: formatUsd(activeFeeBreakdown.bridgeFees, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      },
+      {
+        label: tradingLabels.feeBreakdownExecutionGas,
+        value: formatUsd(activeFeeBreakdown.executionGas, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      },
+      {
+        label: tradingLabels.feeBreakdownTotalFees,
+        value: formatUsd(
+          activeFeeBreakdown.venueFees + activeFeeBreakdown.bridgeFees + activeFeeBreakdown.executionGas,
+          { minimumFractionDigits: 2, maximumFractionDigits: 2 }
+        )
+      }
+    ];
+  }, [activeFeeBreakdown, tradingLabels]);
   const isActionLoading = isPrimaryActionLoading || executeManaged.isPending;
-  const selectedRouteGeoBlocked = (_D = selectedRouteCard == null ? void 0 : selectedRouteCard.isUnavailable) != null ? _D : false;
+  const selectedRouteGeoBlocked = (_C = selectedRouteCard == null ? void 0 : selectedRouteCard.isUnavailable) != null ? _C : false;
   const geoBlockedVenuesFromWarnings = useMemo2(
     () => {
       var _a2;
       return extractGeoBlockedVenues((_a2 = smartRoute.data) == null ? void 0 : _a2.warnings);
     },
-    [(_E = smartRoute.data) == null ? void 0 : _E.warnings]
+    [(_D = smartRoute.data) == null ? void 0 : _D.warnings]
   );
   const isPrimaryVenueGeoBlocked = useMemo2(() => {
     var _a2, _b2;
@@ -2754,7 +2815,6 @@ var PlaceOrder = ({
     return fills.length > 0 && fills.every((f) => geoBlockedVenuesFromWarnings.has(f.venue));
   }, [selectedRouteCard, geoBlockedVenuesFromWarnings]);
   const shouldShowGeoBlockBanner = isTradingBlocked || selectedRouteGeoBlocked || isPrimaryVenueGeoBlocked;
-  const geoBlockVenueLabel = isTradingBlocked ? void 0 : selectedRouteGeoBlocked ? selectedRouteCard == null ? void 0 : selectedRouteCard.label : isPrimaryVenueGeoBlocked && (selectedRouteCard == null ? void 0 : selectedRouteCard.venue) ? getTradingVenueLabel(selectedRouteCard.venue) : void 0;
   const actionLabel = `${internalTab === "buy" ? tradingLabels.buy : tradingLabels.sell} ${selectedOutcomeLabel}`.trim();
   const isActionDisabled = isPrimaryActionDisabled || !orderEligibility.canPlaceOrder || isActionLoading || !hasEnteredAmount || !scopedSelectedMarket || isInsufficientBalance || isBelowMinimum || !selectedRouteCard || !selectedRouteCard.quoteData.quoteId || selectedRouteGeoBlocked || !isAuthenticated || quoteStatus !== void 0;
   const shouldShowSmartRouting = orderEligibility.canPlaceOrder && hasEnteredAmount && (orderedRouteCards.length > 0 || smartRoute.isFetching);
@@ -3216,6 +3276,36 @@ var PlaceOrder = ({
                 }
               )
             ] }),
+            showFeesBreakdown && hasEnteredAmount && estimatedFeesValue ? /* @__PURE__ */ jsxs3("div", { className: "agg-order-fees-section flex items-center justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx4(
+                  Typography,
+                  {
+                    variant: "text-sm",
+                    className: "text-agg-sm leading-agg-5 text-agg-muted-foreground",
+                    children: tradingLabels.estimatedFees
+                  }
+                ),
+                feeBreakdownRows.length > 0 ? /* @__PURE__ */ jsx4(
+                  Tooltip,
+                  {
+                    "aria-label": tradingLabels.estimatedFeesTooltipAria,
+                    content: /* @__PURE__ */ jsx4("div", { className: "flex min-w-[220px] flex-col gap-2", children: feeBreakdownRows.map((row) => /* @__PURE__ */ jsxs3(
+                      "div",
+                      {
+                        className: "flex items-center justify-between gap-3 text-agg-sm leading-agg-5",
+                        children: [
+                          /* @__PURE__ */ jsx4("span", { className: "text-agg-muted-foreground", children: row.label }),
+                          /* @__PURE__ */ jsx4("span", { className: "font-agg-bold text-agg-foreground", children: row.value })
+                        ]
+                      },
+                      row.label
+                    )) })
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx4("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: estimatedFeesValue })
+            ] }) : null,
             shouldShowSmartRouting ? /* @__PURE__ */ jsxs3("div", { className: "agg-route-panel flex flex-col gap-3", children: [
               /* @__PURE__ */ jsxs3("div", { className: "agg-route-panel-header flex items-center justify-between gap-4", children: [
                 /* @__PURE__ */ jsx4("p", { className: "agg-route-panel-title text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: tradingLabels.smartRouting }),
@@ -3367,7 +3457,19 @@ var PlaceOrder = ({
                       children: actionLabel
                     }
                   ),
-                  shouldShowGeoBlockBanner ? /* @__PURE__ */ jsx4(GeoBlockBanner, { venue: geoBlockVenueLabel, termsUrl: AGG_TERMS_OF_SERVICE_URL }) : null,
+                  !shouldShowGeoBlockBanner && internalTab === "buy" && showFeesBreakdown ? /* @__PURE__ */ jsxs3("div", { className: "agg-order-platform-fee mt-1 flex items-center justify-center gap-1.5 text-agg-sm leading-agg-5 text-agg-muted-foreground", children: [
+                    /* @__PURE__ */ jsx4(
+                      Icon,
+                      {
+                        name: "shield-trust",
+                        size: "small",
+                        className: "h-3.5 w-3.5 text-agg-primary",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(Typography, { variant: "text-xs-caps", className: "text-agg-primary", children: tradingLabels.platformFee })
+                  ] }) : null,
+                  shouldShowGeoBlockBanner ? /* @__PURE__ */ jsx4(GeoBlockBanner, { termsUrl: AGG_TERMS_OF_SERVICE_URL }) : null,
                   !shouldShowGeoBlockBanner ? /* @__PURE__ */ jsx4("p", { className: "agg-order-disclaimer text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: tradingLabels.disclaimer }) : null
                 ]
               }

package/dist/{chunk-WFS772A3.mjs → chunk-Q2BRDVBU.mjs}

@@ -40,7 +40,7 @@ import {
   getMotionClassName,
   shortenAddress,
   venueLogoLabels
-} from "./chunk-TLGQ4LID.mjs";
+} from "./chunk-34L7ZKJW.mjs";
 
 // src/deposit/index.tsx
 import { useEffect as useEffect3, useMemo, useRef, useState as useState2 } from "react";

package/dist/{chunk-PEVG67XU.mjs → chunk-TBKDLNOE.mjs}

@@ -17,7 +17,7 @@ import {
   selectPrimaryVenueMarket,
   skeletonViews,
   sortOutcomes
-} from "./chunk-TLGQ4LID.mjs";
+} from "./chunk-34L7ZKJW.mjs";
 
 // src/trading/trading-context/index.tsx
 import { useEventTradingContext } from "@agg-build/hooks";
@@ -805,16 +805,25 @@ var resolveDisplayOutcomeLabels = (labels) => {
 var resolveMarketDetailsOutcomeLabels = (venueMarkets) => {
   var _a;
   const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
-  const initialLabels = ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).map((outcome) => outcome.label.trim()).filter(Boolean);
-  const labels = new Set(initialLabels);
-  venueMarkets.forEach((market) => {
-    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
-      const label = outcome.label.trim();
-      if (!label) return;
-      labels.add(label);
-    });
-  });
-  return [...labels];
+  const labels = /* @__PURE__ */ new Map();
+  const upsertOutcome = (outcome) => {
+    var _a2;
+    const label = outcome.label.trim();
+    if (!label) return;
+    const key = normalizeLabel2(label);
+    const title = ((_a2 = outcome.title) != null ? _a2 : "").trim() || label;
+    const existing = labels.get(key);
+    if (!existing) {
+      labels.set(key, { label, title });
+      return;
+    }
+    if (existing.title === existing.label && title !== label) {
+      labels.set(key, __spreadProps(__spreadValues({}, existing), { title }));
+    }
+  };
+  ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).forEach(upsertOutcome);
+  venueMarkets.forEach((market) => sortOutcomes(market.venueMarketOutcomes).forEach(upsertOutcome));
+  return [...labels.values()];
 };
 var resolveInitialOutcomeLabel = (labels, defaultOutcomeLabel) => {
   var _a;
@@ -857,13 +866,15 @@ var resolveOutcomeTone = (label, index) => {
   return index === 0 ? "positive" : "negative";
 };
 var resolveHeaderOutcomeItems = (venueMarkets) => {
-  const labels = resolveDisplayOutcomeLabels(resolveMarketDetailsOutcomeLabels(venueMarkets));
+  const outcomes = resolveMarketDetailsOutcomeLabels(venueMarkets);
+  const labels = resolveDisplayOutcomeLabels(outcomes.map((outcome) => outcome.label));
   const probabilityByLabel = resolveAverageProbabilityByLabel(venueMarkets, labels);
   return labels.slice(0, 2).map((label, index) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return {
-      id: (_b = (_a = resolveOutcomesByVenue(venueMarkets, label)[0]) == null ? void 0 : _a.outcome.id) != null ? _b : "",
-      venue: (_f = (_e = (_c = resolveOutcomesByVenue(venueMarkets, label)[0]) == null ? void 0 : _c.venue) != null ? _e : (_d = venueMarkets[0]) == null ? void 0 : _d.venue) != null ? _f : "polymarket",
+      title: (_b = (_a = outcomes.find((outcome) => normalizeLabel2(outcome.label) === normalizeLabel2(label))) == null ? void 0 : _a.title) != null ? _b : label,
+      id: (_d = (_c = resolveOutcomesByVenue(venueMarkets, label)[0]) == null ? void 0 : _c.outcome.id) != null ? _d : "",
+      venue: (_h = (_g = (_e = resolveOutcomesByVenue(venueMarkets, label)[0]) == null ? void 0 : _e.venue) != null ? _g : (_f = venueMarkets[0]) == null ? void 0 : _f.venue) != null ? _h : "polymarket",
       label,
       probability: probabilityByLabel.get(label),
       tone: resolveOutcomeTone(label, index)
@@ -941,7 +952,7 @@ var buildMarketDetailsModel = ({
     labels
   });
   const outcomeLabels = resolveDisplayOutcomeLabels(
-    resolveMarketDetailsOutcomeLabels(market.venueMarkets)
+    resolveMarketDetailsOutcomeLabels(market.venueMarkets).map((outcome) => outcome.label)
   );
   const probabilityByLabel = resolveAverageProbabilityByLabel(market.venueMarkets, outcomeLabels);
   return {