[Dashboard] Feature: Default analytics range to 30 days and save preference (#7039)

Co-authored-by: Claude <noreply@anthropic.com>

Author: gregfromstl

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -137,7 +137,7 @@ function RenderSidebarGroup(props: {
         }
 
         if ("separator" in link) {
-          return <SidebarSeparator className="my-1" />;
+          return <SidebarSeparator key={Math.random()} className="my-1" />;
         }
 
         return (

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx

@@ -50,9 +50,13 @@ export function ProjectSidebarLayout(props: {
           tracking: tracking("account-abstraction"),
         },
         {
-          label: "Universal Bridge",
           href: `${layoutPath}/connect/universal-bridge`,
           icon: PayIcon,
+          label: (
+            <span className="flex items-center gap-2">
+              Universal Bridge <Badge>New</Badge>
+            </span>
+          ),
           tracking: tracking("universal-bridge"),
         },
         {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/page.tsx

@@ -32,6 +32,7 @@ export default async function Page(props: {
     from: searchParams.from,
     to: searchParams.to,
     interval: searchParams.interval,
+    defaultRange: "last-30",
   });
 
   return (

apps/dashboard/src/components/analytics/date-range-selector.tsx

@@ -80,7 +80,7 @@ export function DateRangeSelector(props: {
 export function getLastNDaysRange(id: DurationId) {
   const durationInfo = durationPresets.find((preset) => preset.id === id);
   if (!durationInfo) {
-    throw new Error("Invalid duration id");
+    throw new Error(`Invalid duration id: ${id}`);
   }
 
   const todayDate = new Date(Date.now() + 1000 * 60 * 60 * 24); // add 1 day to avoid timezone issues

apps/dashboard/src/components/pay/PayAnalytics/components/PayAnalyticsFilter.tsx

@@ -1,48 +1,121 @@
 "use client";
 
 import { normalizeTimeISOString } from "@/lib/time";
-import { DateRangeSelector } from "components/analytics/date-range-selector";
+import { useQuery } from "@tanstack/react-query";
+import {
+  DateRangeSelector,
+  type DurationId,
+} from "components/analytics/date-range-selector";
 import { IntervalSelector } from "components/analytics/interval-selector";
 import { getUniversalBridgeFiltersFromSearchParams } from "lib/time";
 import {
   useResponsiveSearchParams,
   useSetResponsiveSearchParams,
 } from "responsive-rsc";
 
+const STORAGE_KEY = "thirdweb:ub-analytics-range";
+
+type SavedRange = {
+  rangeType: string;
+  interval: "day" | "week";
+};
+
+type SearchParams = {
+  from?: string;
+  to?: string;
+  interval?: "day" | "week";
+};
+
 export function PayAnalyticsFilter() {
   const responsiveSearchParams = useResponsiveSearchParams();
   const setResponsiveSearchParams = useSetResponsiveSearchParams();
 
+  // Load saved range from localStorage using useQuery
+  useQuery<SavedRange | null>({
+    queryKey: [
+      "savedRange",
+      responsiveSearchParams.from,
+      responsiveSearchParams.to,
+    ],
+    queryFn: () => {
+      const savedRangeString = localStorage.getItem(STORAGE_KEY);
+      if (savedRangeString) {
+        try {
+          const savedRange = JSON.parse(savedRangeString) as SavedRange;
+          // Get the current range based on the saved range type
+          const { range } = getUniversalBridgeFiltersFromSearchParams({
+            from: undefined,
+            to: undefined,
+            interval: savedRange.interval,
+            defaultRange: (savedRange.rangeType || "last-30") as DurationId,
+          });
+
+          setResponsiveSearchParams((v) => ({
+            ...v,
+            from: normalizeTimeISOString(range.from),
+            to: normalizeTimeISOString(range.to),
+            interval: savedRange.interval,
+          }));
+        } catch (e) {
+          localStorage.removeItem(STORAGE_KEY);
+          console.error("Failed to parse saved range:", e);
+        }
+      }
+      return null;
+    },
+    enabled: !responsiveSearchParams.from && !responsiveSearchParams.to,
+  });
+
   const { range, interval } = getUniversalBridgeFiltersFromSearchParams({
     from: responsiveSearchParams.from,
     to: responsiveSearchParams.to,
     interval: responsiveSearchParams.interval,
+    defaultRange: "last-30",
   });
 
+  const saveToLocalStorage = (params: {
+    rangeType: string;
+    interval: "day" | "week";
+  }) => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(params));
+  };
+
   return (
     <div className="no-scrollbar flex items-center gap-3 max-sm:overflow-auto">
       <DateRangeSelector
         range={range}
         popoverAlign="end"
         setRange={(newRange) => {
-          setResponsiveSearchParams((v) => {
-            return {
+          setResponsiveSearchParams((v: SearchParams) => {
+            const newParams = {
               ...v,
               from: normalizeTimeISOString(newRange.from),
               to: normalizeTimeISOString(newRange.to),
             };
+            // Save to localStorage
+            saveToLocalStorage({
+              rangeType: newRange.type || "last-30",
+              interval: newParams.interval || "day",
+            });
+            return newParams;
           });
         }}
       />
 
       <IntervalSelector
         intervalType={interval}
         setIntervalType={(newInterval) => {
-          setResponsiveSearchParams((v) => {
-            return {
+          setResponsiveSearchParams((v: SearchParams) => {
+            const newParams = {
               ...v,
               interval: newInterval,
             };
+            // Save to localStorage
+            saveToLocalStorage({
+              rangeType: range.type || "last-30",
+              interval: newInterval,
+            });
+            return newParams;
           });
         }}
       />

apps/dashboard/src/lib/time.ts

@@ -1,4 +1,5 @@
 import { getFiltersFromSearchParams } from "@/lib/time";
+import type { DurationId } from "../components/analytics/date-range-selector";
 
 export function getNebulaFiltersFromSearchParams(params: {
   from: string | undefined | string[];
@@ -17,11 +18,12 @@ export function getUniversalBridgeFiltersFromSearchParams(params: {
   from: string | undefined | string[];
   to: string | undefined | string[];
   interval: string | undefined | string[];
+  defaultRange: DurationId;
 }) {
   return getFiltersFromSearchParams({
     from: params.from,
     to: params.to,
     interval: params.interval,
-    defaultRange: "last-120",
+    defaultRange: params.defaultRange,
   });
 }