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

.github/actions/setup/action.yaml

@@ -9,10 +9,10 @@ inputs:
 runs:
   using: composite
   steps:
-    - name: Setup node.js
-      uses: actions/setup-node@v3
+    - name: Install Node.js
+      uses: actions/setup-node@v4
       with:
-        node-version: 16
+        node-version: 20
 
     - name: Setup pnpm
       uses: pnpm/action-setup@v2

examples/nextjs/package.json

@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@node-real/walletkit": "workspace:*",
+    "@tanstack/react-query": "^5",
+    "encoding": "^0.1.13",
     "next": "^14",
+    "pino-pretty": "^11.2.2",
     "react": "^18",
     "react-dom": "^18",
     "viem": "^2",
-    "wagmi": "^2",
-    "@tanstack/react-query": "^5.51.1"
+    "wagmi": "^2"
   },
   "devDependencies": {
     "@types/node": "^20",

examples/nextjs/pages/_app.tsx

@@ -1,62 +1,67 @@
 import '@node-real/walletkit/styles.css';
 import '@/styles/globals.css';
-import { bsc, mainnet, opBNB } from 'wagmi/chains';
+import { mainnet } from 'wagmi/chains';
 
-import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
+import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/evm';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
-  defaultWagmiConfig,
-  SwitchNetworkModal,
-  WalletKitButton,
-  WalletKitOptions,
   WalletKitProvider,
-  ProfileModal,
   ConnectModal,
+  useConnectModal,
+  WalletKitConfig,
 } from '@node-real/walletkit';
-import { WagmiProvider } from 'wagmi';
 import { AppProps } from 'next/app';
 
 const queryClient = new QueryClient();
 
-const config = defaultWagmiConfig({
-  appName: 'WalletKit',
-  chains: [bsc, mainnet, opBNB],
-  connectors: [trustWallet(), metaMask(), walletConnect()],
-
-  // WalletConnect 2.0 requires a projectId which you can create quickly
-  // and easily for free over at WalletConnect Cloud https://cloud.walletconnect.com/sign-in
-  walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
-});
-
-const options: WalletKitOptions = {
-  initialChainId: 1,
+const config: WalletKitConfig = {
+  walletConfig: {
+    autoConnect: true,
+    evmConfig: {
+      initialChainId: 1,
+      wallets: [metaMask(), trustWallet(), walletConnect()],
+      chains: [mainnet] as any[],
+    },
+  },
+  appearance: {
+    mode: 'light',
+  },
+  eventConfig: {
+    closeModalOnEsc: false,
+    closeModalOnOverlayClick: false,
+    closeModalAfterConnected: true,
+  },
 };
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiProvider config={config} reconnectOnMount={true}>
+    <WalletKitProvider config={config}>
       <QueryClientProvider client={queryClient}>
-        <WalletKitProvider options={options} mode="light">
-          <Component {...pageProps} />
-
-          <WalletKitButton />
+        <Component {...pageProps} />
 
-          <ConnectModal />
+        {/* <ConnectButton /> */}
+        <ConnectButton />
+        <ConnectModal />
 
-          {/* 
+        {/* 
             Profile modal shows some basic information about the current account,
             If you don't need this modal, you can remove it.
           */}
-          <ProfileModal />
+        {/* <ProfileModal /> */}
 
-          {/*
+        {/*
             👇 Here's the SwitchNetworkModal
             If the user switches to a network that is not supported by our dApp,
             this modal will be displayed to remind the user to switch to our supported networks.
           */}
-          <SwitchNetworkModal />
-        </WalletKitProvider>
+        {/* <SwitchNetworkModal /> */}
       </QueryClientProvider>
-    </WagmiProvider>
+    </WalletKitProvider>
   );
 }
+
+function ConnectButton() {
+  const { onOpen } = useConnectModal();
+
+  return <button onClick={() => onOpen()}>connect</button>;
+}

examples/nextjs/pages/_document.tsx

@@ -1,5 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document';
-import { EthereumScript } from '@node-real/walletkit';
+import { EthereumScript } from '@node-real/walletkit/evm';
 
 export default function Document() {
   return (

examples/vite/package.json

@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@node-real/walletkit": "workspace:*",
+    "@particle-network/connectkit": "^2.0.0",
+    "@tanstack/react-query": "^5",
     "react": "^18",
     "react-dom": "^18",
     "viem": "^2",
-    "wagmi": "^2",
-    "@tanstack/react-query": "^5.51.1"
+    "wagmi": "^2"
   },
   "devDependencies": {
     "@types/react": "^18",

examples/vite/src/App.tsx

@@ -1,47 +1,49 @@
-import '@node-real/walletkit/styles.css';
-import './global.css';
-import { bsc, mainnet, opBNB } from 'wagmi/chains';
-
-import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   ConnectModal,
-  defaultWagmiConfig,
-  ProfileModal,
-  SwitchNetworkModal,
-  WalletKitButton,
-  WalletKitOptions,
+  useConnectModal,
+  WalletKitConfig,
   WalletKitProvider,
 } from '@node-real/walletkit';
-import { WagmiProvider } from 'wagmi';
-
-const queryClient = new QueryClient();
+import VConsole from 'vconsole';
+import { metaMask, trustWallet, walletConnect } from '@node-real/walletkit/evm';
+import { mainnet } from 'viem/chains';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-const config = defaultWagmiConfig({
-  appName: 'WalletKit',
-  chains: [mainnet, bsc, opBNB],
-  connectors: [trustWallet(), metaMask(), walletConnect()],
+new VConsole();
 
-  // WalletConnect 2.0 requires a projectId which you can create quickly
-  // and easily for free over at WalletConnect Cloud https://cloud.walletconnect.com/sign-in
-  walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
-});
+const queryClient = new QueryClient();
 
-const options: WalletKitOptions = {
-  initialChainId: 1,
+const config: WalletKitConfig = {
+  walletConfig: {
+    autoConnect: true,
+    evmConfig: {
+      initialChainId: 1,
+      wallets: [metaMask(), trustWallet(), walletConnect()],
+      chains: [mainnet] as any[],
+    },
+  },
+  appearance: {
+    mode: 'auto',
+  },
+  eventConfig: {
+    closeModalOnEsc: false,
+    closeModalOnOverlayClick: false,
+    closeModalAfterConnected: true,
+  },
 };
 
 export default function App() {
   return (
-    <WagmiProvider config={config} reconnectOnMount={false}>
+    <WalletKitProvider config={config}>
       <QueryClientProvider client={queryClient}>
-        <WalletKitProvider options={options} mode="light">
-          <WalletKitButton />
-          <ConnectModal />
-          <ProfileModal />
-          <SwitchNetworkModal />
-        </WalletKitProvider>
+        <ConnectButton />
+        <ConnectModal />
       </QueryClientProvider>
-    </WagmiProvider>
+    </WalletKitProvider>
   );
 }
+
+function ConnectButton() {
+  const { onOpen } = useConnectModal();
+  return <button onClick={() => onOpen()}>connect</button>;
+}

package.json

@@ -9,9 +9,8 @@
   "scripts": {
     "prepare": "husky install",
     "lint": "pnpm eslint .",
-    "dev": "pnpm --F @node-real/walletkit dev",
-    "build": "pnpm --F @node-real/walletkit build",
-    "dev:docs": "pnpm --F @node-real/walletkit build:watch & pnpm --F website dev",
+    "dev": "pnpm --F @node-real/* dev",
+    "build": "pnpm --F @node-real/* build",
     "build:docs": "pnpm build && pnpm --F website build",
     "ci:enter": "pnpm changeset pre enter alpha || true",
     "ci:exit": "pnpm changeset pre exit || true",
@@ -21,7 +20,7 @@
     "ci:stable-version": "pnpm ci:exit && pnpm ci:version"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.7",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -30,7 +29,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.3.5",
     "husky": "^8.0.3",
-    "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2"
+    "lint-staged": "^15.2.9",
+    "prettier": "^3.3.3"
   }
 }

packages/walletkit/CHANGELOG.md

@@ -1,40 +1,17 @@
 # @node-real/walletkit
 
-## 2.0.3
+## 2.3.0-alpha.1
 
 ### Patch Changes
 
-- 5b7f3f6: test: Add log
-- 5b7f3f6: fix: ssr no need to wait for the provider to be ready
+- decd1a4: feat: Add log
 
-## 2.0.3-alpha.0
+## 2.3.0-alpha.0
 
-### Patch Changes
-
-- d5437a7: test: Add log
-- 90846a4: fix: ssr no need to wait for the provider to be ready
-
-## 2.0.2
-
-### Patch Changes
-
-- 1fed209: feat: Upgrade wagmi & viem to 2.x
-- 1fed209: fix: ssr no need to wait for the provider to be ready
-
-## 2.0.2-alpha.0
-
-### Patch Changes
-
-- 90846a4: fix: ssr no need to wait for the provider to be ready
-
-## 2.0.1
-
-### Patch Changes
-
-- 83c5001: feat: Upgrade wagmi & viem to 2.x
+### Minor Changes
 
-## 2.0.1-alpha.0
+- 1ebabc3: refactor: solana and evm are unified into one package
 
 ### Patch Changes
 
-- 919b9ba: feat: Upgrade wagmi & viem to 2.x
+- 1ebabc3: refactor: Update configuration items & Add EmbeddedConnectModal