fix: Engine wallet selector dropdown (#5347)

https://linear.app/thirdweb/issue/INFRA-409/fix-engine-wallet-dropdown-bug-in-dashboard

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the backend wallet management by refining wallet type options and improving the user interface for wallet actions. It introduces restrictions on importing smart backend wallets and updates the icons in the wallet management table.

### Detailed summary
- Added a comment to disallow importing smart backend wallets.
- Filtered `EngineBackendWalletOptions` to exclude keys starting with "smart:".
- Replaced `Trash2Icon` with `PencilIcon` for the edit action in the `BackendWalletsTable`.
- Updated logic for checking wallet configuration to simplify conditions.
- Improved `onValueChange` handler in `CreateBackendWalletButton`.

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

<!-- end pr-codex -->

Author: arcoraven

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx

@@ -31,7 +31,7 @@ import { TWTable } from "components/shared/TWTable";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useActiveChainAsDashboardChain } from "lib/v5-adapter";
-import { DownloadIcon, Trash2Icon, UploadIcon } from "lucide-react";
+import { DownloadIcon, PencilIcon, UploadIcon } from "lucide-react";
 import QRCode from "qrcode";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -164,7 +164,7 @@ export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
         isFetched={isFetched}
         onMenuClick={[
           {
-            icon: <Trash2Icon className="size-4" />,
+            icon: <PencilIcon className="size-4" />,
             text: "Edit",
             onClick: (wallet) => {
               setSelectedBackendWallet(wallet);

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx

@@ -108,13 +108,11 @@ export const CreateBackendWalletButton: React.FC<
     );
   }
 
-  const isAwsKmsConfigured = !!walletConfig.awsAccessKeyId;
-  const isGcpKmsConfigured = !!walletConfig.gcpKmsKeyRingId;
-
   const isNotConfigured =
     (["aws-kms", "smart:aws-kms"].includes(walletType) &&
-      !isAwsKmsConfigured) ||
-    (["gcp-kms", "smart:gcp-kms"].includes(walletType) && !isGcpKmsConfigured);
+      !walletConfig.awsAccessKeyId) ||
+    (["gcp-kms", "smart:gcp-kms"].includes(walletType) &&
+      !walletConfig.gcpKmsKeyRingId);
 
   return (
     <>
@@ -145,10 +143,9 @@ export const CreateBackendWalletButton: React.FC<
                     tooltip={null}
                   >
                     <Select
-                      onValueChange={(value) => {
-                        form.reset();
-                        form.setValue("type", value as EngineBackendWalletType);
-                      }}
+                      onValueChange={(value) =>
+                        form.setValue("type", value as EngineBackendWalletType)
+                      }
                       value={form.watch("type")}
                     >
                       <SelectTrigger>
@@ -177,8 +174,7 @@ export const CreateBackendWalletButton: React.FC<
                     </FormDescription>
                   </FormFieldSetup>
 
-                  {(walletType === "aws-kms" && !isAwsKmsConfigured) ||
-                  (walletType === "gcp-kms" && !isGcpKmsConfigured) ? (
+                  {isNotConfigured ? (
                     // Warning if not configured
                     <Alert variant="warning">
                       <CircleAlertIcon className="size-5" />

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx

@@ -112,8 +112,9 @@ export const ImportBackendWalletButton: React.FC<
   invariant(selectedOption, "Selected a valid backend wallet type.");
 
   // List all wallet types only if Engine is updated to support it.
+  // Disallow importing smart backend wallets.
   const walletTypeOptions = supportsMultipleWalletTypes
-    ? EngineBackendWalletOptions
+    ? EngineBackendWalletOptions.filter(({ key }) => !key.startsWith("smart:"))
     : [selectedOption];
 
   const isAwsKmsConfigured = !!walletConfig.awsAccessKeyId;