diff --git a/.changeset/shy-tools-rescue.md b/.changeset/shy-tools-rescue.md
new file mode 100644
index 00000000..68a01fe2
--- /dev/null
+++ b/.changeset/shy-tools-rescue.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+feat: Add initialChainId to connectModal
diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
index 1ae12fed..089e084c 100644
--- a/packages/walletkit/__dev__/App.tsx
+++ b/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 ;
+ return (
+
+ );
}
diff --git a/packages/walletkit/src/core/configs/getDefaultConfig.ts b/packages/walletkit/src/core/configs/getDefaultConfig.ts
index 8c87285f..7dbcc3ec 100644
--- a/packages/walletkit/src/core/configs/getDefaultConfig.ts
+++ b/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/`,
diff --git a/packages/walletkit/src/core/modals/ConnectModal/context.ts b/packages/walletkit/src/core/modals/ConnectModal/context.ts
index 0a52b9a6..f3c63904 100644
--- a/packages/walletkit/src/core/modals/ConnectModal/context.ts
+++ b/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 {
diff --git a/packages/walletkit/src/core/modals/ConnectModal/provider.tsx b/packages/walletkit/src/core/modals/ConnectModal/provider.tsx
index 58ffd571..91286b4a 100644
--- a/packages/walletkit/src/core/modals/ConnectModal/provider.tsx
+++ b/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 {children};
}
diff --git a/packages/walletkit/src/core/providers/WalletKitProvider/context.ts b/packages/walletkit/src/core/providers/WalletKitProvider/context.ts
index 9fea8aba..13fba5c2 100644
--- a/packages/walletkit/src/core/providers/WalletKitProvider/context.ts
+++ b/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>;
+
+ initialChainId?: number;
+ setInitialChainId: React.Dispatch>;
}
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 {
diff --git a/packages/walletkit/src/core/providers/WalletKitProvider/index.tsx b/packages/walletkit/src/core/providers/WalletKitProvider/index.tsx
index 66f81f37..b014b973 100644
--- a/packages/walletkit/src/core/providers/WalletKitProvider/index.tsx
+++ b/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(initialWallets);
+ const [initialChainId, setInitialChainId] = useState(
+ 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 (
diff --git a/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx b/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx
index 7b58d6af..8b7b9f65 100644
--- a/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx
+++ b/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);
}
}
},
diff --git a/packages/walletkit/src/evm/hooks/useEvmConnect.ts b/packages/walletkit/src/evm/hooks/useEvmConnect.ts
index 0d7860fe..a7ba125a 100644
--- a/packages/walletkit/src/evm/hooks/useEvmConnect.ts
+++ b/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;
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({