feat: Support connecting to a specified wallet

.changeset/small-numbers-compare.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Support connecting to a specified wallet

packages/walletkit/__dev__/App.tsx

@@ -1,4 +1,10 @@
-import { ConnectModal, useConnectModal, WalletKitConfig, WalletKitProvider } from '@/core/index';
+import {
+  ConnectModal,
+  useConnectModal,
+  useWalletKit,
+  WalletKitConfig,
+  WalletKitProvider,
+} from '@/core/index';
 import './style.css';
 import VConsole from 'vconsole';
 import {
@@ -80,6 +86,7 @@ function ConnectButton() {
 
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
+  const { connect } = useWalletKit();
 
   if (address) {
     return (
@@ -91,15 +98,27 @@ function ConnectButton() {
   }
 
   return (
-    <button
-      onClick={() =>
-        onOpen({
-          action: 'add-network',
-          initialChainId: 1,
-        })
-      }
-    >
-      connect
-    </button>
+    <>
+      <button
+        onClick={() =>
+          onOpen({
+            action: 'add-network',
+            initialChainId: 1,
+          })
+        }
+      >
+        connect
+      </button>
+      <button
+        onClick={() => {
+          connect({
+            walletId: 'metaMask',
+            initialChainId: 1,
+          });
+        }}
+      >
+        connect metaMask
+      </button>
+    </>
   );
 }

packages/walletkit/src/core/index.ts

@@ -8,9 +8,14 @@ export * from '@/core/base/utils/css';
 export { type BaseWallet } from '@/core/configs/types';
 export * from '@/core/providers/WalletKitProvider';
 
-export { type WalletKitConfig, useWallets } from '@/core/providers/WalletKitProvider/context';
+export { type WalletKitConfig, useWalletKit } from '@/core/providers/WalletKitProvider/context';
 
 export * from '@/core/modals/EmbeddedConnectModal';
 
 export * from '@/core/modals/ConnectModal';
 export { useConnectModal } from '@/core/modals/ConnectModal/context';
+
+export { type ColorMode } from '@/core/providers/ThemeProvider/context';
+export { type Theme } from '@/core/providers/ThemeProvider';
+
+export * from '@/core/providers/WalletKitProvider';

packages/walletkit/src/core/modals/ConnectModal/ConnectorsView/index.tsx

@@ -5,11 +5,11 @@ import { cx } from '@/core/base/utils/css';
 import { GridLayout } from './GridLayout';
 import { ListLayout } from './ListLayout';
 import { clsDisclaimer } from './styles.css';
-import { useAppearance, useWallets } from '@/core/providers/WalletKitProvider/context';
+import { useAppearance, useWalletKit } from '@/core/providers/WalletKitProvider/context';
 
 export function ConnectorsView() {
   const appearance = useAppearance();
-  const { wallets } = useWallets();
+  const { wallets } = useWalletKit();
   const { isMobileLayout } = useResponsive();
 
   const visibleWallets = wallets.filter((item) => item.isVisible !== false);

packages/walletkit/src/core/providers/ThemeProvider/index.tsx

@@ -6,7 +6,7 @@ import { ColorMode, ThemeContext } from './context';
 
 type ThemeWithMode = typeof base;
 
-type Theme = DeepPartial<ThemeWithMode['light']> & DeepPartial<ThemeWithMode>;
+export type Theme = DeepPartial<ThemeWithMode['light']> & DeepPartial<ThemeWithMode>;
 
 type ThemeVariant = 'base';
 

packages/walletkit/src/core/providers/WalletKitProvider/context.ts

@@ -2,7 +2,10 @@ import { ThemeProviderProps } from '../ThemeProvider';
 import React, { useContext } from 'react';
 import { EvmConfig } from '@/evm/utils/evmConfig';
 import { SolanaConfig } from '@/solana/utils/solanaConfig';
-import { BaseWallet, WalletType } from '@/core/configs/types';
+import { BaseWallet } from '@/core/configs/types';
+import { useEvmConnect } from '@/evm/hooks/useEvmConnect';
+import { useConnectors } from 'wagmi';
+import { toast } from '@/core/base/components/toast';
 
 export type Action = 'add-network' | undefined;
 
@@ -109,18 +112,32 @@ export function useSelectedWallet() {
   };
 }
 
-export function useWallets(walletType?: WalletType) {
+export function useWalletKit() {
   const { wallets, setWallets } = useContext(WalletKitContext);
 
-  if (walletType) {
-    return {
-      wallets: wallets.filter((item) => item.walletType === walletType),
-      setWallets,
-    };
-  }
+  const { connect } = useEvmConnect();
+  const connectors = useConnectors();
 
   return {
     wallets,
     setWallets,
+
+    connect(options: { walletId: string; initialChainId?: number }) {
+      const { walletId, initialChainId } = options;
+      const wallet = wallets.find((item) => item.id === walletId);
+
+      if (!wallet) {
+        toast.info({
+          description: 'Wallet not found',
+        });
+      } else {
+        const connector = connectors.find((item) => item.id === walletId);
+        if (connector && wallet.isInstalled())
+          connect({
+            connector,
+            chainId: initialChainId,
+          });
+      }
+    },
   };
 }

packages/walletkit/src/evm/components/EvmConnectWithQRCodeView/index.tsx

@@ -1,6 +1,6 @@
 import { ConnectWithQRCode } from '@/core/modals/ConnectModal/ConnectWithQRCode';
 import { useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
-import { useIsConnected } from '@/evm/hooks/useIsConnected';
+import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
 import { useQRCodeUri } from '@/evm/hooks/useQRCodeUri';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
 import { EvmWallet, isWalletConnect } from '@/evm/wallets';
@@ -11,7 +11,7 @@ export function EvmConnectWithQRCodeView() {
   const wcUri = useQRCodeUri();
   const wcModal = useWalletConnectModal();
   const qrCodeUri = wcUri && ((selectedWallet as EvmWallet).getQRCodeUri?.(wcUri) ?? wcUri);
-  const isConnected = useIsConnected();
+  const isConnected = useEvmIsConnected();
 
   return (
     <ConnectWithQRCode

packages/walletkit/src/evm/components/EvmConnectingView/index.tsx

@@ -6,7 +6,7 @@ import {
   useEvmConfig,
   useSelectedWallet,
 } from '@/core/providers/WalletKitProvider/context';
-import { useIsConnected } from '@/evm/hooks/useIsConnected';
+import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
 import { useWalletConnector } from '@/evm/hooks/useWalletConnector';
 import { useEvmConnect } from '@/evm/hooks/useEvmConnect';
 import { useState, useCallback } from 'react';
@@ -16,7 +16,7 @@ export function EvmConnectingView() {
   const { action } = useAction();
   const { selectedWallet } = useSelectedWallet();
 
-  const isConnected = useIsConnected();
+  const isConnected = useEvmIsConnected();
   const selectedConnector = useWalletConnector(selectedWallet.id);
   const { initialChainId } = useEvmConfig();
 

packages/walletkit/src/evm/hooks/useIsConnected.ts → packages/walletkit/src/evm/hooks/useEvmIsConnected.ts

@@ -1,6 +1,6 @@
 import { useAccount } from 'wagmi';
 
-export function useIsConnected() {
+export function useEvmIsConnected() {
   const { address } = useAccount();
   return !!address;
 }

packages/walletkit/src/evm/hooks/useQRCodeUri.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useConnect } from 'wagmi';
 import { useWalletConnectConnector } from './useWalletConnectConnector';
-import { useIsConnected } from './useIsConnected';
+import { useEvmIsConnected } from './useEvmIsConnected';
 import { useEventConfig, useLogger } from '@/core/providers/WalletKitProvider/context';
 import { evmCommonErrorHandler } from '../utils/evmCommonErrorHandler';
 import { getEvmGlobalData } from '../globalData';
@@ -16,7 +16,7 @@ export function useQRCodeUri() {
   const [wcUri, setWcUri] = useState<string>('');
 
   const connector = useWalletConnectConnector();
-  const isConnected = useIsConnected();
+  const isConnected = useEvmIsConnected();
 
   useEffect(() => {
     if (isConnected || !connector) return;