[Dashboard] Add error handling and refactor vault account rotation (#7592)

Author: joaquim-verges

apps/dashboard/src/@/components/project/create-project-modal/index.tsx

@@ -67,6 +67,12 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
         await createVaultAccountAndAccessToken({
           project: res.project,
           projectSecretKey: res.secret,
+        }).catch((error) => {
+          console.error(
+            "Failed to create vault account and access token",
+            error,
+          );
+          throw error;
         });
         return {
           project: res.project,

apps/dashboard/src/@/hooks/useApi.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useActiveAccount } from "thirdweb/react";
 import { apiServerProxy } from "@/actions/proxies";
 import type { Project } from "@/api/projects";
-import { createVaultAccountAndAccessToken } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client";
+import { rotateVaultAccountAndAccessToken } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client";
 import { accountKeys, authorizedWallets } from "../query-keys/cache-keys";
 
 // FIXME: We keep repeating types, API server should provide them
@@ -331,12 +331,17 @@ export async function rotateSecretKeyClient(params: { project: Project }) {
   }
 
   try {
-    // if the project has a vault admin key, rotate it as well
-    await createVaultAccountAndAccessToken({
-      project: params.project,
-      projectSecretKey: res.data.data.secret,
-      projectSecretHash: res.data.data.secretHash,
-    });
+    // if the project has an encrypted vault admin key, rotate it as well
+    const service = params.project.services.find(
+      (service) => service.name === "engineCloud",
+    );
+    if (service?.encryptedAdminKey) {
+      await rotateVaultAccountAndAccessToken({
+        project: params.project,
+        projectSecretKey: res.data.data.secret,
+        projectSecretHash: res.data.data.secretHash,
+      });
+    }
   } catch (error) {
     console.error("Failed to rotate vault admin key", error);
   }

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

@@ -1,11 +1,8 @@
 "use client";
-import Link from "next/link";
 import { useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { Project } from "@/api/projects";
 import { type Step, StepsCard } from "@/components/blocks/StepsCard";
-import { Button } from "@/components/ui/button";
-import { CreateVaultAccountButton } from "../../vault/components/create-vault-account.client";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import { SendTestTransaction } from "./send-test-tx.client";
@@ -97,27 +94,6 @@ export const EngineChecklist: React.FC<Props> = (props) => {
   );
 };
 
-function CreateVaultAccountStep(props: {
-  project: Project;
-  teamSlug: string;
-  onUserAccessTokenCreated: (userAccessToken: string) => void;
-}) {
-  return (
-    <div className="mt-4 flex flex-row gap-4">
-      <CreateVaultAccountButton project={props.project} />
-      <Button asChild variant="outline">
-        <Link
-          href="https://portal.thirdweb.com/vault"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more about Vault
-        </Link>
-      </Button>
-    </div>
-  );
-}
-
 function CreateServerWalletStep(props: {
   project: Project;
   teamSlug: string;