addressed feedback

Author: joaquim-verges

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

@@ -1,11 +1,9 @@
 "use client";
 import type { Project } from "@/api/projects";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import { Button } from "../../../../../../../@/components/ui/button";
-import { maskSecret } from "../lib/vault.client";
 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";
@@ -26,7 +24,7 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     steps.push({
       title: "Create a Vault Admin Account",
       description:
-        "Your Vault admin account will be used to create server wallets and manage access tokens.",
+        "Vault is thirdweb's key management system. It allows you to create secure server wallets and manage access tokens.",
       children: (
         <CreateVaultAccountStep
           project={props.project}
@@ -39,7 +37,7 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     steps.push({
       title: "Create a Server Wallet",
       description:
-        "Your server wallet will be used to send transactions to Engine.",
+        "Server wallets are smart wallets, they don't require any gas funds to send transactions.",
       children: (
         <CreateServerWalletStep
           project={props.project}
@@ -52,37 +50,17 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     });
     steps.push({
       title: "Send a Test Transaction",
-      description: "Send a test transaction to see Engine in action.",
+      description:
+        "Engine handles gas fees, and is designed for scale, speed and security. Send a test transaction to see it in action",
       children: (
-        <>
-          <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}
-          />
-        </>
+        <SendTestTransaction
+          wallets={props.wallets}
+          project={props.project}
+          userAccessToken={userAccessToken}
+        />
       ),
       completed: props.hasTransactions,
-      showIncompleteChildren: true,
+      showIncompleteChildren: false,
       showCompletedChildren: false,
     });
     return steps;
@@ -108,26 +86,14 @@ function CreateVaultAccountStep(props: {
   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">
-        Let's get you set up with Vault.
-      </p>
-      <div className="h-2" />
-      <p className="text-muted-foreground text-sm">
-        To use Engine, you will need to manage one or more server wallets.
-        Server wallets are secured and accessed through Vault, thirdweb's key
-        management system.
-      </p>
-      <div className="h-6" />
-      <div className="flex flex-row justify-end gap-4">
-        <Link href="https://portal.thirdweb.com/engine/vault" target="_blank">
-          <Button variant="outline">Learn more about Vault</Button>
-        </Link>
-        <CreateVaultAccountButton
-          project={props.project}
-          onUserAccessTokenCreated={props.onUserAccessTokenCreated}
-        />
-      </div>
+    <div className="mt-4 flex flex-row gap-4">
+      <CreateVaultAccountButton
+        project={props.project}
+        onUserAccessTokenCreated={props.onUserAccessTokenCreated}
+      />
+      <Link href="https://portal.thirdweb.com/engine/vault" target="_blank">
+        <Button variant="outline">Learn more about Vault</Button>
+      </Link>
     </div>
   );
 }
@@ -137,22 +103,11 @@ function CreateServerWalletStep(props: {
   managementAccessToken: string | undefined;
 }) {
   return (
-    <div className="mt-4 flex flex-col rounded-md border bg-background p-4">
-      <p className="font-medium text-primary-foreground text-sm">
-        Now, let's create a server wallet.
-      </p>
-      <div className="h-2" />
-      <p className="text-muted-foreground text-sm">
-        Server wallets are smart wallets, they don't require any gas funds to
-        send transactions.
-      </p>
-      <div className="h-6" />
-      <div className="flex flex-row justify-end gap-4">
-        <CreateServerWallet
-          project={props.project}
-          managementAccessToken={props.managementAccessToken}
-        />
-      </div>
+    <div className="mt-4 flex flex-row gap-4">
+      <CreateServerWallet
+        project={props.project}
+        managementAccessToken={props.managementAccessToken}
+      />
     </div>
   );
 }

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

@@ -20,6 +20,12 @@ import { Loader2, LockIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import {
+  arbitrumSepolia,
+  baseSepolia,
+  optimismSepolia,
+  sepolia,
+} from "thirdweb/chains";
 import { shortenAddress } from "thirdweb/utils";
 import * as z from "zod";
 import type { Wallet } from "../server-wallets/wallet-table/types";
@@ -35,6 +41,7 @@ type FormValues = z.infer<typeof formSchema>;
 export function SendTestTransaction(props: {
   wallets?: Wallet[];
   project: Project;
+  userAccessToken?: string;
   expanded?: boolean;
 }) {
   const thirdwebClient = useThirdwebClient();
@@ -45,7 +52,7 @@ export function SendTestTransaction(props: {
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      accessToken: "",
+      accessToken: props.userAccessToken ?? "",
       walletIndex: "0",
       chainId: 84532,
     },
@@ -120,19 +127,10 @@ export function SendTestTransaction(props: {
 
   return (
     <div className="mt-3 w-full rounded-md border bg-background p-6">
-      <p className="font-medium text-foreground text-sm">
-        Engine is designed to scale, gas-free, fast, and secure. <br />
-      </p>
-      <div className="h-2" />
-      <p className="text-muted-foreground text-sm">
-        Fire up many test transactions and watch the table below to see how it
-        performs!
-      </p>
-      <div className="h-4" />
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <p className="flex items-center gap-2 text-sm text-warning-text">
-          <LockIcon className="h-4 w-4" /> This action requires your vault
-          access token.
+          <LockIcon className="h-4 w-4" />
+          Every wallet action requires your Vault access token.
         </p>
         <div className="h-4" />
         {/* Responsive container */}
@@ -142,12 +140,21 @@ export function SendTestTransaction(props: {
               <p className="text-sm">Vault Access Token</p>
               <Input
                 id="access-token"
-                type="password"
+                type={props.userAccessToken ? "text" : "password"}
                 placeholder="vt_act_1234....ABCD"
                 {...form.register("accessToken")}
                 disabled={isLoading}
                 className="text-xs"
               />
+              {props.userAccessToken && (
+                <div className="flex flex-col gap-2 ">
+                  <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.
+                  </p>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -205,6 +212,32 @@ export function SendTestTransaction(props: {
               <p className="text-sm">Network</p>
               <SingleNetworkSelector
                 className="bg-background"
+                chainIds={[
+                  baseSepolia.id,
+                  optimismSepolia.id,
+                  arbitrumSepolia.id,
+                  sepolia.id,
+                  1301,
+                  1946,
+                  1993,
+                  919,
+                  6342,
+                  10143,
+                  44787,
+                  80002,
+                  80069,
+                  98985,
+                  128123,
+                  167009,
+                  168587773,
+                  37714555429,
+                  1952959480,
+                  97,
+                  296,
+                  1740,
+                  4202,
+                  10200,
+                ]}
                 client={thirdwebClient}
                 chainId={form.watch("chainId")}
                 onChange={(chainId) => {
@@ -216,20 +249,9 @@ export function SendTestTransaction(props: {
         </div>
         <div className="h-6" />
         <div className="flex flex-col gap-2 md:flex-row md:justify-end md:gap-2">
-          {hasSentTx && (
-            <Button
-              variant="outline"
-              className="w-full md:w-auto"
-              onClick={() => {
-                router.refresh();
-              }}
-            >
-              Complete Setup
-            </Button>
-          )}
           <Button
             type="submit"
-            variant="primary"
+            variant={hasSentTx ? "secondary" : "primary"}
             disabled={isLoading || !form.formState.isValid}
             className="w-full min-w-[200px] md:w-auto"
           >
@@ -242,6 +264,17 @@ export function SendTestTransaction(props: {
               <>{hasSentTx ? "Send More Transactions" : "Send Transaction"}</>
             )}
           </Button>
+          {hasSentTx && (
+            <Button
+              variant="primary"
+              className="w-full md:w-auto"
+              onClick={() => {
+                router.refresh();
+              }}
+            >
+              Complete Setup
+            </Button>
+          )}
         </div>
       </form>
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/explorer/page.tsx

@@ -9,6 +9,7 @@ export default function TransactionsExplorerPage() {
       <ApiReferenceReact
         configuration={{
           url: `${THIRDWEB_ENGINE_CLOUD_URL}/openapi`,
+          hideModels: true,
           servers: [
             {
               url: THIRDWEB_ENGINE_CLOUD_URL,

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

@@ -12,7 +12,7 @@ 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 { Loader2, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { initVaultClient } from "../../lib/vault.client";
@@ -90,7 +90,16 @@ export default function CreateServerWallet(props: {
         }
         className="flex flex-row items-center gap-2"
       >
-        {props.managementAccessToken ? "Create Server Wallet" : "Get Started"}
+        {isLoading ? (
+          <Loader2 className="animate-spin" />
+        ) : (
+          <WalletIcon className="size-4" />
+        )}
+        {props.managementAccessToken
+          ? isLoading
+            ? "Creating..."
+            : "Create Server Wallet"
+          : "Get Started"}
       </Button>
 
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/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 { Loader2, LockIcon } from "lucide-react";
+import { CheckIcon, DownloadIcon, Loader2, LockIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import {
@@ -132,14 +132,6 @@ export default function CreateVaultAccountButton(props: {
     router.refresh();
   };
 
-  const handlePrimaryButton = () => {
-    if (!keysDownloaded) {
-      handleDownloadKeys();
-      return;
-    }
-    handleCloseModal();
-  };
-
   const isLoading = initialiseProjectWithVaultMutation.isPending;
 
   return (
@@ -244,6 +236,22 @@ export default function CreateVaultAccountButton(props: {
                     as they provide access to your server wallets.
                   </AlertDescription>
                   <div className="h-4" />
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="link"
+                      onClick={handleDownloadKeys}
+                      className="flex h-auto items-center gap-2 p-0 text-sm text-success-text"
+                    >
+                      <DownloadIcon className="size-4" />
+                      {keysDownloaded ? "Keys Downloaded" : "Download Keys"}
+                    </Button>
+                    {keysDownloaded && (
+                      <span className="text-success-text text-xs">
+                        <CheckIcon className="size-4" />
+                      </span>
+                    )}
+                  </div>
+                  <div className="h-4" />
                   <CheckboxWithLabel className="text-foreground">
                     <Checkbox
                       checked={keysConfirmed}
@@ -256,11 +264,11 @@ export default function CreateVaultAccountButton(props: {
 
               <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
                 <Button
-                  onClick={handlePrimaryButton}
-                  disabled={keysDownloaded && !keysConfirmed}
+                  onClick={handleCloseModal}
+                  disabled={!keysConfirmed}
                   variant={"primary"}
                 >
-                  {keysDownloaded ? "Close" : "Download Keys"}
+                  Close
                 </Button>
               </div>
             </div>