[Dashboard] more robust engine cloud FTUX (#6980)

Author: joaquim-verges

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

@@ -8,6 +8,7 @@ import CreateServerWallet from "../server-wallets/components/create-server-walle
 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 { deleteUserAccessToken } from "./utils";
 
 interface Props {
   managementAccessToken: string | undefined;
@@ -78,6 +79,11 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     props.teamSlug,
   ]);
 
+  const isComplete = useMemo(
+    () => finalSteps.every((step) => step.completed),
+    [finalSteps],
+  );
+
   if (props.testTxWithWallet) {
     return (
       <SendTestTransaction
@@ -90,10 +96,11 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     );
   }
 
-  if (finalSteps.length === 1) {
+  if (finalSteps.length === 0 || isComplete) {
+    // clear token from local storage after FTUX is complete
+    deleteUserAccessToken(props.project.id);
     return null;
   }
-
   return (
     <StepsCard title="Setup Your Engine" steps={finalSteps} delay={1000} />
   );

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

@@ -30,6 +30,7 @@ import { CopyTextButton } from "../../../../../../../../@/components/ui/CopyText
 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";
+import { deleteUserAccessToken, getUserAccessToken } from "./utils";
 
 const formSchema = z.object({
   accessToken: z.string().min(1, "Access token is required"),
@@ -53,10 +54,13 @@ export function SendTestTransaction(props: {
   const router = useDashboardRouter();
   const trackEvent = useTrack();
 
+  const userAccessToken =
+    props.userAccessToken ?? getUserAccessToken(props.project.id) ?? "";
+
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      accessToken: props.userAccessToken ?? "",
+      accessToken: userAccessToken,
       walletIndex:
         props.wallets && props.walletId
           ? props.wallets
@@ -147,7 +151,7 @@ export function SendTestTransaction(props: {
         )}
         <p className="flex items-center gap-2 text-sm text-warning-text">
           <LockIcon className="h-4 w-4" />
-          {props.userAccessToken
+          {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>
@@ -157,12 +161,12 @@ export function SendTestTransaction(props: {
           <div className="flex-grow">
             <div className="flex flex-col gap-2">
               <p className="text-sm">Vault Access Token</p>
-              {props.userAccessToken ? (
+              {userAccessToken ? (
                 <div className="flex flex-col gap-2 ">
                   <CopyTextButton
                     copyIconPosition="right"
-                    textToCopy={props.userAccessToken}
-                    textToShow={props.userAccessToken}
+                    textToCopy={userAccessToken}
+                    textToShow={userAccessToken}
                     tooltip="Copy Vault Access Token"
                     className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
                   />
@@ -175,7 +179,7 @@ export function SendTestTransaction(props: {
               ) : (
                 <Input
                   id="access-token"
-                  type={props.userAccessToken ? "text" : "password"}
+                  type={userAccessToken ? "text" : "password"}
                   placeholder="vt_act_1234....ABCD"
                   {...form.register("accessToken")}
                   disabled={isLoading}
@@ -287,6 +291,8 @@ export function SendTestTransaction(props: {
                 } else {
                   router.refresh();
                 }
+                // clear token from local storage after FTUX is complete
+                deleteUserAccessToken(props.project.id);
               }}
             >
               {props.walletId ? "Close" : "Complete Setup"}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/utils.ts

@@ -0,0 +1,18 @@
+export function storeUserAccessToken(projectId: string, accessToken: string) {
+  localStorage.setItem(
+    `thirdweb:engine-cloud-user-access-token-${projectId}`,
+    accessToken,
+  );
+}
+
+export function getUserAccessToken(projectId: string) {
+  return localStorage.getItem(
+    `thirdweb:engine-cloud-user-access-token-${projectId}`,
+  );
+}
+
+export function deleteUserAccessToken(projectId: string) {
+  localStorage.removeItem(
+    `thirdweb:engine-cloud-user-access-token-${projectId}`,
+  );
+}

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

@@ -19,6 +19,7 @@ import { CheckIcon, DownloadIcon, Loader2Icon, LockIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { useTrack } from "../../../../../../../../../hooks/analytics/useTrack";
+import { storeUserAccessToken } from "../../analytics/utils";
 import {
   createManagementAccessToken,
   createWalletAccessToken,
@@ -86,6 +87,11 @@ export default function CreateVaultAccountButton(props: {
         throw new Error("Failed to create access token");
       }
 
+      // save in local storage in case the user refreshes the page during FTUX
+      storeUserAccessToken(
+        props.project.id,
+        userAccessTokenRes.data.accessToken,
+      );
       props.onUserAccessTokenCreated?.(userAccessTokenRes.data.accessToken);
 
       return {