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

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `useEngine` hook and the `BackendWalletsSection` component by adding pagination functionality for backend wallets retrieval, allowing users to navigate through pages of wallet data.

### Detailed summary
- Added optional `limit` and `page` parameters to the `useEngine` hook.
- Updated the fetch URL in the hook to accommodate pagination.
- Introduced pagination controls in `BackendWalletsSection` using `Button` components.
- Managed pagination state with `useState` for current page tracking.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -70,15 +70,25 @@ export type BackendWallet = {
 export function useEngineBackendWallets(params: {
   instanceUrl: string;
   authToken: string;
+  limit?: number;
+  page?: number;
 }) {
   const { instanceUrl, authToken } = params;
   return useQuery({
-    queryKey: [...engineKeys.backendWallets(instanceUrl), authToken],
+    queryKey: [
+      ...engineKeys.backendWallets(instanceUrl),
+      authToken,
+      params.limit,
+      params.page,
+    ],
     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=${params.limit ?? 1000}&page=${params.page ?? 1}`,
+        {
+          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,12 +1,14 @@
 "use client";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { Button } from "@/components/ui/button";
 import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
 import {
   type EngineInstance,
   useEngineBackendWallets,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWalletChain } from "thirdweb/react";
@@ -62,16 +64,25 @@ 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,
     authToken,
+    limit: pageSize,
+    page,
   });
+
   const { data: walletConfig } = useEngineWalletConfig({
     instanceUrl: instance.url,
     authToken,
   });
 
+  const disableNextButton = (backendWallets.data?.length || 0) < pageSize;
+  const disablePreviousButton = page === 1;
+  const showPagination = !disableNextButton || !disablePreviousButton;
+
   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">
@@ -151,6 +162,30 @@ function BackendWalletsSection(props: {
         chainId={chainId}
         client={props.client}
       />
+
+      {showPagination && (
+        <div className="flex justify-end gap-3 border-t px-4 py-5">
+          <Button
+            variant="outline"
+            disabled={disablePreviousButton || backendWallets.isPending}
+            className="gap-2"
+            onClick={() => setPage(page - 1)}
+          >
+            <ArrowLeftIcon className="h-4 w-4" />
+            Previous
+          </Button>
+
+          <Button
+            variant="outline"
+            disabled={disableNextButton || backendWallets.isPending}
+            className="gap-2"
+            onClick={() => setPage(page + 1)}
+          >
+            Next
+            <ArrowRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
     </section>
   );
 }