diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts index 06dcaab0454..87dece15a4b 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts +++ b/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(); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx index 1ab2d887957..59cd1070052 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx +++ b/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(); 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 (
@@ -151,6 +162,30 @@ function BackendWalletsSection(props: { chainId={chainId} client={props.client} /> + + {showPagination && ( +
+ + + +
+ )}
); }