@agg-build/ui 4.18.2 → 4.19.0

package/README.md

@@ -233,6 +233,7 @@ export function Home() {
 | `HomePage`        | Full home page with tabs, search, grid |
 | `EventMarketPage` | Full event/market detail page          |
 | `UserProfilePage` | User profile page with tabs            |
+| `LeaderboardPage` | Trader leaderboard by P&L or volume    |
 
 ### Modals — `@agg-build/ui/modals`
 

package/dist/{chunk-RFMA5ABT.mjs → chunk-GT3DCFIT.mjs}

@@ -2101,24 +2101,58 @@ var USER_PROFILE_POSITION_FILTERS = [
   { value: "closed", label: "Closed" }
 ];
 
-// src/pages/user-profile/position-view-model.ts
-var defaultLabels = {
-  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 defaultLabels = {
+  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 = (label) => {
   if (!label) return null;
   const normalized = label.replace(/[$,\s]/g, "");
@@ -2139,23 +2173,13 @@ var parsePercentLabel = (label) => {
   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 formatPriceCents = (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))}%`;
 };
@@ -2243,10 +2267,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 = defaultLabels, formatters = {}) => {
   const { formatCurrency: currency, formatPrice: price } = formatters;
   const positionStatus = resolvePositionStatus(position);
@@ -2260,10 +2280,10 @@ var toPositionRowViewModel = (position, labels = defaultLabels, 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),
@@ -2886,11 +2906,6 @@ import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-run
 var shouldUseNativeLinkNavigation2 = (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 }) => /* @__PURE__ */ jsx7("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__ */ jsx7("span", { className: "whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground truncate", children: label }) });
 var ResolutionPill = ({ label }) => /* @__PURE__ */ jsx7("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__ */ jsx7("span", { className: "truncate whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground", children: label }) });
 var VenueShares = ({
@@ -2989,7 +3004,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
           }
@@ -3002,7 +3017,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
           }
@@ -3918,7 +3933,7 @@ var ConditionalWrapper = ({
 }) => condition ? wrapper(children) : children;
 ConditionalWrapper.displayName = "ConditionalWrapper";
 
-// src/pages/user-profile/components/default-avatar.tsx
+// src/shared/default-avatar.tsx
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var DefaultAvatar = ({ className }) => {
   return /* @__PURE__ */ jsxs10(
@@ -5316,6 +5331,440 @@ var UserProfilePage = ({
 };
 UserProfilePage.displayName = "UserProfilePage";
 
+// src/pages/leaderboard/index.tsx
+import { useAggAuthState as useAggAuthState2, useLabels as useLabels12, useLeaderboard, LEADERBOARD_PERIODS } from "@agg-build/hooks";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useState as useState7 } from "react";
+
+// src/pages/leaderboard/components/leaderboard-header-row.tsx
+import { useLabels as useLabels9 } from "@agg-build/hooks";
+
+// 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
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var SORT_CARET = /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 10 10", className: "size-2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M5 8 1 3h8z", fill: "currentColor" }) });
+function LeaderboardHeaderRow({
+  metric,
+  onMetricChange
+}) {
+  const labels = useLabels9().leaderboard;
+  const sortable = (key, text) => {
+    const active = metric === key;
+    return /* @__PURE__ */ jsx13(
+      "span",
+      {
+        role: "columnheader",
+        "aria-sort": active ? "descending" : void 0,
+        className: "text-right",
+        children: /* @__PURE__ */ jsxs13(
+          "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__ */ jsxs13(
+    "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__ */ jsx13("span", { role: "columnheader", children: labels.columns.rank }),
+        /* @__PURE__ */ jsx13("span", { role: "columnheader", children: labels.columns.trader }),
+        /* @__PURE__ */ jsx13("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
+import { optimizedImageUrl as optimizedImageUrl4, useAggUiConfig as useAggUiConfig3, useLabels as useLabels10 } from "@agg-build/hooks";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var integer = new Intl.NumberFormat("en-US");
+function LeaderboardRowView({
+  row,
+  isCurrentUser,
+  className
+}) {
+  var _a, _b, _c;
+  const labels = useLabels10().leaderboard;
+  const { formatCurrency: formatCurrency2 } = useAggUiConfig3().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 = (caption, value, extra) => /* @__PURE__ */ jsxs14("span", { role: "cell", className: "flex flex-col text-left tabular-nums sm:block sm:text-right", children: [
+    /* @__PURE__ */ jsx14("span", { className: "agg-type-caption uppercase tracking-wide text-agg-muted-foreground sm:hidden", children: caption }),
+    /* @__PURE__ */ jsx14("span", { className: cn("text-agg-sm leading-agg-5", extra), children: value })
+  ] });
+  return /* @__PURE__ */ jsxs14(
+    "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__ */ jsx14(
+          "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__ */ jsxs14("div", { role: "cell", className: "agg-leaderboard-identity flex min-w-0 items-center gap-3", children: [
+          row.avatarUrl ? /* @__PURE__ */ jsx14(
+            RemoteImage,
+            {
+              src: optimizedImageUrl4(row.avatarUrl, 80),
+              alt: "",
+              className: "size-10 shrink-0 rounded-agg-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx14(DefaultAvatar, { className: "size-10 rounded-agg-full" }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsxs14("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx14(
+                "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__ */ jsx14("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__ */ jsx14("span", { className: "text-agg-xs leading-agg-4 text-agg-muted-foreground", children: hasOrders ? labels.tradesCount(row.orders) : MISSING_VALUE_LABEL })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("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
+import { useLabels as useLabels11 } from "@agg-build/hooks";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+function LeaderboardSkeleton({ rows = 4 }) {
+  const labels = useLabels11().leaderboard;
+  return /* @__PURE__ */ jsx15("div", { role: "status", "aria-label": labels.loadingAria, className: "agg-leaderboard-skeleton", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs15(
+    "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__ */ jsx15("span", { className: "size-7 rounded-agg-full bg-agg-secondary-hover/80" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx15("span", { className: "size-10 rounded-agg-full bg-agg-secondary-hover/80" }),
+          /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx15("span", { className: "h-3 w-2/5 rounded-agg-sm bg-agg-secondary-hover/80" }),
+            /* @__PURE__ */ jsx15("span", { className: "h-3 w-1/5 rounded-agg-sm bg-agg-secondary-hover/80" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx15("span", { className: "hidden h-3 w-10 justify-self-end rounded-agg-sm bg-agg-secondary-hover/80 sm:block" }),
+        /* @__PURE__ */ jsx15("span", { className: "hidden h-3 w-16 justify-self-end rounded-agg-sm bg-agg-secondary-hover/80 sm:block" }),
+        /* @__PURE__ */ jsx15("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
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function SegmentedControl({
+  label,
+  value,
+  onChange,
+  items,
+  className,
+  itemClassName
+}) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      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__ */ jsxs16("div", { className: "flex flex-1 items-stretch sm:flex-none", children: [
+          idx > 0 ? /* @__PURE__ */ jsx16("div", { className: "w-px bg-agg-separator", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsx16(
+            "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
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+function LeaderboardPage(props) {
+  return /* @__PURE__ */ jsx17(AggErrorBoundary, { onError: props.onError, children: /* @__PURE__ */ jsx17(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 = useLabels12();
+  const labels = allLabels.leaderboard;
+  const { user } = useAggAuthState2();
+  const [periodState, setPeriodState] = useState7(LEADERBOARD_DEFAULT_PERIOD);
+  const [metricState, setMetricState] = useState7(LEADERBOARD_DEFAULT_METRIC);
+  const period = periodProp != null ? periodProp : periodState;
+  const metric = metricProp != null ? metricProp : metricState;
+  const handlePeriodChange = useCallback5(
+    (next) => {
+      if (periodProp === void 0) setPeriodState(next);
+      onPeriodChange == null ? void 0 : onPeriodChange(next);
+    },
+    [onPeriodChange, periodProp]
+  );
+  const handleMetricChange = useCallback5(
+    (next) => {
+      if (metricProp === void 0) setMetricState(next);
+      onMetricChange == null ? void 0 : onMetricChange(next);
+    },
+    [metricProp, onMetricChange]
+  );
+  const shouldUseHookData = !rowsProp;
+  const query = 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 = useMemo5(
+    () => 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] = useState7(null);
+  useEffect6(() => {
+    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 = LEADERBOARD_PERIODS.map((value) => ({ value, label: labels.periods[value] }));
+  const metricItems = LEADERBOARD_METRICS.map((value) => ({ value, label: labels.metrics[value] }));
+  return /* @__PURE__ */ jsxs17(
+    "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__ */ jsxs17("header", { className: cn("agg-leaderboard-title flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+          /* @__PURE__ */ jsx17("h1", { className: "agg-type-heading m-0", children: labels.title }),
+          /* @__PURE__ */ jsx17("p", { className: "m-0 text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.subtitle(appName, labels.periods[period]) })
+        ] }),
+        /* @__PURE__ */ jsxs17(
+          "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__ */ jsxs17("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3", children: [
+                /* @__PURE__ */ jsx17("span", { className: "agg-type-caption uppercase tracking-wide text-agg-muted-foreground", children: labels.periodLabel }),
+                /* @__PURE__ */ jsx17(
+                  SegmentedControl,
+                  {
+                    label: labels.periodLabel,
+                    value: period,
+                    onChange: handlePeriodChange,
+                    items: periodItems
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3", children: [
+                /* @__PURE__ */ jsx17("span", { className: "agg-type-caption uppercase tracking-wide text-agg-muted-foreground", children: labels.rankByLabel }),
+                /* @__PURE__ */ jsx17(
+                  SegmentedControl,
+                  {
+                    label: labels.rankByLabel,
+                    value: metric,
+                    onChange: handleMetricChange,
+                    items: metricItems
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs17(
+          "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__ */ jsxs17("div", { role: "table", "aria-label": labels.title, className: "agg-leaderboard-table", children: [
+                /* @__PURE__ */ jsx17(LeaderboardHeaderRow, { metric, onMetricChange: handleMetricChange }),
+                !isLoading && hasRows ? /* @__PURE__ */ jsx17("div", { className: "divide-y divide-agg-separator", children: rows.map((row) => /* @__PURE__ */ jsx17(
+                  LeaderboardRowView,
+                  {
+                    row,
+                    isCurrentUser: currentUserId !== void 0 && row.userId === currentUserId,
+                    className: classNames == null ? void 0 : classNames.row
+                  },
+                  row.userId
+                )) }) : null
+              ] }),
+              isLoading ? /* @__PURE__ */ jsx17(LeaderboardSkeleton, {}) : error && !hasRows ? /* @__PURE__ */ jsx17("div", { className: "py-10", children: /* @__PURE__ */ jsx17(
+                StateMessage,
+                {
+                  title: labels.errorTitle,
+                  description: labels.errorDescription,
+                  icon: /* @__PURE__ */ jsx17(Icon, { name: "warning" }),
+                  onAction: retry
+                }
+              ) }) : rows.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "py-10", children: /* @__PURE__ */ jsx17(
+                StateMessage,
+                {
+                  title: labels.emptyTitle,
+                  description: labels.emptyDescription,
+                  icon: /* @__PURE__ */ jsx17(Icon, { name: "search-empty" })
+                }
+              ) }) : null,
+              (hasNextPage || showInlineError) && !isLoading ? /* @__PURE__ */ jsx17(
+                "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__ */ jsxs17(Fragment5, { children: [
+                    /* @__PURE__ */ jsx17("span", { role: "alert", className: "text-agg-sm leading-agg-5 text-agg-error", children: labels.errorTitle }),
+                    /* @__PURE__ */ jsx17(Button, { variant: "tertiary", size: "small", onClick: retry != null ? retry : onLoadMore, children: allLabels.common.retry })
+                  ] }) : /* @__PURE__ */ jsxs17(Fragment5, { children: [
+                    /* @__PURE__ */ jsx17(
+                      "div",
+                      {
+                        ref: setSentinel,
+                        className: "agg-leaderboard-sentinel absolute inset-x-0 top-0 h-px",
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx17(
+                      Button,
+                      {
+                        variant: "tertiary",
+                        size: "small",
+                        onClick: onLoadMore,
+                        disabled: isLoadingMore,
+                        isLoading: isLoadingMore,
+                        "aria-label": labels.showMore,
+                        children: labels.showMore
+                      }
+                    )
+                  ] })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx17("p", { className: "m-0 text-agg-xs leading-agg-4 text-agg-muted-foreground", children: labels.pnlFootnote })
+      ]
+    }
+  );
+}
+LeaderboardPage.displayName = "LeaderboardPage";
+
 export {
   DefaultAvatar,
   ConditionalWrapper,
@@ -5327,5 +5776,9 @@ export {
   USER_PROFILE_TAB_ACTIVITY,
   buildAggTxExplorerHref,
   formatShareAmount,
-  UserProfilePage
+  UserProfilePage,
+  LEADERBOARD_DEFAULT_PERIOD,
+  LEADERBOARD_DEFAULT_METRIC,
+  LEADERBOARD_METRICS,
+  LeaderboardPage
 };