show access token for FTUX flow

Author: d4mr

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/ftux.client.tsx

@@ -2,12 +2,14 @@
 import type { Project } from "@/api/projects";
 import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Button } from "../../../../../../../@/components/ui/button";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import CreateVaultAccountButton from "../vault/components/create-vault-account.client";
 import { SendTestTransaction } from "./send-test-tx.client";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { maskSecret } from "../lib/vault.client";
 
 interface Props {
   managementAccessToken: string | undefined;
@@ -17,13 +19,20 @@ interface Props {
 }
 
 export const EngineChecklist: React.FC<Props> = (props) => {
+  const [userAccessToken, setUserAccessToken] = useState<string | undefined>();
+
   const finalSteps = useMemo(() => {
     const steps: Step[] = [];
     steps.push({
       title: "Create a Vault Admin Account",
       description:
         "Your Vault admin account will be used to create server wallets and manage access tokens.",
-      children: <CreateVaultAccountStep project={props.project} />,
+      children: (
+        <CreateVaultAccountStep
+          project={props.project}
+          onUserAccessTokenCreated={(token) => setUserAccessToken(token)}
+        />
+      ),
       completed: !!props.managementAccessToken,
       showCompletedChildren: false,
     });
@@ -45,7 +54,32 @@ export const EngineChecklist: React.FC<Props> = (props) => {
       title: "Send a Test Transaction",
       description: "Send a test transaction to see Engine in action.",
       children: (
-        <SendTestTransaction wallets={props.wallets} project={props.project} />
+        <>
+          <div className="w-full py-4">
+            {userAccessToken && (
+              <div className="flex flex-col gap-2 ">
+                <CopyTextButton
+                  textToCopy={userAccessToken}
+                  className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
+                  textToShow={maskSecret(userAccessToken)}
+                  copyIconPosition="right"
+                  tooltip="Copy Vault Access Token"
+                />
+                <p className="text-muted-foreground text-xs">
+                  This is the access token you just created. You need it to
+                  authorize every wallet action. You can create more access
+                  tokens with your admin key. Each access token can be scoped
+                  and permissioned with flexible policies. You can copy this one
+                  now to send a test transaction.
+                </p>
+              </div>
+            )}
+          </div>
+          <SendTestTransaction
+            wallets={props.wallets}
+            project={props.project}
+          />
+        </>
       ),
       completed: props.hasTransactions,
       showIncompleteChildren: true,
@@ -57,6 +91,7 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     props.project,
     props.wallets,
     props.hasTransactions,
+    userAccessToken,
   ]);
 
   if (finalSteps.length === 1) {
@@ -68,7 +103,10 @@ export const EngineChecklist: React.FC<Props> = (props) => {
   );
 };
 
-function CreateVaultAccountStep(props: { project: Project }) {
+function CreateVaultAccountStep(props: {
+  project: Project;
+  onUserAccessTokenCreated: (userAccessToken: string) => void;
+}) {
   return (
     <div className="mt-4 flex flex-col rounded-md border bg-background p-4">
       <p className="font-medium text-primary-foreground text-sm">
@@ -85,7 +123,10 @@ function CreateVaultAccountStep(props: { project: Project }) {
         <Link href="https://portal.thirdweb.com/engine/vault" target="_blank">
           <Button variant="outline">Learn more about Vault</Button>
         </Link>
-        <CreateVaultAccountButton project={props.project} />
+        <CreateVaultAccountButton
+          project={props.project}
+          onUserAccessTokenCreated={props.onUserAccessTokenCreated}
+        />
       </div>
     </div>
   );

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

@@ -25,7 +25,10 @@ import {
   maskSecret,
 } from "../../lib/vault.client";
 
-export default function CreateVaultAccountButton(props: { project: Project }) {
+export default function CreateVaultAccountButton(props: {
+  project: Project;
+  onUserAccessTokenCreated?: (userAccessToken: string) => void;
+}) {
   const [modalOpen, setModalOpen] = useState(false);
   const [keysConfirmed, setKeysConfirmed] = useState(false);
   const [keysDownloaded, setKeysDownloaded] = useState(false);
@@ -76,6 +79,8 @@ export default function CreateVaultAccountButton(props: { project: Project }) {
         throw new Error("Failed to create access token");
       }
 
+      props.onUserAccessTokenCreated?.(userAccessTokenRes.data.accessToken);
+
       return {
         serviceAccount: serviceAccount.data,
         userAccessToken: userAccessTokenRes.data,