@agg-build/ui 2.1.0 → 2.1.2

package/dist/{chunk-R6FBYAY5.mjs → chunk-JJDYOBVG.mjs}

@@ -22,7 +22,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-C5M2OOM3.mjs";
+} from "./chunk-5RBHMMY3.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -52,6 +52,7 @@ import {
   dedupeVenueMarketsById,
   detailsBaseCardClassName,
   filterEventsByTabValue,
+  formatEventTitleWithDateSuffix,
   formatMarketProbabilityPercent,
   formatPriceGapPercent,
   getMarketDetailsTabs,
@@ -72,7 +73,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-DXF2LMNN.mjs";
+} from "./chunk-TBD3N4T4.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -353,7 +354,14 @@ var EventListItemContent = ({
   const config = useSdkUiConfig();
   const labels = useLabels();
   const allVenueMarkets = useMemo(() => event.venueMarkets, [event.venueMarkets]);
-  const resolvedTitle = event.title;
+  const resolvedTitle = formatEventTitleWithDateSuffix({
+    title: event.title,
+    categories: event.categories,
+    structureType: event.structureType,
+    gameStartTime: event.gameStartTime,
+    endDate: event.endDate,
+    locale: config.general.locale
+  });
   const resolvedImage = event.image;
   const visibleVenueLogos = useMemo(() => {
     var _a2;
@@ -2495,11 +2503,28 @@ var EventListItemDetailsContent = ({
     if (typeof resolvedVolume !== "number") return "";
     return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
   }, [config, event.volume, labels.eventItemDetails.volumeSuffix, venueMarkets]);
+  const resolvedTitle = useMemo5(() => {
+    return formatEventTitleWithDateSuffix({
+      title: event.title,
+      categories: event.categories,
+      structureType: event.structureType,
+      gameStartTime: event.gameStartTime,
+      endDate: event.endDate,
+      locale: config.general.locale
+    });
+  }, [
+    config.general.locale,
+    event.categories,
+    event.gameStartTime,
+    event.endDate,
+    event.structureType,
+    event.title
+  ]);
   return /* @__PURE__ */ jsxs4(
     Card,
     {
       className: cn("group/agg-event-details", detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       onClick: () => {
         onClick == null ? void 0 : onClick(event);
       },
@@ -2534,7 +2559,7 @@ var EventListItemDetailsContent = ({
                       "truncate text-wrap wrap-break-word line-clamp-2",
                       classNames == null ? void 0 : classNames.title
                     ),
-                    children: event.title
+                    children: resolvedTitle
                   }
                 ),
                 venueMarkets.length > 1 ? /* @__PURE__ */ jsx5(
@@ -3235,8 +3260,10 @@ import {
   optimizedImageUrl as optimizedImageUrl3,
   resolveMarketTradingState,
   useEventTradingContext as useEventTradingContext2,
+  useEventOrderbookData as useEventOrderbookData2,
   useLabels as useLabels6,
   useLiveBestPrices as useLiveBestPrices2,
+  useLiveBestPriceCandidates,
   useLiveOutcomePrices as useLiveOutcomePrices2,
   useMarketChart as useMarketChart2,
   useMarketOrderbook,
@@ -3247,30 +3274,64 @@ import {
 } from "@agg-build/hooks";
 import { useEffect as useEffect4, useId, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
 
-// src/events/shared/display-outcome-venue.ts
+// src/events/shared/select-best-outcome.ts
 var normalizeOutcomeLabel2 = (label) => {
   return typeof label === "string" ? label.trim().toLowerCase() : "";
 };
-var getDisplayOutcomeVenue = ({
-  outcomeId,
-  outcomeLabel,
-  selection,
-  bestMidpointVenue,
-  bestVenueByOutcomeId,
-  bestPriceVenuesByOutcomeId,
-  fallbackVenue
-}) => {
-  var _a;
-  if (selection && outcomeId) {
-    const sideVenues = bestPriceVenuesByOutcomeId == null ? void 0 : bestPriceVenuesByOutcomeId.get(outcomeId);
-    if (selection === "buy" && (sideVenues == null ? void 0 : sideVenues.bestAskVenue)) return sideVenues.bestAskVenue;
-    if (selection === "sell" && (sideVenues == null ? void 0 : sideVenues.bestBidVenue)) return sideVenues.bestBidVenue;
+var selectBestOutcomeCandidate = (args) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { outcomeId, selection } = args;
+  if (!outcomeId) return void 0;
+  const resolveVenueMarketId = (venue) => {
+    var _a2, _b2;
+    return venue ? (_b2 = (_a2 = args.venueMarketIdByVenue) == null ? void 0 : _a2.get(venue)) != null ? _b2 : void 0 : void 0;
+  };
+  const make = (price, venue, source, updatedAt) => ({
+    price,
+    venue: venue != null ? venue : void 0,
+    venueMarketId: resolveVenueMarketId(venue != null ? venue : void 0),
+    outcomeId,
+    source,
+    updatedAt: updatedAt != null ? updatedAt : void 0
+  });
+  if (selection === "buy" || selection === "sell") {
+    const wsSidePrice = selection === "buy" ? (_a = args.live) == null ? void 0 : _a.bestAsk : (_b = args.live) == null ? void 0 : _b.bestBid;
+    const wsSideVenue = selection === "buy" ? (_c = args.live) == null ? void 0 : _c.bestAskVenue : (_d = args.live) == null ? void 0 : _d.bestBidVenue;
+    if (wsSidePrice != null) {
+      return make(wsSidePrice, wsSideVenue, "ws", (_e = args.live) == null ? void 0 : _e.updatedAt);
+    }
+    const restSidePrice = selection === "buy" ? (_f = args.restBest) == null ? void 0 : _f.bestAsk : (_g = args.restBest) == null ? void 0 : _g.bestBid;
+    const restSideVenue = selection === "buy" ? (_h = args.restBestVenues) == null ? void 0 : _h.bestAskVenue : (_i = args.restBestVenues) == null ? void 0 : _i.bestBidVenue;
+    if (restSidePrice != null) {
+      return make(restSidePrice, restSideVenue, "rest-best", void 0);
+    }
+  }
+  if (((_j = args.live) == null ? void 0 : _j.midpoint) != null) {
+    return make(args.live.midpoint, args.live.midpointVenue, "ws", args.live.updatedAt);
   }
-  if (normalizeOutcomeLabel2(outcomeLabel) === "yes" && bestMidpointVenue) {
-    return bestMidpointVenue;
+  if (normalizeOutcomeLabel2(args.outcomeLabel) === "yes" && args.bestMidpoint != null && args.bestMidpointVenue) {
+    return make(args.bestMidpoint, args.bestMidpointVenue, "rest-midpoint", void 0);
   }
-  const bestVenue = outcomeId ? bestVenueByOutcomeId == null ? void 0 : bestVenueByOutcomeId.get(outcomeId) : void 0;
-  return (_a = bestVenue != null ? bestVenue : fallbackVenue) != null ? _a : void 0;
+  if (args.restMidpoint != null) {
+    return make(args.restMidpoint, args.restMidpointVenue, "rest-midpoint", void 0);
+  }
+  if (args.staticPrice != null) {
+    return make(args.staticPrice, args.staticVenue, "static", void 0);
+  }
+  return void 0;
+};
+var buildVenueMarketIdByVenue = (venueMarkets) => {
+  var _a;
+  const map = /* @__PURE__ */ new Map();
+  if (!(venueMarkets == null ? void 0 : venueMarkets.length)) return map;
+  const visit = (vm) => {
+    if (vm.venue && vm.id && !map.has(vm.venue)) map.set(vm.venue, vm.id);
+  };
+  for (const vm of venueMarkets) {
+    visit(vm);
+    for (const sibling of (_a = vm.matchedVenueMarkets) != null ? _a : []) visit(sibling);
+  }
+  return map;
 };
 
 // src/events/market-details/market-details-outcome-button.tsx
@@ -3427,7 +3488,7 @@ var MarketDetailsContent = ({
   suppressOutcomeFallbackSelection,
   midpointsResult
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const config = useSdkUiConfig3();
   const {
     features: { enableAnimations },
@@ -3441,6 +3502,7 @@ var MarketDetailsContent = ({
   const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
   const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
   const wsBestPrices = useLiveBestPrices2(venueMarkets);
+  const wsBestCandidates = useLiveBestPriceCandidates(venueMarkets);
   const resolvedMarket = useMemo6(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
@@ -3450,6 +3512,10 @@ var MarketDetailsContent = ({
     return (_b2 = (_a2 = resolvedMarket.venueMarkets.find((venueMarket) => venueMarket.id === resolvedMarket.id)) != null ? _a2 : resolvedMarket.venueMarkets[0]) != null ? _b2 : null;
   }, [resolvedMarket]);
   const isResolvedMarket = resolveMarketTradingState(scopedResolvedMarket).kind === "resolved";
+  useEventOrderbookData2(
+    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(),
@@ -3460,7 +3526,7 @@ var MarketDetailsContent = ({
     bestMidpoint: void 0,
     bestMidpointVenue: void 0
   };
-  const clusterMidpoints = (_b = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _b : clusterMidpointResult.prices;
+  const clusterMidpoints = (_c = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _c : clusterMidpointResult.prices;
   const clusterBestMidpointsByOutcomeId = clusterMidpoints;
   const clusterVenueByOutcomeId = clusterMidpointResult.venueByOutcomeId;
   const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
@@ -3575,7 +3641,7 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedOutcomeId
   ]);
   const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
-  const selectedOutcomeLabel = (_c = scopedSelectedOutcomeState.outcomeLabel) != null ? _c : null;
+  const selectedOutcomeLabel = (_d = scopedSelectedOutcomeState.outcomeLabel) != null ? _d : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
   const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
   const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(selectedOutcomeLabel);
@@ -3609,31 +3675,33 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
+  const venueMarketIdByVenue = useMemo6(
+    () => buildVenueMarketIdByVenue(model == null ? void 0 : model.market.venueMarkets),
+    [model]
+  );
   const headerOutcomeItems = useMemo6(() => {
     if (!model) return [];
     const items = resolveHeaderOutcomeItems(model.market.venueMarkets, scopedMarketForCard);
     return items.map((item) => {
       var _a2;
       const fallbackPrice = midpointsFallback == null ? void 0 : midpointsFallback.get(item.id);
-      const bestVenue = getDisplayOutcomeVenue({
+      const candidate = selectBestOutcomeCandidate({
         outcomeId: item.id,
         outcomeLabel: item.label,
         selection: tradeSide,
-        bestMidpointVenue: clusterBestMidpointVenue,
-        bestVenueByOutcomeId: clusterVenueByOutcomeId,
-        bestPriceVenuesByOutcomeId: clusterBestPriceVenuesByOutcomeId,
-        fallbackVenue: midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id)
-      });
-      const outcomeBestPrice = getDisplayOutcomePrice({
-        outcomeId: item.id,
-        outcomeLabel: item.label,
-        selection: tradeSide,
-        bestPrices: clusterBestPrices,
+        live: wsBestCandidates.get(item.id),
+        restBest: clusterBestPricesRest.get(item.id),
+        restBestVenues: clusterBestPriceVenuesByOutcomeId.get(item.id),
+        restMidpoint: clusterBestMidpointsByOutcomeId.get(item.id),
+        restMidpointVenue: clusterVenueByOutcomeId.get(item.id),
         bestMidpoint: clusterBestMidpoint,
-        bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
-        livePrices: wsLivePrices,
-        fallbackPrice
+        bestMidpointVenue: clusterBestMidpointVenue,
+        staticPrice: fallbackPrice,
+        staticVenue: midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id),
+        venueMarketIdByVenue
       });
+      const bestVenue = candidate == null ? void 0 : candidate.venue;
+      const outcomeBestPrice = candidate == null ? void 0 : candidate.price;
       if (isResolvedMarket) {
         const isWinningOutcome = item.id === ((_a2 = marketTradingState.winningOutcome) == null ? void 0 : _a2.id);
         return __spreadValues(__spreadProps(__spreadValues({}, item), {
@@ -3651,17 +3719,18 @@ var MarketDetailsContent = ({
     clusterBestMidpoint,
     clusterBestMidpointVenue,
     clusterBestMidpointsByOutcomeId,
-    clusterBestPrices,
+    clusterBestPricesRest,
     clusterBestPriceVenuesByOutcomeId,
     model,
     scopedMarketForCard,
     clusterVenueByOutcomeId,
     isResolvedMarket,
-    (_d = marketTradingState.winningOutcome) == null ? void 0 : _d.id,
+    (_e = marketTradingState.winningOutcome) == null ? void 0 : _e.id,
     midpointsFallback,
     midpointsFallbackVenues,
     tradeSide,
-    wsLivePrices
+    venueMarketIdByVenue,
+    wsBestCandidates
   ]);
   const headlineProbability = useMemo6(() => {
     var _a2, _b2, _c2, _d2;
@@ -3727,9 +3796,9 @@ var MarketDetailsContent = ({
   const chartEnabled = isOpened && effectiveSelectedTab === "graph";
   const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
   const rollingWindow = useRollingChartWindow2({ range: effectiveChartTimeRange });
-  const primaryVenueMarketId = (_f = (_e = selectedOutcomesByVenue[0]) == null ? void 0 : _e.market.id) != null ? _f : null;
-  const primaryOutcomeId = (_h = (_g = selectedOutcomesByVenue[0]) == null ? void 0 : _g.outcome.id) != null ? _h : null;
-  const chartPrimaryOutcomeId = (_j = (_i = chartOutcomesByVenue[0]) == null ? void 0 : _i.outcome.id) != null ? _j : null;
+  const primaryVenueMarketId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.market.id) != null ? _g : null;
+  const primaryOutcomeId = (_i = (_h = selectedOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
+  const chartPrimaryOutcomeId = (_k = (_j = chartOutcomesByVenue[0]) == null ? void 0 : _j.outcome.id) != null ? _k : null;
   const chartVenueOutcomeIds = useMemo6(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
   }, [chartOutcomesByVenue]);
@@ -4232,7 +4301,7 @@ var MarketDetailsContent = ({
                             height: 260,
                             isLoading: isMarketChartLoading,
                             chartType: selectedChartType,
-                            liveCandle: selectedChartType === "candlestick" ? (_k = graphLiveState.liveCandle) != null ? _k : void 0 : void 0,
+                            liveCandle: selectedChartType === "candlestick" ? (_l = graphLiveState.liveCandle) != null ? _l : void 0 : void 0,
                             lineValue: graphLiveState.lineValue,
                             classNames: { root: "agg-chart-region w-full" },
                             showSeriesControls: chartAvailableOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,

package/dist/{chunk-3OI2ZLLT.mjs → chunk-NRNBJPYK.mjs}

@@ -38,7 +38,7 @@ import {
   shortenAddress,
   useOptionalToast,
   venueLogoLabels
-} from "./chunk-DXF2LMNN.mjs";
+} from "./chunk-TBD3N4T4.mjs";
 
 // src/deposit/index.tsx
 import { useAggAuthState, useAggUiConfig, useDepositAddresses, useLabels as useLabels11 } from "@agg-build/hooks";