feat: Add smart backend wallet types

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)" },
 ];