feat: Add SwitchNetworkModal & integrate the whole connection process…

… to EmbeddedModal (#239)

* feat: Support solana on mobile

* chore: update versions (alpha) (#225)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Add deeplink for tw solana on mobile

* chore: update versions (alpha) (#226)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Add phantom deeplink

* fix: Add deelink for phantom

* chore: update versions (alpha) (#227)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Update tron dependencies

* chore: update versions (alpha) (#230)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Fix an issue where solana is disconnected when trust evm wallet is disconnected

* chore: update versions (alpha) (#231)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: Update demo

* fix: Fix the trust wallet will automatically connect when the page loaded

* chore: update versions (alpha) (#232)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Fix the trust wallet will automatically connect when the page loaded

* docs: Add change log

* chore: update versions (alpha) (#233)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Use window.trustwallet as TW provider to avoid conflicts

* chore: update versions (alpha) (#234)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Fix trust issue

* chore: update versions (alpha) (#235)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Fix binance web3 wallet successfully detected trustwallet on mobile

* feat: Add SwitchNetworkModal & integrate the whole connection process to EmbeddedModal

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/big-donuts-push.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Support solana on mobile

.changeset/chilled-pots-chew.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix binance web3 wallet successfully detected trustwallet on mobile

.changeset/few-guests-melt.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix trust issue

.changeset/happy-countries-exercise.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Update tron dependencies

.changeset/happy-jobs-hope.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix an issue where solana is disconnected when trust evm wallet is disconnected

.changeset/itchy-hats-applaud.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Add deeplink for tw solana on mobile

.changeset/little-panthers-tickle.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix the trust wallet will automatically connect when the page loaded

.changeset/nervous-horses-study.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix the trust wallet will automatically connect when the page loaded

.changeset/pink-carrots-jam.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Use window.trustwallet as TW provider to avoid conflicts

.changeset/pre.json

@@ -0,0 +1,21 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "example-nextjs": "0.0.1",
+    "example-vite": "0.0.1",
+    "@node-real/walletkit": "2.4.0",
+    "website": "0.0.1"
+  },
+  "changesets": [
+    "big-donuts-push",
+    "few-guests-melt",
+    "happy-countries-exercise",
+    "happy-jobs-hope",
+    "itchy-hats-applaud",
+    "little-panthers-tickle",
+    "nervous-horses-study",
+    "pink-carrots-jam",
+    "slimy-books-turn"
+  ]
+}

.changeset/slimy-books-turn.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Add deelink for phantom

.changeset/tricky-countries-give.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': minor
+---
+
+Add SwitchNetworkModal & integrate the whole connection process to EmbeddedModal

examples/nextjs/package.json

@@ -17,8 +17,8 @@
     "pino-pretty": "^11.2.2",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^2.17.4",
-    "wagmi": "^2.10.10"
+    "wagmi": "2.13.0",
+    "viem": "^2.21.49"
   },
   "devDependencies": {
     "@types/node": "^20",

examples/nextjs/pages/_app.tsx

@@ -24,7 +24,7 @@ const config: WalletKitConfig = {
     initialChainId: 1,
     walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
     wallets: [metaMask(), trustWallet(), walletConnect()],
-    chains: [mainnet],
+    chains: [mainnet] as any,
   }),
 };
 

examples/vite/package.json

@@ -15,8 +15,8 @@
     "@tanstack/react-query": "^5",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^2.17.4",
-    "wagmi": "^2.10.10"
+    "wagmi": "2.13.0",
+    "viem": "^2.21.49"
   },
   "devDependencies": {
     "@types/react": "^18",

examples/vite/src/App.tsx

@@ -20,7 +20,7 @@ const config: WalletKitConfig = {
     initialChainId: 1,
     walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
     wallets: [metaMask(), trustWallet(), walletConnect()],
-    chains: [mainnet],
+    chains: [mainnet] as any,
   }),
 };
 

package.json

@@ -20,16 +20,16 @@
     "ci:stable-version": "pnpm ci:exit && pnpm ci:version"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.10",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.3.5",
     "husky": "^8.0.3",
-    "lint-staged": "^15.2.9",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3"
   }
 }

packages/walletkit/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @node-real/walletkit
 
+## 2.4.1-alpha.8
+
+### Patch Changes
+
+- 11da348: Fix trust issue
+
+## 2.4.1-alpha.7
+
+### Patch Changes
+
+- a0d1970: Use window.trustwallet as TW provider to avoid conflicts
+
+## 2.4.1-alpha.6
+
+### Patch Changes
+
+- 81a347a: Fix the trust wallet will automatically connect when the page loaded
+
+## 2.4.1-alpha.5
+
+### Patch Changes
+
+- 25add5c: Fix the trust wallet will automatically connect when the page loaded
+
+## 2.4.1-alpha.4
+
+### Patch Changes
+
+- 615241f: Fix an issue where solana is disconnected when trust evm wallet is disconnected
+
+## 2.4.1-alpha.3
+
+### Patch Changes
+
+- 601d110: Update tron dependencies
+
+## 2.4.1-alpha.2
+
+### Patch Changes
+
+- f20032d: Add deelink for phantom
+
+## 2.4.1-alpha.1
+
+### Patch Changes
+
+- 55abc5d: Add deeplink for tw solana on mobile
+
+## 2.4.1-alpha.0
+
+### Patch Changes
+
+- cf27048: Support solana on mobile
+
 ## 2.4.0
 
 ### Minor Changes

packages/walletkit/__dev__/App.tsx

@@ -1,5 +1,11 @@
 import './style.css';
-import { ConnectModal, useConnectModal, WalletKitConfig, WalletKitProvider } from '@/core/index';
+import {
+  ConnectModal,
+  EmbeddedConnectModal,
+  useConnectModal,
+  WalletKitConfig,
+  WalletKitProvider,
+} from '@/core/index';
 import VConsole from 'vconsole';
 import {
   binanceWeb3Wallet,
@@ -23,13 +29,18 @@ import { bsc, mainnet } from 'viem/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useAccount, useDisconnect } from 'wagmi';
 import { defaultTronConfig, tronLink, useTronWallet } from '@/tron/index';
+import { Modal } from '@/core/base/components/Modal';
+import { ModalBody } from '@/core/base/components/Modal/ModalBody';
+import { useDisclosure } from '@/core/base/hooks/useDisclosure';
+import { SwitchNetworkModal } from '@/core/modals/SwitchNetworkModal';
 
 new VConsole();
 
 const queryClient = new QueryClient();
 
 const config: WalletKitConfig = {
   options: {
+    openModalOnWrongNetwork: true,
     closeModalOnEsc: false,
     // gridLayoutThreshold: 1000,
     onChainAlreadyAdded({ wallet, chainId }) {
@@ -68,11 +79,20 @@ const config: WalletKitConfig = {
 };
 
 export default function App() {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
   return (
     <WalletKitProvider config={config} debugMode>
       <QueryClientProvider client={queryClient}>
         <ConnectButton />
         <ConnectModal />
+        <button onClick={onOpen}>connect modal</button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalBody>
+            <EmbeddedConnectModal />
+          </ModalBody>
+        </Modal>
+        <SwitchNetworkModal />
       </QueryClientProvider>
     </WalletKitProvider>
   );
@@ -83,36 +103,37 @@ function ConnectButton() {
 
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
-
-  const { publicKey } = useSolanaWallet();
-  const { address: b } = useTronWallet();
-
-  console.log(publicKey, b);
-
-  if (address) {
-    return (
-      <>
-        <div>address:{address}</div>
-        <button onClick={() => disconnect()}>disconnect</button>
-      </>
-    );
-  }
+  const { publicKey, disconnect: solanaDisconnect } = useSolanaWallet();
+  const { address: tronAddress, disconnect: tronDisconnect } = useTronWallet();
 
   return (
-    <button
-      onClick={() =>
-        onOpen({
-          action: 'add-network',
-          evmConfig: {
-            initialChainId: 56,
-          },
-          tronConfig: {
-            initialChainId: '0xcd8690dc',
-          },
-        })
-      }
-    >
-      connect
-    </button>
+    <>
+      <button
+        onClick={() =>
+          onOpen({
+            action: 'add-network',
+            evmConfig: {
+              initialChainId: 56,
+            },
+            tronConfig: {
+              initialChainId: '0xcd8690dc',
+            },
+          })
+        }
+      >
+        connect
+      </button>
+      <div>
+        evm address:{address} <button onClick={() => disconnect()}>disconnect</button>
+      </div>
+      <div>
+        solana address:{publicKey?.toBase58()}
+        <button onClick={() => solanaDisconnect()}>disconnect</button>
+      </div>
+      <div>
+        tron address:{tronAddress}
+        <button onClick={() => tronDisconnect()}>disconnect</button>
+      </div>
+    </>
   );
 }

packages/walletkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-real/walletkit",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "author": "node-real",
   "private": false,
   "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",
@@ -59,9 +59,9 @@
     "@solana/web3.js": "^1",
     "@tronweb3/tronwallet-abstract-adapter": "^1",
     "@tronweb3/tronwallet-adapter-react-hooks": "^1",
-    "@tronweb3/tronwallet-adapters": "^1",
-    "@walletconnect/solana-adapter": "^0.0.5",
-    "qrcode": "^1"
+    "@tronweb3/tronwallet-adapter-tronlink": "^1.1.11",
+    "qrcode": "^1",
+    "tronweb": "~6.0.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.51.1",
@@ -76,10 +76,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^5.5.3",
     "vconsole": "^3.15.1",
-    "viem": "^2.17.4",
     "vite": "^4.5.3",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-mkcert": "^1.17.6",
-    "wagmi": "^2.10.10"
+    "wagmi": "2.13.0",
+    "viem": "^2.21.49"
   }
 }

packages/walletkit/src/core/components/DisconnectButton/index.tsx

@@ -0,0 +1,35 @@
+import { Button, ButtonProps } from '@/core/base/components/Button';
+import { useConnect, useDisconnect } from 'wagmi';
+import { clsContainer } from './styles.css';
+import { cx } from '@/core/base/utils/css';
+import { ExitIcon } from '@/core/base/icons/ExitIcon';
+import { useCloseAllModals } from '@/core/hooks/useCloseAllModals';
+
+export type DisconnectButtonProps = ButtonProps;
+
+export function DisconnectButton(props: DisconnectButtonProps) {
+  const { className, ...restProps } = props;
+
+  const { reset } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { onCloseAllModals } = useCloseAllModals();
+
+  const onDisconnect = () => {
+    onCloseAllModals();
+    setTimeout(() => {
+      disconnect();
+      reset();
+    }, 100);
+  };
+
+  return (
+    <Button
+      className={cx('wk-disconnect-button', clsContainer, className)}
+      onClick={onDisconnect}
+      {...restProps}
+    >
+      <ExitIcon />
+      Disconnect
+    </Button>
+  );
+}