@agg-build/ui 1.1.0 → 1.2.0

package/dist/{chunk-7JEJIGG4.mjs → chunk-EGCVA2AQ.mjs}

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

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

@@ -7,10 +7,10 @@ import {
   getTradingValueLabel,
   getTradingVenueLabel,
   resolveOrderEligibilityMessage
-} from "./chunk-KDMNFHPL.mjs";
+} from "./chunk-TBKDLNOE.mjs";
 import {
   GeoBlockBanner
-} from "./chunk-JDYZJKTE.mjs";
+} from "./chunk-5FXMHTVR.mjs";
 import {
   AGG_TERMS_OF_SERVICE_URL,
   Button,
@@ -25,6 +25,7 @@ import {
   RemoteImage,
   Skeleton,
   SuccessCheckIcon,
+  Tooltip,
   Typography,
   UserTrustIcon,
   VenueLogo,
@@ -36,7 +37,7 @@ import {
   getMotionClassName,
   normalizeVenueMarketCluster,
   skeletonViews
-} from "./chunk-R6DETAZ6.mjs";
+} from "./chunk-34L7ZKJW.mjs";
 
 // src/trading/types.ts
 import { Venue, enumGuard, isFiniteNonNeg, safeParse } from "@agg-build/sdk";
@@ -547,7 +548,9 @@ var buildLiveRouteCards = ({
       isUnavailable: true
     };
   });
-  const baseCards = primaryCard ? [primaryCard, ...soloCards] : soloCards;
+  const baseCards = (primaryCard ? [primaryCard, ...soloCards] : soloCards).sort(
+    (left, right) => right.numericValue - left.numericValue
+  );
   const coveredVenueStrings = new Set(
     [...baseCards, ...unavailableCards].flatMap((card) => card.venue ? [card.venue] : [])
   );
@@ -2238,7 +2241,7 @@ var PlaceOrder = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
   const {
-    features: { enableAnimations },
+    features: { enableAnimations, showFeesBreakdown },
     general: { locale }
   } = useSdkUiConfig();
   const labels = useLabels();
@@ -2757,6 +2760,45 @@ var PlaceOrder = ({
     return (_d2 = selectedRouteCard.hint) != null ? _d2 : "";
   }, [selectedRouteCard, tradingLabels]);
   const displayedToWinValue = (_B = selectedRouteCard == null ? void 0 : selectedRouteCard.numericValue) != null ? _B : 0;
+  const activeFeeBreakdown = activeQuoteData == null ? void 0 : activeQuoteData.feeBreakdown;
+  const estimatedFeesValue = useMemo2(() => {
+    if (!activeFeeBreakdown) return null;
+    const totalFees = activeFeeBreakdown.venueFees + activeFeeBreakdown.bridgeFees + activeFeeBreakdown.executionGas;
+    return formatUsd(totalFees, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }, [activeFeeBreakdown]);
+  const feeBreakdownRows = useMemo2(() => {
+    if (!activeFeeBreakdown) return [];
+    return [
+      {
+        label: tradingLabels.feeBreakdownVenueFees,
+        value: formatUsd(activeFeeBreakdown.venueFees, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      },
+      {
+        label: tradingLabels.feeBreakdownBridgeFees,
+        value: formatUsd(activeFeeBreakdown.bridgeFees, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      },
+      {
+        label: tradingLabels.feeBreakdownExecutionGas,
+        value: formatUsd(activeFeeBreakdown.executionGas, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      },
+      {
+        label: tradingLabels.feeBreakdownTotalFees,
+        value: formatUsd(
+          activeFeeBreakdown.venueFees + activeFeeBreakdown.bridgeFees + activeFeeBreakdown.executionGas,
+          { minimumFractionDigits: 2, maximumFractionDigits: 2 }
+        )
+      }
+    ];
+  }, [activeFeeBreakdown, tradingLabels]);
   const isActionLoading = isPrimaryActionLoading || executeManaged.isPending;
   const selectedRouteGeoBlocked = (_C = selectedRouteCard == null ? void 0 : selectedRouteCard.isUnavailable) != null ? _C : false;
   const geoBlockedVenuesFromWarnings = useMemo2(
@@ -3234,6 +3276,36 @@ var PlaceOrder = ({
                 }
               )
             ] }),
+            showFeesBreakdown && hasEnteredAmount && estimatedFeesValue ? /* @__PURE__ */ jsxs3("div", { className: "agg-order-fees-section flex items-center justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx4(
+                  Typography,
+                  {
+                    variant: "text-sm",
+                    className: "text-agg-sm leading-agg-5 text-agg-muted-foreground",
+                    children: tradingLabels.estimatedFees
+                  }
+                ),
+                feeBreakdownRows.length > 0 ? /* @__PURE__ */ jsx4(
+                  Tooltip,
+                  {
+                    "aria-label": tradingLabels.estimatedFeesTooltipAria,
+                    content: /* @__PURE__ */ jsx4("div", { className: "flex min-w-[220px] flex-col gap-2", children: feeBreakdownRows.map((row) => /* @__PURE__ */ jsxs3(
+                      "div",
+                      {
+                        className: "flex items-center justify-between gap-3 text-agg-sm leading-agg-5",
+                        children: [
+                          /* @__PURE__ */ jsx4("span", { className: "text-agg-muted-foreground", children: row.label }),
+                          /* @__PURE__ */ jsx4("span", { className: "font-agg-bold text-agg-foreground", children: row.value })
+                        ]
+                      },
+                      row.label
+                    )) })
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx4("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: estimatedFeesValue })
+            ] }) : null,
             shouldShowSmartRouting ? /* @__PURE__ */ jsxs3("div", { className: "agg-route-panel flex flex-col gap-3", children: [
               /* @__PURE__ */ jsxs3("div", { className: "agg-route-panel-header flex items-center justify-between gap-4", children: [
                 /* @__PURE__ */ jsx4("p", { className: "agg-route-panel-title text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: tradingLabels.smartRouting }),
@@ -3385,6 +3457,18 @@ var PlaceOrder = ({
                       children: actionLabel
                     }
                   ),
+                  !shouldShowGeoBlockBanner && internalTab === "buy" && showFeesBreakdown ? /* @__PURE__ */ jsxs3("div", { className: "agg-order-platform-fee mt-1 flex items-center justify-center gap-1.5 text-agg-sm leading-agg-5 text-agg-muted-foreground", children: [
+                    /* @__PURE__ */ jsx4(
+                      Icon,
+                      {
+                        name: "shield-trust",
+                        size: "small",
+                        className: "h-3.5 w-3.5 text-agg-primary",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(Typography, { variant: "text-xs-caps", className: "text-agg-primary", children: tradingLabels.platformFee })
+                  ] }) : null,
                   shouldShowGeoBlockBanner ? /* @__PURE__ */ jsx4(GeoBlockBanner, { termsUrl: AGG_TERMS_OF_SERVICE_URL }) : null,
                   !shouldShowGeoBlockBanner ? /* @__PURE__ */ jsx4("p", { className: "agg-order-disclaimer text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: tradingLabels.disclaimer }) : null
                 ]

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

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

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

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