@agg-build/ui 2.1.4 → 2.2.0

package/dist/pages.js

@@ -6268,6 +6268,13 @@ var formatPriceGapPercent = (value) => {
   return `${Math.round(value)}%`;
 };
 var sortOutcomes = (outcomes) => {
+  return sortOutcomesWithPrices(outcomes);
+};
+var resolveOutcomeProbability = (outcome, priceByOutcomeId) => {
+  const resolvedPrice = priceByOutcomeId === void 0 ? outcome.price : priceByOutcomeId.has(outcome.id) ? priceByOutcomeId.get(outcome.id) : void 0;
+  return normalizeProbability(resolvedPrice);
+};
+var sortOutcomesWithPrices = (outcomes, priceByOutcomeId) => {
   if (outcomes.length <= 1) return outcomes;
   if (hasBinaryOutcomes(outcomes)) {
     return sortYesFirst(outcomes);
@@ -6283,38 +6290,41 @@ var sortOutcomes = (outcomes) => {
   }
   return [...outcomes].sort((a, b) => {
     var _a, _b;
-    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
-    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
+    const aPrice = (_a = resolveOutcomeProbability(a, priceByOutcomeId)) != null ? _a : 0;
+    const bPrice = (_b = resolveOutcomeProbability(b, priceByOutcomeId)) != null ? _b : 0;
     return bPrice - aPrice;
   });
 };
-var compareVisibleOutcomeRows = (left, right) => {
+var compareVisibleOutcomeRows = (left, right, priceByOutcomeId) => {
   var _a, _b;
   const leftDate = toDate(resolveOutcomeTitle(left.outcome));
   const rightDate = toDate(resolveOutcomeTitle(right.outcome));
   if (leftDate && rightDate) {
     return leftDate.getTime() - rightDate.getTime();
   }
-  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
-  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
+  const leftProbability = (_a = resolveOutcomeProbability(left.outcome, priceByOutcomeId)) != null ? _a : -1;
+  const rightProbability = (_b = resolveOutcomeProbability(right.outcome, priceByOutcomeId)) != null ? _b : -1;
   return rightProbability - leftProbability;
 };
-var shouldReplaceVisibleOutcome = (current, next) => {
+var shouldReplaceVisibleOutcome = (current, next, priceByOutcomeId) => {
   var _a, _b;
   const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
   const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
   if (currentVolume !== nextVolume) {
     return nextVolume > currentVolume;
   }
-  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
-  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
+  const currentProbability = (_a = resolveOutcomeProbability(current.outcome, priceByOutcomeId)) != null ? _a : -1;
+  const nextProbability = (_b = resolveOutcomeProbability(next.outcome, priceByOutcomeId)) != null ? _b : -1;
   return nextProbability > currentProbability;
 };
-var resolveVisibleOutcomes = (venueMarkets) => {
+var resolveVisibleOutcomes = (venueMarkets, priceByOutcomeId) => {
   const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
   venueMarkets.forEach((market) => {
     const title2 = market.question;
-    const canonicalOutcome = sortOutcomes(market.venueMarketOutcomes)[0];
+    const canonicalOutcome = sortOutcomesWithPrices(
+      market.venueMarketOutcomes,
+      priceByOutcomeId
+    )[0];
     if (!canonicalOutcome) return;
     const normalizedTitle = title2.trim().toLowerCase();
     const nextVisibleOutcome = {
@@ -6324,11 +6334,11 @@ var resolveVisibleOutcomes = (venueMarkets) => {
       title: title2
     };
     const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
-    if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
+    if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome, priceByOutcomeId)) {
       visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
     }
   });
-  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, 2));
+  return [...visibleOutcomesByLabel.values()].sort((left, right) => compareVisibleOutcomeRows(left, right, priceByOutcomeId)).slice(0, Math.max(1, 2));
 };
 var dedupeVenueMarketsById = (venueMarkets) => {
   const seenClusterIds = /* @__PURE__ */ new Set();
@@ -6408,18 +6418,19 @@ var toVenueLogoName = (value) => {
   if (!venueLogoNameSet.has(value)) return null;
   return value;
 };
-var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCurrency) => {
-  var _a, _b;
+var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCurrency, options) => {
+  var _a, _b, _c;
   const primaryVenueMarket = selectPrimaryVenueMarket(event.venueMarkets);
   if (!primaryVenueMarket) return null;
   const primaryVenue = toVenueLogoName(primaryVenueMarket.venue);
   if (!primaryVenue) return null;
-  const visibleOutcome = resolveVisibleOutcomes(event.venueMarkets)[0];
+  const visibleOutcome = resolveVisibleOutcomes(event.venueMarkets, options == null ? void 0 : options.priceByOutcomeId)[0];
   if (!visibleOutcome) return null;
-  const probability = normalizeProbability(visibleOutcome.outcome.price);
-  if (probability == null) return null;
+  const probability = normalizeProbability(
+    (_a = options == null ? void 0 : options.priceByOutcomeId) == null ? void 0 : _a.get(visibleOutcome.outcome.id)
+  );
   const resolvedTitle = formatEventTitleWithDateSuffix({
-    title: (_a = event == null ? void 0 : event.title) != null ? _a : "",
+    title: (_b = event == null ? void 0 : event.title) != null ? _b : "",
     categories: event.categories,
     structureType: event.structureType,
     gameStartTime: event.gameStartTime,
@@ -6441,13 +6452,14 @@ var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCu
   return {
     id: event.id,
     title: resolvedTitle,
-    thumbnailSrc: (_b = resolveTileImage(event, primaryVenueMarket, void 0)) != null ? _b : "",
+    thumbnailSrc: (_c = resolveTileImage(event, primaryVenueMarket, void 0)) != null ? _c : "",
     thumbnailAlt: resolvedTitle,
     venue: primaryVenue,
     visibleVenues,
     marketSummaryLabel,
     volumeLabel,
     valueLabel: formatMarketProbabilityPercent(probability, formatPercent),
+    isValueLoading: probability == null && (options == null ? void 0 : options.isPriceLoading) === true,
     contextLabel: formatSearchContextLabel(visibleOutcome.title)
   };
 };
@@ -6557,7 +6569,16 @@ var SearchResultRow = ({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
               /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                item.isValueLoading ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "agg-search-result-value-loading",
+                      "h-5 w-12 shrink-0 rounded-agg-sm bg-agg-separator animate-pulse"
+                    )
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
                   "p",
                   {
                     className: cn(
@@ -6670,6 +6691,24 @@ var Search = ({
     () => filterOpenEvents(searchResults),
     [searchResults]
   );
+  const visibleVenueMarkets = (0, import_react7.useMemo)(
+    () => openEvents.flatMap((event) => {
+      var _a;
+      return (_a = event.venueMarkets) != null ? _a : [];
+    }),
+    [openEvents]
+  );
+  const livePrices = (0, import_hooks27.useLiveOutcomePrices)(visibleVenueMarkets);
+  const midpointResult = (0, import_hooks27.useMidpoints)(visibleVenueMarkets);
+  const searchDisplayPrices = (0, import_react7.useMemo)(() => {
+    if (!midpointResult.bestMidpointsByOutcomeId.size) return livePrices;
+    if (!livePrices.size) return midpointResult.bestMidpointsByOutcomeId;
+    const merged = new Map(midpointResult.bestMidpointsByOutcomeId);
+    for (const [outcomeId, price] of livePrices) {
+      merged.set(outcomeId, price);
+    }
+    return merged;
+  }, [livePrices, midpointResult.bestMidpointsByOutcomeId]);
   const { validatedResults, eventsByResultId } = (0, import_react7.useMemo)(() => {
     const nextEventsByResultId = /* @__PURE__ */ new Map();
     const nextResults = openEvents.map((event) => {
@@ -6677,7 +6716,11 @@ var Search = ({
         event,
         labels,
         formatPercent,
-        formatCompactCurrency
+        formatCompactCurrency,
+        {
+          priceByOutcomeId: searchDisplayPrices,
+          isPriceLoading: midpointResult.isLoading
+        }
       );
       if (!item) return null;
       nextEventsByResultId.set(item.id, event);
@@ -6687,7 +6730,14 @@ var Search = ({
       validatedResults: nextResults,
       eventsByResultId: nextEventsByResultId
     };
-  }, [formatCompactCurrency, formatPercent, labels, openEvents]);
+  }, [
+    formatCompactCurrency,
+    formatPercent,
+    labels,
+    midpointResult.isLoading,
+    openEvents,
+    searchDisplayPrices
+  ]);
   const hasSearchValue = trimmedValue.length > 0;
   const shouldRenderDropdown = isFocused && shouldSearchValue && !searchConfig.result && !searchConfig.isShowingAllResults;
   const resolvedIsActive = isFocused;
@@ -8771,9 +8821,8 @@ var collectOutcomePrices = (market, outcome, priceByOutcomeId) => {
   const prices = [];
   const seenOutcomeKeys = /* @__PURE__ */ new Set();
   const addPrice = (priceMarket, priceOutcome) => {
-    var _a2;
     if (!priceMarket || !priceOutcome) return;
-    const resolvedPrice = (_a2 = priceByOutcomeId == null ? void 0 : priceByOutcomeId.get(priceOutcome.id)) != null ? _a2 : priceOutcome.price;
+    const resolvedPrice = priceByOutcomeId === void 0 ? priceOutcome.price : priceByOutcomeId.has(priceOutcome.id) ? priceByOutcomeId.get(priceOutcome.id) : void 0;
     const normalizedPrice = normalizeProbability(resolvedPrice);
     if (normalizedPrice == null) return;
     const key = `${priceMarket.id}:${priceOutcome.id}`;
@@ -11457,13 +11506,8 @@ var resolveChartVenueOutcomes = ({
 }) => {
   if (eligibleVenueOutcomes.length <= 1) return eligibleVenueOutcomes;
   const sortedEligibleVenueOutcomes = [...eligibleVenueOutcomes].sort((left, right) => {
-    var _a, _b;
-    const leftProbability = normalizeProbability(
-      (_a = livePrices.get(left.outcome.id)) != null ? _a : left.outcome.price
-    );
-    const rightProbability = normalizeProbability(
-      (_b = livePrices.get(right.outcome.id)) != null ? _b : right.outcome.price
-    );
+    const leftProbability = normalizeProbability(livePrices.get(left.outcome.id));
+    const rightProbability = normalizeProbability(livePrices.get(right.outcome.id));
     const probabilityDifference = (leftProbability != null ? leftProbability : 2) - (rightProbability != null ? rightProbability : 2);
     if (probabilityDifference !== 0) return probabilityDifference;
     if (left.venue === right.venue) return 0;
@@ -12556,6 +12600,12 @@ var EventListItemDetailsNotFoundState = ({
     }
   );
 };
+var resolveResolvedOutcomePriceMap = (outcomes) => {
+  if (!(outcomes == null ? void 0 : outcomes.length)) return null;
+  if (!outcomes.some((outcome) => outcome.winner === true)) return null;
+  if (outcomes.some((outcome) => outcome.winner == null)) return null;
+  return new Map(outcomes.map((outcome) => [outcome.id, outcome.winner === true ? 1 : 0]));
+};
 var EventListItemDetailsGraphSection = ({
   classNames,
   selectedChartType,
@@ -12677,6 +12727,18 @@ var EventListItemDetailsGraphSection = ({
       });
     });
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
+  const resolvedOutcomePriceByMarketId = (0, import_react23.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const market of availableMarkets) {
+      const marketTradingState = (0, import_hooks46.resolveMarketTradingState)(market);
+      if (marketTradingState.kind !== "resolved") continue;
+      const outcomePriceMap = resolveResolvedOutcomePriceMap(market.venueMarketOutcomes);
+      if (outcomePriceMap) {
+        map.set(market.id, outcomePriceMap);
+      }
+    }
+    return map;
+  }, [availableMarkets]);
   const resolvedVenueChartSeries = (0, import_react23.useMemo)(() => {
     return resolveMarketChartVenueSeries({
       chartData: scopedMarketChartData,
@@ -12772,8 +12834,8 @@ var EventListItemDetailsGraphSection = ({
                     classNames == null ? void 0 : classNames.outcomeBadges
                   ),
                   children: chartAvailableVenueOutcomes.map((item) => {
-                    var _a3;
-                    const percentage = (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
+                    var _a3, _b3;
+                    const percentage = (_b3 = (_a3 = resolvedOutcomePriceByMarketId.get(item.market.id)) == null ? void 0 : _a3.get(item.outcome.id)) != null ? _b3 : wsLivePrices.get(item.outcome.id);
                     const text = formatMarketProbabilityPercent(percentage, formatPercent);
                     const seriesId = `${item.venue}-chart`;
                     const isActiveVenue = activeGraphVenue === item.venue;
@@ -12836,21 +12898,21 @@ var EventListItemDetailsGraphSection = ({
                     tradingContext == null ? void 0 : tradingContext.selectOutcome(outcomeId);
                   },
                   options: selectedMarketOutcomes.map((outcome) => {
-                    var _a3, _b3, _c3;
-                    const price = getDisplayOutcomePrice({
+                    var _a3, _b3, _c3, _d3, _e2;
+                    const resolvedPrice = availableMarkets[0] == null ? void 0 : (_b3 = resolvedOutcomePriceByMarketId.get(((_a3 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a3 : availableMarkets[0]).id)) == null ? void 0 : _b3.get(outcome.id);
+                    const price = resolvedPrice != null ? resolvedPrice : getDisplayOutcomePrice({
                       outcomeId: outcome.id,
                       outcomeLabel: outcome.label,
-                      selection: (_a3 = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a3 : "buy",
+                      selection: (_c3 = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _c3 : "buy",
                       bestPrices,
                       bestMidpoint,
                       bestMidpointsByOutcomeId: restMidpoints,
-                      livePrices,
-                      fallbackPrice: outcome.price
+                      livePrices
                     });
                     return {
                       value: outcome.id,
-                      label: `${(_b3 = outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`,
-                      ariaLabel: `${(_c3 = outcome.title) != null ? _c3 : outcome.label} ${formatProbabilityCents(price)}`
+                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price)}`,
+                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price)}`
                     };
                   })
                 }
@@ -13930,6 +13992,34 @@ var getMarketDetailsOutcomeButtonClassNames = ({
     text: cn(isSelected ? toneClasses.text : "text-agg-foreground")
   };
 };
+var OutcomePriceContent = ({
+  isLoading,
+  isSelected,
+  value,
+  textClassName
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "agg-market-details-outcome-price-loading",
+          "h-4 w-10 shrink-0 rounded-agg-sm bg-agg-separator animate-pulse"
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+    Typography,
+    {
+      as: "span",
+      variant: isSelected ? "body-strong" : "body",
+      className: cn("shrink-0 whitespace-nowrap", textClassName),
+      children: formatProbabilityCents(value)
+    }
+  );
+};
 var MarketDetailsOutcomeButton = ({
   ariaControls,
   enableAnimations,
@@ -13985,12 +14075,12 @@ var MarketDetailsOutcomeButton = ({
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-          Typography,
+          OutcomePriceContent,
           {
-            as: "span",
-            variant: isSelected ? "body-strong" : "body",
-            className: cn("shrink-0 whitespace-nowrap", classNames.text),
-            children: formatProbabilityCents(item.probability)
+            isLoading: item.isPriceLoading,
+            isSelected,
+            value: item.probability,
+            textClassName: classNames.text
           }
         )
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "inline-flex max-w-full items-center justify-center gap-1.5", children: [
@@ -14005,12 +14095,12 @@ var MarketDetailsOutcomeButton = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-          Typography,
+          OutcomePriceContent,
           {
-            as: "span",
-            variant: isSelected ? "body-strong" : "body",
-            className: cn("shrink-0 whitespace-nowrap", classNames.text),
-            children: formatProbabilityCents(item.probability)
+            isLoading: item.isPriceLoading,
+            isSelected,
+            value: item.probability,
+            textClassName: classNames.text
           }
         )
       ] })
@@ -14202,9 +14292,8 @@ var MarketDetailsGraphPanel = ({
           var _a2, _b2, _c2, _d;
           return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
             /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
-              var _a3;
               const probability = formatProbabilityPercent(
-                (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
+                wsLivePrices.get(item.outcome.id),
                 formatPercent
               );
               const isActiveVenue = selectedGraphVenue === item.venue;
@@ -14415,16 +14504,8 @@ var MarketDetailsContent = ({
     isResolvedMarket ? [] : resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets,
     (_b = scopedResolvedMarket == null ? void 0 : scopedResolvedMarket.id) != null ? _b : null
   );
-  const clusterMidpointResult = midpointsResult != null ? midpointsResult : {
-    prices: /* @__PURE__ */ new Map(),
-    bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
-    venueByOutcomeId: /* @__PURE__ */ new Map(),
-    bestPrices: /* @__PURE__ */ new Map(),
-    bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
-    isLoading: false,
-    bestMidpoint: void 0,
-    bestMidpointVenue: void 0
-  };
+  const fetchedClusterMidpointResult = (0, import_hooks49.useMidpoints)(midpointsResult ? [] : clusterVenueMarkets);
+  const clusterMidpointResult = midpointsResult != null ? midpointsResult : fetchedClusterMidpointResult;
   const clusterMidpoints = (_c = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _c : clusterMidpointResult.prices;
   const clusterBestMidpointsByOutcomeId = clusterMidpoints;
   const clusterVenueByOutcomeId = clusterMidpointResult.venueByOutcomeId;
@@ -14584,18 +14665,24 @@ var MarketDetailsContent = ({
       });
       const bestVenue = candidate == null ? void 0 : candidate.venue;
       const outcomeBestPrice = candidate == null ? void 0 : candidate.price;
+      const isPriceLoading = !isResolvedMarket && outcomeBestPrice == null && clusterMidpointResult.isLoading;
       if (isResolvedMarket) {
         const isWinningOutcome = item.id === ((_a2 = marketTradingState.winningOutcome) == null ? void 0 : _a2.id);
         return __spreadValues(__spreadProps(__spreadValues({}, item), {
-          probability: isWinningOutcome ? 1 : 0
+          probability: isWinningOutcome ? 1 : 0,
+          isPriceLoading: false
         }), bestVenue ? { venue: bestVenue } : {});
       }
       if (outcomeBestPrice != null) {
         return __spreadValues(__spreadProps(__spreadValues({}, item), {
-          probability: outcomeBestPrice
+          probability: outcomeBestPrice,
+          isPriceLoading: false
         }), bestVenue ? { venue: bestVenue } : {});
       }
-      return item;
+      return __spreadProps(__spreadValues({}, item), {
+        probability: void 0,
+        isPriceLoading
+      });
     });
   }, [
     clusterBestMidpoint,
@@ -14617,7 +14704,7 @@ var MarketDetailsContent = ({
     wsBestCandidates
   ]);
   const headlineProbability = (0, import_react27.useMemo)(() => {
-    var _a2, _b2, _c2, _d2;
+    var _a2;
     if (!model || !scopedMarketForCard) return void 0;
     if (isResolvedMarket) {
       const yesOutcome2 = resolveYesOutcome(scopedMarketForCard);
@@ -14625,10 +14712,7 @@ var MarketDetailsContent = ({
       return yesOutcome2.winner === true ? 1 : 0;
     }
     const yesOutcome = resolveYesOutcome(scopedMarketForCard);
-    const displayOutcome = yesOutcome != null ? yesOutcome : (_b2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _b2.reduce(
-      (acc, outcome) => outcome.price > acc.price ? outcome : acc,
-      (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0]
-    );
+    const displayOutcome = yesOutcome != null ? yesOutcome : (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0];
     if (displayOutcome == null) return void 0;
     const referencePrice = getDisplayOutcomePrice({
       outcomeId: displayOutcome.id,
@@ -14638,10 +14722,10 @@ var MarketDetailsContent = ({
       bestMidpoint: clusterBestMidpoint,
       bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
       livePrices: wsLivePrices,
-      fallbackPrice: (_c2 = midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)) != null ? _c2 : displayOutcome.price
+      fallbackPrice: midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)
     });
     if (referencePrice != null) return referencePrice;
-    return (_d2 = (0, import_hooks49.findLivePriceById)(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
+    return (0, import_hooks49.findLivePriceById)(wsLivePrices, displayOutcome.id);
   }, [
     clusterBestMidpoint,
     clusterBestMidpointsByOutcomeId,
@@ -16206,7 +16290,7 @@ var mapVenueMarketOutcomesToPlaceOrderOutcomes = (venueMarketOutcomes) => {
       label: outcome.label,
       title: (_a = outcome.title) != null ? _a : null,
       price: outcome.price,
-      priceLabel: getTradingPriceLabel(outcome.price)
+      priceLabel: outcome.price != null ? getTradingPriceLabel(outcome.price) : ""
     };
   });
 };
@@ -18426,16 +18510,10 @@ var PlaceOrder = ({
     scopedSelectedMarket ? [scopedSelectedMarket] : void 0
   );
   const wsBestPrices = (0, import_hooks54.useLiveBestPrices)(scopedSelectedMarket ? [scopedSelectedMarket] : void 0);
-  const clusterMidpointResult = midpointsResult != null ? midpointsResult : {
-    prices: /* @__PURE__ */ new Map(),
-    bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
-    venueByOutcomeId: /* @__PURE__ */ new Map(),
-    bestPrices: /* @__PURE__ */ new Map(),
-    bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
-    isLoading: false,
-    bestMidpoint: void 0,
-    bestMidpointVenue: void 0
-  };
+  const fetchedClusterMidpointResult = (0, import_hooks54.useMidpoints)(
+    midpointsResult ? [] : scopedSelectedMarket ? [scopedSelectedMarket] : []
+  );
+  const clusterMidpointResult = midpointsResult != null ? midpointsResult : fetchedClusterMidpointResult;
   const clusterBestMidpointsByOutcomeId = (_i = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _i : clusterMidpointResult.prices;
   const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
   const clusterBestPricesRest = clusterMidpointResult.bestPrices;
@@ -19618,11 +19696,11 @@ var PlaceOrder = ({
                 bestPrices: clusterBestPrices,
                 bestMidpoint: clusterBestMidpoint,
                 bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
-                livePrices,
-                fallbackPrice: outcome.price
+                livePrices
               });
               const isActive = outcome.id === scopedSelectedOutcomeId;
               const isPositive = resolveIsPositiveOutcome(outcome, index);
+              const isPriceLoading = clusterMidpointResult.isLoading && price == null;
               return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
                 "button",
                 {
@@ -19652,7 +19730,16 @@ var PlaceOrder = ({
                         children: (_c2 = outcome.title) != null ? _c2 : outcome.label
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Typography, { as: "span", variant: isActive ? "body-strong" : "body", children: formatProbabilityCents(price) })
+                    isPriceLoading ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "agg-place-order-outcome-price-loading",
+                          "h-4 w-10 shrink-0 rounded-agg-sm bg-agg-separator animate-pulse"
+                        )
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Typography, { as: "span", variant: isActive ? "body-strong" : "body", children: formatProbabilityCents(price) })
                   ]
                 },
                 outcome.id
@@ -20839,6 +20926,7 @@ var SPORTS_PERIOD_KEYS = [
   "first_5_innings",
   "other"
 ];
+var SPORTS_PERIOD_GRAMMAR_PATTERN = /^(?:(set|map|game|period|inning)_(\d{1,2})|first_(\d{1,2})_innings)$/;
 var SPORTS_MARKET_CATEGORY_KEYS = [
   "game_lines",
   "exact_score",
@@ -20967,9 +21055,22 @@ var stripLineValueFromQuestion = (question) => {
   const strippedQuestion = sanitizeFamilyValue(question);
   return strippedQuestion ? question.replace(/\(\s*[+-]?\d+(?:\.\d+)?\s*\)\s*$/g, "").replace(/\s+[+-]?\d+(?:\.\d+)?\s*$/g, "").replace(/\s+/g, " ").trim() : question.trim();
 };
+var SPORTS_PERIOD_FAMILY_ORDER = ["period", "inning", "set", "map", "game"];
 var getSportsPeriodOrderIndex = (period) => {
+  var _a, _b;
   const periodIndex = SPORTS_PERIOD_ORDER.indexOf(period);
-  return periodIndex >= 0 ? periodIndex : SPORTS_PERIOD_ORDER.length;
+  if (periodIndex >= 0) {
+    return period === "other" ? Number.MAX_SAFE_INTEGER : periodIndex;
+  }
+  const grammarMatch = SPORTS_PERIOD_GRAMMAR_PATTERN.exec(period);
+  if (grammarMatch) {
+    const familyIndex = grammarMatch[1] ? SPORTS_PERIOD_FAMILY_ORDER.indexOf(
+      grammarMatch[1]
+    ) : SPORTS_PERIOD_FAMILY_ORDER.length;
+    const scopeNumber = Number((_b = (_a = grammarMatch[2]) != null ? _a : grammarMatch[3]) != null ? _b : 0);
+    return SPORTS_PERIOD_ORDER.length + familyIndex * 100 + scopeNumber;
+  }
+  return Number.MAX_SAFE_INTEGER - 1;
 };
 var getSportsMarketTypeOrderIndex = (sportsMarketType) => {
   if (!sportsMarketType) return SPORTS_MARKET_TYPE_ORDER.length;
@@ -20986,7 +21087,10 @@ var resolveSportsSectionDefinition = (key) => {
 var normalizeSportsPeriod = (value) => {
   const resolvedValue = toTrimmedString(value).toLowerCase();
   if (!resolvedValue) return "full";
-  return SPORTS_PERIOD_KEY_SET.has(resolvedValue) ? resolvedValue : "other";
+  if (resolvedValue === "match") return "full";
+  if (SPORTS_PERIOD_KEY_SET.has(resolvedValue)) return resolvedValue;
+  if (SPORTS_PERIOD_GRAMMAR_PATTERN.test(resolvedValue)) return resolvedValue;
+  return "other";
 };
 var normalizeSportsMarketType = (value) => {
   const resolvedValue = toTrimmedString(value).toLowerCase();
@@ -21069,8 +21173,7 @@ var isBinarySportsMoneylineMarket = (market) => {
   );
   const marketSubtype = toTrimmedString(market.marketSubtype).toLowerCase();
   const marketGroup = normalizeSportsMarketGroup(market.marketGroup);
-  const hasMoneylineAggKey = toTrimmedString(market.aggKey).includes("_ml_");
-  return (marketSubtype === "moneyline" || hasMoneylineAggKey) && marketGroup === "game_lines" && normalizeSportsPeriod(market.period) === "full" && normalizedOutcomeLabels.length === 2 && normalizedOutcomeLabels.every((label2) => YES_NO_LABELS.has(label2));
+  return marketSubtype === "moneyline" && marketGroup === "game_lines" && normalizeSportsPeriod(market.period) === "full" && normalizedOutcomeLabels.length === 2 && normalizedOutcomeLabels.every((label2) => YES_NO_LABELS.has(label2));
 };
 var resolveDisplayGroupFamilyKey = (market) => {
   var _a, _b, _c;
@@ -21295,6 +21398,15 @@ var buildSportsSlideFromGroup = (group) => {
     defaultStopIndex
   };
 };
+var formatSportsPeriodGrammarLabel = (period) => {
+  const grammarMatch = SPORTS_PERIOD_GRAMMAR_PATTERN.exec(period);
+  if (!grammarMatch) return null;
+  if (grammarMatch[1]) {
+    const family = grammarMatch[1].charAt(0).toUpperCase() + grammarMatch[1].slice(1);
+    return `${family} ${Number(grammarMatch[2])}`;
+  }
+  return `First ${Number(grammarMatch[3])} Innings`;
+};
 var resolveSportsCategoryTokens = (event) => {
   return new Set(
     event.categories.flatMap((entry) => {
@@ -21428,7 +21540,7 @@ var SportsMarketCard = ({
   const combinedMoneylineHeaderOutcomeItems = (0, import_react36.useMemo)(() => {
     if (!isCombinedMoneylineGroup) return void 0;
     return combinedMoneylineMarkets.flatMap((market, index) => {
-      var _a2;
+      var _a2, _b2;
       const typedMarket = market;
       const yesOutcome = market.venueMarketOutcomes.find(
         (outcome) => outcome.label.trim().toLowerCase() === "yes"
@@ -21436,19 +21548,25 @@ var SportsMarketCard = ({
       if (!yesOutcome) return [];
       const label2 = ((_a2 = typedMarket.shortTitle) == null ? void 0 : _a2.trim()) || market.question.trim();
       if (!label2) return [];
+      const probability = midpointsResult == null ? void 0 : getDisplayOutcomePrice({
+        outcomeId: yesOutcome.id,
+        outcomeLabel: yesOutcome.label,
+        bestMidpointsByOutcomeId: (_b2 = midpointsResult.bestMidpointsByOutcomeId) != null ? _b2 : midpointsResult.prices
+      });
       return [
         {
           id: yesOutcome.id,
           label: label2,
           title: label2,
-          probability: yesOutcome.price,
+          probability,
+          isPriceLoading: (midpointsResult == null ? void 0 : midpointsResult.isLoading) === true && probability == null,
           tone: index === 0 ? "positive" : "negative",
           variant: "outcome",
           venue: market.venue
         }
       ];
     });
-  }, [combinedMoneylineMarkets, isCombinedMoneylineGroup]);
+  }, [combinedMoneylineMarkets, isCombinedMoneylineGroup, midpointsResult]);
   const headerOutcomeVariant = isCombinedMoneylineGroup ? "outcome" : resolveSportsMarketCardVariant(activeMarket);
   const handleLineSelect = (index) => {
     var _a2, _b2;
@@ -21532,6 +21650,7 @@ var resolveSportsSectionLabel = (labels, key) => {
   }
 };
 var resolveSportsPeriodLabel = (labels, period) => {
+  var _a;
   switch (period) {
     case "full":
       return labels.eventMarketPage.sports.fullPeriod;
@@ -21559,6 +21678,8 @@ var resolveSportsPeriodLabel = (labels, period) => {
       return "1st 5 Innings";
     case "other":
       return labels.eventMarketPage.sports.otherPeriod;
+    default:
+      return (_a = formatSportsPeriodGrammarLabel(period)) != null ? _a : labels.eventMarketPage.sports.otherPeriod;
   }
 };
 var SportsTabButton = ({

package/dist/pages.mjs

@@ -8,17 +8,17 @@ import {
   UserProfilePage,
   buildAggTxExplorerHref,
   useHomePageModals
-} from "./chunk-FLESSOSU.mjs";
-import "./chunk-TBZWRUFB.mjs";
+} from "./chunk-DTOI4V6P.mjs";
+import "./chunk-BTRFSEPC.mjs";
 import {
   DEPOSIT_MODAL_OPEN_EVENT,
   WITHDRAW_MODAL_OPEN_EVENT,
   requestAggDepositModalOpen,
   requestAggWithdrawModalOpen
-} from "./chunk-BW7S2YR3.mjs";
-import "./chunk-R2YNZJZ3.mjs";
-import "./chunk-T4YZGAYS.mjs";
-import "./chunk-VP76G6PN.mjs";
+} from "./chunk-73MO7MYG.mjs";
+import "./chunk-TR7HUVY7.mjs";
+import "./chunk-5MRFY5ZQ.mjs";
+import "./chunk-MIAAL7BL.mjs";
 export {
   DEPOSIT_MODAL_OPEN_EVENT,
   EventMarketPage,