Fix: Update routes page to use server-side pagination and filtering

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/client/search.tsx

@@ -47,7 +47,7 @@ export const SearchInput: React.FC = () => {
     <div className="group relative w-full">
       <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
       <Input
-        placeholder="Search with anything!"
+        placeholder="Search by token name or symbol"
         className="h-10 rounded-lg bg-card py-2 pl-9 lg:min-w-[300px]"
         defaultValue={searchParams?.get("query") || ""}
         onChange={(e) => handleSearch(e.target.value)}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx

@@ -7,7 +7,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { Address } from "thirdweb";
-import { checksumAddress } from "thirdweb/utils";
 import { getRoutes } from "../../../utils";
 import { ChainlistPagination } from "../client/pagination";
 import { RouteListCard } from "./routelist-card";
@@ -25,18 +24,15 @@ export type SearchParams = Partial<{
 
 // 120 is divisible by 2, 3, and 4 so card layout looks nice
 const DEFAULT_PAGE_SIZE = 120;
-const DEFAULT_PAGE = 1;
 
 async function getRoutesToRender(params: SearchParams) {
   const filters: Partial<{
-    limit: number;
-    offset: number;
+    originQuery?: string;
+    destinationQuery?: string;
     originChainId?: number;
     originTokenAddress?: Address;
     destinationChainId?: number;
     destinationTokenAddress?: Address;
-    originTextQuery?: string;
-    destinationTextQuery?: string;
   }> = {};
 
   if (params.type === "origin" || typeof params.type === "undefined") {
@@ -45,77 +41,28 @@ async function getRoutesToRender(params: SearchParams) {
     } else if (Number.isInteger(Number(params.query))) {
       filters.originChainId = Number(params.query);
     } else if (params.query) {
-      filters.originTextQuery = params.query;
+      filters.originQuery = params.query;
     }
   } else if (params.type === "destination") {
     if (params.query?.startsWith("0x")) {
       filters.destinationTokenAddress = params.query as Address;
     } else if (Number.isInteger(Number(params.query))) {
       filters.destinationChainId = Number(params.query);
     } else if (params.query) {
-      filters.destinationTextQuery = params.query;
+      filters.destinationQuery = params.query;
     }
   }
-  // Temporary, will update this after the /routes endpoint
-  let routes = await getRoutes({ limit: 500_000 });
-
-  const totalCount = routes.length;
-
-  if (filters.originChainId) {
-    routes = routes.filter(
-      (route) => route.originToken.chainId === filters.originChainId,
-    );
-  }
-  if (filters.originTokenAddress) {
-    const originTokenAddress = filters.originTokenAddress;
-    routes = routes.filter(
-      (route) =>
-        checksumAddress(route.originToken.address) ===
-        checksumAddress(originTokenAddress),
-    );
-  }
-  if (filters.destinationChainId) {
-    routes = routes.filter(
-      (route) => route.destinationToken.chainId === filters.destinationChainId,
-    );
-  }
-  if (filters.destinationTokenAddress) {
-    const destinationTokenAddress = filters.destinationTokenAddress;
-    routes = routes.filter(
-      (route) =>
-        checksumAddress(route.destinationToken.address) ===
-        checksumAddress(destinationTokenAddress),
-    );
-  }
-
-  if (filters.originTextQuery) {
-    const originTextQuery = filters.originTextQuery.toLowerCase();
-    routes = routes.filter((route) => {
-      return (
-        route.originToken.name.toLowerCase().includes(originTextQuery) ||
-        route.originToken.symbol.toLowerCase().includes(originTextQuery)
-      );
-    });
-  }
-
-  if (filters.destinationTextQuery) {
-    const destinationTextQuery = filters.destinationTextQuery.toLowerCase();
-    routes = routes.filter((route) => {
-      return (
-        route.destinationToken.name
-          .toLowerCase()
-          .includes(destinationTextQuery) ||
-        route.destinationToken.symbol
-          .toLowerCase()
-          .includes(destinationTextQuery)
-      );
-    });
-  }
+  const routes = await getRoutes({
+    limit: DEFAULT_PAGE_SIZE,
+    offset: DEFAULT_PAGE_SIZE * ((params.page || 1) - 1),
+    originQuery: filters.originQuery,
+    destinationQuery: filters.destinationQuery,
+  });
 
   return {
-    routesToRender: routes,
-    totalCount,
-    filteredCount: routes.length,
+    routesToRender: routes.data,
+    totalCount: routes.meta.totalCount,
+    filteredCount: routes.meta.filteredCount,
   };
 }
 
@@ -128,10 +75,9 @@ export async function RoutesData(props: {
     props.searchParams,
   );
 
-  // pagination
-  const totalPages = Math.ceil(routesToRender.length / DEFAULT_PAGE_SIZE);
+  const totalPages = Math.ceil(filteredCount / DEFAULT_PAGE_SIZE);
 
-  const activePage = Number(props.searchParams.page || DEFAULT_PAGE);
+  const activePage = Number(props.searchParams.page || 1);
   const pageSize = DEFAULT_PAGE_SIZE;
   const startIndex = (activePage - 1) * pageSize;
   const endIndex = startIndex + pageSize;

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts

@@ -2,35 +2,69 @@ import "server-only";
 
 import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
-import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import type { Address } from "thirdweb";
 import type { Route } from "./types/route";
 
 export async function getRoutes({
   limit,
+  offset,
+  originQuery,
+  destinationQuery,
+  originChainId,
+  destinationChainId,
+  originTokenAddress,
+  destinationTokenAddress,
 }: {
   limit?: number;
+  offset?: number;
+  originQuery?: string;
+  destinationQuery?: string;
+  originChainId?: number;
+  destinationChainId?: number;
+  originTokenAddress?: Address;
+  destinationTokenAddress?: Address;
 } = {}) {
   const url = new URL(`${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/routes`);
   if (limit) {
     url.searchParams.set("limit", limit.toString());
   }
+  if (offset) {
+    url.searchParams.set("offset", offset.toString());
+  }
+  if (originQuery) {
+    url.searchParams.set("originQuery", originQuery);
+  }
+  if (destinationQuery) {
+    url.searchParams.set("destinationQuery", destinationQuery);
+  }
+  if (originChainId) {
+    url.searchParams.set("originChainId", originChainId.toString());
+  }
+  if (destinationChainId) {
+    url.searchParams.set("destinationChainId", destinationChainId.toString());
+  }
+  if (originTokenAddress) {
+    url.searchParams.set("originTokenAddress", originTokenAddress);
+  }
+  if (destinationTokenAddress) {
+    url.searchParams.set("destinationTokenAddress", destinationTokenAddress);
+  }
+  url.searchParams.set("sortBy", "popularity");
   // It's faster to filter client side, doesn't seem to be a big performance boost to paginate/filter server side
-  const token = await getAuthToken();
   const routesResponse = await fetch(url, {
-    headers: token
-      ? {
-          authorization: `Bearer ${token}`,
-        }
-      : {
-          "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-        },
+    headers: {
+      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
+    },
     next: { revalidate: 60 * 60 },
   });
 
   if (!routesResponse.ok) {
     throw new Error("Failed to fetch routes");
   }
-  const routes: { data: Route[] } = await routesResponse.json();
+  const routes: {
+    data: Route[];
+    meta: { totalCount: number; filteredCount: number };
+  } = await routesResponse.json();
 
-  return routes.data;
+  return routes;
 }