From a8a7311c5e2ae2baa26d3f0ae58d9d1997f4bc30 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Fri, 3 Oct 2025 13:12:45 +1300
Subject: [PATCH] [Dashboard] Redesign wallet UI with rounded elements and
 improved layout

---
 .../AdvancedSearchInput.tsx                   |  6 +-
 .../in-app-wallet-users-content.tsx           | 31 +++++---
 .../wallet-table/wallet-table-ui.client.tsx   | 40 ++++------
 .../[project_slug]/(sidebar)/wallets/page.tsx | 76 +++++++++++++++++--
 4 files changed, 110 insertions(+), 43 deletions(-)

diff --git a/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx b/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx
index e080540d8ca..2e6d0eddf3f 100644
--- a/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx
+++ b/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx
@@ -46,7 +46,7 @@ export function AdvancedSearchInput(props: {
         value={searchType}
         onValueChange={(value) => setSearchType(value as SearchType)}
       >
-        <SelectTrigger className="w-[140px] bg-card">
+        <SelectTrigger className="w-[140px] bg-background rounded-full">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -61,7 +61,7 @@ export function AdvancedSearchInput(props: {
       <div className="flex flex-1">
         <div className="relative flex-1">
           <Input
-            className="bg-card pl-9 border-r-0 rounded-r-none"
+            className="bg-background pl-9 border-r-0 rounded-r-none rounded-l-full"
             placeholder={`Search by ${searchType}...`}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -86,7 +86,7 @@ export function AdvancedSearchInput(props: {
           onClick={handleSearch}
           variant="outline"
           disabled={!query.trim() || props.isLoading}
-          className="rounded-l-none gap-2 bg-card disabled:opacity-100"
+          className="rounded-l-none rounded-r-full gap-2 bg-background disabled:opacity-100"
         >
           {props.isLoading && <Spinner className="size-4" />}
           Search
diff --git a/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx b/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
index 7e0ee70830e..95fe1e3501a 100644
--- a/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
+++ b/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
@@ -2,7 +2,7 @@
 
 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon, UserIcon } from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -264,11 +264,24 @@ export function InAppWalletUsersPageContent(
 
   return (
     <div>
-      <div className="flex flex-col gap-4">
-        {/* Top section */}
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col md:flex-row lg:items-center justify-end gap-3">
-            <div className="w-full max-w-lg">
+      <div className="overflow-hidden rounded-xl border border-border bg-card">
+        <div className="flex flex-col lg:flex-row lg:justify-between p-4 lg:px-6 py-5 lg:items-center gap-5">
+          <div>
+            <div className="flex mb-3">
+              <div className="p-2 rounded-full bg-background border border-border">
+                <UserIcon className="size-5 text-muted-foreground" />
+              </div>
+            </div>
+            <h2 className="font-semibold text-2xl tracking-tight">
+              User Wallets
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              View and manage your project's users
+            </p>
+          </div>
+
+          <div className="flex flex-col items-start lg:items-end gap-2.5 border-t lg:border-t-0 pt-5 lg:pt-0 border-dashed">
+            <div className="w-full lg:w-auto lg:min-w-[320px]">
               <AdvancedSearchInput
                 onSearch={handleSearch}
                 onClear={handleClearSearch}
@@ -277,7 +290,7 @@ export function InAppWalletUsersPageContent(
               />
             </div>
             <Button
-              className="gap-2 bg-card"
+              className="gap-2 bg-background rounded-full"
               disabled={wallets.length === 0 || isPending}
               onClick={downloadCSV}
               variant="outline"
@@ -298,11 +311,11 @@ export function InAppWalletUsersPageContent(
                 data={wallets}
                 isFetched={walletsQuery.isFetched}
                 isPending={walletsQuery.isPending}
-                tableContainerClassName="rounded-b-none"
+                tableContainerClassName="rounded-none border-x-0 border-b-0"
                 title="in-app wallets"
               />
 
-              <div className="flex justify-center gap-3 rounded-b-lg border border-t-0 bg-card p-6">
+              <div className="flex justify-center gap-3 border-t bg-card p-6">
                 <Button
                   className="gap-2 bg-background"
                   disabled={activePage === 1 || walletsQuery.isPending}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx
index 7893ccd7833..06ee075cf87 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx
@@ -96,15 +96,22 @@ export function ServerWalletsTableUI({
           </div>
 
           <div className="flex flex-col items-start lg:items-end gap-5 border-t lg:border-t-0 pt-5 lg:pt-0 border-dashed">
-            <SingleNetworkSelector
-              chainId={selectedChainId}
-              onChange={setSelectedChainId}
-              client={client}
-              disableChainId
-              className="w-fit min-w-[180px] rounded-full bg-background hover:bg-accent/50"
-              placeholder="Select network"
-              popoverContentClassName="!w-[320px] rounded-xl overflow-hidden"
-            />
+            <div className="flex flex-row gap-2.5">
+              <CreateServerWallet
+                managementAccessToken={managementAccessToken}
+                project={project}
+                teamSlug={teamSlug}
+              />
+              <SingleNetworkSelector
+                chainId={selectedChainId}
+                onChange={setSelectedChainId}
+                client={client}
+                disableChainId
+                className="w-fit min-w-[180px] rounded-full bg-background hover:bg-accent/50"
+                placeholder="Select network"
+                popoverContentClassName="!w-[320px] rounded-xl overflow-hidden"
+              />
+            </div>
 
             <div className="flex items-center gap-2.5">
               <Label
@@ -187,25 +194,10 @@ export function ServerWalletsTableUI({
                 <XIcon className="size-5 text-muted-foreground" />
               </div>
               <p className="text-muted-foreground">No server wallets found</p>
-              <CreateServerWallet
-                managementAccessToken={managementAccessToken}
-                project={project}
-                teamSlug={teamSlug}
-              />
             </div>
           )}
         </TableContainer>
 
-        {wallets.length > 0 && (
-          <div className="flex justify-end items-center p-4 py-5 lg:px-6 border-t">
-            <CreateServerWallet
-              managementAccessToken={managementAccessToken}
-              project={project}
-              teamSlug={teamSlug}
-            />
-          </div>
-        )}
-
         {totalPages > 1 && (
           <div className="flex flex-col items-center border-t p-6">
             <div className="mb-4 text-muted-foreground text-sm">
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
index fad8863cd37..523b38c5332 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
@@ -1,3 +1,4 @@
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
 import { redirect } from "next/navigation";
 import { ResponsiveSearchParamsProvider } from "responsive-rsc";
 import { getAuthToken } from "@/api/auth-token";
@@ -6,10 +7,13 @@ import type { DurationId } from "@/components/analytics/date-range-selector";
 import { ResponsiveTimeFilters } from "@/components/analytics/responsive-time-filters";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { InAppWalletUsersPageContent } from "@/components/in-app-wallet-users-content/in-app-wallet-users-content";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { WalletProductIcon } from "@/icons/WalletProductIcon";
 import { getFiltersFromSearchParams } from "@/lib/time";
 import { loginRedirect } from "@/utils/redirects";
+import type { Wallet } from "../transactions/server-wallets/wallet-table/types";
+import { ServerWalletsTable } from "../transactions/server-wallets/wallet-table/wallet-table";
 import { InAppWalletAnalytics } from "./analytics/chart";
 import { InAppWalletsSummary } from "./analytics/chart/Summary";
 
@@ -20,6 +24,7 @@ export default async function Page(props: {
     to?: string;
     type?: string;
     interval?: string;
+    page?: string;
   }>;
 }) {
   const [searchParams, params] = await Promise.all([
@@ -40,12 +45,47 @@ export default async function Page(props: {
     to: searchParams.to,
   });
 
-  const project = await getProject(params.team_slug, params.project_slug);
+  const [vaultClient, project] = await Promise.all([
+    createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    }).catch(() => undefined),
+    getProject(params.team_slug, params.project_slug),
+  ]);
 
   if (!project) {
     redirect(`/team/${params.team_slug}`);
   }
 
+  const projectEngineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const managementAccessToken =
+    projectEngineCloudService?.managementAccessToken;
+
+  // Fetch server wallets with pagination (5 per page)
+  const pageSize = 5;
+  const currentPage = Number.parseInt(searchParams.page ?? "1");
+
+  const eoas =
+    vaultClient && managementAccessToken
+      ? await listEoas({
+          client: vaultClient,
+          request: {
+            auth: {
+              accessToken: managementAccessToken,
+            },
+            options: {
+              page: currentPage - 1,
+              // @ts-expect-error - TODO: fix this
+              page_size: pageSize,
+            },
+          },
+        })
+      : { data: { items: [], totalRecords: 0 }, error: null, success: true };
+
+  const serverWallets = eoas.data?.items as Wallet[] | undefined;
+
   const client = getClientThirdwebClient({
     jwt: authToken,
     teamId: project.teamId,
@@ -103,12 +143,34 @@ export default async function Page(props: {
             authToken={authToken}
           />
 
-          <InAppWalletUsersPageContent
-            authToken={authToken}
-            client={client}
-            projectClientId={project.publishableKey}
-            teamId={project.teamId}
-          />
+          {/* Server Wallets Section */}
+          <div className="flex flex-col gap-4">
+            {eoas.error ? null : (
+              <ServerWalletsTable
+                client={client}
+                currentPage={currentPage}
+                managementAccessToken={managementAccessToken ?? undefined}
+                project={project}
+                teamSlug={params.team_slug}
+                totalPages={Math.ceil(eoas.data.totalRecords / pageSize)}
+                totalRecords={eoas.data.totalRecords}
+                wallets={serverWallets ?? []}
+              />
+            )}
+          </div>
+
+          {/* User Wallets Section */}
+          <div className="flex flex-col gap-4">
+            <h2 className="font-semibold text-2xl tracking-tight">
+              User wallets
+            </h2>
+            <InAppWalletUsersPageContent
+              authToken={authToken}
+              client={client}
+              projectClientId={project.publishableKey}
+              teamId={project.teamId}
+            />
+          </div>
         </div>
       </ProjectPage>
     </ResponsiveSearchParamsProvider>