From cc47b7bca4ec0121f7803f83ef914b3e04aa8d86 Mon Sep 17 00:00:00 2001 From: arcoraven Date: Tue, 5 Nov 2024 08:09:01 +0000 Subject: [PATCH] feat: Add smart backend wallet types (#5303) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://linear.app/thirdweb/issue/INFRA-404/add-sbw-to-dashboard --- ## 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>`. - 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}` --- .../src/@3rdweb-sdk/react/hooks/useEngine.ts | 3 +- .../components/engine-wallet-config.tsx | 11 +++-- .../overview/create-backend-wallet-button.tsx | 47 ++++++++++++++----- apps/dashboard/src/lib/engine.ts | 11 ++++- 4 files changed, 54 insertions(+), 18 deletions(-) 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<