@agg-build/ui 2.1.4 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/{chunk-T4YZGAYS.mjs → chunk-5MRFY5ZQ.mjs} +1 -1
  2. package/dist/{chunk-BW7S2YR3.mjs → chunk-73MO7MYG.mjs} +21 -17
  3. package/dist/{chunk-TBZWRUFB.mjs → chunk-BTRFSEPC.mjs} +97 -61
  4. package/dist/{chunk-FLESSOSU.mjs → chunk-DTOI4V6P.mjs} +47 -10
  5. package/dist/{chunk-XHE2VO3S.mjs → chunk-HNLA44SY.mjs} +2 -2
  6. package/dist/{chunk-VP76G6PN.mjs → chunk-MIAAL7BL.mjs} +79 -23
  7. package/dist/{chunk-R2YNZJZ3.mjs → chunk-TR7HUVY7.mjs} +1 -1
  8. package/dist/events.js +93 -52
  9. package/dist/events.mjs +3 -3
  10. package/dist/index.js +214 -93
  11. package/dist/index.mjs +7 -7
  12. package/dist/modals.mjs +3 -3
  13. package/dist/pages.js +214 -93
  14. package/dist/pages.mjs +6 -6
  15. package/dist/primitives.js +70 -23
  16. package/dist/primitives.mjs +1 -1
  17. package/dist/trading.js +17 -14
  18. package/dist/trading.mjs +4 -4
  19. package/dist/types/events/item/event-list-item.types.d.mts +2 -2
  20. package/dist/types/events/item/event-list-item.types.d.ts +2 -2
  21. package/dist/types/events/item/event-list-item.utils.d.mts +2 -1
  22. package/dist/types/events/item/event-list-item.utils.d.ts +2 -1
  23. package/dist/types/events/item-details/event-list-item-details.types.d.mts +0 -1
  24. package/dist/types/events/item-details/event-list-item-details.types.d.ts +0 -1
  25. package/dist/types/events/market-details/market-details.types.d.mts +1 -0
  26. package/dist/types/events/market-details/market-details.types.d.ts +1 -0
  27. package/dist/types/events/shared/chart-venue-selection.d.mts +2 -1
  28. package/dist/types/events/shared/chart-venue-selection.d.ts +2 -1
  29. package/dist/types/pages/event-market/sports-event-market.utils.d.mts +15 -1
  30. package/dist/types/pages/event-market/sports-event-market.utils.d.ts +15 -1
  31. package/dist/types/primitives/search/search.types.d.mts +1 -0
  32. package/dist/types/primitives/search/search.types.d.ts +1 -0
  33. package/dist/types/primitives/search/search.utils.d.mts +4 -1
  34. package/dist/types/primitives/search/search.utils.d.ts +4 -1
  35. package/dist/types/trading/types.d.mts +2 -1
  36. package/dist/types/trading/types.d.ts +2 -1
  37. package/package.json +3 -3
@@ -5111,7 +5111,13 @@ Footer.displayName = "Footer";
5111
5111
  import { useLabels as useLabels11 } from "@agg-build/hooks";
5112
5112
 
5113
5113
  // src/primitives/search/index.tsx
5114
- import { useLabels as useLabels10, useSdkUiConfig as useSdkUiConfig10, useSearch } from "@agg-build/hooks";
5114
+ import {
5115
+ useLabels as useLabels10,
5116
+ useLiveOutcomePrices,
5117
+ useMidpoints,
5118
+ useSdkUiConfig as useSdkUiConfig10,
5119
+ useSearch
5120
+ } from "@agg-build/hooks";
5115
5121
  import {
5116
5122
  useCallback as useCallback3,
5117
5123
  useEffect as useEffect6,
@@ -6825,6 +6831,13 @@ var formatPriceGapPercent = (value) => {
6825
6831
  return `${Math.round(value)}%`;
6826
6832
  };
6827
6833
  var sortOutcomes = (outcomes) => {
6834
+ return sortOutcomesWithPrices(outcomes);
6835
+ };
6836
+ var resolveOutcomeProbability = (outcome, priceByOutcomeId) => {
6837
+ const resolvedPrice = priceByOutcomeId === void 0 ? outcome.price : priceByOutcomeId.has(outcome.id) ? priceByOutcomeId.get(outcome.id) : void 0;
6838
+ return normalizeProbability(resolvedPrice);
6839
+ };
6840
+ var sortOutcomesWithPrices = (outcomes, priceByOutcomeId) => {
6828
6841
  if (outcomes.length <= 1) return outcomes;
6829
6842
  if (hasBinaryOutcomes(outcomes)) {
6830
6843
  return sortYesFirst(outcomes);
@@ -6840,38 +6853,41 @@ var sortOutcomes = (outcomes) => {
6840
6853
  }
6841
6854
  return [...outcomes].sort((a, b) => {
6842
6855
  var _a, _b;
6843
- const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
6844
- const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
6856
+ const aPrice = (_a = resolveOutcomeProbability(a, priceByOutcomeId)) != null ? _a : 0;
6857
+ const bPrice = (_b = resolveOutcomeProbability(b, priceByOutcomeId)) != null ? _b : 0;
6845
6858
  return bPrice - aPrice;
6846
6859
  });
6847
6860
  };
6848
- var compareVisibleOutcomeRows = (left, right) => {
6861
+ var compareVisibleOutcomeRows = (left, right, priceByOutcomeId) => {
6849
6862
  var _a, _b;
6850
6863
  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
6851
6864
  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
6852
6865
  if (leftDate && rightDate) {
6853
6866
  return leftDate.getTime() - rightDate.getTime();
6854
6867
  }
6855
- const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
6856
- const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
6868
+ const leftProbability = (_a = resolveOutcomeProbability(left.outcome, priceByOutcomeId)) != null ? _a : -1;
6869
+ const rightProbability = (_b = resolveOutcomeProbability(right.outcome, priceByOutcomeId)) != null ? _b : -1;
6857
6870
  return rightProbability - leftProbability;
6858
6871
  };
6859
- var shouldReplaceVisibleOutcome = (current, next) => {
6872
+ var shouldReplaceVisibleOutcome = (current, next, priceByOutcomeId) => {
6860
6873
  var _a, _b;
6861
6874
  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
6862
6875
  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
6863
6876
  if (currentVolume !== nextVolume) {
6864
6877
  return nextVolume > currentVolume;
6865
6878
  }
6866
- const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
6867
- const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
6879
+ const currentProbability = (_a = resolveOutcomeProbability(current.outcome, priceByOutcomeId)) != null ? _a : -1;
6880
+ const nextProbability = (_b = resolveOutcomeProbability(next.outcome, priceByOutcomeId)) != null ? _b : -1;
6868
6881
  return nextProbability > currentProbability;
6869
6882
  };
6870
- var resolveVisibleOutcomes = (venueMarkets) => {
6883
+ var resolveVisibleOutcomes = (venueMarkets, priceByOutcomeId) => {
6871
6884
  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
6872
6885
  venueMarkets.forEach((market) => {
6873
6886
  const title2 = market.question;
6874
- const canonicalOutcome = sortOutcomes(market.venueMarketOutcomes)[0];
6887
+ const canonicalOutcome = sortOutcomesWithPrices(
6888
+ market.venueMarketOutcomes,
6889
+ priceByOutcomeId
6890
+ )[0];
6875
6891
  if (!canonicalOutcome) return;
6876
6892
  const normalizedTitle = title2.trim().toLowerCase();
6877
6893
  const nextVisibleOutcome = {
@@ -6881,11 +6897,11 @@ var resolveVisibleOutcomes = (venueMarkets) => {
6881
6897
  title: title2
6882
6898
  };
6883
6899
  const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
6884
- if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
6900
+ if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome, priceByOutcomeId)) {
6885
6901
  visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
6886
6902
  }
6887
6903
  });
6888
- return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, 2));
6904
+ return [...visibleOutcomesByLabel.values()].sort((left, right) => compareVisibleOutcomeRows(left, right, priceByOutcomeId)).slice(0, Math.max(1, 2));
6889
6905
  };
6890
6906
  var dedupeVenueMarketsById = (venueMarkets) => {
6891
6907
  const seenClusterIds = /* @__PURE__ */ new Set();
@@ -6965,18 +6981,19 @@ var toVenueLogoName = (value) => {
6965
6981
  if (!venueLogoNameSet.has(value)) return null;
6966
6982
  return value;
6967
6983
  };
6968
- var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCurrency) => {
6969
- var _a, _b;
6984
+ var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCurrency, options) => {
6985
+ var _a, _b, _c;
6970
6986
  const primaryVenueMarket = selectPrimaryVenueMarket(event.venueMarkets);
6971
6987
  if (!primaryVenueMarket) return null;
6972
6988
  const primaryVenue = toVenueLogoName(primaryVenueMarket.venue);
6973
6989
  if (!primaryVenue) return null;
6974
- const visibleOutcome = resolveVisibleOutcomes(event.venueMarkets)[0];
6990
+ const visibleOutcome = resolveVisibleOutcomes(event.venueMarkets, options == null ? void 0 : options.priceByOutcomeId)[0];
6975
6991
  if (!visibleOutcome) return null;
6976
- const probability = normalizeProbability(visibleOutcome.outcome.price);
6977
- if (probability == null) return null;
6992
+ const probability = normalizeProbability(
6993
+ (_a = options == null ? void 0 : options.priceByOutcomeId) == null ? void 0 : _a.get(visibleOutcome.outcome.id)
6994
+ );
6978
6995
  const resolvedTitle = formatEventTitleWithDateSuffix({
6979
- title: (_a = event == null ? void 0 : event.title) != null ? _a : "",
6996
+ title: (_b = event == null ? void 0 : event.title) != null ? _b : "",
6980
6997
  categories: event.categories,
6981
6998
  structureType: event.structureType,
6982
6999
  gameStartTime: event.gameStartTime,
@@ -6998,13 +7015,14 @@ var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCu
6998
7015
  return {
6999
7016
  id: event.id,
7000
7017
  title: resolvedTitle,
7001
- thumbnailSrc: (_b = resolveTileImage(event, primaryVenueMarket, void 0)) != null ? _b : "",
7018
+ thumbnailSrc: (_c = resolveTileImage(event, primaryVenueMarket, void 0)) != null ? _c : "",
7002
7019
  thumbnailAlt: resolvedTitle,
7003
7020
  venue: primaryVenue,
7004
7021
  visibleVenues,
7005
7022
  marketSummaryLabel,
7006
7023
  volumeLabel,
7007
7024
  valueLabel: formatMarketProbabilityPercent(probability, formatPercent),
7025
+ isValueLoading: probability == null && (options == null ? void 0 : options.isPriceLoading) === true,
7008
7026
  contextLabel: formatSearchContextLabel(visibleOutcome.title)
7009
7027
  };
7010
7028
  };
@@ -7114,7 +7132,16 @@ var SearchResultRow = ({
7114
7132
  children: [
7115
7133
  /* @__PURE__ */ jsx119(VenueLogo, { venue: item.venue, size: "small" }),
7116
7134
  /* @__PURE__ */ jsxs114("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
7117
- /* @__PURE__ */ jsx119(
7135
+ item.isValueLoading ? /* @__PURE__ */ jsx119(
7136
+ "span",
7137
+ {
7138
+ "aria-hidden": "true",
7139
+ className: cn(
7140
+ "agg-search-result-value-loading",
7141
+ "h-5 w-12 shrink-0 rounded-agg-sm bg-agg-separator animate-pulse"
7142
+ )
7143
+ }
7144
+ ) : /* @__PURE__ */ jsx119(
7118
7145
  "p",
7119
7146
  {
7120
7147
  className: cn(
@@ -7227,6 +7254,24 @@ var Search = ({
7227
7254
  () => filterOpenEvents(searchResults),
7228
7255
  [searchResults]
7229
7256
  );
7257
+ const visibleVenueMarkets = useMemo5(
7258
+ () => openEvents.flatMap((event) => {
7259
+ var _a;
7260
+ return (_a = event.venueMarkets) != null ? _a : [];
7261
+ }),
7262
+ [openEvents]
7263
+ );
7264
+ const livePrices = useLiveOutcomePrices(visibleVenueMarkets);
7265
+ const midpointResult = useMidpoints(visibleVenueMarkets);
7266
+ const searchDisplayPrices = useMemo5(() => {
7267
+ if (!midpointResult.bestMidpointsByOutcomeId.size) return livePrices;
7268
+ if (!livePrices.size) return midpointResult.bestMidpointsByOutcomeId;
7269
+ const merged = new Map(midpointResult.bestMidpointsByOutcomeId);
7270
+ for (const [outcomeId, price] of livePrices) {
7271
+ merged.set(outcomeId, price);
7272
+ }
7273
+ return merged;
7274
+ }, [livePrices, midpointResult.bestMidpointsByOutcomeId]);
7230
7275
  const { validatedResults, eventsByResultId } = useMemo5(() => {
7231
7276
  const nextEventsByResultId = /* @__PURE__ */ new Map();
7232
7277
  const nextResults = openEvents.map((event) => {
@@ -7234,7 +7279,11 @@ var Search = ({
7234
7279
  event,
7235
7280
  labels,
7236
7281
  formatPercent,
7237
- formatCompactCurrency
7282
+ formatCompactCurrency,
7283
+ {
7284
+ priceByOutcomeId: searchDisplayPrices,
7285
+ isPriceLoading: midpointResult.isLoading
7286
+ }
7238
7287
  );
7239
7288
  if (!item) return null;
7240
7289
  nextEventsByResultId.set(item.id, event);
@@ -7244,7 +7293,14 @@ var Search = ({
7244
7293
  validatedResults: nextResults,
7245
7294
  eventsByResultId: nextEventsByResultId
7246
7295
  };
7247
- }, [formatCompactCurrency, formatPercent, labels, openEvents]);
7296
+ }, [
7297
+ formatCompactCurrency,
7298
+ formatPercent,
7299
+ labels,
7300
+ midpointResult.isLoading,
7301
+ openEvents,
7302
+ searchDisplayPrices
7303
+ ]);
7248
7304
  const hasSearchValue = trimmedValue.length > 0;
7249
7305
  const shouldRenderDropdown = isFocused && shouldSearchValue && !searchConfig.result && !searchConfig.isShowingAllResults;
7250
7306
  const resolvedIsActive = isFocused;
@@ -17,7 +17,7 @@ import {
17
17
  selectPrimaryVenueMarket,
18
18
  skeletonViews,
19
19
  sortOutcomes
20
- } from "./chunk-VP76G6PN.mjs";
20
+ } from "./chunk-MIAAL7BL.mjs";
21
21
 
22
22
  // src/trading/trading-context/index.tsx
23
23
  import { useEventTradingContext } from "@agg-build/hooks";
package/dist/events.js CHANGED
@@ -5719,6 +5719,13 @@ var formatPriceGapPercent = (value) => {
5719
5719
  return `${Math.round(value)}%`;
5720
5720
  };
5721
5721
  var sortOutcomes = (outcomes) => {
5722
+ return sortOutcomesWithPrices(outcomes);
5723
+ };
5724
+ var resolveOutcomeProbability = (outcome, priceByOutcomeId) => {
5725
+ const resolvedPrice = priceByOutcomeId === void 0 ? outcome.price : priceByOutcomeId.has(outcome.id) ? priceByOutcomeId.get(outcome.id) : void 0;
5726
+ return normalizeProbability(resolvedPrice);
5727
+ };
5728
+ var sortOutcomesWithPrices = (outcomes, priceByOutcomeId) => {
5722
5729
  if (outcomes.length <= 1) return outcomes;
5723
5730
  if (hasBinaryOutcomes(outcomes)) {
5724
5731
  return sortYesFirst(outcomes);
@@ -5734,8 +5741,8 @@ var sortOutcomes = (outcomes) => {
5734
5741
  }
5735
5742
  return [...outcomes].sort((a, b) => {
5736
5743
  var _a, _b;
5737
- const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
5738
- const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
5744
+ const aPrice = (_a = resolveOutcomeProbability(a, priceByOutcomeId)) != null ? _a : 0;
5745
+ const bPrice = (_b = resolveOutcomeProbability(b, priceByOutcomeId)) != null ? _b : 0;
5739
5746
  return bPrice - aPrice;
5740
5747
  });
5741
5748
  };
@@ -7215,9 +7222,8 @@ var collectOutcomePrices = (market, outcome, priceByOutcomeId) => {
7215
7222
  const prices = [];
7216
7223
  const seenOutcomeKeys = /* @__PURE__ */ new Set();
7217
7224
  const addPrice = (priceMarket, priceOutcome) => {
7218
- var _a2;
7219
7225
  if (!priceMarket || !priceOutcome) return;
7220
- const resolvedPrice = (_a2 = priceByOutcomeId == null ? void 0 : priceByOutcomeId.get(priceOutcome.id)) != null ? _a2 : priceOutcome.price;
7226
+ const resolvedPrice = priceByOutcomeId === void 0 ? priceOutcome.price : priceByOutcomeId.has(priceOutcome.id) ? priceByOutcomeId.get(priceOutcome.id) : void 0;
7221
7227
  const normalizedPrice = normalizeProbability(resolvedPrice);
7222
7228
  if (normalizedPrice == null) return;
7223
7229
  const key = `${priceMarket.id}:${priceOutcome.id}`;
@@ -9120,13 +9126,8 @@ var resolveChartVenueOutcomes = ({
9120
9126
  }) => {
9121
9127
  if (eligibleVenueOutcomes.length <= 1) return eligibleVenueOutcomes;
9122
9128
  const sortedEligibleVenueOutcomes = [...eligibleVenueOutcomes].sort((left, right) => {
9123
- var _a, _b;
9124
- const leftProbability = normalizeProbability(
9125
- (_a = livePrices.get(left.outcome.id)) != null ? _a : left.outcome.price
9126
- );
9127
- const rightProbability = normalizeProbability(
9128
- (_b = livePrices.get(right.outcome.id)) != null ? _b : right.outcome.price
9129
- );
9129
+ const leftProbability = normalizeProbability(livePrices.get(left.outcome.id));
9130
+ const rightProbability = normalizeProbability(livePrices.get(right.outcome.id));
9130
9131
  const probabilityDifference = (leftProbability != null ? leftProbability : 2) - (rightProbability != null ? rightProbability : 2);
9131
9132
  if (probabilityDifference !== 0) return probabilityDifference;
9132
9133
  if (left.venue === right.venue) return 0;
@@ -10191,6 +10192,12 @@ var EventListItemDetailsNotFoundState = ({
10191
10192
  }
10192
10193
  );
10193
10194
  };
10195
+ var resolveResolvedOutcomePriceMap = (outcomes) => {
10196
+ if (!(outcomes == null ? void 0 : outcomes.length)) return null;
10197
+ if (!outcomes.some((outcome) => outcome.winner === true)) return null;
10198
+ if (outcomes.some((outcome) => outcome.winner == null)) return null;
10199
+ return new Map(outcomes.map((outcome) => [outcome.id, outcome.winner === true ? 1 : 0]));
10200
+ };
10194
10201
  var EventListItemDetailsGraphSection = ({
10195
10202
  classNames,
10196
10203
  selectedChartType,
@@ -10312,6 +10319,18 @@ var EventListItemDetailsGraphSection = ({
10312
10319
  });
10313
10320
  });
10314
10321
  }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
10322
+ const resolvedOutcomePriceByMarketId = (0, import_react16.useMemo)(() => {
10323
+ const map = /* @__PURE__ */ new Map();
10324
+ for (const market of availableMarkets) {
10325
+ const marketTradingState = (0, import_hooks40.resolveMarketTradingState)(market);
10326
+ if (marketTradingState.kind !== "resolved") continue;
10327
+ const outcomePriceMap = resolveResolvedOutcomePriceMap(market.venueMarketOutcomes);
10328
+ if (outcomePriceMap) {
10329
+ map.set(market.id, outcomePriceMap);
10330
+ }
10331
+ }
10332
+ return map;
10333
+ }, [availableMarkets]);
10315
10334
  const resolvedVenueChartSeries = (0, import_react16.useMemo)(() => {
10316
10335
  return resolveMarketChartVenueSeries({
10317
10336
  chartData: scopedMarketChartData,
@@ -10407,8 +10426,8 @@ var EventListItemDetailsGraphSection = ({
10407
10426
  classNames == null ? void 0 : classNames.outcomeBadges
10408
10427
  ),
10409
10428
  children: chartAvailableVenueOutcomes.map((item) => {
10410
- var _a3;
10411
- const percentage = (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
10429
+ var _a3, _b3;
10430
+ const percentage = (_b3 = (_a3 = resolvedOutcomePriceByMarketId.get(item.market.id)) == null ? void 0 : _a3.get(item.outcome.id)) != null ? _b3 : wsLivePrices.get(item.outcome.id);
10412
10431
  const text = formatMarketProbabilityPercent(percentage, formatPercent);
10413
10432
  const seriesId = `${item.venue}-chart`;
10414
10433
  const isActiveVenue = activeGraphVenue === item.venue;
@@ -10471,21 +10490,21 @@ var EventListItemDetailsGraphSection = ({
10471
10490
  tradingContext == null ? void 0 : tradingContext.selectOutcome(outcomeId);
10472
10491
  },
10473
10492
  options: selectedMarketOutcomes.map((outcome) => {
10474
- var _a3, _b3, _c3;
10475
- const price = getDisplayOutcomePrice({
10493
+ var _a3, _b3, _c3, _d3, _e2;
10494
+ 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);
10495
+ const price = resolvedPrice != null ? resolvedPrice : getDisplayOutcomePrice({
10476
10496
  outcomeId: outcome.id,
10477
10497
  outcomeLabel: outcome.label,
10478
- selection: (_a3 = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a3 : "buy",
10498
+ selection: (_c3 = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _c3 : "buy",
10479
10499
  bestPrices,
10480
10500
  bestMidpoint,
10481
10501
  bestMidpointsByOutcomeId: restMidpoints,
10482
- livePrices,
10483
- fallbackPrice: outcome.price
10502
+ livePrices
10484
10503
  });
10485
10504
  return {
10486
10505
  value: outcome.id,
10487
- label: `${(_b3 = outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`,
10488
- ariaLabel: `${(_c3 = outcome.title) != null ? _c3 : outcome.label} ${formatProbabilityCents(price)}`
10506
+ label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price)}`,
10507
+ ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price)}`
10489
10508
  };
10490
10509
  })
10491
10510
  }
@@ -11546,6 +11565,34 @@ var getMarketDetailsOutcomeButtonClassNames = ({
11546
11565
  text: cn(isSelected ? toneClasses.text : "text-agg-foreground")
11547
11566
  };
11548
11567
  };
11568
+ var OutcomePriceContent = ({
11569
+ isLoading,
11570
+ isSelected,
11571
+ value,
11572
+ textClassName
11573
+ }) => {
11574
+ if (isLoading) {
11575
+ return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
11576
+ "span",
11577
+ {
11578
+ "aria-hidden": "true",
11579
+ className: cn(
11580
+ "agg-market-details-outcome-price-loading",
11581
+ "h-4 w-10 shrink-0 rounded-agg-sm bg-agg-separator animate-pulse"
11582
+ )
11583
+ }
11584
+ );
11585
+ }
11586
+ return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
11587
+ Typography,
11588
+ {
11589
+ as: "span",
11590
+ variant: isSelected ? "body-strong" : "body",
11591
+ className: cn("shrink-0 whitespace-nowrap", textClassName),
11592
+ children: formatProbabilityCents(value)
11593
+ }
11594
+ );
11595
+ };
11549
11596
  var MarketDetailsOutcomeButton = ({
11550
11597
  ariaControls,
11551
11598
  enableAnimations,
@@ -11601,12 +11648,12 @@ var MarketDetailsOutcomeButton = ({
11601
11648
  }
11602
11649
  ) : null,
11603
11650
  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
11604
- Typography,
11651
+ OutcomePriceContent,
11605
11652
  {
11606
- as: "span",
11607
- variant: isSelected ? "body-strong" : "body",
11608
- className: cn("shrink-0 whitespace-nowrap", classNames.text),
11609
- children: formatProbabilityCents(item.probability)
11653
+ isLoading: item.isPriceLoading,
11654
+ isSelected,
11655
+ value: item.probability,
11656
+ textClassName: classNames.text
11610
11657
  }
11611
11658
  )
11612
11659
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "inline-flex max-w-full items-center justify-center gap-1.5", children: [
@@ -11621,12 +11668,12 @@ var MarketDetailsOutcomeButton = ({
11621
11668
  }
11622
11669
  ),
11623
11670
  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
11624
- Typography,
11671
+ OutcomePriceContent,
11625
11672
  {
11626
- as: "span",
11627
- variant: isSelected ? "body-strong" : "body",
11628
- className: cn("shrink-0 whitespace-nowrap", classNames.text),
11629
- children: formatProbabilityCents(item.probability)
11673
+ isLoading: item.isPriceLoading,
11674
+ isSelected,
11675
+ value: item.probability,
11676
+ textClassName: classNames.text
11630
11677
  }
11631
11678
  )
11632
11679
  ] })
@@ -11818,9 +11865,8 @@ var MarketDetailsGraphPanel = ({
11818
11865
  var _a2, _b2, _c2, _d;
11819
11866
  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
11820
11867
  /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
11821
- var _a3;
11822
11868
  const probability = formatProbabilityPercent(
11823
- (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
11869
+ wsLivePrices.get(item.outcome.id),
11824
11870
  formatPercent
11825
11871
  );
11826
11872
  const isActiveVenue = selectedGraphVenue === item.venue;
@@ -12031,16 +12077,8 @@ var MarketDetailsContent = ({
12031
12077
  isResolvedMarket ? [] : resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets,
12032
12078
  (_b = scopedResolvedMarket == null ? void 0 : scopedResolvedMarket.id) != null ? _b : null
12033
12079
  );
12034
- const clusterMidpointResult = midpointsResult != null ? midpointsResult : {
12035
- prices: /* @__PURE__ */ new Map(),
12036
- bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
12037
- venueByOutcomeId: /* @__PURE__ */ new Map(),
12038
- bestPrices: /* @__PURE__ */ new Map(),
12039
- bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
12040
- isLoading: false,
12041
- bestMidpoint: void 0,
12042
- bestMidpointVenue: void 0
12043
- };
12080
+ const fetchedClusterMidpointResult = (0, import_hooks43.useMidpoints)(midpointsResult ? [] : clusterVenueMarkets);
12081
+ const clusterMidpointResult = midpointsResult != null ? midpointsResult : fetchedClusterMidpointResult;
12044
12082
  const clusterMidpoints = (_c = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _c : clusterMidpointResult.prices;
12045
12083
  const clusterBestMidpointsByOutcomeId = clusterMidpoints;
12046
12084
  const clusterVenueByOutcomeId = clusterMidpointResult.venueByOutcomeId;
@@ -12200,18 +12238,24 @@ var MarketDetailsContent = ({
12200
12238
  });
12201
12239
  const bestVenue = candidate == null ? void 0 : candidate.venue;
12202
12240
  const outcomeBestPrice = candidate == null ? void 0 : candidate.price;
12241
+ const isPriceLoading = !isResolvedMarket && outcomeBestPrice == null && clusterMidpointResult.isLoading;
12203
12242
  if (isResolvedMarket) {
12204
12243
  const isWinningOutcome = item.id === ((_a2 = marketTradingState.winningOutcome) == null ? void 0 : _a2.id);
12205
12244
  return __spreadValues(__spreadProps(__spreadValues({}, item), {
12206
- probability: isWinningOutcome ? 1 : 0
12245
+ probability: isWinningOutcome ? 1 : 0,
12246
+ isPriceLoading: false
12207
12247
  }), bestVenue ? { venue: bestVenue } : {});
12208
12248
  }
12209
12249
  if (outcomeBestPrice != null) {
12210
12250
  return __spreadValues(__spreadProps(__spreadValues({}, item), {
12211
- probability: outcomeBestPrice
12251
+ probability: outcomeBestPrice,
12252
+ isPriceLoading: false
12212
12253
  }), bestVenue ? { venue: bestVenue } : {});
12213
12254
  }
12214
- return item;
12255
+ return __spreadProps(__spreadValues({}, item), {
12256
+ probability: void 0,
12257
+ isPriceLoading
12258
+ });
12215
12259
  });
12216
12260
  }, [
12217
12261
  clusterBestMidpoint,
@@ -12233,7 +12277,7 @@ var MarketDetailsContent = ({
12233
12277
  wsBestCandidates
12234
12278
  ]);
12235
12279
  const headlineProbability = (0, import_react20.useMemo)(() => {
12236
- var _a2, _b2, _c2, _d2;
12280
+ var _a2;
12237
12281
  if (!model || !scopedMarketForCard) return void 0;
12238
12282
  if (isResolvedMarket) {
12239
12283
  const yesOutcome2 = resolveYesOutcome(scopedMarketForCard);
@@ -12241,10 +12285,7 @@ var MarketDetailsContent = ({
12241
12285
  return yesOutcome2.winner === true ? 1 : 0;
12242
12286
  }
12243
12287
  const yesOutcome = resolveYesOutcome(scopedMarketForCard);
12244
- const displayOutcome = yesOutcome != null ? yesOutcome : (_b2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _b2.reduce(
12245
- (acc, outcome) => outcome.price > acc.price ? outcome : acc,
12246
- (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0]
12247
- );
12288
+ const displayOutcome = yesOutcome != null ? yesOutcome : (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0];
12248
12289
  if (displayOutcome == null) return void 0;
12249
12290
  const referencePrice = getDisplayOutcomePrice({
12250
12291
  outcomeId: displayOutcome.id,
@@ -12254,10 +12295,10 @@ var MarketDetailsContent = ({
12254
12295
  bestMidpoint: clusterBestMidpoint,
12255
12296
  bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
12256
12297
  livePrices: wsLivePrices,
12257
- fallbackPrice: (_c2 = midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)) != null ? _c2 : displayOutcome.price
12298
+ fallbackPrice: midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)
12258
12299
  });
12259
12300
  if (referencePrice != null) return referencePrice;
12260
- return (_d2 = (0, import_hooks43.findLivePriceById)(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
12301
+ return (0, import_hooks43.findLivePriceById)(wsLivePrices, displayOutcome.id);
12261
12302
  }, [
12262
12303
  clusterBestMidpoint,
12263
12304
  clusterBestMidpointsByOutcomeId,
package/dist/events.mjs CHANGED
@@ -16,13 +16,13 @@ import {
16
16
  orderbookRowLimitDefault,
17
17
  resolveEventDetailsSyncKey,
18
18
  useCenterOrderbookSpread
19
- } from "./chunk-TBZWRUFB.mjs";
19
+ } from "./chunk-BTRFSEPC.mjs";
20
20
  import {
21
21
  formatProbabilityCents,
22
22
  resolveOrderBookRows,
23
23
  resolveUnifiedOrderBookEntries
24
- } from "./chunk-R2YNZJZ3.mjs";
25
- import "./chunk-VP76G6PN.mjs";
24
+ } from "./chunk-TR7HUVY7.mjs";
25
+ import "./chunk-MIAAL7BL.mjs";
26
26
  export {
27
27
  EventList,
28
28
  EventListItem,