Dev (#205)

* feat: Update examples * docs: update examples
node-real · Aug 28, 2024 · 336afb6 · 336afb6
1 parent a818618
commit 336afb6
Show file tree

Hide file tree

Showing 8 changed files with 544 additions and 408 deletions.
diff --git a/.changeset/heavy-worms-poke.md b/.changeset/heavy-worms-poke.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+update examples
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -17,8 +17,8 @@
     "pino-pretty": "^11.2.2",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^2",
-    "wagmi": "^2"
+    "viem": "^2.17.4",
+    "wagmi": "^2.10.10"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
@@ -11,6 +11,7 @@ import {
   WalletKitConfig,
 } from '@node-real/walletkit';
 import { AppProps } from 'next/app';
+import { useAccount, useDisconnect } from 'wagmi';
 
 const queryClient = new QueryClient();
 
@@ -64,5 +65,28 @@ export default function App({ Component, pageProps }: AppProps) {
 function ConnectButton() {
   const { onOpen } = useConnectModal();
 
-  return <button onClick={() => onOpen()}>connect</button>;
+  const { address } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  if (address) {
+    return (
+      <>
+        <div>address:{address}</div>
+        <button onClick={() => disconnect()}>disconnect</button>
+      </>
+    );
+  }
+
+  return (
+    <button
+      onClick={() =>
+        onOpen({
+          action: 'add-network',
+          initialChainId: 1,
+        })
+      }
+    >
+      connect
+    </button>
+  );
 }
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
@@ -8,6 +8,7 @@ import VConsole from 'vconsole';
 import { evmConfig, metaMask, trustWallet, walletConnect } from '@node-real/walletkit/evm';
 import { mainnet } from 'viem/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useAccount, useDisconnect } from 'wagmi';
 
 new VConsole();
 
@@ -46,5 +47,29 @@ export default function App() {
 
 function ConnectButton() {
   const { onOpen } = useConnectModal();
-  return <button onClick={() => onOpen()}>connect</button>;
+
+  const { address } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  if (address) {
+    return (
+      <>
+        <div>address:{address}</div>
+        <button onClick={() => disconnect()}>disconnect</button>
+      </>
+    );
+  }
+
+  return (
+    <button
+      onClick={() =>
+        onOpen({
+          action: 'add-network',
+          initialChainId: 1,
+        })
+      }
+    >
+      connect
+    </button>
+  );
 }
diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
@@ -91,7 +91,6 @@ function ConnectButton() {
 
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
-  const { connect } = useWalletKit();
 
   if (address) {
     return (
@@ -103,27 +102,15 @@ function ConnectButton() {
   }
 
   return (
-    <>
-      <button
-        onClick={() =>
-          onOpen({
-            action: 'add-network',
-            initialChainId: 1,
-          })
-        }
-      >
-        connect
-      </button>
-      <button
-        onClick={() => {
-          connect({
-            walletId: 'metaMask',
-            initialChainId: 1,
-          });
-        }}
-      >
-        connect metaMask
-      </button>
-    </>
+    <button
+      onClick={() =>
+        onOpen({
+          action: 'add-network',
+          initialChainId: 1,
+        })
+      }
+    >
+      connect
+    </button>
   );
 }
diff --git a/packages/walletkit/src/core/base/utils/mobile.ts b/packages/walletkit/src/core/base/utils/mobile.ts
@@ -24,6 +24,10 @@ export function isMobile(): boolean {
 
 // telegram mini app
 export function isTMA(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
   const check = (host: any) => {
     return (
       typeof host !== 'undefined' &&

diff --git a/packages/walletkit/src/core/utils/common.ts b/packages/walletkit/src/core/utils/common.ts
@@ -1,4 +1,3 @@
-import WebApp from '@twa-dev/sdk';
 import { isTMA } from '../base/utils/mobile';
 
 export function mergeList(list1: any[] = [], list2: any[] = []) {
@@ -33,7 +32,9 @@ export async function openUri(uri: string) {
   if (!uri) return;
 
   if (isTMA()) {
-    WebApp.openLink(uri);
+    import('@twa-dev/sdk').then((module) => {
+      module.default.openLink(uri);
+    });
   } else {
     window.open(uri, '_self', 'noopener noreferrer');
   }