diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts index 28e88c9e4d8..2dda15b04eb 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts +++ b/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; diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx index 1d4bfe5b519..9b252de0faa 100644 --- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx +++ b/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 = ({ }) => { const { data: walletConfig } = useEngineWalletConfig(instance.url); - const tabContent: Record = { - local: , - "aws-kms": , - "gcp-kms": , - } as const; + const tabContent: Partial> = + { + local: , + "aws-kms": , + "gcp-kms": , + } as const; const [activeTab, setActiveTab] = useState("local"); diff --git a/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx b/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx index 725db3cef92..95ff56948b5 100644 --- a/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx +++ b/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< + + + Learn more about{" "} + + backend wallet types + + . + {(walletType === "aws-kms" && !isAwsKmsConfigured) || @@ -185,14 +206,14 @@ export const CreateBackendWalletButton: React.FC< ?.message } htmlFor="wallet-label" - isRequired={false} + isRequired tooltip={null} > )} @@ -206,7 +227,11 @@ export const CreateBackendWalletButton: React.FC<