feat: Add smart backend wallet types (#5303)

https://linear.app/thirdweb/issue/INFRA-404/add-sbw-to-dashboard

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the backend wallet functionality within the application. It introduces new wallet types, updates wallet configuration handling, and refines the user interface for better usability.

### Detailed summary
- Added `"SMART_BACKEND_WALLETS"` to the wallet type constants.
- Introduced new `EngineBackendWalletType` options for smart wallets.
- Updated `EngineBackendWalletOptions` with smart wallet configurations.
- Changed `tabContent` to use `Partial<Record<EngineBackendWalletType, React.ReactNode>>`.
- Enhanced wallet type selection logic based on smart wallet support.
- Added `FormDescription` to provide information on backend wallet types.
- Updated form validation to include smart wallet configurations.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: arcoraven

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -116,7 +116,8 @@ type EngineFeature =
   | "KEYPAIR_AUTH"
   | "CONTRACT_SUBSCRIPTIONS"
   | "IP_ALLOWLIST"
-  | "HETEROGENEOUS_WALLET_TYPES";
+  | "HETEROGENEOUS_WALLET_TYPES"
+  | "SMART_BACKEND_WALLETS";
 
 interface EngineSystemHealth {
   status: string;

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx

@@ -27,11 +27,12 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
 }) => {
   const { data: walletConfig } = useEngineWalletConfig(instance.url);
 
-  const tabContent: Record<EngineBackendWalletType, React.ReactNode> = {
-    local: <LocalConfig />,
-    "aws-kms": <KmsAwsConfig instance={instance} />,
-    "gcp-kms": <KmsGcpConfig instance={instance} />,
-  } as const;
+  const tabContent: Partial<Record<EngineBackendWalletType, React.ReactNode>> =
+    {
+      local: <LocalConfig />,
+      "aws-kms": <KmsAwsConfig instance={instance} />,
+      "gcp-kms": <KmsGcpConfig instance={instance} />,
+    } as const;
 
   const [activeTab, setActiveTab] = useState<EngineBackendWalletType>("local");
 

apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx

@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Form } from "@/components/ui/form";
+import { Form, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -50,6 +50,11 @@ export const CreateBackendWalletButton: React.FC<
     instance.url,
     "HETEROGENEOUS_WALLET_TYPES",
   );
+  const { isSupported: supportsSmartBackendWallets } = useHasEngineFeature(
+    instance.url,
+    "SMART_BACKEND_WALLETS",
+  );
+
   const [isOpen, setIsOpen] = useState(false);
   const createWallet = useEngineCreateBackendWallet(instance.url);
   const trackEvent = useTrack();
@@ -93,17 +98,22 @@ export const CreateBackendWalletButton: React.FC<
   invariant(selectedOption, "Selected a valid backend wallet type.");
 
   // List all wallet types only if Engine is updated to support it.
-  const walletTypeOptions = supportsMultipleWalletTypes
-    ? EngineBackendWalletOptions
-    : [selectedOption];
+  let walletTypeOptions = [selectedOption];
+  if (supportsSmartBackendWallets) {
+    walletTypeOptions = EngineBackendWalletOptions;
+  } else if (supportsMultipleWalletTypes) {
+    walletTypeOptions = EngineBackendWalletOptions.filter(
+      ({ key }) => !key.startsWith("smart:"),
+    );
+  }
 
   const isAwsKmsConfigured = !!walletConfig.awsAccessKeyId;
   const isGcpKmsConfigured = !!walletConfig.gcpKmsKeyRingId;
 
-  const isFormValid =
-    walletType === "local" ||
-    (walletType === "aws-kms" && isAwsKmsConfigured) ||
-    (walletType === "gcp-kms" && isGcpKmsConfigured);
+  const isNotConfigured =
+    (["aws-kms", "smart:aws-kms"].includes(walletType) &&
+      !isAwsKmsConfigured) ||
+    (["gcp-kms", "smart:gcp-kms"].includes(walletType) && !isGcpKmsConfigured);
 
   return (
     <>
@@ -153,6 +163,17 @@ export const CreateBackendWalletButton: React.FC<
                         </SelectGroup>
                       </SelectContent>
                     </Select>
+
+                    <FormDescription className="py-2">
+                      Learn more about{" "}
+                      <Link
+                        href="https://portal.thirdweb.com/engine/features/backend-wallets"
+                        className="text-link-foreground hover:text-foreground"
+                      >
+                        backend wallet types
+                      </Link>
+                      .
+                    </FormDescription>
                   </FormFieldSetup>
 
                   {(walletType === "aws-kms" && !isAwsKmsConfigured) ||
@@ -185,14 +206,14 @@ export const CreateBackendWalletButton: React.FC<
                           ?.message
                       }
                       htmlFor="wallet-label"
-                      isRequired={false}
+                      isRequired
                       tooltip={null}
                     >
                       <Input
                         id="wallet-label"
                         type="text"
                         placeholder="A description to identify this backend wallet"
-                        {...form.register("label")}
+                        {...form.register("label", { required: true })}
                       />
                     </FormFieldSetup>
                   )}
@@ -206,7 +227,11 @@ export const CreateBackendWalletButton: React.FC<
                 <Button
                   type="submit"
                   className="min-w-28 gap-2"
-                  disabled={!isFormValid || createWallet.isPending}
+                  disabled={
+                    !form.formState.isValid ||
+                    isNotConfigured ||
+                    createWallet.isPending
+                  }
                 >
                   {createWallet.isPending && <Spinner className="size-4" />}
                   Create

apps/dashboard/src/lib/engine.ts

@@ -1,4 +1,10 @@
-export type EngineBackendWalletType = "local" | "aws-kms" | "gcp-kms";
+export type EngineBackendWalletType =
+  | "local"
+  | "aws-kms"
+  | "gcp-kms"
+  | "smart:local"
+  | "smart:aws-kms"
+  | "smart:gcp-kms";
 
 export const EngineBackendWalletOptions: {
   key: EngineBackendWalletType;
@@ -7,4 +13,7 @@ export const EngineBackendWalletOptions: {
   { key: "local", name: "Local" },
   { key: "aws-kms", name: "AWS KMS" },
   { key: "gcp-kms", name: "Google Cloud KMS" },
+  { key: "smart:local", name: "Smart (Local)" },
+  { key: "smart:aws-kms", name: "Smart (AWS KMS)" },
+  { key: "smart:gcp-kms", name: "Smart (Google Cloud KMS)" },
 ];