separate admin key / access token flow in FTUX

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/send-test-tx.client.tsx

@@ -15,7 +15,7 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Loader2, LockIcon } from "lucide-react";
+import { Loader2Icon, LockIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -26,6 +26,7 @@ import {
   sepolia,
 } from "thirdweb/chains";
 import * as z from "zod";
+import { CopyTextButton } from "../../../../../../../../@/components/ui/CopyTextButton";
 import { useTrack } from "../../../../../../../../hooks/analytics/useTrack";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import { SmartAccountCell } from "../server-wallets/wallet-table/wallet-table-ui.client";
@@ -146,30 +147,40 @@ export function SendTestTransaction(props: {
         )}
         <p className="flex items-center gap-2 text-sm text-warning-text">
           <LockIcon className="h-4 w-4" />
-          Every wallet action requires your Vault access token.
+          {props.userAccessToken
+            ? "Copy your Vault access token, you'll need it for every HTTP call to Engine."
+            : "Every wallet action requires your Vault access token."}
         </p>
         <div className="h-4" />
         {/* Responsive container */}
         <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-2">
           <div className="flex-grow">
             <div className="flex flex-col gap-2">
               <p className="text-sm">Vault Access Token</p>
-              <Input
-                id="access-token"
-                type={props.userAccessToken ? "text" : "password"}
-                placeholder="vt_act_1234....ABCD"
-                {...form.register("accessToken")}
-                disabled={isLoading}
-                className="text-xs"
-              />
-              {props.userAccessToken && (
+              {props.userAccessToken ? (
                 <div className="flex flex-col gap-2 ">
+                  <CopyTextButton
+                    copyIconPosition="right"
+                    textToCopy={props.userAccessToken}
+                    textToShow={props.userAccessToken}
+                    tooltip="Copy Vault Access Token"
+                    className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
+                  />
                   <p className="text-muted-foreground text-xs">
-                    This is the project-wide access token you just created. You
-                    can create more access tokens using your admin key, with
-                    granular scopes and permissions.
+                    This is a project-wide access token to access your server
+                    wallets. You can create more access tokens using your admin
+                    key, with granular scopes and permissions.
                   </p>
                 </div>
+              ) : (
+                <Input
+                  id="access-token"
+                  type={props.userAccessToken ? "text" : "password"}
+                  placeholder="vt_act_1234....ABCD"
+                  {...form.register("accessToken")}
+                  disabled={isLoading}
+                  className="text-xs"
+                />
               )}
             </div>
           </div>
@@ -257,7 +268,7 @@ export function SendTestTransaction(props: {
           >
             {isLoading ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
                 Sending...
               </>
             ) : (

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/create-vault-account.client.tsx

@@ -15,7 +15,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
 import { createServiceAccount } from "@thirdweb-dev/vault-sdk";
-import { CheckIcon, DownloadIcon, Loader2, LockIcon } from "lucide-react";
+import { CheckIcon, DownloadIcon, Loader2Icon, LockIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { useTrack } from "../../../../../../../../../hooks/analytics/useTrack";
@@ -150,7 +150,7 @@ export default function CreateVaultAccountButton(props: {
         className="flex flex-row items-center gap-2"
       >
         {isLoading ? (
-          <Loader2 className="animate-spin" />
+          <Loader2Icon className="size-4 animate-spin" />
         ) : (
           <LockIcon className="size-4" />
         )}
@@ -177,19 +177,16 @@ export default function CreateVaultAccountButton(props: {
           ) : initialiseProjectWithVaultMutation.data ? (
             <div>
               <DialogHeader className="p-6">
-                <DialogTitle>Vault Management Keys</DialogTitle>
+                <DialogTitle>Save your Vault Admin Key</DialogTitle>
                 <p className="text-muted-foreground text-sm">
-                  These keys are used for end-to-end encryption and are required
-                  to interact with Vault, thirdweb's key management system.
+                  You'll need this key to create server wallets and access
+                  tokens.
                 </p>
               </DialogHeader>
 
               <div className="space-y-6 p-6 pt-0">
                 <div className="space-y-4">
                   <div>
-                    <h3 className="mb-2 font-medium text-sm">
-                      Vault Admin Key
-                    </h3>
                     <div className="flex flex-col gap-2">
                       <CopyTextButton
                         textToCopy={
@@ -205,12 +202,13 @@ export default function CreateVaultAccountButton(props: {
                         tooltip="Copy Admin Key"
                       />
                       <p className="text-muted-foreground text-xs">
-                        This key is used to create or revoke your access tokens.
+                        Download this key to your local machine or a password
+                        manager.
                       </p>
                     </div>
                   </div>
 
-                  <div>
+                  {/* <div>
                     <h3 className="mb-2 font-medium text-sm">
                       Vault Access Token
                     </h3>
@@ -234,10 +232,10 @@ export default function CreateVaultAccountButton(props: {
                         with your admin key.
                       </p>
                     </div>
-                  </div>
+                  </div> */}
                 </div>
                 <Alert variant="destructive">
-                  <AlertTitle>Secure your keys</AlertTitle>
+                  <AlertTitle>Secure your admin key</AlertTitle>
                   <AlertDescription>
                     These keys will not be displayed again. Store them securely
                     as they provide access to your server wallets.
@@ -250,7 +248,7 @@ export default function CreateVaultAccountButton(props: {
                       className="flex h-auto items-center gap-2 p-0 text-sm text-success-text"
                     >
                       <DownloadIcon className="size-4" />
-                      {keysDownloaded ? "Keys Downloaded" : "Download Keys"}
+                      {keysDownloaded ? "Key Downloaded" : "Download Admin Key"}
                     </Button>
                     {keysDownloaded && (
                       <span className="text-success-text text-xs">
@@ -264,7 +262,7 @@ export default function CreateVaultAccountButton(props: {
                       checked={keysConfirmed}
                       onCheckedChange={(v) => setKeysConfirmed(!!v)}
                     />
-                    I confirm that I've securely stored these keys
+                    I confirm that I've securely stored my admin key
                   </CheckboxWithLabel>
                 </Alert>
               </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/list-access-tokens.client.tsx

@@ -14,7 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { listAccessTokens, revokeAccessToken } from "@thirdweb-dev/vault-sdk";
-import { Loader2, LockIcon, Trash2 } from "lucide-react";
+import { Loader2Icon, LockIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { toDateTimeLocal } from "utils/date-utils";
@@ -227,7 +227,10 @@ export default function ListAccessTokens(props: {
                             {token.accessToken.includes("**") ? (
                               <div className="flex flex-grow flex-row items-center gap-2 rounded-lg border border-border bg-background px-4 py-3 font-mono text-sm">
                                 <p className="text-muted-foreground text-sm">
-                                  {token.accessToken}
+                                  {token.accessToken}{" "}
+                                  <span className="text-muted-foreground text-xs">
+                                    (unlock vault to reveal the full token)
+                                  </span>
                                 </p>
                               </div>
                             ) : (
@@ -258,7 +261,7 @@ export default function ListAccessTokens(props: {
                               {deletingTokenId === token.id ? (
                                 <Loader2 className="h-4 w-4 animate-spin" />
                               ) : (
-                                <Trash2 className="h-4 w-4" />
+                                <Trash2Icon className="h-4 w-4" />
                               )}
                             </Button>
                           </div>
@@ -291,7 +294,7 @@ export default function ListAccessTokens(props: {
           >
             {createAccessTokenMutation.isPending ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2Icon className="mr-2 size-4 animate-spin" />
                 Creating new access token...
               </>
             ) : (

packages/thirdweb/src/engine/server-wallet.test.ts

@@ -85,7 +85,6 @@ describe.runIf(
         tokenId: 0n,
         quantity: 1n,
       });
-      console.time("enqueue");
       const result = await serverWallet.enqueueTransaction({
         transaction: claimTx,
       });