feat: Add initialChainId to connectModal

.changeset/shy-tools-rescue.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+feat: Add initialChainId to connectModal

packages/walletkit/__dev__/App.tsx

@@ -21,7 +21,7 @@ import {
   trustWallet as solanaTrustWallet,
   phantomWallet as solanaPhantomWallet,
 } from '@/solana/index';
-import { mainnet } from 'viem/chains';
+import { bsc, mainnet } from 'viem/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 new VConsole();
@@ -37,12 +37,15 @@ const config: WalletKitConfig = {
     closeModalOnEsc: false,
     closeModalOnOverlayClick: false,
     closeModalAfterConnected: true,
+    onChainAlreadyAdded(wallet, chainId) {
+      console.log(wallet, chainId);
+    },
   },
   walletConfig: {
     autoConnect: true,
     evmConfig: {
       initialChainId: 1,
-      chains: [mainnet],
+      chains: [mainnet, bsc],
       wallets: [
         metaMask(),
         trustWallet(),
@@ -76,5 +79,16 @@ export default function App() {
 function ConnectButton() {
   const { onOpen } = useConnectModal();
 
-  return <button onClick={() => onOpen()}>connect</button>;
+  return (
+    <button
+      onClick={() =>
+        onOpen({
+          action: 'add-network',
+          initialChainId: 1,
+        })
+      }
+    >
+      connect
+    </button>
+  );
 }

packages/walletkit/src/core/configs/getDefaultConfig.ts

@@ -14,7 +14,7 @@ export function getDefaultConfig(config: WalletKitConfig) {
       useGridLayoutOnMobile: true,
 
       hideNoWalletCTA: false,
-      hideOfficialWalletConnectCTA: false,
+      hideOfficialWalletConnectCTA: true,
 
       walletDownloadUrl: `https://trustwallet.com/`,
 

packages/walletkit/src/core/modals/ConnectModal/context.ts

@@ -5,6 +5,7 @@ import { Action } from '@/core/providers/WalletKitProvider/context';
 export interface ConnectModalOpenParams {
   action?: Action;
   viewRoute?: ViewRoutes;
+  initialChainId?: number;
 }
 
 export interface ConnectModalContextProps {

packages/walletkit/src/core/modals/ConnectModal/provider.tsx

@@ -1,4 +1,4 @@
-import { useAction } from '@/core/providers/WalletKitProvider/context';
+import { useAction, useInitialChainId } from '@/core/providers/WalletKitProvider/context';
 import { RouteProvider, ViewRoutes } from './RouteProvider';
 import { useMemo } from 'react';
 import { ConnectModalContext, ConnectModalOpenParams } from './context';
@@ -23,6 +23,8 @@ function WithRouter(props: ConnectModalProviderProps) {
   const { children } = props;
 
   const { setAction } = useAction();
+  const { setInitialChainId } = useInitialChainId();
+
   const { isOpen, onClose, onOpen } = useDisclosure();
   const router = useRouter();
 
@@ -37,11 +39,14 @@ function WithRouter(props: ConnectModalProviderProps) {
       },
       onOpen(params: ConnectModalOpenParams = {}) {
         router.push(params.viewRoute ?? ViewRoutes.CONNECTORS);
-        setAction?.(params.action);
+
+        setAction(params.action);
+        setInitialChainId(params.initialChainId);
+
         onOpen();
       },
     };
-  }, [isOpen, onClose, onOpen, router, setAction]);
+  }, [isOpen, onClose, onOpen, router, setAction, setInitialChainId]);
 
   return <ConnectModalContext.Provider value={value}>{children}</ConnectModalContext.Provider>;
 }

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

@@ -62,7 +62,10 @@ export interface WalletKitContextProps {
   setSelectedWallet: (wallet: BaseWallet) => void;
 
   wallets: BaseWallet[];
-  setWallets: (wallets: BaseWallet[]) => void;
+  setWallets: React.Dispatch<React.SetStateAction<BaseWallet[]>>;
+
+  initialChainId?: number;
+  setInitialChainId: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
 export const WalletKitContext = React.createContext({} as WalletKitContextProps);
@@ -79,6 +82,14 @@ export function useAction() {
   };
 }
 
+export function useInitialChainId() {
+  const { initialChainId, setInitialChainId } = useContext(WalletKitContext);
+  return {
+    initialChainId,
+    setInitialChainId,
+  };
+}
+
 export function useSelectedWallet() {
   const { selectedWallet, setSelectedWallet } = useContext(WalletKitContext);
   return {

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

@@ -27,19 +27,28 @@ export function WalletKitProvider(props: WalletKitProviderProps) {
   }, [config.walletConfig?.evmConfig?.wallets, config.walletConfig?.solanaConfig?.wallets]);
 
   const [wallets, setWallets] = useState<BaseWallet[]>(initialWallets);
+  const [initialChainId, setInitialChainId] = useState<number | undefined>(
+    config.walletConfig?.evmConfig?.initialChainId,
+  );
 
   const value = useMemo(() => {
     return {
       config: getDefaultConfig(config),
       logger: config.debug ? console.log : () => undefined,
+
       action,
       setAction,
+
       selectedWallet,
       setSelectedWallet,
+
+      initialChainId,
+      setInitialChainId,
+
       wallets,
       setWallets,
     };
-  }, [action, config, selectedWallet, wallets]);
+  }, [action, config, initialChainId, selectedWallet, wallets]);
 
   return (
     <WalletKitContext.Provider value={value}>

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

@@ -3,8 +3,8 @@ import { ConnectingView } from '@/core/modals/ConnectModal/ConnectingView';
 import {
   useAction,
   useConfig,
+  useInitialChainId,
   useSelectedWallet,
-  useWalletConfig,
 } from '@/core/providers/WalletKitProvider/context';
 import { useIsConnected } from '@/evm/hooks/useIsConnected';
 import { useWalletConnector } from '@/evm/hooks/useWalletConnector';
@@ -13,12 +13,12 @@ import { useState, useCallback } from 'react';
 
 export function EvmConnectingView() {
   const { eventConfig } = useConfig();
-  const { evmConfig } = useWalletConfig();
   const { action } = useAction();
   const { selectedWallet } = useSelectedWallet();
 
   const isConnected = useIsConnected();
   const selectedConnector = useWalletConnector(selectedWallet.id);
+  const { initialChainId } = useInitialChainId();
 
   const [status, setStatus] = useState(
     selectedWallet.isInstalled() ? CONNECT_STATUS.CONNECTING : CONNECT_STATUS.UNAVAILABLE,
@@ -62,12 +62,8 @@ export function EvmConnectingView() {
             }
           }
         } else if (data) {
-          if (
-            evmConfig?.initialChainId &&
-            data.chainId === evmConfig.initialChainId &&
-            action === 'add-network'
-          ) {
-            eventConfig.onChainAlreadyAdded?.(selectedWallet, evmConfig.initialChainId);
+          if (initialChainId && data.chainId === initialChainId && action === 'add-network') {
+            eventConfig.onChainAlreadyAdded?.(selectedWallet, initialChainId);
           }
         }
       },

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

@@ -1,4 +1,8 @@
-import { useConfig, useLogger, useWalletConfig } from '@/core/providers/WalletKitProvider/context';
+import {
+  useConfig,
+  useInitialChainId,
+  useLogger,
+} from '@/core/providers/WalletKitProvider/context';
 import { useConnect } from 'wagmi';
 import { ConnectErrorType } from 'wagmi/actions';
 import { evmCommonErrorHandler } from '../utils/evmCommonErrorHandler';
@@ -8,11 +12,12 @@ export type UseEvmConnectReturnType = ReturnType<typeof useConnect>;
 
 export function useEvmConnect(props?: UseEvmConnectProps): UseEvmConnectReturnType {
   const { eventConfig } = useConfig();
-  const { evmConfig } = useWalletConfig();
   const log = useLogger();
 
+  const { initialChainId } = useInitialChainId();
+
   const connectProps = {
-    chainId: evmConfig?.initialChainId,
+    chainId: initialChainId,
   };
 
   const { connect, connectAsync, connectors, ...restProps } = useConnect({