feat: improve keystore connect dialog (#1587)

* fix: resolve missing dependencies issue, set exact=true in bunfig.toml

* feat: set up the dialog components for keystore

* feat: add tabs from shadcn/ui, improve dialog footer layout

* feat: restore and refactor some of the keystore connect implementation

* feat: add shadcn/ui components for implementing rich forms

* feat: move keystore connection state outside of swapkit context, use react-hook-form for WalletKeystoreConnectDialog

* feat: add loading states, move file input onChange handler outside of jsx

* chore: reorder imports

* feat: show new keystore connect dialog on keystore click

* chore: remove old keystore dialog, remove dialog components outside of the scope

* chore: update bun.lock

* feat: tweak dialog styles to handle edge cases

* feat: add missing variables, handle styling edge cases

Author: Drakeoon

bun.lock

@@ -6,19 +6,16 @@
     "@swapkit/tokens": "workspace:*",
     "@swapkit/types": "workspace:*",
     "ethers": "^6.14.0",
-    "ts-pattern": "^5.9.0",
+    "ts-pattern": "5.9.0",
     "zod": "3.25.74",
-    "zustand": "^5.0.0"
+    "zustand": "5.0.8"
   },
   "description": "SwapKit - Helpers",
   "devDependencies": {
     "@near-js/providers": "2.5.0",
     "@swapkit/toolboxes": "workspace:*",
     "ethers": "6.15.0",
-    "tronweb": "6.1.0",
-    "ts-pattern": "5.9.0",
-    "zod": "3.25.74",
-    "zustand": "5.0.8"
+    "tronweb": "6.1.0"
   },
   "exports": {
     ".": {

packages/helpers/package.json

@@ -1,6 +1,7 @@
 {
   "author": "swapkit-oss",
   "dependencies": {
+    "@hookform/resolvers": "5.2.2",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-alert-dialog": "1.1.15",
     "@radix-ui/react-checkbox": "1.3.3",
@@ -23,15 +24,16 @@
     "clsx": "2.1.1",
     "lucide-react": "0.552.0",
     "react": "19.1.1",
+    "react-hook-form": "7.65.0",
     "sonner": "2.0.7",
     "tailwind-merge": "3.3.1",
     "tailwindcss": "3.4.18",
     "tailwindcss-animate": "1.0.7",
-    "ts-pattern": "^5.9.0",
-    "zustand": "^5.0.0"
+    "ts-pattern": "5.9.0",
+    "zod": "3.25.74",
+    "zustand": "5.0.8"
   },
   "description": "SwapKit - UI",
-  "devDependencies": { "ts-pattern": "5.9.0", "zustand": "5.0.8" },
   "exports": {
     ".": {
       "bun": "./src/index.ts",

packages/ui/package.json

@@ -16,7 +16,7 @@ export function ChainIcon({ chain, className }: ChainIconProps) {
 
   if (!iconUrl) {
     return (
-      <div className={cn("flex items-center justify-center rounded-full bg-accent font-medium text-xs", className)}>
+      <div className={cn("flex items-center justify-center rounded-full bg-card font-medium text-xs", className)}>
         {chain?.slice(0, 2)}
       </div>
     );

packages/ui/src/react/components/chain-icon.tsx

@@ -136,7 +136,7 @@ export function SwapAssetSelect({
           </div>
         </div>
 
-        <DialogFooter className="mt-2 flex max-h-[clamp(16rem,50svh,32rem)] flex-col">
+        <DialogFooter className="mt-2 max-h-[clamp(16rem,50svh,32rem)] overflow-y-auto overflow-x-hidden">
           {match({ assets, isWalletConnected })
             .with({ isWalletConnected: false }, () => (
               <div className="flex h-40 flex-col items-center justify-center gap-1">
@@ -158,7 +158,7 @@ export function SwapAssetSelect({
               ),
             )
             .otherwise(() => (
-              <div className="-mx-6 flex flex-col overflow-y-auto overflow-x-hidden px-6">
+              <div className="flex w-auto flex-1 flex-col">
                 {assets?.slice(0, 100)?.map((asset) => {
                   const assetIdentifier = asset.toString();
 

packages/ui/src/react/components/composable/swap-asset-select.tsx

@@ -7,13 +7,14 @@ import { SearchIcon, WalletMinimalIcon } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { match, P } from "ts-pattern";
-import { useModal } from "../../hooks/use-modal";
+import { showModal, useModal } from "../../hooks/use-modal";
 import { useSwapKit } from "../../swapkit-context";
 import { Button } from "../ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { SWAPKIT_WIDGET_TOASTER_ID } from "../ui/sonner";
 import { WalletIcon } from "../wallet-icon";
+import { WalletKeystoreConnectDialog } from "./wallet-keystore-connect-dialog";
 
 const WALLET_GROUPS = {
   "Browser Extensions": [
@@ -190,7 +191,7 @@ const FEATURED_WALLETS = [
   WalletOption.METAMASK,
   WalletOption.CTRL,
   WalletOption.COINBASE_WEB,
-  WalletOption.PHANTOM,
+  WalletOption.KEYSTORE,
   WalletOption.LEDGER,
   WalletOption.TREZOR,
   WalletOption.BRAVE,
@@ -200,7 +201,6 @@ const FEATURED_WALLETS = [
 export function WalletConnectDialog() {
   const modal = useModal();
   const [isShowingAllWallets, setIsShowingAllWallets] = useState(false);
-
   const [searchQuery, setSearchQuery] = useState("");
 
   const filteredWalletGroups = useMemo(() => {
@@ -292,11 +292,31 @@ function WalletConnectButton({ wallet }: { wallet: WalletOption }) {
   const { connectWallet, isConnectingWallet, walletType } = useSwapKit();
   const modal = useModal();
 
-  const handleButtonClick = useCallback(async () => {
+  const handleWalletClick = useCallback(async () => {
     try {
-      await connectWallet(wallet, [Chain.Cosmos, Chain.Maya, Chain.THORChain, Chain.Kujira] as Chain[]);
+      const chainsForWallet = availableChainsByWallet?.[wallet] as Chain[];
+
+      if (!chainsForWallet || chainsForWallet?.length === 0) {
+        toast.error("This wallet does not support any chains", {
+          description: "Please try a different wallet.",
+          toasterId: SWAPKIT_WIDGET_TOASTER_ID,
+        });
+        return;
+      }
+
+      await match(wallet)
+        .with(WalletOption.KEYSTORE, async () => {
+          const { confirmed } = await showModal(<WalletKeystoreConnectDialog />);
+
+          if (!confirmed) return;
+
+          modal.resolve({ confirmed: true, data: wallet });
+        })
+        .otherwise(async () => {
+          await connectWallet(wallet, chainsForWallet);
 
-      modal.resolve({ confirmed: true, data: wallet });
+          modal.resolve({ confirmed: true, data: wallet });
+        });
     } catch {
       toast.error("Failed to connect your wallet", {
         description: "Make sure your wallet is connected and accessible by the browser.",
@@ -315,7 +335,7 @@ function WalletConnectButton({ wallet }: { wallet: WalletOption }) {
       className="flex aspect-[1.525/1] h-full w-full flex-col items-center justify-center gap-1"
       isLoading={isConnectingWallet && walletType === wallet}
       key={`wallet-connect-button-${wallet}`}
-      onClick={handleButtonClick}>
+      onClick={handleWalletClick}>
       <WalletIcon className="size-5" wallet={wallet} />
 
       <span className="text-foreground text-sm">{walletName}</span>