Skip to content

[Dashboard] Add pagination to server wallets page #7070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 16, 2025
Merged

[Dashboard] Add pagination to server wallets page #7070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions ...hboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -30,17 +32,23 @@ export default async function TransactionsServerWalletsPage(props: {
const managementAccessToken =
projectEngineCloudService?.managementAccessToken;

const pageSize = 10;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There appears to be a discrepancy between the pageSize value set to 10 in the implementation and the value of 20 mentioned in the PR description. For consistency, consider updating this value to match what was documented in the PR description.

Suggested change
const pageSize = 10;
const pageSize = 20;

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

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 (
<>
Expand All @@ -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}
Expand Down
69 changes: 69 additions & 0 deletions ..._slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
);
}
Expand Down
9 changes: 9 additions & 0 deletions ...team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading