refactor: Expose evmConfig and solanaConfig as wallet configurations

packages/walletkit/__dev__/App.tsx

@@ -1,15 +1,11 @@
-import {
-  EmbeddedConnectModal,
-  useConnectModal,
-  WalletKitConfig,
-  WalletKitProvider,
-} from '@/core/index';
+import { ConnectModal, useConnectModal, WalletKitConfig, WalletKitProvider } from '@/core/index';
 import './style.css';
 import VConsole from 'vconsole';
 import {
   binanceWeb3Wallet,
   bitgetWallet,
   coinbaseWallet,
+  evmConfig,
   mathWallet,
   metaMask,
   okxWallet,
@@ -20,9 +16,11 @@ import {
 import {
   trustWallet as solanaTrustWallet,
   phantomWallet as solanaPhantomWallet,
+  solanaConfig,
 } from '@/solana/index';
 import { bsc, mainnet } from 'viem/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useAccount, useDisconnect } from 'wagmi';
 
 new VConsole();
 
@@ -41,9 +39,9 @@ const config: WalletKitConfig = {
       console.log(wallet, chainId);
     },
   },
-  walletConfig: {
-    autoConnect: true,
-    evmConfig: {
+  walletConfigs: [
+    evmConfig({
+      autoConnect: true,
       initialChainId: 1,
       chains: [mainnet, bsc],
       wallets: [
@@ -57,20 +55,21 @@ const config: WalletKitConfig = {
         coinbaseWallet(),
         mathWallet(),
       ],
-    },
-    solanaConfig: {
+    }),
+    solanaConfig({
+      autoConnect: true,
       rpcUrl: 'https://solana-rpc.debridge.finance',
       wallets: [solanaTrustWallet(), solanaPhantomWallet()],
-    },
-  },
+    }),
+  ],
 };
 
 export default function App() {
   return (
     <WalletKitProvider config={config}>
       <QueryClientProvider client={queryClient}>
         <ConnectButton />
-        <EmbeddedConnectModal />
+        <ConnectModal />
       </QueryClientProvider>
     </WalletKitProvider>
   );
@@ -79,6 +78,18 @@ export default function App() {
 function ConnectButton() {
   const { onOpen } = useConnectModal();
 
+  const { address } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  if (address) {
+    return (
+      <>
+        <div>address:{address}</div>
+        <button onClick={() => disconnect()}>disconnect</button>
+      </>
+    );
+  }
+
   return (
     <button
       onClick={() =>

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

@@ -1,9 +1,18 @@
-import { WalletKitConfig } from '../providers/WalletKitProvider/context';
+import { WalletKitConfig, WalletKitContextProps } from '../providers/WalletKitProvider/context';
 import { toast } from '@/core/base/components/toast';
-import { setGlobalData } from '@/core/globalData';
+import { SolanaConfig } from '@/solana/utils/solanaConfig';
+import { EvmConfig } from '@/evm/utils/evmConfig';
 
-export function getDefaultConfig(config: WalletKitConfig) {
-  const finalConfig: WalletKitConfig = {
+type DefaultConfig = Pick<WalletKitContextProps, 'appearance' | 'eventConfig' | 'walletConfig'>;
+
+export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
+  const evmConfig = config.walletConfigs.find((item) => item.walletType === 'evm') as EvmConfig;
+
+  const solanaConfig = config.walletConfigs.find(
+    (item) => item.walletType === 'solana',
+  ) as SolanaConfig;
+
+  return {
     appearance: {
       mode: 'auto',
       theme: undefined,
@@ -27,7 +36,6 @@ export function getDefaultConfig(config: WalletKitConfig) {
       closeModalOnEsc: true,
       closeModalOnOverlayClick: true,
       openModalOnWrongNetwork: false,
-
       onError(_err: any, description: string) {
         if (description) {
           toast.error({
@@ -39,23 +47,10 @@ export function getDefaultConfig(config: WalletKitConfig) {
     },
 
     walletConfig: {
-      autoConnect: true,
-      walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', // TODO
-      ...config.walletConfig,
-      metadata: {
-        name: 'Connect Wallet',
-        ...config.walletConfig?.metadata,
-      },
-      evmConfig: config.walletConfig?.evmConfig,
-      solanaConfig: config.walletConfig?.solanaConfig,
+      evmConfig,
+      solanaConfig,
     },
   };
-
-  setGlobalData({
-    metadata: finalConfig.walletConfig?.metadata,
-    walletConnectProjectId: finalConfig.walletConfig?.walletConnectProjectId,
-    solanaRpcUrl: finalConfig.walletConfig?.solanaConfig?.rpcUrl,
-  });
-
-  return finalConfig;
 }
+
+export const WALLET_CONNECT_PROJECT_ID = 'e68a1816d39726c2afabf05661a32767';

packages/walletkit/src/core/hooks/useAutoCloseConnectModal.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { ViewRoutes } from '../modals/ConnectModal/RouteProvider';
-import { useConfig } from '../providers/WalletKitProvider/context';
+import { useEventConfig } from '../providers/WalletKitProvider/context';
 import { useConnectModal } from '../modals/ConnectModal/context';
 import { useRouter } from '../modals/ConnectModal/RouteProvider/context';
 
 export function useAutoCloseConnectModal(isConnected: boolean) {
-  const { eventConfig } = useConfig();
+  const eventConfig = useEventConfig();
 
   const router = useRouter();
   const { onClose } = useConnectModal();

packages/walletkit/src/core/hooks/useWalletDownloadUrl.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { BaseWallet } from '../configs/types';
-import { useConfig } from '../providers/WalletKitProvider/context';
+import { useAppearance } from '../providers/WalletKitProvider/context';
 
 export function useWalletDownloadUrl(urls: BaseWallet['downloadUrls']) {
-  const { appearance } = useConfig();
+  const appearance = useAppearance();
 
   const url = useMemo(() => {
     const url = urls.default ?? appearance.walletDownloadUrl;

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

@@ -6,7 +6,7 @@ import { ForwardIcon } from '@/core/base/icons/ForwardIcon';
 import { cx } from '@/core/base/utils/css';
 import { CustomQRCode } from '@/core/components/CustomQRCode';
 import { useWalletLogos } from '@/core/hooks/useWalletLogos';
-import { useConfig } from '@/core/providers/WalletKitProvider/context';
+import { useAppearance } from '@/core/providers/WalletKitProvider/context';
 import { clsContainer, clsOfficialButton } from './styles.css';
 import { useAutoCloseConnectModal } from '@/core/hooks/useAutoCloseConnectModal';
 import { BaseWallet } from '@/core/configs/types';
@@ -22,7 +22,7 @@ export interface ConnectWithQRCodeProps {
 export function ConnectWithQRCode(props: ConnectWithQRCodeProps) {
   const { wallet, qrCodeUri, onClickOpenWcModal, isConnected, isWalletConnect } = props;
 
-  const { appearance } = useConfig();
+  const appearance = useAppearance();
   const logos = useWalletLogos(wallet?.logos);
 
   useAutoCloseConnectModal(isConnected);

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

@@ -5,12 +5,12 @@ import { WalletIcon } from '@/core/base/icons/WalletIcon';
 import { cx } from '@/core/base/utils/css';
 import { WalletOption } from './WalletOption';
 import { BaseWallet } from '@/core/configs/types';
-import { useConfig } from '@/core/providers/WalletKitProvider/context';
+import { useAppearance } from '@/core/providers/WalletKitProvider/context';
 import { clsWallets, clsNoWalletButton } from './styles.css';
 
 export function GridLayout(props: { visibleWallets: BaseWallet[] }) {
   const { visibleWallets } = props;
-  const { appearance } = useConfig();
+  const appearance = useAppearance();
 
   return (
     <>

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

@@ -3,14 +3,14 @@ import { ModalBody } from '@/core/base/components/Modal/ModalBody';
 import { ModalFooter } from '@/core/base/components/Modal/ModalFooter';
 import { WalletIcon } from '@/core/base/icons/WalletIcon';
 import { cx } from '@/core/base/utils/css';
-import { useConfig } from '@/core/providers/WalletKitProvider/context';
+import { useAppearance } from '@/core/providers/WalletKitProvider/context';
 import { clsWallets, clsNoWalletLink } from './styles.css';
 import { WalletOption } from './WalletOption';
 import { BaseWallet } from '@/core/configs/types';
 
 export function ListLayout(props: { visibleWallets: BaseWallet[] }) {
   const { visibleWallets } = props;
-  const { appearance } = useConfig();
+  const appearance = useAppearance();
 
   return (
     <>

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

@@ -5,10 +5,10 @@ import { cx } from '@/core/base/utils/css';
 import { GridLayout } from './GridLayout';
 import { ListLayout } from './ListLayout';
 import { clsDisclaimer } from './styles.css';
-import { useConfig, useWallets } from '@/core/providers/WalletKitProvider/context';
+import { useAppearance, useWallets } from '@/core/providers/WalletKitProvider/context';
 
 export function ConnectorsView() {
-  const { appearance } = useConfig();
+  const appearance = useAppearance();
   const { wallets } = useWallets();
   const { isMobileLayout } = useResponsive();
 

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

@@ -1,11 +1,11 @@
 import { Modal } from '@/core/base/components/Modal';
-import { useConfig } from '@/core/providers/WalletKitProvider/context';
+import { useEventConfig } from '@/core/providers/WalletKitProvider/context';
 import { useRouter } from './RouteProvider/context';
 import { useConnectModal } from './context';
 import { Navbar } from '@/core/components/Navbar';
 
 export function ConnectModal() {
-  const { eventConfig } = useConfig();
+  const eventConfig = useEventConfig();
   const { isOpen, onClose } = useConnectModal();
   const { view, history, back } = useRouter();
 

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

@@ -1,8 +1,4 @@
-import {
-  useAction,
-  useInitialChainId,
-  useWalletConfig,
-} from '@/core/providers/WalletKitProvider/context';
+import { useAction, useEvmConfig } from '@/core/providers/WalletKitProvider/context';
 import { RouteProvider, ViewRoutes } from './RouteProvider';
 import { useMemo } from 'react';
 import { ConnectModalContext, ConnectModalOpenParams } from './context';
@@ -26,9 +22,8 @@ export function ConnectModalProvider(props: ConnectModalProviderProps) {
 function WithRouter(props: ConnectModalProviderProps) {
   const { children } = props;
 
-  const { evmConfig } = useWalletConfig();
+  const evmConfig = useEvmConfig();
   const { setAction } = useAction();
-  const { setInitialChainId } = useInitialChainId();
 
   const { isOpen, onClose, onOpen } = useDisclosure();
   const router = useRouter();
@@ -46,12 +41,13 @@ function WithRouter(props: ConnectModalProviderProps) {
         router.push(params.viewRoute ?? ViewRoutes.CONNECTORS);
 
         setAction(params.action);
-        setInitialChainId(params.initialChainId ?? evmConfig?.initialChainId);
-
+        if (evmConfig && params.initialChainId) {
+          evmConfig.initialChainId = params.initialChainId;
+        }
         onOpen();
       },
     };
-  }, [evmConfig?.initialChainId, isOpen, onClose, onOpen, router, setAction, setInitialChainId]);
+  }, [evmConfig, isOpen, onClose, onOpen, router, setAction]);
 
   return <ConnectModalContext.Provider value={value}>{children}</ConnectModalContext.Provider>;
 }