[Dashboard] Add pagination to server wallets page

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/page.tsx

@@ -8,12 +8,14 @@ import { ServerWalletsTable } from "./wallet-table/wallet-table";
 
 export default async function TransactionsServerWalletsPage(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
+  searchParams: Promise<{ page?: string }>;
 }) {
   const vaultClient = await createVaultClient({
     baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
   });
 
   const { team_slug, project_slug } = await props.params;
+  const { page } = await props.searchParams;
   const [authToken, project] = await Promise.all([
     getAuthToken(),
     getProject(team_slug, project_slug),
@@ -30,17 +32,23 @@ export default async function TransactionsServerWalletsPage(props: {
   const managementAccessToken =
     projectEngineCloudService?.managementAccessToken;
 
+  const pageSize = 10;
+  const currentPage = Number.parseInt(page ?? "1");
   const eoas = managementAccessToken
     ? await listEoas({
         client: vaultClient,
         request: {
           auth: {
             accessToken: managementAccessToken,
           },
-          options: {},
+          options: {
+            page: currentPage - 1,
+            // @ts-expect-error - TODO: fix this
+            page_size: pageSize,
+          },
         },
       })
-    : { data: { items: [] }, error: null, success: true };
+    : { data: { items: [], totalRecords: 0 }, error: null, success: true };
 
   return (
     <>
@@ -50,6 +58,9 @@ export default async function TransactionsServerWalletsPage(props: {
         <div className="flex flex-col gap-8">
           <ServerWalletsTable
             wallets={eoas.data.items as Wallet[]}
+            totalRecords={eoas.data.totalRecords}
+            currentPage={currentPage}
+            totalPages={Math.ceil(eoas.data.totalRecords / pageSize)}
             project={project}
             teamSlug={team_slug}
             managementAccessToken={managementAccessToken ?? undefined}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx

@@ -19,12 +19,21 @@ import { useQuery } from "@tanstack/react-query";
 import { formatDistanceToNowStrict } from "date-fns";
 import { format } from "date-fns/format";
 import { SendIcon } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 import {
   DEFAULT_ACCOUNT_FACTORY_V0_7,
   predictSmartAccountAddress,
 } from "thirdweb/wallets/smart";
 import { Button } from "../../../../../../../../../@/components/ui/button";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../../../../../../../../@/components/ui/pagination";
 import { useThirdwebClient } from "../../../../../../../../../@/constants/thirdweb.client";
 import { useDashboardRouter } from "../../../../../../../../../@/lib/DashboardRouter";
 import { useV5DashboardChain } from "../../../../../../../../../lib/v5-adapter";
@@ -36,11 +45,17 @@ export function ServerWalletsTableUI({
   project,
   teamSlug,
   managementAccessToken,
+  totalRecords,
+  currentPage,
+  totalPages,
 }: {
   wallets: Wallet[];
   project: Project;
   teamSlug: string;
   managementAccessToken: string | undefined;
+  totalRecords: number;
+  currentPage: number;
+  totalPages: number;
 }) {
   const [showSigners, setShowSigners] = useState(false);
   return (
@@ -121,6 +136,60 @@ export function ServerWalletsTableUI({
           </TableBody>
         </Table>
       </TableContainer>
+      <div className="flex flex-col items-center p-6">
+        <div className="mb-4 text-muted-foreground text-sm">
+          Found {totalRecords} server wallets
+        </div>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <Link
+                href={`/team/${teamSlug}/${project.slug}/engine/cloud/server-wallets?page=${
+                  currentPage > 1 ? currentPage - 1 : 1
+                }`}
+                passHref
+                legacyBehavior
+              >
+                <PaginationPrevious
+                  className={
+                    currentPage <= 1 ? "pointer-events-none opacity-50" : ""
+                  }
+                />
+              </Link>
+            </PaginationItem>
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+              (pageNumber) => (
+                <PaginationItem key={`page-${pageNumber}`}>
+                  <Link
+                    href={`/team/${teamSlug}/${project.slug}/engine/cloud/server-wallets?page=${pageNumber}`}
+                    passHref
+                  >
+                    <PaginationLink isActive={currentPage === pageNumber}>
+                      {pageNumber}
+                    </PaginationLink>
+                  </Link>
+                </PaginationItem>
+              ),
+            )}
+            <PaginationItem>
+              <Link
+                href={`/team/${teamSlug}/${project.slug}/engine/cloud/server-wallets?page=${
+                  currentPage < totalPages ? currentPage + 1 : totalPages
+                }`}
+                passHref
+              >
+                <PaginationNext
+                  className={
+                    currentPage >= totalPages
+                      ? "pointer-events-none opacity-50"
+                      : ""
+                  }
+                />
+              </Link>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
     </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table.tsx

@@ -6,16 +6,25 @@ export function ServerWalletsTable({
   wallets,
   project,
   teamSlug,
+  currentPage,
+  totalPages,
+  totalRecords,
   managementAccessToken,
 }: {
   wallets: Wallet[];
   project: Project;
   teamSlug: string;
   managementAccessToken: string | undefined;
+  totalRecords: number;
+  currentPage: number;
+  totalPages: number;
 }) {
   return (
     <ServerWalletsTableUI
       wallets={wallets}
+      totalRecords={totalRecords}
+      currentPage={currentPage}
+      totalPages={totalPages}
       project={project}
       teamSlug={teamSlug}
       managementAccessToken={managementAccessToken}