@agg-build/ui 2.4.2 → 2.4.3

package/dist/{chunk-G5BXCT5Y.mjs → chunk-3PSIO77N.mjs}

@@ -3,7 +3,7 @@ import {
   AGG_TERMS_OF_SERVICE_URL,
   Icon,
   cn
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-WZ55ERDO.mjs";
 
 // src/geo-block-banner/index.tsx
 import { useLabels } from "@agg-build/hooks";

package/dist/{chunk-EOCHFD2U.mjs → chunk-GLVLCXIM.mjs}

@@ -10,7 +10,7 @@ import {
   isErrorWithStatus,
   useEventListTabs,
   useEventListTabsHeaderOverflow
-} from "./chunk-MDO3NMXP.mjs";
+} from "./chunk-PHRYWSNV.mjs";
 import {
   DEPOSIT_MODAL_OPEN_EVENT,
   PlaceOrder,
@@ -18,10 +18,10 @@ import {
   WITHDRAW_MODAL_OPEN_EVENT,
   useClaimWinnings,
   useResolvedMarketClaim
-} from "./chunk-3FLLEJFM.mjs";
+} from "./chunk-PHAEFHBM.mjs";
 import {
   getDisplayOutcomePrice
-} from "./chunk-G5Y45GIA.mjs";
+} from "./chunk-STL4ZHLP.mjs";
 import {
   AggErrorBoundary,
   Button,
@@ -51,8 +51,9 @@ import {
   normalizeVenueMarketCluster,
   resolveTabVenus,
   shortenAddress,
+  skeletonViews,
   sortCategoriesForNavigation
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-WZ55ERDO.mjs";
 
 // src/pages/home/index.tsx
 import {
@@ -333,7 +334,14 @@ var EventMarketPageLoadingState = ({
                     /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
                     /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
                     /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
-                  ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      view: skeletonViews.settlement,
+                      className: cn("agg-settlement-list-item", classNames == null ? void 0 : classNames.settlement)
+                    }
+                  )
                 ]
               }
             ),

package/dist/{chunk-3FLLEJFM.mjs → chunk-PHAEFHBM.mjs}

@@ -8,11 +8,11 @@ import {
   getTradingValueLabel,
   getTradingVenueLabel,
   resolveOrderEligibilityMessage
-} from "./chunk-G5Y45GIA.mjs";
+} from "./chunk-STL4ZHLP.mjs";
 import {
   GeoBlockBanner,
   subscribeAggDepositNotification
-} from "./chunk-G5BXCT5Y.mjs";
+} from "./chunk-3PSIO77N.mjs";
 import {
   AGG_TERMS_OF_SERVICE_URL,
   Button,
@@ -44,7 +44,7 @@ import {
   resolveResolvedOutcomeLabel,
   skeletonViews,
   useOptionalToast
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-WZ55ERDO.mjs";
 
 // src/trading/types.ts
 import { Venue, enumGuard, isFiniteNonNeg, safeParse } from "@agg-build/sdk";
@@ -59,7 +59,7 @@ var hasContent = (value) => {
   return typeof value === "string" && value.trim().length > 0;
 };
 var SettlementDetails = ({ className }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const tradingContext = useEventTradingContext();
   const selectedEvent = (_a = tradingContext == null ? void 0 : tradingContext.selectedEvent) != null ? _a : null;
   const selectedMarket = (_b = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _b : null;
@@ -68,16 +68,29 @@ var SettlementDetails = ({ className }) => {
   const eventDescription = (_c = selectedEvent.description) != null ? _c : null;
   const marketDescription = (_d = selectedMarket.description) != null ? _d : null;
   const primaryRules = (_e = selectedMarket.rulesPrimary) != null ? _e : null;
-  if (!hasContent(eventDescription) && !hasContent(marketDescription) && !hasContent(primaryRules)) {
+  const settlementDiff = (_f = selectedEvent.settlementDiff) != null ? _f : null;
+  const settlementVenues = Array.from(
+    new Set(selectedEvent.venueMarkets.map((market) => market.venue))
+  );
+  const selectedMarketRuleContent = [
+    selectedMarket.description,
+    selectedMarket.rulesPrimary,
+    selectedMarket.rulesSecondary
+  ].filter(hasContent).join("\n\n");
+  const settlementVenueRules = selectedMarketRuleContent ? [{ venue: selectedMarket.venue, content: selectedMarketRuleContent }] : [];
+  if (!hasContent(eventDescription) && !hasContent(marketDescription) && !hasContent(primaryRules) && ((_g = settlementDiff == null ? void 0 : settlementDiff.differences.length) != null ? _g : 0) === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: "agg-settlement-list flex flex-col gap-6", children: /* @__PURE__ */ jsx("div", { className: "agg-settlement-list-item", children: /* @__PURE__ */ jsx(
     Settlement,
     {
-      question: (_f = selectedMarket.question) != null ? _f : selectedEvent.title,
+      question: (_h = selectedMarket.question) != null ? _h : selectedEvent.title,
       eventDescription,
       marketDescription,
       primaryRules,
+      settlementDiff,
+      settlementVenues,
+      settlementVenueRules,
       className
     }
   ) }) });

package/dist/{chunk-MDO3NMXP.mjs → chunk-PHRYWSNV.mjs}

@@ -6,6 +6,9 @@ import {
   formatProbabilityPercent,
   getDisplayOutcomePrice,
   getFirstSettlementParagraph,
+  getSettlementDifferenceId,
+  prepareSettlementDifferences,
+  resolveDifferenceIconClassName,
   resolveHeaderOutcomeItems,
   resolveInitialEventDetailsChartRange,
   resolveInitialOutcomeLabel,
@@ -23,7 +26,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-G5Y45GIA.mjs";
+} from "./chunk-STL4ZHLP.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -75,7 +78,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-WZ55ERDO.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -1273,12 +1276,17 @@ import { useMemo as useMemo2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SettlementSummary = ({
   content,
+  settlementDiff,
   settlementSectionId = SETTLEMENT_SECTION_ID,
   className
 }) => {
   const labels = useLabels2();
   const firstParagraph = useMemo2(() => getFirstSettlementParagraph(content), [content]);
-  if (!firstParagraph) return null;
+  const settlementDifferences = useMemo2(
+    () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
+    [settlementDiff == null ? void 0 : settlementDiff.differences]
+  );
+  if (!firstParagraph && settlementDifferences.length === 0) return null;
   const handleReadFullDetails = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -1287,43 +1295,118 @@ var SettlementSummary = ({
     if (!target) return;
     target.scrollIntoView({ behavior: "smooth", block: "start" });
   };
-  return /* @__PURE__ */ jsxs2("div", { className: cn("agg-settlement-summary flex w-full flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsx2(
-      Typography,
+  const handleDifferencePillClick = (event, canonicalKey) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (typeof document === "undefined") return;
+    const target = document.getElementById(
+      getSettlementDifferenceId(settlementSectionId, canonicalKey)
+    );
+    if (!target) return;
+    const trigger = target.querySelector("button[aria-expanded]");
+    if ((trigger == null ? void 0 : trigger.getAttribute("aria-expanded")) === "false") {
+      trigger.click();
+    }
+    target.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+  const actionButton = /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "agg-settlement-summary-toggle",
+        "inline-flex shrink-0 cursor-pointer items-center gap-1 whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "hover:opacity-80",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+      ),
+      "aria-controls": settlementSectionId,
+      onClick: handleReadFullDetails,
+      children: [
+        /* @__PURE__ */ jsx2("span", { children: labels.settlementSummary.readFullDetails }),
+        /* @__PURE__ */ jsx2(Icon, { name: "chevron-down", className: "size-[14px]", "aria-hidden": "true" })
+      ]
+    }
+  );
+  if (settlementDifferences.length > 0) {
+    const visibleDifferences = settlementDifferences.slice(0, 2);
+    const hiddenDifferenceCount = settlementDifferences.length - visibleDifferences.length;
+    return /* @__PURE__ */ jsxs2(
+      "div",
       {
-        variant: "caption-caps",
-        className: "agg-settlement-summary-label text-agg-muted-foreground",
-        children: labels.settlementSummary.title
+        className: cn(
+          "agg-settlement-summary flex w-full flex-wrap items-start justify-between gap-x-4 gap-y-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-[240px] flex-1 flex-wrap items-center gap-x-5 gap-y-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }),
+              /* @__PURE__ */ jsx2("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-agg-full bg-agg-primary text-[10px] font-agg-bold leading-[14px] text-agg-on-primary", children: settlementDifferences.length })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-pills flex min-w-[240px] flex-1 flex-wrap items-center gap-2", children: [
+              visibleDifferences.map((difference) => /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "flex h-6 max-w-full shrink-0 cursor-pointer items-center gap-2 rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground sm:max-w-[220px]",
+                    "hover:opacity-80",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+                  ),
+                  onClick: (event) => handleDifferencePillClick(event, difference.canonicalKey),
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "i",
+                      {
+                        className: cn(
+                          "fi",
+                          resolveDifferenceIconClassName(difference.canonicalKey),
+                          "inline-flex size-3 shrink-0 items-center justify-center text-[12px] leading-none text-agg-muted-foreground"
+                        ),
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: difference.title })
+                  ]
+                },
+                difference.canonicalKey
+              )),
+              hiddenDifferenceCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "flex h-6 shrink-0 items-center rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground", children: [
+                "+",
+                hiddenDifferenceCount
+              ] }) : null
+            ] })
+          ] }),
+          actionButton
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-row flex w-full items-center gap-3", children: [
-      /* @__PURE__ */ jsx2(
-        "p",
-        {
-          className: cn(
-            "agg-settlement-summary-text",
-            "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
-          ),
-          children: firstParagraph
-        }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "agg-settlement-summary flex w-full items-center justify-between gap-4",
+        className
       ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "agg-settlement-summary-toggle",
-            "shrink-0 cursor-pointer whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
-            "hover:opacity-80",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
-          ),
-          "aria-controls": settlementSectionId,
-          onClick: handleReadFullDetails,
-          children: labels.settlementSummary.readFullDetails
-        }
-      )
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-row flex min-w-0 flex-1 items-center gap-5", children: [
+          /* @__PURE__ */ jsx2("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }) }),
+          /* @__PURE__ */ jsx2(
+            "p",
+            {
+              className: cn(
+                "agg-settlement-summary-text",
+                "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
+              ),
+              children: firstParagraph
+            }
+          )
+        ] }),
+        actionButton
+      ]
+    }
+  );
 };
 SettlementSummary.displayName = "SettlementSummary";
 
@@ -2771,7 +2854,7 @@ var EventListItemDetailsContent = ({
             }
           )
         ] }),
-        event.description ? /* @__PURE__ */ jsx5(SettlementSummary, { content: event.description }) : null
+        event.description || event.settlementDiff ? /* @__PURE__ */ jsx5(SettlementSummary, { content: event.description, settlementDiff: event.settlementDiff }) : null
       ]
     }
   );

package/dist/{chunk-GUYFQP7L.mjs → chunk-QDNG5UKJ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   dispatchAggDepositNotification
-} from "./chunk-G5BXCT5Y.mjs";
+} from "./chunk-3PSIO77N.mjs";
 import {
   BestPricesIcon,
   BoltIcon,
@@ -41,7 +41,7 @@ import {
   shortenAddress,
   useOptionalToast,
   venueLogoLabels
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-WZ55ERDO.mjs";
 
 // src/deposit/index.tsx
 import { useAggAuthState, useAggUiConfig, useDepositAddresses, useLabels as useLabels11 } from "@agg-build/hooks";