@agg-build/ui 4.18.1 → 4.19.0

package/dist/pages.js

@@ -7242,7 +7242,8 @@ var init_remote_image = __esm({
       width,
       height,
       onClick,
-      ariaLabel
+      ariaLabel,
+      fallback
     }) => {
       const {
         general: { theme }
@@ -7299,7 +7300,7 @@ var init_remote_image = __esm({
                 className: cn(placeholderClasses, classNames == null ? void 0 : classNames.placeholder),
                 "aria-hidden": true,
                 "aria-errormessage": "Image failed to load",
-                children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                children: fallback != null ? fallback : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                   Icon,
                   {
                     name: "image",
@@ -12899,13 +12900,17 @@ var init_event_list_item_details_utils = __esm({
       nowSec = (0, import_dayjs4.default)().unix(),
       selectedMarket
     }) => {
-      var _a, _b;
+      var _a;
       const scopedMarkets = selectedMarket ? [selectedMarket] : event.venueMarkets;
-      const preferredEventStart = (_a = toUnixTimestamp(event.startDate)) != null ? _a : toUnixTimestamp(event.creationDate);
-      const marketStartCandidates = scopedMarkets.map((market) => {
-        var _a2;
-        return (_a2 = toUnixTimestamp(market.startDate)) != null ? _a2 : toUnixTimestamp(market.creationDate);
-      }).filter((value) => value != null);
+      const resolveHistoryStart = (startDate, creationDate) => {
+        const start = toUnixTimestamp(startDate);
+        if (start != null && start <= nowSec) return start;
+        const created = toUnixTimestamp(creationDate);
+        if (created != null && created <= nowSec) return created;
+        return null;
+      };
+      const preferredEventStart = resolveHistoryStart(event.startDate, event.creationDate);
+      const marketStartCandidates = scopedMarkets.map((market) => resolveHistoryStart(market.startDate, market.creationDate)).filter((value) => value != null);
       const metadataStarts = [preferredEventStart, ...marketStartCandidates].filter(
         (value) => value != null
       );
@@ -12943,7 +12948,7 @@ var init_event_list_item_details_utils = __esm({
       const matchingRange = CHART_RANGE_PRIORITY.find((range) => {
         return RANGE_SECONDS_BY_TIME_RANGE[range] >= requiredSeconds;
       });
-      return (_b = matchingRange != null ? matchingRange : fallbackRange) != null ? _b : "ALL";
+      return (_a = matchingRange != null ? matchingRange : fallbackRange) != null ? _a : "ALL";
     };
     matchOutcomeByLabel = (outcome, selectedOutcomeLabel) => {
       const normalizedSelectedLabel = normalizeLabel(selectedOutcomeLabel);
@@ -16649,6 +16654,20 @@ var init_item_details = __esm({
         resolvedEventTradingState.isTradingDisabled ? [] : resolvedEventTradingState.displayMarkets,
         scopedSelectedMarketId
       );
+      const selectedBetdexOutcomes = (0, import_react35.useMemo)(
+        () => eventDetailVenueMarkets.filter((market) => market.venue === "betdex").flatMap(
+          (market) => market.venueMarketOutcomes.map((outcome) => ({
+            venue: market.venue,
+            venueMarketOutcomeId: outcome.id
+          }))
+        ),
+        [eventDetailVenueMarkets]
+      );
+      (0, import_hooks58.useMarketOrderbook)({
+        venueOutcomes: selectedBetdexOutcomes,
+        enabled: !resolvedEventTradingState.isTradingDisabled && selectedBetdexOutcomes.length > 0,
+        live: false
+      });
       const wsLivePrices = (0, import_hooks58.useLiveOutcomePrices)(eventDetailVenueMarkets);
       const wsBestPrices = (0, import_hooks58.useLiveBestPrices)(eventDetailVenueMarkets);
       const resolvedMidpointsResult = midpointsResult != null ? midpointsResult : {
@@ -16786,6 +16805,7 @@ var init_item_details = __esm({
                       src: (0, import_hooks58.optimizedImageUrl)(event.image, 60),
                       retinaSrc: (0, import_hooks58.retinaImageUrl)(event.image, 60),
                       alt: "",
+                      fallback: event.venue ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(VenueLogo, { venue: event.venue, size: "large" }) : void 0,
                       className: "agg-event-image size-10 rounded-agg-lg object-cover md:size-[60px]"
                     }
                   ),
@@ -16937,7 +16957,7 @@ var init_item_details = __esm({
                   selectedOutcomeId: (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? tradingContext.selectedOutcomeId : (_f = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.venueMarketOutcomes[0]) == null ? void 0 : _f.id,
                   eventEndDate: event.endDate,
                   contractWindow,
-                  range: config.chart.selectedChartTimeRange,
+                  range: chartRangeOverride != null ? chartRangeOverride : config.chart.selectedChartTimeRange,
                   live: !resolvedEventTradingState.isTradingDisabled && config.features.enableLiveUpdates
                 },
                 event.id
@@ -16987,7 +17007,7 @@ var init_item_details = __esm({
                           ) : null,
                           !contractWindow ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }) : null,
                           !contractWindow && import_hooks58.CHART_TIME_RANGES.map((timeRange) => {
-                            const effectiveRange = chartView === "all" ? config.chart.selectedChartTimeRange : chartRangeOverride != null ? chartRangeOverride : config.chart.selectedChartTimeRange;
+                            const effectiveRange = chartRangeOverride != null ? chartRangeOverride : config.chart.selectedChartTimeRange;
                             const isActive = timeRange === effectiveRange;
                             return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                               Button,
@@ -18572,6 +18592,13 @@ var init_market_details = __esm({
           labels
         });
       }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title2]);
+      const primaryVenue = (0, import_react40.useMemo)(
+        () => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = venueMarkets.find((venueMarket) => venueMarket.id === marketId)) != null ? _a2 : venueMarkets[0]) == null ? void 0 : _b2.venue;
+        },
+        [venueMarkets, marketId]
+      );
       const livePrices = (0, import_react40.useMemo)(() => {
         const merged = /* @__PURE__ */ new Map();
         if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
@@ -18778,6 +18805,26 @@ var init_market_details = __esm({
         });
       }, [model, selectedOutcomeLabel, selectedOutcomeId]);
       const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
+      const betdexSeedOutcomes = (0, import_react40.useMemo)(
+        () => {
+          var _a2;
+          return ((_a2 = model == null ? void 0 : model.market.venueMarkets) != null ? _a2 : []).filter((venueMarket) => venueMarket.venue === "betdex").flatMap(
+            (venueMarket) => {
+              var _a3;
+              return ((_a3 = venueMarket.venueMarketOutcomes) != null ? _a3 : []).map((outcome) => ({
+                venue: venueMarket.venue,
+                venueMarketOutcomeId: outcome.id
+              }));
+            }
+          );
+        },
+        [model]
+      );
+      (0, import_hooks62.useMarketOrderbook)({
+        venueOutcomes: betdexSeedOutcomes,
+        enabled: !orderBookEnabled && !marketTradingState.isTradingDisabled && betdexSeedOutcomes.length > 0,
+        live: false
+      });
       const selectedVenueOutcome = selectedOutcomesByVenue.find(
         (item) => item.outcomeId === selectedOutcomeId
       );
@@ -18972,6 +19019,7 @@ var init_market_details = __esm({
                               src: (0, import_hooks62.optimizedImageUrl)(model.image, 60),
                               retinaSrc: (0, import_hooks62.retinaImageUrl)(model.image, 60),
                               alt: "",
+                              fallback: primaryVenue ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(VenueLogo, { venue: primaryVenue, size: "large" }) : void 0,
                               className: "agg-market-image size-12 rounded-agg-lg object-cover md:size-[60px]"
                             }
                           ) : null,
@@ -22551,7 +22599,7 @@ var init_index_place_order_utils = __esm({
       selectedMarket,
       tradeSide = "buy"
     }) => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f;
       if (!selectedMarket) {
         return {
           tone: "warning",
@@ -22571,7 +22619,15 @@ var init_index_place_order_utils = __esm({
         };
       }
       if (quoteData.status === "no_orderbooks") {
-        const serverError = (_a = quoteData.error) == null ? void 0 : _a.trim();
+        const warnings = (_a = quoteData.warnings) != null ? _a : [];
+        if (warnings.length > 0 && warnings.every((warning) => warning.reason === "hosted_cash_unavailable")) {
+          return {
+            tone: "warning",
+            message: labels.betdexBalanceUnavailable,
+            placement: "above-action"
+          };
+        }
+        const serverError = (_b = quoteData.error) == null ? void 0 : _b.trim();
         return {
           tone: "error",
           message: serverError || labels.noOrderbooks,
@@ -22588,24 +22644,24 @@ var init_index_place_order_utils = __esm({
       if (quoteData.status === "insufficient_input_amount") {
         return {
           tone: "error",
-          message: (_b = quoteData.message) != null ? _b : labels.insufficientInputAmount,
+          message: (_c = quoteData.message) != null ? _c : labels.insufficientInputAmount,
           placement: "above-action"
         };
       }
       if (quoteData.status === "invalid_input") {
         return {
           tone: "error",
-          message: (_c = quoteData.message) != null ? _c : labels.quoteUnavailable,
+          message: (_d = quoteData.message) != null ? _d : labels.quoteUnavailable,
           placement: "above-action"
         };
       }
       if (quoteData.status === "insufficient_position") {
-        const total = (_d = quoteData.positionAvailability) == null ? void 0 : _d.totalSellableShares;
+        const total = (_e = quoteData.positionAvailability) == null ? void 0 : _e.totalSellableShares;
         const message = total != null ? labels.insufficientPosition(total) : labels.insufficientPositionGeneric;
         return { tone: "error", message, placement: "above-action" };
       }
       if (quoteData.status === "insufficient_depth") {
-        const serverError = (_e = quoteData.error) == null ? void 0 : _e.trim();
+        const serverError = (_f = quoteData.error) == null ? void 0 : _f.trim();
         return {
           tone: "error",
           message: tradeSide === "sell" ? serverError || labels.insufficientSellDepth : serverError || labels.insufficientLiquidity,
@@ -25284,6 +25340,7 @@ var init_place_order = __esm({
       headerSubtitle,
       headerImage,
       headerTitle,
+      headerVenue,
       onClose
     }) => {
       if (!headerTitle) return null;
@@ -25294,6 +25351,7 @@ var init_place_order = __esm({
             {
               src: headerImage,
               alt: "",
+              fallback: headerVenue ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(VenueLogo, { venue: headerVenue, size: "large" }) : void 0,
               className: "agg-order-market-image h-12 w-12 shrink-0 overflow-hidden rounded-agg-lg object-cover"
             }
           ),
@@ -25620,7 +25678,7 @@ var init_place_order = __esm({
       showResolvingState = false,
       midpointsResult
     }) => {
-      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, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha;
+      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, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia;
       const {
         enableDebug: isExecutionDebugEnabled,
         features: { enableAnimations, showFeesBreakdown, showLimitOrders: limitOrdersFeature },
@@ -27906,6 +27964,7 @@ var init_place_order = __esm({
                 headerSubtitle,
                 headerImage,
                 headerTitle,
+                headerVenue: (_ia = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.venue) != null ? _ia : scopedSelectedEvent == null ? void 0 : scopedSelectedEvent.venue,
                 onClose
               }),
               /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: cn("agg-order-panel-content flex flex-col gap-6", classNames == null ? void 0 : classNames.content), children: [
@@ -32642,6 +32701,10 @@ __export(pages_exports, {
   EventOpenOrders: () => EventOpenOrders,
   EventOpenOrdersCard: () => EventOpenOrdersCard,
   HomePage: () => HomePage,
+  LEADERBOARD_DEFAULT_METRIC: () => LEADERBOARD_DEFAULT_METRIC,
+  LEADERBOARD_DEFAULT_PERIOD: () => LEADERBOARD_DEFAULT_PERIOD,
+  LEADERBOARD_METRICS: () => LEADERBOARD_METRICS,
+  LeaderboardPage: () => LeaderboardPage,
   ManageBalancesModal: () => ManageBalancesModal,
   USER_PROFILE_TAB_ACTIVITY: () => USER_PROFILE_TAB_ACTIVITY,
   USER_PROFILE_TAB_OPEN_ORDERS: () => USER_PROFILE_TAB_OPEN_ORDERS,
@@ -33372,6 +33435,7 @@ var EventListItemContent = ({
               src: (0, import_hooks40.optimizedImageUrl)(resolvedImage, 40),
               retinaSrc: (0, import_hooks40.retinaImageUrl)(resolvedImage, 40),
               alt: "",
+              fallback: event.venue ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(VenueLogo, { venue: event.venue, size: "medium" }) : void 0,
               classNames: {
                 root: "agg-event-image h-10 w-10 shrink-0 rounded-agg-lg object-cover",
                 image: "transition-transform duration-300 group-hover/agg-event-card:scale-110"
@@ -36714,24 +36778,58 @@ var USER_PROFILE_POSITION_FILTERS = [
   { value: "closed", label: "Closed" }
 ];
 
-// src/pages/user-profile/position-view-model.ts
-var defaultLabels2 = {
-  avgPrefix: "avg",
-  nowPrefix: "now",
-  finalPrefix: "final"
-};
-var missingLabel = "\u2014";
+// src/shared/pnl-format.ts
+var MISSING_VALUE_LABEL = "\u2014";
 var usdFormatter = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
   minimumFractionDigits: 2,
   maximumFractionDigits: 2
 });
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var formatCurrency = (value, formatCurrencyOverride) => {
+  if (!isFiniteNumber(value)) return MISSING_VALUE_LABEL;
+  if (formatCurrencyOverride) return formatCurrencyOverride(value);
+  return usdFormatter.format(value);
+};
+var NEGLIGIBLE_CURRENCY_THRESHOLD = 5e-3;
+var formatSignedCurrency = (value, formatCurrencyOverride, options = {}) => {
+  if (!isFiniteNumber(value)) return MISSING_VALUE_LABEL;
+  if (value === 0) return formatCurrency(0, formatCurrencyOverride);
+  const sign = value > 0 ? "+" : "-";
+  const magnitude = Math.abs(value);
+  if (options.markNegligible && magnitude < NEGLIGIBLE_CURRENCY_THRESHOLD) {
+    return `${sign}<${formatCurrency(0.01, formatCurrencyOverride)}`;
+  }
+  return `${sign}${formatCurrency(magnitude, formatCurrencyOverride)}`;
+};
+var formatCurrencyMarkingNegligible = (value, formatCurrencyOverride) => {
+  if (!isFiniteNumber(value)) return MISSING_VALUE_LABEL;
+  if (value !== 0 && Math.abs(value) < NEGLIGIBLE_CURRENCY_THRESHOLD) {
+    return `<${formatCurrency(0.01, formatCurrencyOverride)}`;
+  }
+  return formatCurrency(value, formatCurrencyOverride);
+};
+var getPositionTone = (value) => {
+  if (!isFiniteNumber(value) || value === 0) return "neutral";
+  return value > 0 ? "positive" : "negative";
+};
+var toneClassName = (tone) => {
+  if (tone === "positive") return "text-agg-success";
+  if (tone === "negative") return "text-agg-error";
+  return "text-agg-muted-foreground";
+};
+
+// src/pages/user-profile/position-view-model.ts
+var defaultLabels2 = {
+  avgPrefix: "avg",
+  nowPrefix: "now",
+  finalPrefix: "final"
+};
 var percentFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
 });
-var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
 var parseCurrencyLabel = (label2) => {
   if (!label2) return null;
   const normalized = label2.replace(/[$,\s]/g, "");
@@ -36752,23 +36850,13 @@ var parsePercentLabel = (label2) => {
   const parsed = Number(match[1].replace(/,/g, ""));
   return Number.isFinite(parsed) ? parsed : null;
 };
-var formatCurrency = (value, formatCurrencyOverride) => {
-  if (!isFiniteNumber(value)) return missingLabel;
-  if (formatCurrencyOverride) return formatCurrencyOverride(value);
-  return usdFormatter.format(value);
-};
-var formatSignedCurrency = (value, formatCurrencyOverride) => {
-  if (!isFiniteNumber(value)) return missingLabel;
-  if (value === 0) return formatCurrency(0, formatCurrencyOverride);
-  return `${value > 0 ? "+" : "-"}${formatCurrency(Math.abs(value), formatCurrencyOverride)}`;
-};
 var formatPriceCents2 = (value, formatPrice) => {
-  if (!isFiniteNumber(value)) return missingLabel;
+  if (!isFiniteNumber(value)) return MISSING_VALUE_LABEL;
   if (formatPrice) return formatPrice(value);
   return `${Math.round(value * 100)}\xA2`;
 };
 var formatSignedPercent = (value) => {
-  if (!isFiniteNumber(value)) return missingLabel;
+  if (!isFiniteNumber(value)) return MISSING_VALUE_LABEL;
   if (value === 0) return "0%";
   return `${value > 0 ? "+" : "-"}${percentFormatter.format(Math.abs(value))}%`;
 };
@@ -36856,10 +36944,6 @@ var getFinalPnlPercent = (position, pnlValue) => {
   }
   return null;
 };
-var getPositionTone = (value) => {
-  if (!isFiniteNumber(value) || value === 0) return "neutral";
-  return value > 0 ? "positive" : "negative";
-};
 var toPositionRowViewModel = (position, labels = defaultLabels2, formatters = {}) => {
   const { formatCurrency: currency, formatPrice: price } = formatters;
   const positionStatus = resolvePositionStatus(position);
@@ -36873,10 +36957,10 @@ var toPositionRowViewModel = (position, labels = defaultLabels2, formatters = {}
     position,
     positionStatus,
     bucket: resolvePositionBucket(position),
-    title: position.title || missingLabel,
+    title: position.title || MISSING_VALUE_LABEL,
     thumbnailSrc: position.thumbnailSrc,
-    selectedOutcomeLabel: position.outcomeLabel || missingLabel,
-    resolutionLabel: position.resolutionLabel || position.outcomeLabel || missingLabel,
+    selectedOutcomeLabel: position.outcomeLabel || MISSING_VALUE_LABEL,
+    resolutionLabel: position.resolutionLabel || position.outcomeLabel || MISSING_VALUE_LABEL,
     venueShareBreakdown: position.venueShareBreakdown,
     totalTraded: {
       primaryLabel: formatCurrency(getTotalTradedValue(position), currency),
@@ -37513,11 +37597,6 @@ var import_jsx_runtime199 = require("react/jsx-runtime");
 var shouldUseNativeLinkNavigation3 = (event) => {
   return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button === 1;
 };
-var toneTextClassName = (tone) => {
-  if (tone === "positive") return "text-agg-success";
-  if (tone === "negative") return "text-agg-error";
-  return "text-agg-muted-foreground";
-};
 var OutcomePill = ({ label: label2 }) => /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("span", { className: "agg-position-outcome max-w-[120px] inline-flex items-center justify-center rounded-full bg-agg-secondary-hover px-4 py-[6px]", children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("span", { className: "whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground truncate", children: label2 }) });
 var ResolutionPill = ({ label: label2 }) => /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("span", { className: "agg-position-resolution-pill inline-flex w-full items-center justify-center overflow-hidden rounded-full bg-agg-secondary-hover px-4 py-[6px] md:w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("span", { className: "truncate whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground", children: label2 }) });
 var VenueShares = ({
@@ -37616,7 +37695,7 @@ var PositionValueCell = ({
           {
             className: cn(
               "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal",
-              toneTextClassName(value.tone)
+              toneClassName(value.tone)
             ),
             children: value.deltaLabel
           }
@@ -37629,7 +37708,7 @@ var PositionValueCell = ({
           {
             className: cn(
               "font-agg-sans text-agg-xs leading-agg-4 font-agg-normal",
-              toneTextClassName(value.tone)
+              toneClassName(value.tone)
             ),
             children: value.percentLabel
           }
@@ -38554,7 +38633,7 @@ init_icon();
 init_tooltip();
 init_utils();
 
-// src/pages/user-profile/components/default-avatar.tsx
+// src/shared/default-avatar.tsx
 init_utils();
 var import_jsx_runtime202 = require("react/jsx-runtime");
 var DefaultAvatar = ({ className }) => {
@@ -39953,6 +40032,450 @@ var UserProfilePage = ({
 };
 UserProfilePage.displayName = "UserProfilePage";
 
+// src/pages/leaderboard/index.tsx
+var import_hooks102 = require("@agg-build/hooks");
+var import_react69 = require("react");
+init_button();
+init_error_boundary();
+init_icon();
+init_state_message();
+init_utils();
+
+// src/pages/leaderboard/components/leaderboard-header-row.tsx
+var import_hooks99 = require("@agg-build/hooks");
+init_utils();
+
+// src/pages/leaderboard/leaderboard.constants.ts
+var LEADERBOARD_DEFAULT_PERIOD = "30d";
+var LEADERBOARD_DEFAULT_METRIC = "realizedPnl";
+var LEADERBOARD_METRICS = ["realizedPnl", "volume"];
+var LEADERBOARD_TOP_RANKS = 3;
+var LEADERBOARD_GRID_CLASS = "grid grid-cols-[36px_minmax(0,1fr)] grid-rows-[auto_auto] gap-x-3 gap-y-2 sm:grid-cols-[48px_minmax(0,1fr)_88px_128px_128px] sm:grid-rows-1 sm:gap-x-3 sm:gap-y-0";
+
+// src/pages/leaderboard/components/leaderboard-header-row.tsx
+var import_jsx_runtime205 = require("react/jsx-runtime");
+var SORT_CARET = /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("svg", { viewBox: "0 0 10 10", className: "size-2.5", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("path", { d: "M5 8 1 3h8z", fill: "currentColor" }) });
+function LeaderboardHeaderRow({
+  metric,
+  onMetricChange
+}) {
+  const labels = (0, import_hooks99.useLabels)().leaderboard;
+  const sortable = (key, text) => {
+    const active = metric === key;
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
+      "span",
+      {
+        role: "columnheader",
+        "aria-sort": active ? "descending" : void 0,
+        className: "text-right",
+        children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onMetricChange(key),
+            className: cn(
+              "inline-flex cursor-pointer items-center justify-end gap-1 uppercase tracking-wide outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-agg-primary-hover",
+              active ? "font-agg-bold text-agg-foreground" : "hover:text-agg-foreground"
+            ),
+            children: [
+              text,
+              active ? SORT_CARET : null
+            ]
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
+    "div",
+    {
+      role: "row",
+      className: cn(
+        LEADERBOARD_GRID_CLASS,
+        "agg-leaderboard-header hidden h-10 items-center border-b border-agg-separator bg-agg-secondary-hover px-5 text-agg-xs leading-agg-4 uppercase tracking-wide text-agg-muted-foreground sm:grid"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { role: "columnheader", children: labels.columns.rank }),
+        /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { role: "columnheader", children: labels.columns.trader }),
+        /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { role: "columnheader", className: "text-right", children: labels.columns.orders }),
+        sortable("volume", labels.columns.volume),
+        sortable("realizedPnl", labels.columns.realizedPnl)
+      ]
+    }
+  );
+}
+
+// src/pages/leaderboard/components/leaderboard-row.tsx
+var import_hooks100 = require("@agg-build/hooks");
+init_remote_image();
+init_utils();
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var integer = new Intl.NumberFormat("en-US");
+function LeaderboardRowView({
+  row,
+  isCurrentUser,
+  className
+}) {
+  var _a, _b, _c;
+  const labels = (0, import_hooks100.useLabels)().leaderboard;
+  const { formatCurrency: formatCurrency2 } = (0, import_hooks100.useAggUiConfig)().formatting;
+  const tone = getPositionTone(row.realizedPnl);
+  const shortWallet = shortenAddress(row.walletAddress);
+  const identity = (_b = (_a = row.username) != null ? _a : shortWallet) != null ? _b : labels.anonymousTrader;
+  const identityKind = row.username ? "username" : shortWallet ? "wallet" : "anonymous";
+  const isTop = row.rank != null && row.rank <= LEADERBOARD_TOP_RANKS;
+  const hasOrders = Number.isFinite(row.orders);
+  const cell = (caption2, value, extra) => /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("span", { role: "cell", className: "flex flex-col text-left tabular-nums sm:block sm:text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "agg-type-caption uppercase tracking-wide text-agg-muted-foreground sm:hidden", children: caption2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: cn("text-agg-sm leading-agg-5", extra), children: value })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+    "div",
+    {
+      role: "row",
+      "aria-current": isCurrentUser ? "true" : void 0,
+      className: cn(
+        LEADERBOARD_GRID_CLASS,
+        "agg-leaderboard-row items-center px-4 py-3 sm:min-h-16 sm:px-5",
+        isCurrentUser ? "bg-agg-trade-highlight-surface shadow-[inset_3px_0_0_var(--agg-color-primary)]" : "hover:bg-agg-secondary-hover/60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+          "span",
+          {
+            role: "cell",
+            "data-testid": "agg-leaderboard-rank",
+            className: cn(
+              "agg-leaderboard-rank row-span-2 inline-flex size-7 items-center justify-center rounded-agg-full text-agg-sm tabular-nums sm:row-span-1",
+              // cn() is a plain join: colour classes must be mutually exclusive.
+              row.rank === 1 ? "border border-agg-primary bg-agg-secondary-hover font-agg-bold text-agg-primary" : isTop ? "border border-agg-separator bg-agg-secondary-hover font-agg-bold text-agg-foreground" : "text-agg-muted-foreground"
+            ),
+            children: (_c = row.rank) != null ? _c : "\u2013"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { role: "cell", className: "agg-leaderboard-identity flex min-w-0 items-center gap-3", children: [
+          row.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+            RemoteImage,
+            {
+              src: (0, import_hooks100.optimizedImageUrl)(row.avatarUrl, 80),
+              alt: "",
+              className: "size-10 shrink-0 rounded-agg-full object-cover"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DefaultAvatar, { className: "size-10 rounded-agg-full" }),
+          /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "truncate text-agg-sm leading-agg-5",
+                    identityKind === "username" && "font-agg-bold text-agg-foreground",
+                    identityKind === "wallet" && "font-mono font-agg-medium text-agg-foreground",
+                    identityKind === "anonymous" && "font-agg-medium text-agg-muted-foreground"
+                  ),
+                  children: identity
+                }
+              ),
+              isCurrentUser ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "rounded-agg-full bg-agg-primary px-1.5 text-agg-2xs font-agg-bold uppercase leading-agg-4 tracking-wide text-agg-on-primary", children: labels.you }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "text-agg-xs leading-agg-4 text-agg-muted-foreground", children: hasOrders ? labels.tradesCount(row.orders) : MISSING_VALUE_LABEL })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: "col-start-2 grid grid-cols-3 gap-2 sm:contents", children: [
+          cell(labels.columns.orders, hasOrders ? integer.format(row.orders) : MISSING_VALUE_LABEL),
+          cell(labels.columns.volume, formatCurrencyMarkingNegligible(row.volume, formatCurrency2)),
+          cell(
+            labels.columns.realizedPnl,
+            formatSignedCurrency(row.realizedPnl, formatCurrency2, { markNegligible: true }),
+            cn("font-agg-bold", toneClassName(tone))
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/pages/leaderboard/components/leaderboard-skeleton.tsx
+var import_hooks101 = require("@agg-build/hooks");
+init_utils();
+var import_jsx_runtime207 = require("react/jsx-runtime");
+function LeaderboardSkeleton({ rows = 4 }) {
+  const labels = (0, import_hooks101.useLabels)().leaderboard;
+  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { role: "status", "aria-label": labels.loadingAria, className: "agg-leaderboard-skeleton", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
+    "div",
+    {
+      className: cn(
+        LEADERBOARD_GRID_CLASS,
+        "items-center border-b border-agg-separator px-4 py-3 last:border-b-0 sm:min-h-16 sm:px-5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "size-7 rounded-agg-full bg-agg-secondary-hover/80" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "size-10 rounded-agg-full bg-agg-secondary-hover/80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "h-3 w-2/5 rounded-agg-sm bg-agg-secondary-hover/80" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "h-3 w-1/5 rounded-agg-sm bg-agg-secondary-hover/80" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "hidden h-3 w-10 justify-self-end rounded-agg-sm bg-agg-secondary-hover/80 sm:block" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "hidden h-3 w-16 justify-self-end rounded-agg-sm bg-agg-secondary-hover/80 sm:block" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "hidden h-3 w-14 justify-self-end rounded-agg-sm bg-agg-secondary-hover/80 sm:block" })
+      ]
+    },
+    i
+  )) });
+}
+
+// src/pages/leaderboard/components/segmented-control.tsx
+init_utils();
+var import_jsx_runtime208 = require("react/jsx-runtime");
+function SegmentedControl({
+  label: label2,
+  value,
+  onChange,
+  items,
+  className,
+  itemClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-label": label2,
+      className: cn(
+        "agg-segmented flex h-10 w-full items-stretch overflow-clip rounded-agg-sm border border-agg-separator sm:w-auto",
+        className
+      ),
+      children: items.map((item, idx) => {
+        const isActive = item.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { className: "flex flex-1 items-stretch sm:flex-none", children: [
+          idx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "w-px bg-agg-separator", "aria-hidden": true }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": isActive,
+              onClick: () => onChange(item.value),
+              className: cn(
+                "agg-segmented-trigger flex flex-1 cursor-pointer items-center justify-center px-3 font-agg-sans text-agg-sm leading-agg-5 whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-agg-primary-hover sm:px-4",
+                isActive ? "bg-agg-secondary-hover font-agg-bold text-agg-foreground" : "bg-agg-secondary font-agg-normal text-agg-muted-foreground hover:bg-agg-secondary-hover hover:text-agg-foreground",
+                itemClassName
+              ),
+              children: item.label
+            }
+          )
+        ] }, item.value);
+      })
+    }
+  );
+}
+
+// src/pages/leaderboard/index.tsx
+var import_jsx_runtime209 = require("react/jsx-runtime");
+function LeaderboardPage(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(AggErrorBoundary, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(LeaderboardPageInner, __spreadValues({}, props)) });
+}
+function LeaderboardPageInner({
+  rows: rowsProp,
+  isLoading: isLoadingProp,
+  error: errorProp,
+  hasNextPage: hasNextPageProp,
+  isLoadingMore: isLoadingMoreProp,
+  onLoadMore: onLoadMoreProp,
+  period: periodProp,
+  onPeriodChange,
+  metric: metricProp,
+  onMetricChange,
+  currentUserId: currentUserIdProp,
+  appName,
+  className,
+  classNames
+}) {
+  const allLabels = (0, import_hooks102.useLabels)();
+  const labels = allLabels.leaderboard;
+  const { user } = (0, import_hooks102.useAggAuthState)();
+  const [periodState, setPeriodState] = (0, import_react69.useState)(LEADERBOARD_DEFAULT_PERIOD);
+  const [metricState, setMetricState] = (0, import_react69.useState)(LEADERBOARD_DEFAULT_METRIC);
+  const period = periodProp != null ? periodProp : periodState;
+  const metric = metricProp != null ? metricProp : metricState;
+  const handlePeriodChange = (0, import_react69.useCallback)(
+    (next) => {
+      if (periodProp === void 0) setPeriodState(next);
+      onPeriodChange == null ? void 0 : onPeriodChange(next);
+    },
+    [onPeriodChange, periodProp]
+  );
+  const handleMetricChange = (0, import_react69.useCallback)(
+    (next) => {
+      if (metricProp === void 0) setMetricState(next);
+      onMetricChange == null ? void 0 : onMetricChange(next);
+    },
+    [metricProp, onMetricChange]
+  );
+  const shouldUseHookData = !rowsProp;
+  const query = (0, import_hooks102.useLeaderboard)({ period, metric, enabled: shouldUseHookData });
+  const rows = rowsProp != null ? rowsProp : query.rows;
+  const isLoading = isLoadingProp != null ? isLoadingProp : shouldUseHookData && query.isLoading;
+  const error = errorProp != null ? errorProp : shouldUseHookData ? query.error : null;
+  const hasNextPage = hasNextPageProp != null ? hasNextPageProp : shouldUseHookData && query.hasNextPage;
+  const isLoadingMore = isLoadingMoreProp != null ? isLoadingMoreProp : shouldUseHookData && query.isFetchingNextPage;
+  const fetchNextPage = query.fetchNextPage;
+  const onLoadMore = (0, import_react69.useMemo)(
+    () => onLoadMoreProp != null ? onLoadMoreProp : shouldUseHookData ? () => void fetchNextPage() : void 0,
+    [onLoadMoreProp, shouldUseHookData, fetchNextPage]
+  );
+  const retry = shouldUseHookData ? () => void query.refetch() : void 0;
+  const currentUserId = currentUserIdProp != null ? currentUserIdProp : user == null ? void 0 : user.id;
+  const [sentinel, setSentinel] = (0, import_react69.useState)(null);
+  (0, import_react69.useEffect)(() => {
+    const target = sentinel;
+    if (!target || !hasNextPage || !onLoadMore || typeof IntersectionObserver === "undefined")
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        var _a;
+        if (!((_a = entries[0]) == null ? void 0 : _a.isIntersecting) || isLoading || isLoadingMore) return;
+        onLoadMore();
+      },
+      { rootMargin: "60px 0px" }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [sentinel, hasNextPage, isLoading, isLoadingMore, onLoadMore]);
+  const hasRows = rows.length > 0;
+  const showInlineError = Boolean(error) && hasRows;
+  const periodItems = import_hooks102.LEADERBOARD_PERIODS.map((value) => ({ value, label: labels.periods[value] }));
+  const metricItems = LEADERBOARD_METRICS.map((value) => ({ value, label: labels.metrics[value] }));
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
+    "div",
+    {
+      className: cn(
+        "agg-leaderboard mx-auto flex w-full max-w-[960px] flex-col px-4 py-6 sm:px-6 gap-5 font-agg-sans text-agg-foreground",
+        className,
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("header", { className: cn("agg-leaderboard-title flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("h1", { className: "agg-type-heading m-0", children: labels.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("p", { className: "m-0 text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.subtitle(appName, labels.periods[period]) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
+          "div",
+          {
+            className: cn(
+              "agg-leaderboard-toolbar flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between",
+              classNames == null ? void 0 : classNames.toolbar
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: "agg-type-caption uppercase tracking-wide text-agg-muted-foreground", children: labels.periodLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                  SegmentedControl,
+                  {
+                    label: labels.periodLabel,
+                    value: period,
+                    onChange: handlePeriodChange,
+                    items: periodItems
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: "agg-type-caption uppercase tracking-wide text-agg-muted-foreground", children: labels.rankByLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                  SegmentedControl,
+                  {
+                    label: labels.rankByLabel,
+                    value: metric,
+                    onChange: handleMetricChange,
+                    items: metricItems
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
+          "section",
+          {
+            "aria-label": labels.title,
+            className: cn(
+              "agg-leaderboard-list overflow-clip rounded-agg-xl border border-agg-separator bg-agg-secondary shadow-agg-card",
+              classNames == null ? void 0 : classNames.list
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { role: "table", "aria-label": labels.title, className: "agg-leaderboard-table", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(LeaderboardHeaderRow, { metric, onMetricChange: handleMetricChange }),
+                !isLoading && hasRows ? /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "divide-y divide-agg-separator", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                  LeaderboardRowView,
+                  {
+                    row,
+                    isCurrentUser: currentUserId !== void 0 && row.userId === currentUserId,
+                    className: classNames == null ? void 0 : classNames.row
+                  },
+                  row.userId
+                )) }) : null
+              ] }),
+              isLoading ? /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(LeaderboardSkeleton, {}) : error && !hasRows ? /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "py-10", children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                StateMessage,
+                {
+                  title: labels.errorTitle,
+                  description: labels.errorDescription,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon, { name: "warning" }),
+                  onAction: retry
+                }
+              ) }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "py-10", children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                StateMessage,
+                {
+                  title: labels.emptyTitle,
+                  description: labels.emptyDescription,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon, { name: "search-empty" })
+                }
+              ) }) : null,
+              (hasNextPage || showInlineError) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "agg-leaderboard-footer relative flex items-center justify-center gap-3 border-t border-agg-separator p-3.5",
+                    classNames == null ? void 0 : classNames.footer
+                  ),
+                  children: showInlineError ? /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_jsx_runtime209.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { role: "alert", className: "text-agg-sm leading-agg-5 text-agg-error", children: labels.errorTitle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Button, { variant: "tertiary", size: "small", onClick: retry != null ? retry : onLoadMore, children: allLabels.common.retry })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_jsx_runtime209.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                      "div",
+                      {
+                        ref: setSentinel,
+                        className: "agg-leaderboard-sentinel absolute inset-x-0 top-0 h-px",
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+                      Button,
+                      {
+                        variant: "tertiary",
+                        size: "small",
+                        onClick: onLoadMore,
+                        disabled: isLoadingMore,
+                        isLoading: isLoadingMore,
+                        "aria-label": labels.showMore,
+                        children: labels.showMore
+                      }
+                    )
+                  ] })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("p", { className: "m-0 text-agg-xs leading-agg-4 text-agg-muted-foreground", children: labels.pnlFootnote })
+      ]
+    }
+  );
+}
+LeaderboardPage.displayName = "LeaderboardPage";
+
 // src/pages/index.ts
 init_deposit_modal_events();
 // Annotate the CommonJS export names for ESM import in node:
@@ -39962,6 +40485,10 @@ init_deposit_modal_events();
   EventOpenOrders,
   EventOpenOrdersCard,
   HomePage,
+  LEADERBOARD_DEFAULT_METRIC,
+  LEADERBOARD_DEFAULT_PERIOD,
+  LEADERBOARD_METRICS,
+  LeaderboardPage,
   ManageBalancesModal,
   USER_PROFILE_TAB_ACTIVITY,
   USER_PROFILE_TAB_OPEN_ORDERS,