label for server wallets

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx

@@ -1,10 +1,19 @@
 "use client";
 import type { Project } from "@/api/projects";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useMutation } from "@tanstack/react-query";
 import { createEoa } from "@thirdweb-dev/vault-sdk";
 import { Loader2 } from "lucide-react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { initVaultClient } from "../../lib/vault.client";
 
@@ -13,11 +22,16 @@ export default function CreateServerWallet(props: {
   managementAccessToken: string | undefined;
 }) {
   const router = useDashboardRouter();
+  const [label, setLabel] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+
   const createEoaMutation = useMutation({
     mutationFn: async ({
       managementAccessToken,
+      label,
     }: {
       managementAccessToken: string;
+      label: string;
     }) => {
       const vaultClient = await initVaultClient();
 
@@ -28,6 +42,7 @@ export default function CreateServerWallet(props: {
               projectId: props.project.id,
               teamId: props.project.teamId,
               type: "server-wallet",
+              label,
             },
           },
           auth: {
@@ -42,6 +57,7 @@ export default function CreateServerWallet(props: {
       }
 
       router.refresh();
+      setModalOpen(false);
 
       return eoa;
     },
@@ -56,6 +72,7 @@ export default function CreateServerWallet(props: {
     } else {
       await createEoaMutation.mutateAsync({
         managementAccessToken: props.managementAccessToken,
+        label,
       });
     }
   };
@@ -66,13 +83,59 @@ export default function CreateServerWallet(props: {
     <>
       <Button
         variant={"primary"}
-        onClick={handleCreateServerWallet}
-        disabled={isLoading}
+        onClick={() =>
+          props.managementAccessToken
+            ? setModalOpen(true)
+            : router.push("vault")
+        }
         className="flex flex-row items-center gap-2"
       >
-        {isLoading && <Loader2 className="animate-spin" />}
         {props.managementAccessToken ? "Create Server Wallet" : "Get Started"}
       </Button>
+
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="p-0">
+          <DialogHeader className="px-6 pt-6">
+            <DialogTitle>Create server wallet</DialogTitle>
+            <DialogDescription>
+              Enter a label for your server wallet.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4 px-6">
+            <div>
+              <Input
+                placeholder="Wallet label (optional)"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="w-full"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
+            <Button
+              variant="outline"
+              onClick={() => setModalOpen(false)}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleCreateServerWallet}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                "Create"
+              )}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/types.ts

@@ -4,7 +4,7 @@ export type Wallet = {
   metadata: {
     type: string;
     projectId: string;
-    name?: string;
+    label?: string;
   };
   createdAt: string;
   updatedAt: string;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table-ui.client.tsx

@@ -17,10 +17,13 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { useQuery } from "@tanstack/react-query";
 import { formatDistanceToNowStrict } from "date-fns";
 import { format } from "date-fns/format";
+import { useState } from "react";
 import {
   DEFAULT_ACCOUNT_FACTORY_V0_7,
   predictSmartAccountAddress,
 } from "thirdweb/wallets/smart";
+import { Badge } from "../../../../../../../../@/components/ui/badge";
+import { Switch } from "../../../../../../../../@/components/ui/switch";
 import { useV5DashboardChain } from "../../../../../../../../lib/v5-adapter";
 import CreateServerWallet from "../components/create-server-wallet.client";
 import type { Wallet } from "./types";
@@ -34,6 +37,7 @@ export function ServerWalletsTableUI({
   project: Project;
   managementAccessToken: string | undefined;
 }) {
+  const [showSigners, setShowSigners] = useState(false);
   return (
     <div className="overflow-hidden rounded-lg border border-border bg-card">
       <div className="flex flex-row items-center gap-4 px-6 py-6">
@@ -47,6 +51,16 @@ export function ServerWalletsTableUI({
             </p>
           </div>
         </div>
+        <div className="flex items-center justify-end gap-2">
+          <label htmlFor="show-signers" className="cursor-pointer text-sm">
+            Show Signer Addresses
+          </label>
+          <Switch
+            id="show-signers"
+            checked={showSigners}
+            onCheckedChange={() => setShowSigners(!showSigners)}
+          />
+        </div>
         <CreateServerWallet
           project={project}
           managementAccessToken={managementAccessToken}
@@ -57,8 +71,8 @@ export function ServerWalletsTableUI({
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Signer</TableHead>
-              <TableHead>Smart Account</TableHead>
+              <TableHead>Address</TableHead>
+              <TableHead>Label</TableHead>
               <TableHead>Created At</TableHead>
               <TableHead>Updated At</TableHead>
             </TableRow>
@@ -74,11 +88,13 @@ export function ServerWalletsTableUI({
               wallets.map((wallet) => (
                 <TableRow key={wallet.id} className="hover:bg-accent/50">
                   <TableCell>
-                    <WalletAddress address={wallet.address} />
-                  </TableCell>
-                  <TableCell>
-                    <SmartAccountCell wallet={wallet} />
+                    {showSigners ? (
+                      <WalletAddress address={wallet.address} />
+                    ) : (
+                      <SmartAccountCell wallet={wallet} />
+                    )}
                   </TableCell>
+                  <TableCell>{wallet.metadata.label || "none"}</TableCell>
                   <TableCell>
                     <WalletDateCell date={wallet.createdAt} />
                   </TableCell>
@@ -115,7 +131,10 @@ function SmartAccountCell({ wallet }: { wallet: Wallet }) {
   return (
     <div>
       {smartAccountAddressQuery.data ? (
-        <WalletAddress address={smartAccountAddressQuery.data} />
+        <div className="flex items-center gap-2">
+          <WalletAddress address={smartAccountAddressQuery.data} />
+          <Badge variant={"default"}>Smart Account</Badge>
+        </div>
       ) : (
         <Spinner className="h-4 w-4" />
       )}