@agg-build/ui 4.4.0 → 4.7.2

package/README.md

@@ -70,6 +70,10 @@ export default function App() {
 }
 ```
 
+Set `config.features.enableEventDiscoveryUrlPersistence` to `true` to persist the primary
+`HomePage` section's `category`, repeated `subcategory`, `venue`, and `sort` filters in browser
+history. It is disabled by default and preserves unrelated query parameters such as `search`.
+
 ## Styling
 
 Import the default theme once at your app entrypoint:

package/dist/{chunk-WW5QKNIM.mjs → chunk-3UBMK2YH.mjs}

@@ -1,6 +1,8 @@
 "use client";
 import {
   DEFAULT_EVENTS_LIMIT,
+  DEFAULT_EVENT_LIST_SORT,
+  EVENT_LIST_SORT_VALUES,
   EventList,
   EventListItem,
   EventListItemDetails,
@@ -10,7 +12,7 @@ import {
   isErrorWithStatus,
   useEventListTabs,
   useEventListTabsHeaderOverflow
-} from "./chunk-V5CRUO6S.mjs";
+} from "./chunk-C4GFVJ62.mjs";
 import {
   DEPOSIT_MODAL_OPEN_EVENT,
   PlaceOrder,
@@ -19,12 +21,12 @@ import {
   formatChainIdLabel,
   useClaimWinnings,
   useResolvedMarketClaim
-} from "./chunk-64BBTXFE.mjs";
+} from "./chunk-KDBKKJ7W.mjs";
 import {
   getDisplayOutcomePrice,
   resolveHeaderOutcomeItems,
   resolveMarketFromVenueMarkets
-} from "./chunk-6STRIKUA.mjs";
+} from "./chunk-WYCSTAN7.mjs";
 import {
   AggErrorBoundary,
   Button,
@@ -60,7 +62,7 @@ import {
   skeletonViews,
   sortCategoriesForNavigation,
   useOptionalToast
-} from "./chunk-N7UPPT5J.mjs";
+} from "./chunk-RDBMHBR2.mjs";
 
 // src/pages/home/index.tsx
 import {
@@ -2732,6 +2734,85 @@ var resolveInitialTabValue = (tabs, defaultActiveTab) => {
   return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : ALL_CATEGORIES_TAB_VALUE;
 };
 
+// src/pages/home/event-discovery-url-state.ts
+import { z } from "zod";
+var nonEmptyParamSchema = z.string().trim().min(1);
+var sortParamSchema = z.enum(EVENT_LIST_SORT_VALUES);
+var readScalarParam = (searchParams, name, schema) => {
+  const values = searchParams.getAll(name);
+  if (values.length === 0) return { invalid: false };
+  if (values.length !== 1) return { invalid: true };
+  const parsedValue = schema.safeParse(values[0]);
+  if (!parsedValue.success) return { invalid: true };
+  return { value: parsedValue.data, invalid: false };
+};
+var readEventDiscoveryUrlState = (searchParams) => {
+  const category = readScalarParam(searchParams, "category", nonEmptyParamSchema);
+  const venue = readScalarParam(searchParams, "venue", nonEmptyParamSchema);
+  const sort = readScalarParam(searchParams, "sort", sortParamSchema);
+  const subcategoryPath = [];
+  let hasInvalidSubcategory = false;
+  for (const value of searchParams.getAll("subcategory")) {
+    const parsedValue = nonEmptyParamSchema.safeParse(value);
+    if (!parsedValue.success) {
+      hasInvalidSubcategory = true;
+      break;
+    }
+    subcategoryPath.push(parsedValue.data);
+  }
+  return {
+    category: category.value,
+    subcategoryPath,
+    venue: venue.value,
+    sort: sort.value,
+    categoryIsInvalid: category.invalid,
+    shouldCanonicalize: category.invalid || venue.invalid || sort.invalid || hasInvalidSubcategory
+  };
+};
+var resolveEventDiscoveryUrlState = ({
+  parsedState,
+  categoryValues,
+  venueValues,
+  defaultCategory,
+  defaultVenue
+}) => {
+  var _a, _b, _c;
+  const categoryIsValid = parsedState.category == null || categoryValues.includes(parsedState.category);
+  const venueIsValid = parsedState.venue == null || venueValues.includes(parsedState.venue);
+  const category = categoryIsValid ? (_a = parsedState.category) != null ? _a : defaultCategory : defaultCategory;
+  const venue = venueIsValid ? (_b = parsedState.venue) != null ? _b : defaultVenue : defaultVenue;
+  const sort = (_c = parsedState.sort) != null ? _c : DEFAULT_EVENT_LIST_SORT;
+  return {
+    state: {
+      category,
+      subcategoryPath: categoryIsValid && !parsedState.categoryIsInvalid ? parsedState.subcategoryPath : [],
+      venue,
+      sort
+    },
+    shouldCanonicalize: parsedState.shouldCanonicalize || !categoryIsValid || !venueIsValid || parsedState.category === defaultCategory || parsedState.venue === defaultVenue || parsedState.sort === DEFAULT_EVENT_LIST_SORT
+  };
+};
+var buildEventDiscoveryUrl = ({
+  currentUrl,
+  state,
+  defaultCategory,
+  defaultVenue
+}) => {
+  const nextUrl = new URL(currentUrl.toString());
+  nextUrl.searchParams.delete("category");
+  nextUrl.searchParams.delete("subcategory");
+  nextUrl.searchParams.delete("venue");
+  nextUrl.searchParams.delete("sort");
+  if (state.category !== defaultCategory) nextUrl.searchParams.set("category", state.category);
+  for (const subcategory of state.subcategoryPath) {
+    nextUrl.searchParams.append("subcategory", subcategory);
+  }
+  if (state.venue !== defaultVenue) nextUrl.searchParams.set("venue", state.venue);
+  if (state.sort !== DEFAULT_EVENT_LIST_SORT) nextUrl.searchParams.set("sort", state.sort);
+  const search = nextUrl.searchParams.toString();
+  return `${nextUrl.pathname}${search ? `?${search}` : ""}${nextUrl.hash}`;
+};
+
 // src/pages/home/use-scroll-restoration.ts
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState7 } from "react";
 function useScrollRestoration({
@@ -3011,7 +3092,7 @@ var HomePage = ({
   onError,
   stickyOrderPanel
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const labels = useLabels5();
   const {
     search: {
@@ -3021,8 +3102,11 @@ var HomePage = ({
       onChange: onSearchChange,
       onSelect: onSelectEventInternal
     },
-    trading: { executionMode }
+    trading: { executionMode },
+    features: { enableEventDiscoveryUrlPersistence }
   } = useSdkUiConfig4();
+  const { isLoading: isAppConfigLoading } = useAppConfig();
+  const primaryEventListTabs = useEventListTabs();
   const { capture, consume } = useEventListState();
   const [snapshot] = useState9(() => consume());
   const eventListStateRef = useRef7(null);
@@ -3093,7 +3177,7 @@ var HomePage = ({
   }, [isShowingAllResults, normalizedSearchValue, selectedEvent]);
   const resolvedSelectedEvent = selectedEvent != null ? selectedEvent : stickySelectedEvent;
   const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
-  const { categories } = useCategories({
+  const { categories, isLoading: isCategoriesLoading } = useCategories({
     limit: categoriesLimit,
     enabled: !hasCustomTabs
   });
@@ -3104,22 +3188,180 @@ var HomePage = ({
     if (hasCustomTabs && tabs) return tabs;
     return categoryTabs;
   }, [categoryTabs, hasCustomTabs, tabs]);
+  const availableCategoryValues = useMemo5(
+    () => resolvedTabs.filter((tab) => !tab.disabled).map((tab) => tab.value),
+    [resolvedTabs]
+  );
+  const resolvedDefaultCategory = resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+  const defaultCategory = availableCategoryValues.includes(resolvedDefaultCategory) ? resolvedDefaultCategory : (_a = availableCategoryValues[0]) != null ? _a : resolvedDefaultCategory;
+  const availableVenueTabs = useMemo5(
+    () => primaryEventListTabs.filter((tab) => !tab.disabled && !tab.isComingSoon),
+    [primaryEventListTabs]
+  );
+  const availableVenueValues = useMemo5(
+    () => availableVenueTabs.map((tab) => tab.value),
+    [availableVenueTabs]
+  );
+  const defaultVenue = (_c = (_b = availableVenueTabs[0]) == null ? void 0 : _b.value) != null ? _c : "matched";
   const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
-  const [activeTabValue, setActiveTabValue] = useState9(() => {
-    if (snapshot == null ? void 0 : snapshot.categoryTab) {
-      return snapshot.categoryTab;
+  const [discoveryFilterState, setDiscoveryFilterState] = useState9(
+    () => {
+      var _a2, _b2;
+      return {
+        category: (_a2 = snapshot == null ? void 0 : snapshot.categoryTab) != null ? _a2 : defaultCategory,
+        venue: (_b2 = snapshot == null ? void 0 : snapshot.venueTab) != null ? _b2 : defaultVenue,
+        sort: DEFAULT_EVENT_LIST_SORT,
+        subcategoryPath: []
+      };
     }
-    return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
-  });
+  );
+  const discoveryFilterStateRef = useRef7(discoveryFilterState);
+  discoveryFilterStateRef.current = discoveryFilterState;
+  const [isUrlStateReady, setIsUrlStateReady] = useState9(!enableEventDiscoveryUrlPersistence);
+  const hasInitializedUrlStateRef = useRef7(false);
+  const activeTabValue = discoveryFilterState.category;
+  const resolveCurrentUrlState = useCallback5(() => {
+    if (typeof window === "undefined") return null;
+    const parsedState = readEventDiscoveryUrlState(new URL(window.location.href).searchParams);
+    const resolvedState = resolveEventDiscoveryUrlState({
+      parsedState,
+      categoryValues: availableCategoryValues,
+      venueValues: availableVenueValues,
+      defaultCategory,
+      defaultVenue
+    });
+    return {
+      state: {
+        category: resolvedState.state.category,
+        venue: resolvedState.state.venue,
+        sort: resolvedState.state.sort,
+        subcategoryPath: resolvedState.state.subcategoryPath.map((id) => ({
+          id,
+          label: id,
+          eventCount: 0
+        }))
+      },
+      shouldCanonicalize: resolvedState.shouldCanonicalize
+    };
+  }, [availableCategoryValues, availableVenueValues, defaultCategory, defaultVenue]);
+  const writeFilterStateToHistory = useCallback5(
+    (state, historyMode) => {
+      if (!enableEventDiscoveryUrlPersistence || typeof window === "undefined") return;
+      const currentUrl = new URL(window.location.href);
+      const nextUrl = buildEventDiscoveryUrl({
+        currentUrl,
+        state: {
+          category: state.category,
+          venue: state.venue,
+          sort: state.sort,
+          subcategoryPath: state.subcategoryPath.map((entry) => entry.id)
+        },
+        defaultCategory,
+        defaultVenue
+      });
+      const currentRelativeUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+      if (nextUrl === currentRelativeUrl) return;
+      const method = historyMode === "push" ? "pushState" : "replaceState";
+      window.history[method](window.history.state, "", nextUrl);
+    },
+    [defaultCategory, defaultVenue, enableEventDiscoveryUrlPersistence]
+  );
+  const commitDiscoveryFilterState = useCallback5(
+    (state, historyMode) => {
+      discoveryFilterStateRef.current = state;
+      setDiscoveryFilterState(state);
+      if (isUrlStateReady) writeFilterStateToHistory(state, historyMode);
+    },
+    [isUrlStateReady, writeFilterStateToHistory]
+  );
+  useEffect8(() => {
+    if (!enableEventDiscoveryUrlPersistence) {
+      hasInitializedUrlStateRef.current = false;
+      setIsUrlStateReady(true);
+      return;
+    }
+    if (hasInitializedUrlStateRef.current) return;
+    if (!hasCustomTabs && isCategoriesLoading || isAppConfigLoading) return;
+    const resolvedUrlState = resolveCurrentUrlState();
+    if (!resolvedUrlState) return;
+    hasInitializedUrlStateRef.current = true;
+    discoveryFilterStateRef.current = resolvedUrlState.state;
+    setDiscoveryFilterState(resolvedUrlState.state);
+    setIsUrlStateReady(true);
+    const currentUrl = new URL(window.location.href);
+    const canonicalUrl = buildEventDiscoveryUrl({
+      currentUrl,
+      state: {
+        category: resolvedUrlState.state.category,
+        venue: resolvedUrlState.state.venue,
+        sort: resolvedUrlState.state.sort,
+        subcategoryPath: resolvedUrlState.state.subcategoryPath.map((entry) => entry.id)
+      },
+      defaultCategory,
+      defaultVenue
+    });
+    const currentRelativeUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+    if (resolvedUrlState.shouldCanonicalize || canonicalUrl !== currentRelativeUrl) {
+      window.history.replaceState(window.history.state, "", canonicalUrl);
+    }
+  }, [
+    defaultCategory,
+    defaultVenue,
+    enableEventDiscoveryUrlPersistence,
+    hasCustomTabs,
+    isAppConfigLoading,
+    isCategoriesLoading,
+    resolveCurrentUrlState
+  ]);
+  useEffect8(() => {
+    if (!enableEventDiscoveryUrlPersistence || !isUrlStateReady) return;
+    const handlePopState = () => {
+      const resolvedUrlState = resolveCurrentUrlState();
+      if (!resolvedUrlState) return;
+      discoveryFilterStateRef.current = resolvedUrlState.state;
+      setDiscoveryFilterState(resolvedUrlState.state);
+      if (resolvedUrlState.shouldCanonicalize) {
+        writeFilterStateToHistory(resolvedUrlState.state, "replace");
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [
+    enableEventDiscoveryUrlPersistence,
+    isUrlStateReady,
+    resolveCurrentUrlState,
+    writeFilterStateToHistory
+  ]);
   const activeTabValueRef = useRef7(activeTabValue);
   activeTabValueRef.current = activeTabValue;
   useEffect8(() => {
-    setActiveTabValue((currentValue) => {
-      const hasCurrentValue = resolvedTabs.some((tab) => tab.value === currentValue);
-      if (hasCurrentValue) return currentValue;
-      return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+    if (enableEventDiscoveryUrlPersistence && !isUrlStateReady) return;
+    const currentState = discoveryFilterStateRef.current;
+    const categoryIsAvailable = availableCategoryValues.includes(currentState.category);
+    const venueIsAvailable = availableVenueValues.includes(currentState.venue);
+    if (categoryIsAvailable && (!enableEventDiscoveryUrlPersistence || venueIsAvailable)) return;
+    const nextState = __spreadProps(__spreadValues({}, currentState), {
+      category: categoryIsAvailable ? currentState.category : defaultCategory,
+      venue: venueIsAvailable ? currentState.venue : defaultVenue,
+      subcategoryPath: categoryIsAvailable ? currentState.subcategoryPath : []
     });
-  }, [defaultActiveTab, resolvedTabs]);
+    if (enableEventDiscoveryUrlPersistence) {
+      commitDiscoveryFilterState(nextState, "replace");
+      return;
+    }
+    discoveryFilterStateRef.current = nextState;
+    setDiscoveryFilterState(nextState);
+  }, [
+    availableCategoryValues,
+    availableVenueValues,
+    commitDiscoveryFilterState,
+    defaultCategory,
+    defaultVenue,
+    enableEventDiscoveryUrlPersistence,
+    isUrlStateReady
+  ]);
   const tabsItems = useMemo5(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTabValue;
@@ -3160,7 +3402,13 @@ var HomePage = ({
     ];
   }, [activeTab, activeTabValue, resolvedEventSectionItems]);
   const handleTabChange = (value) => {
-    setActiveTabValue(value);
+    commitDiscoveryFilterState(
+      __spreadProps(__spreadValues({}, discoveryFilterStateRef.current), {
+        category: value,
+        subcategoryPath: []
+      }),
+      "push"
+    );
     _onTabChange == null ? void 0 : _onTabChange(value);
   };
   const handleCategoryRootChange = (categoryId) => {
@@ -3182,10 +3430,10 @@ var HomePage = ({
     handleSelectEvent(event);
   };
   const shouldRenderMobileSearch = isMobileSearchViewport && !resolvedSelectedEvent;
-  const isScrollRestorationReady = !!snapshot && !isShowingAllResults && !resolvedSelectedEvent && ((_b = (_a = eventListStateRef.current) == null ? void 0 : _a.loadedPageCount) != null ? _b : 0) >= ((_c = snapshot.loadedPageCount) != null ? _c : 1);
+  const isScrollRestorationReady = !!snapshot && !isShowingAllResults && !resolvedSelectedEvent && ((_e = (_d = eventListStateRef.current) == null ? void 0 : _d.loadedPageCount) != null ? _e : 0) >= ((_f = snapshot.loadedPageCount) != null ? _f : 1);
   useScrollRestoration({
     enabled: !!snapshot && snapshot.scrollY > 0,
-    scrollY: (_d = snapshot == null ? void 0 : snapshot.scrollY) != null ? _d : 0,
+    scrollY: (_g = snapshot == null ? void 0 : snapshot.scrollY) != null ? _g : 0,
     isReady: isScrollRestorationReady
   });
   return /* @__PURE__ */ jsx7(AggErrorBoundary, { onError, children: /* @__PURE__ */ jsxs6("section", { className: cn("agg-home-page flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
@@ -3267,7 +3515,13 @@ var HomePage = ({
                   "div",
                   {
                     className: "agg-home-section",
-                    children: /* @__PURE__ */ jsx7(
+                    children: sectionIndex === 0 && !isUrlStateReady ? /* @__PURE__ */ jsx7(
+                      Skeleton,
+                      {
+                        view: "event-list",
+                        ariaLabel: labels.eventList.loading(eventSectionItem.title)
+                      }
+                    ) : /* @__PURE__ */ jsx7(
                       EventList,
                       __spreadValues({
                         title: eventSectionItem.title,
@@ -3283,11 +3537,33 @@ var HomePage = ({
                           handleSelectEvent(event);
                         },
                         onMarketClick: onMarketClickProp
-                      }, sectionIndex === 0 ? {
+                      }, sectionIndex === 0 ? __spreadValues({
                         stateRef: eventListStateRef,
-                        initialVenueTab: (_d2 = snapshot == null ? void 0 : snapshot.venueTab) != null ? _d2 : void 0,
+                        initialVenueTab: enableEventDiscoveryUrlPersistence ? void 0 : (_d2 = snapshot == null ? void 0 : snapshot.venueTab) != null ? _d2 : void 0,
                         initialLoadedPageCount: snapshot == null ? void 0 : snapshot.loadedPageCount
-                      } : void 0)
+                      }, enableEventDiscoveryUrlPersistence ? {
+                        activeVenueTab: discoveryFilterState.venue,
+                        onActiveVenueTabChange: (venue) => {
+                          commitDiscoveryFilterState(
+                            __spreadProps(__spreadValues({}, discoveryFilterStateRef.current), { venue }),
+                            "push"
+                          );
+                        },
+                        selectedSort: discoveryFilterState.sort,
+                        onSelectedSortChange: (sort) => {
+                          commitDiscoveryFilterState(
+                            __spreadProps(__spreadValues({}, discoveryFilterStateRef.current), { sort }),
+                            "push"
+                          );
+                        },
+                        categoryPath: discoveryFilterState.subcategoryPath,
+                        onCategoryPathChange: (subcategoryPath, options) => {
+                          commitDiscoveryFilterState(
+                            __spreadProps(__spreadValues({}, discoveryFilterStateRef.current), { subcategoryPath }),
+                            options.history
+                          );
+                        }
+                      } : void 0) : void 0)
                     )
                   },
                   `${(_a2 = eventSectionItem.id) != null ? _a2 : eventSectionItem.title}-${sectionIndex}`
@@ -3672,7 +3948,7 @@ import {
 } from "@agg-build/sdk";
 import * as Dialog2 from "@radix-ui/react-dialog";
 import { useCallback as useCallback6, useEffect as useEffect9, useId, useMemo as useMemo6, useRef as useRef8, useState as useState10 } from "react";
-import { z } from "zod";
+import { z as z2 } from "zod";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var USDC_DECIMALS = 6;
 var EDITABLE_AMOUNT_PATTERN = /^\d*(?:\.\d{0,6})?$/;
@@ -3697,7 +3973,7 @@ var VENUE_LABELS = {
   [Venue2.hyperliquid]: "Hyperliquid",
   [Venue2.novig]: "Novig"
 };
-var amountSchema = z.string().min(1).regex(FINAL_AMOUNT_PATTERN);
+var amountSchema = z2.string().min(1).regex(FINAL_AMOUNT_PATTERN);
 var decimalToRaw = (value, decimals = USDC_DECIMALS) => {
   const parsed = amountSchema.safeParse(value.trim());
   if (!parsed.success) return null;