@agg-market/ui 13.0.0 → 14.0.0

package/dist/pages.js

@@ -8192,6 +8192,9 @@ var getTradingVenueLabel = (venue, label) => {
   if (label) return label;
   return defaultLabels.venues[venue];
 };
+var getTradingSharesLabel = (value) => {
+  return defaultLabels.trading.shares(value);
+};
 
 // src/trading/place-order/index.tsx
 var import_jsx_runtime93 = require("react/jsx-runtime");
@@ -9576,11 +9579,11 @@ var AvailableBalanceCard = ({
             {
               "aria-label": "Balances by chain",
               size: "small",
-              side: "top",
+              side: "bottom",
               classNames: { content: "border-0" },
               content: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex min-w-[280px] max-w-[360px] flex-col gap-2 p-3 sm:p-4", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "font-agg-sans text-agg-sm leading-5 font-agg-bold text-agg-foreground", children: "Balance by network" }),
-                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { role: "list", className: "divide-y divide-agg-separator/60", children: chains.map((row) => {
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { role: "list", children: chains.map((row) => {
                   const icon = chainIconName(row.label);
                   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
                     "div",
@@ -9674,28 +9677,29 @@ var ActivityRow = ({ activity, onClick }) => {
       ),
       onClick: handleClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "hidden w-[60px] shrink-0 font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground sm:block", children: activity.type }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex min-w-0 w-full flex-1 items-center gap-3 sm:gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "hidden w-[60px] shrink-0 items-center gap-1 sm:flex", children: [
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(VenueLogo, { venue: activity.venue, size: "small", className: "shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3 sm:gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-              RemoteImage,
-              {
-                src: activity.thumbnailSrc,
-                alt: "",
-                className: "h-[52px] w-[52px] shrink-0 rounded-agg-sm object-cover sm:h-[60px] sm:w-[60px]"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "min-w-full overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground", children: activity.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "inline-flex items-center justify-center gap-1.5 rounded-full bg-agg-secondary-hover px-3 py-1.5 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground whitespace-nowrap", children: activity.outcomeLabel }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-black whitespace-nowrap", children: activity.sharesLabel })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground", children: activity.type })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "flex min-w-0 w-full flex-1 items-center gap-3 sm:gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3 sm:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+            RemoteImage,
+            {
+              src: activity.thumbnailSrc,
+              alt: "",
+              className: "h-[52px] w-[52px] shrink-0 rounded-agg-sm object-cover sm:h-[60px] sm:w-[60px]"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "min-w-full overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground", children: activity.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "inline-flex items-center justify-center gap-1.5 rounded-full bg-agg-secondary-hover px-3 py-1.5 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground whitespace-nowrap", children: activity.outcomeLabel }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-black whitespace-nowrap", children: activity.sharesLabel })
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-row items-center justify-between gap-1 text-agg-base leading-agg-6 whitespace-nowrap sm:w-[120px] sm:shrink-0 sm:flex-col sm:items-end sm:justify-center", children: [
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "hidden w-[175px] shrink-0 sm:block", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-row items-center justify-between gap-1 text-agg-base leading-agg-6 whitespace-nowrap sm:w-[184px] sm:shrink-0 sm:flex-col sm:items-end sm:justify-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "font-agg-sans font-agg-bold text-black", children: activity.amountLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "font-agg-sans font-agg-normal text-agg-muted-foreground", children: activity.timeLabel })
         ] })
@@ -9744,22 +9748,29 @@ var PositionRow = ({ position, onClick }) => {
       onClick: handleClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex min-w-0 w-full flex-1 items-center gap-3 sm:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VenueLogo, { venue: position.venue, size: "small", className: "shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3 sm:gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-              RemoteImage,
-              {
-                src: position.thumbnailSrc,
-                alt: "",
-                className: "h-[52px] w-[52px] shrink-0 rounded-agg-sm object-cover sm:h-[60px] sm:w-[60px]"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "min-w-full overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground", children: position.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "inline-flex items-center justify-center gap-1.5 rounded-full bg-agg-secondary-hover px-3 py-1.5 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground whitespace-nowrap", children: position.outcomeLabel }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-black whitespace-nowrap", children: position.sharesLabel })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+            RemoteImage,
+            {
+              src: position.thumbnailSrc,
+              alt: "",
+              className: "h-[52px] w-[52px] shrink-0 rounded-agg-sm object-cover sm:h-[60px] sm:w-[60px]"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "min-w-full overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground", children: position.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "inline-flex items-center justify-center rounded-full bg-agg-secondary-hover px-4 py-1.5 sm:px-[16px] sm:py-[6px]", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground whitespace-nowrap", children: position.outcomeLabel }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "flex min-w-0 flex-1 flex-wrap content-center items-center gap-x-3 gap-y-2", children: position.venueShareBreakdown.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+                "div",
+                {
+                  className: "flex items-center gap-1",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VenueLogo, { venue: row.venue, size: "small", className: "size-4 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-black whitespace-nowrap", children: row.sharesLabel })
+                  ]
+                },
+                `${row.venue}-${row.sharesLabel}-${String(index)}`
+              )) })
             ] })
           ] })
         ] }),
@@ -9779,7 +9790,14 @@ var PositionRow = ({ position, onClick }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { name: "chevron-right", size: "small", className: "shrink-0 text-agg-muted-foreground" })
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+            Icon,
+            {
+              name: "chevron-right",
+              size: "small",
+              className: "size-5 shrink-0 text-agg-muted-foreground"
+            }
+          )
         ] })
       ]
     }
@@ -9793,6 +9811,7 @@ var tabItems = [
   { value: USER_PROFILE_TAB_POSITIONS, label: "Positions" },
   { value: USER_PROFILE_TAB_ACTIVITY, label: "Activity" }
 ];
+var TabRowsSkeleton = ({ ariaLabel }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { role: "status", "aria-label": ariaLabel, className: "flex flex-col gap-3 sm:gap-4", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "h-14 rounded-agg-sm bg-agg-secondary-hover/80 sm:h-16" }, index)) });
 var PositionsActivity = ({
   activePositions = [],
   closedPositions = [],
@@ -9814,21 +9833,91 @@ var PositionsActivity = ({
   const [activeTab, setActiveTab] = (0, import_react17.useState)(USER_PROFILE_TAB_POSITIONS);
   const [positionFilter, setPositionFilter] = (0, import_react17.useState)("active");
   const [searchValue, setSearchValue] = (0, import_react17.useState)("");
+  const [isSearchFocused, setIsSearchFocused] = (0, import_react17.useState)(false);
+  const positionsLoadMoreRef = (0, import_react17.useRef)(null);
+  const activitiesLoadMoreRef = (0, import_react17.useRef)(null);
   const isPositionsTab = activeTab === USER_PROFILE_TAB_POSITIONS;
   const filteredPositions = (0, import_react17.useMemo)(() => {
-    const positions = positionFilter === "active" ? activePositions : closedPositions;
-    if (!searchValue.trim()) return positions;
-    const query = searchValue.toLowerCase();
-    return positions.filter((p) => p.title.toLowerCase().includes(query));
+    const base = positionFilter === "active" ? activePositions : closedPositions;
+    if (!searchValue.trim()) return base;
+    const q = searchValue.toLowerCase();
+    return base.filter((p) => p.title.toLowerCase().includes(q));
   }, [activePositions, closedPositions, positionFilter, searchValue]);
   const filteredActivities = (0, import_react17.useMemo)(() => {
     if (!searchValue.trim()) return activities;
-    const query = searchValue.toLowerCase();
-    return activities.filter((a) => a.title.toLowerCase().includes(query));
+    const q = searchValue.toLowerCase();
+    return activities.filter((a) => a.title.toLowerCase().includes(q));
   }, [activities, searchValue]);
+  const searchResults = (0, import_react17.useMemo)(() => {
+    if (!searchValue.trim()) return [];
+    if (isPositionsTab) {
+      return filteredPositions.slice(0, 5).map((p) => ({
+        id: p.id,
+        title: p.title,
+        thumbnailSrc: p.thumbnailSrc,
+        metaPrimary: p.outcomeLabel,
+        metaSecondary: p.valueLabel,
+        kind: "position",
+        raw: p
+      }));
+    }
+    return filteredActivities.slice(0, 5).map((a) => ({
+      id: a.id,
+      title: a.title,
+      thumbnailSrc: a.thumbnailSrc,
+      metaPrimary: a.outcomeLabel,
+      metaSecondary: a.amountLabel,
+      kind: "activity",
+      raw: a
+    }));
+  }, [filteredActivities, filteredPositions, isPositionsTab, searchValue]);
   const handleSearchChange = (event) => {
     setSearchValue(event.target.value);
   };
+  (0, import_react17.useEffect)(() => {
+    if (!isPositionsTab || !hasMorePositions) return;
+    const target = positionsLoadMoreRef.current;
+    if (!target || !onLoadMorePositions) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting)) return;
+        if (isLoadingPositions || isLoadingMorePositions || !hasMorePositions) return;
+        onLoadMorePositions();
+      },
+      { rootMargin: "240px 0px" }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [
+    hasMorePositions,
+    isLoadingMorePositions,
+    isLoadingPositions,
+    isPositionsTab,
+    onLoadMorePositions
+  ]);
+  (0, import_react17.useEffect)(() => {
+    if (isPositionsTab || !hasMoreActivities) return;
+    const target = activitiesLoadMoreRef.current;
+    if (!target || !onLoadMoreActivities) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting)) return;
+        if (isLoadingActivities || isLoadingMoreActivities || !hasMoreActivities) return;
+        onLoadMoreActivities();
+      },
+      { rootMargin: "240px 0px" }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [
+    hasMoreActivities,
+    isLoadingActivities,
+    isLoadingMoreActivities,
+    isPositionsTab,
+    onLoadMoreActivities
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     "div",
     {
@@ -9870,23 +9959,95 @@ var PositionsActivity = ({
                 )
               ] }, filter.value);
             }) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("label", { className: "flex w-full min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex h-11 w-full items-center gap-3 rounded-agg-sm border border-agg-separator bg-agg-secondary px-3 py-2.5 focus-within:border-2 focus-within:border-agg-primary sm:h-10", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { name: "search", size: "small", className: "shrink-0 text-agg-muted-foreground" }),
-              /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-                "input",
-                {
-                  value: searchValue,
-                  onChange: handleSearchChange,
-                  placeholder: "Search...",
-                  className: cn(
-                    "h-6 w-full min-w-0 border-0 bg-transparent p-0",
-                    "font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
-                    "placeholder:text-agg-muted-foreground",
-                    "outline-none focus:outline-none"
-                  )
-                }
-              )
-            ] }) })
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+              "div",
+              {
+                className: "relative flex w-full min-w-0 flex-1",
+                onFocusCapture: () => setIsSearchFocused(true),
+                onBlurCapture: (event) => {
+                  const next = event.relatedTarget;
+                  if (next && event.currentTarget.contains(next)) return;
+                  setIsSearchFocused(false);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("label", { className: "flex w-full min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex h-11 w-full items-center gap-3 rounded-agg-sm border border-agg-separator bg-agg-secondary px-3 py-2.5 focus-within:border-2 focus-within:border-agg-primary sm:h-10", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { name: "search", size: "small", className: "shrink-0 text-agg-muted-foreground" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                      "input",
+                      {
+                        value: searchValue,
+                        onChange: handleSearchChange,
+                        placeholder: "Search...",
+                        className: cn(
+                          "h-6 w-full min-w-0 border-0 bg-transparent p-0",
+                          "font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
+                          "placeholder:text-agg-muted-foreground",
+                          "outline-none focus:outline-none"
+                        )
+                      }
+                    )
+                  ] }) }),
+                  isSearchFocused && searchValue.trim() ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "absolute left-0 right-0 top-full z-50 mt-1 w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary pt-2 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]", children: searchResults.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                    "ul",
+                    {
+                      className: "m-0 flex list-none flex-col p-0",
+                      role: "listbox",
+                      "aria-label": "Search results",
+                      children: searchResults.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                        "li",
+                        {
+                          role: "presentation",
+                          className: cn(index > 0 && "border-t border-agg-separator"),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              className: "group flex w-full items-center gap-6 px-5 py-4 text-left hover:bg-agg-secondary-hover focus-visible:outline-none focus-visible:bg-agg-secondary-hover",
+                              onClick: () => {
+                                if (item.kind === "position") {
+                                  onPositionClick == null ? void 0 : onPositionClick(item.raw);
+                                } else {
+                                  onActivityClick == null ? void 0 : onActivityClick(item.raw);
+                                }
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                                    "img",
+                                    {
+                                      src: item.thumbnailSrc,
+                                      alt: "",
+                                      className: "size-12 shrink-0 rounded-[8px] object-cover"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground", children: item.title }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-agg-muted-foreground", children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "shrink-0 whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: item.metaPrimary }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-agg-muted-foreground", "aria-hidden": true, children: "\xB7" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: item.metaSecondary })
+                                    ] })
+                                  ] })
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                                  Icon,
+                                  {
+                                    name: "chevron-right",
+                                    size: "medium",
+                                    className: "h-5 w-5 shrink-0 text-agg-muted-foreground"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        },
+                        item.id
+                      ))
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "px-5 py-6 font-agg-sans text-agg-sm leading-agg-5 text-agg-muted-foreground", children: "No results" }) }) : null
+                ]
+              }
+            )
           ] }),
           isPositionsTab && filteredPositions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "hidden items-center gap-6 px-0 sm:flex", children: [
             /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "min-w-0 flex-1 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Market" }),
@@ -9897,15 +10058,9 @@ var PositionsActivity = ({
           !isPositionsTab && filteredActivities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "hidden items-center gap-6 px-0 sm:flex", children: [
             /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "w-[60px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Type" }),
             /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "min-w-0 flex-1 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Market" }),
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "w-[120px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground text-right", children: "Amount" })
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "w-[184px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground text-right", children: "Amount" })
           ] }) : null,
-          isPositionsTab ? isLoadingPositions && filteredPositions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-            Skeleton,
-            {
-              view: skeletonViews.userProfilePositionsActivity,
-              ariaLabel: "Loading positions"
-            }
-          ) : positionsError && filteredPositions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          isPositionsTab ? isLoadingPositions && filteredPositions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TabRowsSkeleton, { ariaLabel: "Loading positions" }) : positionsError && filteredPositions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             EmptyState,
             {
               title: "Unable to load positions",
@@ -9917,38 +10072,15 @@ var PositionsActivity = ({
               title: "No positions yet",
               description: "Your open trades will appear here once you place an order."
             }
-          ) : isLoadingActivities && filteredActivities.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-            Skeleton,
-            {
-              view: skeletonViews.userProfilePositionsActivity,
-              ariaLabel: "Loading activity"
-            }
-          ) : activitiesError && filteredActivities.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(EmptyState, { title: "Unable to load activity", description: "Please try again in a moment." }) : filteredActivities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex flex-col gap-3 sm:gap-4", children: filteredActivities.map((activity) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ActivityRow, { activity, onClick: onActivityClick }, activity.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          ) : isLoadingActivities && filteredActivities.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TabRowsSkeleton, { ariaLabel: "Loading activity" }) : activitiesError && filteredActivities.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(EmptyState, { title: "Unable to load activity", description: "Please try again in a moment." }) : filteredActivities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex flex-col gap-3 sm:gap-4", children: filteredActivities.map((activity) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ActivityRow, { activity, onClick: onActivityClick }, activity.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             EmptyState,
             {
               title: "No activity yet",
               description: "Your trading activity will appear here."
             }
           ),
-          isPositionsTab ? hasMorePositions ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex w-full justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-            Button,
-            {
-              variant: "secondary",
-              size: "medium",
-              isLoading: isLoadingMorePositions,
-              onClick: onLoadMorePositions,
-              children: "Load more"
-            }
-          ) }) : null : hasMoreActivities ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex w-full justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-            Button,
-            {
-              variant: "secondary",
-              size: "medium",
-              isLoading: isLoadingMoreActivities,
-              onClick: onLoadMoreActivities,
-              children: "Load more"
-            }
-          ) }) : null
+          isPositionsTab && hasMorePositions ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { ref: positionsLoadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null,
+          !isPositionsTab && hasMoreActivities ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { ref: activitiesLoadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
         ] })
       ]
     }
@@ -9956,54 +10088,9 @@ var PositionsActivity = ({
 };
 PositionsActivity.displayName = "PositionsActivity";
 
-// src/pages/user-profile/components/default-avatar.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
-var DefaultAvatar = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "120",
-      height: "120",
-      viewBox: "0 0 120 120",
-      fill: "none",
-      className: cn("shrink-0", className),
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("g", { clipPath: "url(#clip0_default_avatar)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-            "path",
-            {
-              d: "M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120Z",
-              fill: "white"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-            "path",
-            {
-              d: "M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120Z",
-              fill: "black",
-              fillOpacity: "0.1"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-            "path",
-            {
-              d: "M73.7338 64.1259C80.4187 59.6756 84.8276 52.0804 84.8276 43.4487C84.8276 29.7376 73.7111 18.6211 60 18.6211C46.2890 18.6211 35.1724 29.7376 35.1724 43.4487C35.1724 52.0804 39.5814 59.6756 46.2662 64.1259C46.2662 64.1259 46.2683 64.1280 46.2704 64.1280C46.2683 64.1280 46.2683 64.1259 46.2683 64.1259C30.2669 68.9487 17.8076 81.9356 13.7959 98.2742L13.7980 98.2763C14.4518 99.0645 15.1304 99.8342 15.8235 100.589C15.9911 100.774 16.1669 100.949 16.3387 101.129C16.8724 101.696 17.4124 102.255 17.9669 102.801C18.1966 103.027 18.4304 103.244 18.6642 103.465C19.1773 103.954 19.6966 104.436 20.2262 104.905C20.4890 105.137 20.7559 105.367 21.0207 105.594C21.5400 106.039 22.0656 106.476 22.6014 106.902C22.8828 107.127 23.1662 107.349 23.4497 107.570C23.9918 107.988 24.5421 108.394 25.0987 108.791C25.3862 108.996 25.6697 109.205 25.9614 109.405C26.5490 109.811 27.1469 110.200 27.7490 110.585C28.0200 110.756 28.2849 110.934 28.5580 111.104C29.2531 111.532 29.9607 111.942 30.6745 112.343C30.8628 112.449 31.0469 112.562 31.2373 112.666C32.1600 113.171 33.0973 113.655 34.0490 114.112C34.0718 114.122 34.0966 114.133 34.1193 114.143C35.0276 114.578 35.9504 114.989 36.8835 115.378C37.1731 115.500 37.4690 115.608 37.7607 115.724C38.4352 115.993 39.1097 116.258 39.7966 116.502C40.1607 116.632 40.5290 116.750 40.8952 116.874C41.5200 117.085 42.1490 117.290 42.7821 117.478C43.1835 117.598 43.5869 117.710 43.9924 117.822C44.6049 117.991 45.2214 118.153 45.8442 118.304C46.2642 118.405 46.6862 118.502 47.1104 118.596C47.7331 118.732 48.3580 118.856 48.9869 118.972C49.4131 119.051 49.8373 119.131 50.2676 119.200C50.9173 119.305 51.5711 119.394 52.2269 119.479C52.6407 119.533 53.0524 119.593 53.4683 119.636C54.1924 119.715 54.9228 119.771 55.6531 119.822C56.0069 119.847 56.3566 119.885 56.7104 119.903C57.8007 119.965 58.8952 120 60 120C61.1049 120 62.1993 119.965 63.2897 119.907C63.6435 119.889 63.9952 119.851 64.3469 119.827C65.0793 119.775 65.8097 119.719 66.5318 119.640C66.9476 119.595 67.3593 119.537 67.7731 119.483C68.4290 119.398 69.0828 119.309 69.7324 119.204C70.1607 119.134 70.5869 119.055 71.0131 118.976C71.6421 118.860 72.2690 118.736 72.8897 118.600C73.3138 118.507 73.7359 118.409 74.1559 118.308C74.7766 118.157 75.3931 117.996 76.0076 117.826C76.4111 117.714 76.8166 117.602 77.2180 117.482C77.8531 117.292 78.4800 117.087 79.1049 116.878C79.4711 116.754 79.8414 116.636 80.2035 116.506C80.8883 116.260 81.5649 115.997 82.2393 115.728C82.5311 115.612 82.8269 115.502 83.1166 115.382C84.0456 114.994 84.9642 114.586 85.8683 114.151C85.8952 114.139 85.9242 114.127 85.9511 114.114C86.9028 113.657 87.8400 113.173 88.7628 112.668C88.9531 112.565 89.1373 112.451 89.3256 112.345C90.0393 111.944 90.7469 111.534 91.4421 111.106C91.7152 110.938 91.9821 110.760 92.2511 110.587C92.8531 110.202 93.4511 109.811 94.0387 109.407C94.3283 109.207 94.6138 109.000 94.9014 108.793C95.4580 108.394 96.0083 107.988 96.5504 107.572C96.8359 107.353 97.1173 107.129 97.3987 106.904C97.9324 106.478 98.4600 106.041 98.9793 105.596C99.2462 105.369 99.5131 105.139 99.7738 104.907C100.303 104.438 100.823 103.956 101.336 103.467C101.568 103.246 101.803 103.027 102.033 102.803C102.588 102.257 103.130 101.698 103.661 101.131C103.831 100.949 104.007 100.774 104.177 100.591C104.870 99.8363 105.548 99.0666 106.202 98.2783L106.204 98.2763C102.195 81.9356 89.7352 68.9487 73.7338 64.1259Z",
-              fill: "black",
-              fillOpacity: "0.1"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("clipPath", { id: "clip0_default_avatar", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("rect", { width: "120", height: "120", fill: "white" }) }) })
-      ]
-    }
-  );
-};
-DefaultAvatar.displayName = "DefaultAvatar";
-
 // src/pages/user-profile/components/user-info-card.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var fallbackAvatarSrc = "https://picsum.photos/seed/user-profile-avatar/120/120";
 var UserInfoCard = ({
   user,
   onEditProfile,
@@ -10011,11 +10098,11 @@ var UserInfoCard = ({
   onWithdraw,
   className
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const evmExchanges = ((_a = user.connectedExchanges) != null ? _a : []).filter((ex) => ex.venue !== "kalshi");
   const totalExchangeCount = (_c = (_b = user.connectedExchanges) == null ? void 0 : _b.length) != null ? _c : 0;
   const hasEvmExchanges = evmExchanges.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     "div",
     {
       className: cn(
@@ -10023,26 +10110,26 @@ var UserInfoCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex w-full flex-col items-start gap-4 sm:flex-row sm:gap-5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "shrink-0", children: user.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex w-full flex-col items-start gap-4 sm:flex-row sm:gap-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
             RemoteImage,
             {
-              src: user.avatarUrl,
+              src: (_d = user.avatarUrl) != null ? _d : fallbackAvatarSrc,
               alt: user.username,
               className: "h-20 w-20 rounded-full object-cover sm:h-[120px] sm:w-[120px]"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(DefaultAvatar, { className: "h-20 w-20 sm:h-[120px] sm:w-[120px]" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex min-w-0 w-full flex-1 flex-col gap-3 sm:gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 sm:gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("h2", { className: "truncate text-[22px] leading-7 font-agg-bold text-agg-foreground sm:agg-type-heading", children: user.username }),
-                user.socialLinks && user.socialLinks.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex items-center gap-2", children: user.socialLinks.map((social) => {
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex min-w-0 w-full flex-1 flex-col gap-3 sm:gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 sm:gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("h2", { className: "truncate text-[22px] leading-7 font-agg-bold text-agg-foreground sm:agg-type-heading", children: user.username }),
+                user.socialLinks && user.socialLinks.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "flex items-center gap-2", children: user.socialLinks.map((social) => {
                   const iconName = social.platform === "twitter" ? "twitter" : social.platform === "discord" ? "discord" : "telegram";
-                  const iconNode = /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-full border border-agg-separator bg-agg-secondary sm:size-8", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { name: iconName, size: "small", className: "text-agg-foreground" }) });
+                  const iconNode = /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-full border border-agg-separator bg-agg-secondary sm:size-8", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { name: iconName, size: "small", className: "text-agg-foreground" }) });
                   if (!social.handle) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { children: iconNode }, `${social.platform}-icon`);
+                    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { children: iconNode }, `${social.platform}-icon`);
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                     "a",
                     {
                       href: social.handle,
@@ -10055,22 +10142,22 @@ var UserInfoCard = ({
                   );
                 }) }) : null
               ] }),
-              onEditProfile ? /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+              onEditProfile ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
                 "button",
                 {
                   type: "button",
                   onClick: onEditProfile,
                   className: "hidden shrink-0 cursor-pointer items-center gap-2 bg-transparent text-agg-primary hover:opacity-80 sm:flex",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { name: "pencil", size: "small", className: "text-agg-primary" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "text-agg-base font-agg-bold leading-6", children: "Edit" })
+                    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { name: "pencil", size: "small", className: "text-agg-primary" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "text-agg-base font-agg-bold leading-6", children: "Edit" })
                   ]
                 }
               ) : null
             ] }),
-            totalExchangeCount > 0 || user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex w-full flex-col gap-2.5 sm:gap-3", children: [
-              hasEvmExchanges ? /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex items-center", children: evmExchanges.map((exchange, idx) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+            totalExchangeCount > 0 || user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex w-full flex-col gap-2.5 sm:gap-3", children: [
+              hasEvmExchanges ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "flex items-center", children: evmExchanges.map((exchange, idx) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                   "div",
                   {
                     className: cn(
@@ -10078,7 +10165,7 @@ var UserInfoCard = ({
                       idx > 0 && "-ml-2"
                     ),
                     style: { zIndex: evmExchanges.length - idx },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                       RemoteImage,
                       {
                         src: venueLogoUrlRegistry[exchange.venue],
@@ -10089,18 +10176,18 @@ var UserInfoCard = ({
                   },
                   `${exchange.venue}-${idx}`
                 )) }),
-                user.displayAddress ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-foreground sm:text-agg-base sm:leading-6", children: user.displayAddress }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-muted-foreground", children: [
+                user.displayAddress ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-foreground sm:text-agg-base sm:leading-6", children: user.displayAddress }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-muted-foreground", children: [
                     totalExchangeCount,
                     " exchange",
                     totalExchangeCount !== 1 ? "s" : ""
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { name: "info", size: "small", className: "text-agg-muted-foreground" })
+                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { name: "info", size: "small", className: "text-agg-muted-foreground" })
                 ] })
               ] }) : null,
-              user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex items-center gap-2 sm:gap-3", children: [
-                user.socialHandleVenue ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[4px]", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+              user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+                user.socialHandleVenue ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[4px]", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                   RemoteImage,
                   {
                     src: venueLogoUrlRegistry[user.socialHandleVenue],
@@ -10108,14 +10195,14 @@ var UserInfoCard = ({
                     className: "h-5 w-5"
                   }
                 ) }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-foreground sm:text-agg-base sm:leading-6", children: user.socialHandle })
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-foreground sm:text-agg-base sm:leading-6", children: user.socialHandle })
               ] }) : null
             ] }) : null
           ] })
         ] }),
-        (onDeposit || onWithdraw) && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex w-full items-center gap-5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-            onDeposit ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        (onDeposit || onWithdraw) && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex w-full items-center gap-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            onDeposit ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "button",
               {
                 type: "button",
@@ -10124,7 +10211,7 @@ var UserInfoCard = ({
                 children: "Deposit"
               }
             ) : null,
-            onWithdraw ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+            onWithdraw ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "button",
               {
                 type: "button",
@@ -10134,15 +10221,15 @@ var UserInfoCard = ({
               }
             ) : null
           ] }),
-          onEditProfile ? /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+          onEditProfile ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
             "button",
             {
               type: "button",
               onClick: onEditProfile,
               className: "flex shrink-0 cursor-pointer items-center gap-1.5 bg-transparent text-agg-primary hover:opacity-80 sm:hidden",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { name: "pencil", size: "small", className: "h-3.5 w-3.5 text-agg-primary" }),
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "text-agg-sm font-agg-bold leading-5", children: "Edit" })
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { name: "pencil", size: "small", className: "h-3.5 w-3.5 text-agg-primary" }),
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "text-agg-sm font-agg-bold leading-5", children: "Edit" })
               ]
             }
           ) : null
@@ -10154,7 +10241,7 @@ var UserInfoCard = ({
 UserInfoCard.displayName = "UserInfoCard";
 
 // src/pages/user-profile/index.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var currencyFormatter = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
@@ -10201,8 +10288,35 @@ var toAmountLabel = (amountRaw, executionPrice, filledAmountRaw) => {
   if (Number.isFinite(parsedAmount)) return formatUsd(parsedAmount);
   return "$0.00";
 };
+var POSITION_ROW_VENUE_ORDER = ["polymarket", "kalshi", "opinion", "limitless"];
+function venueBreakdownSortKey(venue) {
+  const idx = POSITION_ROW_VENUE_ORDER.indexOf(venue);
+  return idx === -1 ? POSITION_ROW_VENUE_ORDER.length : idx;
+}
+function toVenueLogoName(venue) {
+  return venue;
+}
+function buildVenueShareBreakdown(outcome) {
+  const breakdown = outcome.venueBreakdown;
+  if (breakdown.length === 0) {
+    return [
+      {
+        venue: "polymarket",
+        sharesLabel: getTradingSharesLabel(outcome.totalSize)
+      }
+    ];
+  }
+  const sorted = [...breakdown].sort(
+    (a, b) => venueBreakdownSortKey(a.venue) - venueBreakdownSortKey(b.venue)
+  );
+  return sorted.map((row) => ({
+    venue: toVenueLogoName(row.venue),
+    sharesLabel: getTradingSharesLabel(row.size)
+  }));
+}
 var UserProfilePage = ({
   user,
+  balanceChainsOverride,
   venueBalances: _venueBalances,
   balance,
   activePositions,
@@ -10305,20 +10419,17 @@ var UserProfilePage = ({
     if (activePositions) return activePositions;
     return positionsQuery.positions.flatMap(
       (group) => group.venueMarket.venueMarketOutcomes.map((outcome) => {
-        var _a, _b, _c;
-        const outcomeVenue = (_a = outcome.venueBreakdown[0]) == null ? void 0 : _a.venue;
-        const venue = connectedVenues.includes(outcomeVenue != null ? outcomeVenue : "polymarket") ? outcomeVenue != null ? outcomeVenue : "polymarket" : "polymarket";
+        var _a, _b;
         const currentPriceCents = Math.round(outcome.currentPrice * 100);
         const averagePriceCents = Math.round(outcome.avgEntryPrice * 100);
         const pnlPrefix = outcome.unrealizedPnl >= 0 ? "+" : "";
         const pnlPercent = (outcome.unrealizedPnlPercent * 100).toFixed(2);
         return {
-          id: `${group.targetMarketId}-${outcome.label}-${(_b = outcome.title) != null ? _b : ""}`,
-          thumbnailSrc: (_c = group.venueMarket.image) != null ? _c : fallbackThumbnailSrc,
+          id: `${group.targetMarketId}-${outcome.label}-${(_a = outcome.title) != null ? _a : ""}`,
+          thumbnailSrc: (_b = group.venueMarket.image) != null ? _b : fallbackThumbnailSrc,
           title: group.venueMarket.question,
-          venue,
-          outcomeLabel: `${outcome.label} ${currentPriceCents}\xA2`,
-          sharesLabel: `${outcome.totalSize.toFixed(2)} shares`,
+          outcomeLabel: outcome.label,
+          venueShareBreakdown: buildVenueShareBreakdown(outcome),
           averageLabel: `${averagePriceCents}\xA2`,
           currentLabel: `${currentPriceCents}\xA2`,
           valueLabel: formatUsd(outcome.totalValue),
@@ -10327,66 +10438,56 @@ var UserProfilePage = ({
         };
       })
     );
-  }, [activePositions, connectedVenues, positionsQuery.positions]);
+  }, [activePositions, positionsQuery.positions]);
   const resolvedClosedPositions = (0, import_react18.useMemo)(() => {
     return closedPositions != null ? closedPositions : [];
   }, [closedPositions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "box-border w-full overflow-x-hidden p-5 sm:p-10", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-    "section",
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("section", { className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+    "div",
     {
       className: cn(
-        // Outer container spacing per updated Figma
-        "flex w-full flex-col gap-6 sm:gap-8 overflow-clip rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 sm:p-8",
-        classNames == null ? void 0 : classNames.root
+        "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6",
+        classNames == null ? void 0 : classNames.topRow
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-          "div",
-          {
-            className: cn(
-              "grid grid-cols-1 gap-6 sm:grid-cols-[1fr_minmax(300px,420px)] sm:items-stretch sm:gap-8",
-              classNames == null ? void 0 : classNames.topRow
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "div",
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-[1fr_minmax(300px,420px)] sm:items-stretch sm:gap-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 h-full",
+                classNames == null ? void 0 : classNames.leftColumn
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+                UserInfoCard,
                 {
-                  className: cn(
-                    "flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 h-full",
-                    classNames == null ? void 0 : classNames.leftColumn
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                    UserInfoCard,
-                    {
-                      user: resolvedUser,
-                      onEditProfile,
-                      onDeposit,
-                      onWithdraw,
-                      className: cn("h-full", classNames == null ? void 0 : classNames.userInfoCard)
-                    }
-                  )
+                  user: resolvedUser,
+                  onEditProfile,
+                  onDeposit,
+                  onWithdraw,
+                  className: cn("h-full", classNames == null ? void 0 : classNames.userInfoCard)
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: cn("grid grid-cols-1 grid-rows-2 gap-4 h-full", classNames == null ? void 0 : classNames.rightColumn), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(PositionsValueCard, { valueLabel: positionsValueLabel, className: "h-full" }),
-                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                  AvailableBalanceCard,
-                  {
-                    valueLabel: availableBalanceLabel,
-                    chains: balanceState.balanceBreakdown.map((b) => ({
-                      key: b.key,
-                      label: b.label,
-                      balance: b.balance,
-                      accountCount: b.accountCount
-                    })),
-                    className: "h-full"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: cn("grid grid-cols-1 grid-rows-2 gap-4 h-full", classNames == null ? void 0 : classNames.rightColumn), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(PositionsValueCard, { valueLabel: positionsValueLabel, className: "h-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+              AvailableBalanceCard,
+              {
+                valueLabel: availableBalanceLabel,
+                chains: (balanceChainsOverride != null ? balanceChainsOverride : balanceState.balanceBreakdown).map((b) => ({
+                  key: b.key,
+                  label: b.label,
+                  balance: b.balance,
+                  accountCount: b.accountCount
+                })),
+                className: "h-full"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
           PositionsActivity,
           {
             activePositions: resolvedActivePositions,