@agg-build/ui 1.0.0 → 1.0.1

package/dist/{chunk-2QJXRRYP.mjs → chunk-43K4PFBC.mjs}

@@ -1,15 +1,16 @@
 "use client";
 import {
+  AGG_TERMS_OF_SERVICE_URL,
   Icon,
   cn
-} from "./chunk-6NS7D73S.mjs";
+} from "./chunk-YZNO6IUD.mjs";
 
 // src/geo-block-banner/index.tsx
 import { useLabels } from "@agg-build/hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 var GeoBlockBanner = ({
   venue,
-  termsUrl = "#",
+  termsUrl = AGG_TERMS_OF_SERVICE_URL,
   className
 }) => {
   const labels = useLabels();

package/dist/{chunk-I2WBGEWK.mjs → chunk-5ES2VJHO.mjs}

@@ -19,7 +19,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-C7T56TJR.mjs";
+} from "./chunk-HD6HBTK2.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -44,6 +44,7 @@ import {
   __spreadProps,
   __spreadValues,
   baseCardClassName,
+  buildSpreadByVenueMarketId,
   cn,
   dedupeVenueMarketsById,
   detailsBaseCardClassName,
@@ -61,16 +62,16 @@ import {
   normalizeProbability,
   normalizeVenueMarketCluster,
   orderBookRowLimitDefault,
+  resolveBestMidpointForMarket,
   resolveDisplayVolume,
   resolveEventListItemEvent,
   resolveOutcomeTitle,
   resolveTabVenus,
   resolveYesOutcome,
-  selectPrimaryVenueMarket,
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-6NS7D73S.mjs";
+} from "./chunk-YZNO6IUD.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -186,9 +187,6 @@ var EventListItemContent = ({
   const allVenueMarkets = useMemo(() => {
     return dedupeVenueMarketsById(event.venueMarkets);
   }, [event.venueMarkets]);
-  const _primaryVenueMarket = useMemo(() => {
-    return selectPrimaryVenueMarket(allVenueMarkets);
-  }, [allVenueMarkets]);
   const resolvedTitle = event.title;
   const resolvedImage = event.image;
   const visibleVenueLogos = useMemo(() => {
@@ -199,11 +197,12 @@ var EventListItemContent = ({
   const resolvedVenueCount = typeof event.venueCount === "number" && Number.isFinite(event.venueCount) ? Math.max(0, Math.floor(event.venueCount)) : visibleVenueLogos.length;
   const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = useState(false);
   const shouldEnableLazyMarketLoading = useMemo(() => {
-    if (allVenueMarkets.length <= 1) return false;
     if (!event.id) return false;
     const hasExplicitMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount);
-    if (!hasExplicitMarketCount) return true;
-    return resolvedMarketCount > allVenueMarkets.length;
+    if (hasExplicitMarketCount) {
+      return resolvedMarketCount > allVenueMarkets.length;
+    }
+    return allVenueMarkets.length > 1;
   }, [allVenueMarkets.length, event.id, event.marketCount, resolvedMarketCount]);
   const {
     markets: lazyLoadedMarkets,
@@ -234,12 +233,17 @@ var EventListItemContent = ({
   }, [resolvedOutcomeMarkets]);
   const {
     midpointsByVenueMarketId,
+    midpointRows,
     isLoading: isLoadingMidpoints,
     isFetching: isFetchingMidpoints
   } = useVenueMarketMidpoints({
     venueMarketIds: midpointVenueMarketIds,
     enabled: midpointVenueMarketIds.length > 0
   });
+  const spreadByVenueMarketId = useMemo(
+    () => buildSpreadByVenueMarketId(midpointRows),
+    [midpointRows]
+  );
   const gapsByVenueMarketId = useMemo(
     () => computePriceGaps({
       markets: resolvedOutcomeMarkets,
@@ -248,13 +252,7 @@ var EventListItemContent = ({
     [resolvedOutcomeMarkets, midpointsByVenueMarketId]
   );
   const isMidpointQueryInFlight = isLoadingMidpoints || isFetchingMidpoints;
-  const resolveMarketMidpoint = useCallback(
-    (marketId) => {
-      return normalizeProbability(midpointsByVenueMarketId.get(marketId));
-    },
-    [midpointsByVenueMarketId]
-  );
-  const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && isLazyMarketsQueryEnabled && (isLoadingLazyMarkets || isFetchingNextLazyMarketsPage);
+  const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && (!isLazyMarketsQueryEnabled || isLoadingLazyMarkets || isFetchingNextLazyMarketsPage || hasNextLazyMarketsPage);
   const resolvedVolume = resolveDisplayVolume(event.volume, allVenueMarkets);
   const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
   const shouldUseNativeLinkNavigation = (eventToHandle) => {
@@ -460,72 +458,87 @@ var EventListItemContent = ({
             ),
             onScroll: handleOutcomesScroll,
             children: [
-              resolvedOutcomeMarkets.length === 1 ? sortOutcomes(resolvedOutcomeMarkets[0].venueMarketOutcomes).map((outcome) => {
+              resolvedOutcomeMarkets.length === 1 ? (() => {
+                var _a;
                 const market = resolvedOutcomeMarkets[0];
-                const marketMidpoint = resolveMarketMidpoint(market.id);
+                const bestMidpoint = resolveBestMidpointForMarket(
+                  market,
+                  midpointsByVenueMarketId,
+                  spreadByVenueMarketId
+                );
+                const marketMidpoint = bestMidpoint != null ? normalizeProbability(bestMidpoint.midpoint) : void 0;
+                const bestVenue = (_a = bestMidpoint == null ? void 0 : bestMidpoint.venue) != null ? _a : market.venue;
                 const hasYesOutcome = market.venueMarketOutcomes.some(
                   (item) => isYesLabel(item.label)
                 );
                 const hasNoOutcome = market.venueMarketOutcomes.some((item) => isNoLabel(item.label));
                 const shouldUseMidpoint = hasYesOutcome && hasNoOutcome;
-                const probability = (() => {
-                  if (!shouldUseMidpoint) {
-                    return normalizeProbability(outcome.price);
-                  }
-                  if (marketMidpoint == null) {
-                    if (isMidpointQueryInFlight) return void 0;
+                return sortOutcomes(market.venueMarketOutcomes).map((outcome) => {
+                  const probability = (() => {
+                    if (!shouldUseMidpoint) {
+                      return normalizeProbability(outcome.price);
+                    }
+                    if (marketMidpoint == null) {
+                      if (isMidpointQueryInFlight) return void 0;
+                      return normalizeProbability(outcome.price);
+                    }
+                    if (isYesLabel(outcome.label)) {
+                      return marketMidpoint;
+                    }
+                    if (isNoLabel(outcome.label)) {
+                      return normalizeProbability(1 - marketMidpoint);
+                    }
                     return normalizeProbability(outcome.price);
-                  }
-                  if (isYesLabel(outcome.label)) {
-                    return marketMidpoint;
-                  }
-                  if (isNoLabel(outcome.label)) {
-                    return normalizeProbability(1 - marketMidpoint);
-                  }
-                  return normalizeProbability(outcome.price);
-                })();
-                const shouldRenderMidpointSkeleton = shouldUseMidpoint && marketMidpoint == null && isMidpointQueryInFlight;
-                const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[outcome.id];
-                const _priceGapPct = gapsByVenueMarketId.get(market.id);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "agg-outcome-row",
-                      "flex flex-row gap-3 w-full items-center justify-between",
-                      classNames == null ? void 0 : classNames.outcomeRow
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "body",
-                          className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
-                          children: resolveOutcomeTitle(outcome)
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
-                        renderArbitrage(arbitragePercent),
-                        renderOutcomePriceBadge(
-                          probability,
-                          market.venue,
-                          shouldRenderMidpointSkeleton,
-                          market,
-                          outcome
-                        )
-                      ] })
-                    ]
-                  },
-                  outcome.id
-                );
-              }) : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
-                var _a, _b;
+                  })();
+                  const shouldRenderMidpointSkeleton = shouldUseMidpoint && marketMidpoint == null && isMidpointQueryInFlight;
+                  const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[outcome.id];
+                  const _priceGapPct = gapsByVenueMarketId.get(market.id);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "agg-outcome-row",
+                        "flex flex-row gap-3 w-full items-center justify-between",
+                        classNames == null ? void 0 : classNames.outcomeRow
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            variant: "body",
+                            className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
+                            children: resolveOutcomeTitle(outcome)
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
+                          renderArbitrage(arbitragePercent),
+                          renderOutcomePriceBadge(
+                            probability,
+                            bestVenue,
+                            shouldRenderMidpointSkeleton,
+                            market,
+                            outcome
+                          )
+                        ] })
+                      ]
+                    },
+                    outcome.id
+                  );
+                });
+              })() : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
+                var _a, _b, _c;
                 const yesOutcome = resolveYesOutcome(market);
                 const displayOutcome = yesOutcome != null ? yesOutcome : (_b = market.venueMarketOutcomes) == null ? void 0 : _b.reduce(
                   (acc, o) => o.price > acc.price ? o : acc,
                   (_a = market.venueMarketOutcomes) == null ? void 0 : _a[0]
                 );
-                const marketMidpoint = resolveMarketMidpoint(market.id);
+                const bestMidpoint = resolveBestMidpointForMarket(
+                  market,
+                  midpointsByVenueMarketId,
+                  spreadByVenueMarketId
+                );
+                const marketMidpoint = bestMidpoint != null ? normalizeProbability(bestMidpoint.midpoint) : void 0;
+                const bestVenue = (_c = bestMidpoint == null ? void 0 : bestMidpoint.venue) != null ? _c : market.venue;
                 const probability = marketMidpoint != null ? marketMidpoint : isMidpointQueryInFlight ? void 0 : normalizeProbability(displayOutcome == null ? void 0 : displayOutcome.price);
                 const shouldRenderMidpointSkeleton = marketMidpoint == null && isMidpointQueryInFlight;
                 const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[market.id];
@@ -552,7 +565,7 @@ var EventListItemContent = ({
                         renderArbitrage(arbitragePercent),
                         renderOutcomePriceBadge(
                           probability,
-                          market.venue,
+                          bestVenue,
                           shouldRenderMidpointSkeleton,
                           market,
                           displayOutcome
@@ -1874,6 +1887,8 @@ var EventListItemDetailsGraphSection = ({
   selectedChartType,
   venueMarkets,
   livePrices,
+  wsLivePrices,
+  restMidpoints,
   live
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
@@ -2030,7 +2045,7 @@ var EventListItemDetailsGraphSection = ({
                   ),
                   children: chartAvailableVenueOutcomes.map((item) => {
                     var _a3;
-                    const percentage = (_a3 = livePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
+                    const percentage = (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
                     const text = formatMarketProbabilityPercent(percentage, formatPercent);
                     const seriesId = `${item.venue}-chart`;
                     const isActiveVenue = activeGraphVenue === item.venue;
@@ -2091,8 +2106,8 @@ var EventListItemDetailsGraphSection = ({
                     tradingContext == null ? void 0 : tradingContext.selectOutcome(outcomeId);
                   },
                   options: selectedMarketOutcomes.map((outcome) => {
-                    var _a3;
-                    const price = (_a3 = livePrices.get(outcome.id)) != null ? _a3 : outcome.price;
+                    var _a3, _b3;
+                    const price = (_b3 = (_a3 = restMidpoints.get(outcome.id)) != null ? _a3 : livePrices.get(outcome.id)) != null ? _b3 : outcome.price;
                     return {
                       value: outcome.id,
                       label: `${outcome.label} ${formatProbabilityCents(price)}`,
@@ -2309,6 +2324,8 @@ var EventListItemDetailsContent = ({
               venueInfo,
               venueMarkets,
               livePrices,
+              wsLivePrices,
+              restMidpoints,
               live: false
             }
           ),
@@ -2539,18 +2556,42 @@ var useCenterOrderbookSpread = ({
     if (!enabled) return;
     if (hasAutoCenteredRef.current || hasUserScrolledRef.current) return;
     let isCancelled = false;
+    let resizeObserver = null;
     const cancelPendingFrame = () => {
       if (animationFrameRef.current === null) return;
       window.cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
     };
+    const disconnectResizeObserver = () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      resizeObserver = null;
+    };
     const scheduleMeasurement = () => {
       cancelPendingFrame();
       animationFrameRef.current = window.requestAnimationFrame(measureAndCenter);
     };
+    const setupResizeObserverFallback = () => {
+      if (resizeObserver) return;
+      const container = containerRef.current;
+      if (!container) return;
+      resizeObserver = new ResizeObserver(() => {
+        if (isCancelled || hasAutoCenteredRef.current || hasUserScrolledRef.current) {
+          disconnectResizeObserver();
+          return;
+        }
+        if (container.clientHeight <= 0) return;
+        disconnectResizeObserver();
+        retryCountRef.current = 0;
+        scheduleMeasurement();
+      });
+      resizeObserver.observe(container);
+    };
     const scheduleRetry = () => {
       if (isCancelled || hasUserScrolledRef.current || hasAutoCenteredRef.current) return;
-      if (retryCountRef.current >= maxAutoCenterAttempts) return;
+      if (retryCountRef.current >= maxAutoCenterAttempts) {
+        setupResizeObserverFallback();
+        return;
+      }
       retryCountRef.current += 1;
       scheduleMeasurement();
     };
@@ -2575,6 +2616,11 @@ var useCenterOrderbookSpread = ({
       }
       const spreadOffsetTop = container.scrollTop + (spreadRect.top - containerRect.top);
       const maxScrollTop = Math.max(0, container.scrollHeight - containerHeight);
+      if (maxScrollTop === 0) {
+        retryCountRef.current = 0;
+        animationFrameRef.current = null;
+        return;
+      }
       const targetScrollTop = Math.max(
         0,
         Math.min(maxScrollTop, spreadOffsetTop - containerHeight / 2 + spreadRect.height / 2)
@@ -2583,11 +2629,13 @@ var useCenterOrderbookSpread = ({
       hasAutoCenteredRef.current = true;
       retryCountRef.current = 0;
       animationFrameRef.current = null;
+      disconnectResizeObserver();
     };
     scheduleMeasurement();
     return () => {
       isCancelled = true;
       cancelPendingFrame();
+      disconnectResizeObserver();
     };
   }, [containerRef, enabled, resetKey, rowCount, spreadRef]);
   const recenter = useCallback3(() => {
@@ -2988,6 +3036,7 @@ var MarketDetailsOutcomeButton = ({
       type: "button",
       role: "tab",
       "data-id": item.id,
+      "data-venue": item.venue,
       "aria-controls": ariaControls,
       "aria-selected": isSelected,
       tabIndex: isSelected ? 0 : -1,
@@ -3089,7 +3138,8 @@ var MarketDetailsContent = ({
   classNames,
   otherContent,
   live,
-  midpointsFallback
+  midpointsFallback,
+  midpointsFallbackVenues
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const config = useSdkUiConfig3();
@@ -3120,7 +3170,7 @@ var MarketDetailsContent = ({
     if (!controlledIsOpened || !resolvedMarket) return [];
     return resolvedMarket.venueMarkets;
   }, [controlledIsOpened, resolvedMarket]);
-  const { prices: clusterMidpoints } = useMidpoints2(clusterMidpointMarkets);
+  const { prices: clusterMidpoints, venueByOutcomeId: clusterVenueByOutcomeId } = useMidpoints2(clusterMidpointMarkets);
   const livePrices = useMemo5(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
@@ -3202,24 +3252,39 @@ var MarketDetailsContent = ({
     if (!model) return [];
     const items = resolveHeaderOutcomeItems(model.market.venueMarkets);
     return items.map((item) => {
-      const livePrice = findLivePriceById(livePrices, item.id);
-      return livePrice != null ? __spreadProps(__spreadValues({}, item), { probability: livePrice }) : item;
+      const clusterPrice = clusterMidpoints.get(item.id);
+      if (clusterPrice != null) {
+        const bestVenue = clusterVenueByOutcomeId.get(item.id);
+        return __spreadValues(__spreadProps(__spreadValues({}, item), { probability: clusterPrice }), bestVenue ? { venue: bestVenue } : {});
+      }
+      const fallbackPrice = midpointsFallback == null ? void 0 : midpointsFallback.get(item.id);
+      if (fallbackPrice != null) {
+        const bestVenue = midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id);
+        return __spreadValues(__spreadProps(__spreadValues({}, item), { probability: fallbackPrice }), bestVenue ? { venue: bestVenue } : {});
+      }
+      const wsPrice = findLivePriceById(wsLivePrices, item.id);
+      return wsPrice != null ? __spreadProps(__spreadValues({}, item), { probability: wsPrice }) : item;
     });
-  }, [model, livePrices]);
+  }, [
+    model,
+    clusterMidpoints,
+    clusterVenueByOutcomeId,
+    midpointsFallback,
+    midpointsFallbackVenues,
+    wsLivePrices
+  ]);
   const headlineProbability = useMemo5(() => {
-    var _a2, _b2;
+    var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
-    const resolveLiveProbability = (outcomeId, fallbackPrice) => {
-      const liveProbability = findLivePriceById(livePrices, outcomeId);
-      return liveProbability != null ? liveProbability : fallbackPrice;
-    };
     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]
     );
-    return resolveLiveProbability(displayOutcome.id, displayOutcome.price);
-  }, [model, scopedMarketForCard, livePrices]);
+    const restPrice = (_c2 = clusterMidpoints.get(displayOutcome.id)) != null ? _c2 : midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id);
+    if (restPrice != null) return restPrice;
+    return (_d2 = findLivePriceById(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
+  }, [model, scopedMarketForCard, clusterMidpoints, midpointsFallback, wsLivePrices]);
   const selectedOutcomesByVenue = useMemo5(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
@@ -3719,7 +3784,7 @@ var MarketDetailsContent = ({
                                 /* @__PURE__ */ jsx9("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
                                   var _a3;
                                   const probability = formatProbabilityPercent(
-                                    (_a3 = livePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
+                                    (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
                                     formatPercent
                                   );
                                   const isActiveVenue = selectedGraphVenue === item.venue;
@@ -3765,8 +3830,7 @@ var MarketDetailsContent = ({
                                       setChartOutcomeLabel(outcome.label);
                                     },
                                     options: headerOutcomeItems.map((outcome) => {
-                                      var _a3;
-                                      const price = (_a3 = livePrices.get(outcome.id)) != null ? _a3 : outcome.probability;
+                                      const price = outcome.probability;
                                       const outcomeLabel = `${outcome.label} ${formatProbabilityCents(price)}`;
                                       return {
                                         value: outcome.id,
@@ -3872,7 +3936,8 @@ var MarketDetails = (_a) => {
         isOpened,
         onOpenChange: props.onOpenChange,
         venueMarkets: props.venueMarkets,
-        midpointsFallback: props.midpointsFallback
+        midpointsFallback: props.midpointsFallback,
+        midpointsFallbackVenues: props.midpointsFallbackVenues
       })
     );
   }
@@ -4009,7 +4074,7 @@ var MarketDetailsList = ({
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const { prices: midpointsFallback } = useViewportMidpoints(displayedMarkets);
+  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(displayedMarkets);
   useEffect5(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
@@ -4122,7 +4187,8 @@ var MarketDetailsList = ({
       ariaLabel: market.question,
       classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) },
       live,
-      midpointsFallback
+      midpointsFallback,
+      midpointsFallbackVenues
     }
   ) }, market.id);
   return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [