[TOOL-4819] Dashboard: Load all engine backend wallets, add pagination in table

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -75,10 +75,13 @@ export function useEngineBackendWallets(params: {
   return useQuery({
     queryKey: [...engineKeys.backendWallets(instanceUrl), authToken],
     queryFn: async () => {
-      const res = await fetch(`${instanceUrl}backend-wallet/get-all?limit=50`, {
-        method: "GET",
-        headers: getEngineRequestHeaders(authToken),
-      });
+      const res = await fetch(
+        `${instanceUrl}backend-wallet/get-all?limit=1000`,
+        {
+          method: "GET",
+          headers: getEngineRequestHeaders(authToken),
+        },
+      );
 
       const json = await res.json();
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { PaginationButtons } from "@/components/pagination-buttons";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
 import {
@@ -62,6 +63,8 @@ function BackendWalletsSection(props: {
   const activeWalletChain = useActiveWalletChain();
   const [_chainId, setChainId] = useState<number>();
   const chainId = _chainId || activeWalletChain?.id || 1;
+  const pageSize = 10;
+  const [page, setPage] = useState(1);
 
   const backendWallets = useEngineBackendWallets({
     instanceUrl: instance.url,
@@ -72,6 +75,13 @@ function BackendWalletsSection(props: {
     authToken,
   });
 
+  const totalPages = Math.ceil((backendWallets.data?.length ?? 0) / pageSize);
+
+  const walletsToShow = backendWallets.data?.slice(
+    (page - 1) * pageSize,
+    page * pageSize,
+  );
+
   return (
     <section className="rounded-lg border border-border bg-card">
       <div className="flex flex-col gap-5 p-6 lg:flex-row lg:items-center lg:justify-between">
@@ -144,13 +154,24 @@ function BackendWalletsSection(props: {
 
       <BackendWalletsTable
         instanceUrl={instance.url}
-        wallets={backendWallets.data ?? []}
+        wallets={walletsToShow ?? []}
         isPending={backendWallets.isPending}
         isFetched={backendWallets.isFetched}
         authToken={authToken}
         chainId={chainId}
         client={props.client}
       />
+
+      {totalPages > 1 && (
+        <div className="border-t p-4">
+          <PaginationButtons
+            activePage={page}
+            totalPages={totalPages}
+            onPageClick={setPage}
+            className="mx-0 w-auto"
+          />
+        </div>
+      )}
     </section>
   );
 }