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({