fix: ssr no need to wait for the provider to be ready (#165)

* Merge branch 'main' into dev * feat: Update README.md * fix: ssr no need to wait for the provider to be ready
node-real · Jul 17, 2024 · 90846a4 · 90846a4
1 parent 36d4b2e
commit 90846a4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 38 deletions.
diff --git a/.changeset/quick-squids-rush.md b/.changeset/quick-squids-rush.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+fix: ssr no need to wait for the provider to be ready
diff --git a/README.md b/README.md
@@ -22,57 +22,69 @@ The following examples are provided in the [examples](./examples/) folder of thi
 ## Installation
 
 ```bash
-npm i @node-real/walletkit wagmi viem
-
+npm i @node-real/walletkit@^2 wagmi@^2 viem@^2 @tanstack/react-query@^5
 ```
 
 ## Usage
 
 ```tsx
 import '@node-real/walletkit/styles.css';
-import { WagmiConfig, createConfig } from 'wagmi';
-import { chains } from './chains';
+
+import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
+  defaultWagmiConfig,
+  SwitchNetworkModal,
   WalletKitButton,
-  WalletKitProvider,
-  getDefaultConfig,
   WalletKitOptions,
-  SwitchNetworkModal,
+  WalletKitProvider,
+  ProfileModal,
+  ConnectModal,
 } from '@node-real/walletkit';
-import { metaMask, trustWallet, walletConnect } from '@node-real/walletkit/wallets';
+import { WagmiProvider } from 'wagmi';
+import { AppProps } from 'next/app';
+import { chains } from './chains';
 
-const config = createConfig(
-  getDefaultConfig({
-    autoConnect: true,
-    appName: 'WalletKit',
+const queryClient = new QueryClient();
 
-    // 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: 'xxx',
+const config = defaultWagmiConfig({
+  appName: '[Your app name]', // Your app name
+  chains,
+  connectors: [trustWallet(), metaMask(), walletConnect()],
 
-    chains,
-    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: 'xxx',
+});
 
 const options: WalletKitOptions = {
-  initialChainId: 56,
+  initialChainId: 1,
 };
 
-export default function App() {
+export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={config}>
-      <WalletKitProvider options={options} mode="light">
-        <WalletKitButton />
-
-        {/*
-          👇 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>
-    </WagmiConfig>
+    <WagmiProvider config={config} reconnectOnMount={true}>
+      <QueryClientProvider client={queryClient}>
+        <WalletKitProvider options={options} mode="light">
+          <Component {...pageProps} />
+
+          <WalletKitButton />
+          <ConnectModal />
+
+          {/* 
+            Profile modal shows some basic information about the current account,
+            if you don't need this modal, you can remove it.
+          */}
+          <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>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 ```

diff --git a/packages/walletkit/CHANGELOG.md b/packages/walletkit/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @node-real/walletkit
 
+
+## 2.0.1
+
+### Patch Changes
+
+- 83c5001: feat: Upgrade wagmi & viem to 2.x
+
+
 ## 2.0.1-alpha.0
 
 ### Patch Changes

diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-real/walletkit",
-  "version": "2.0.1-alpha.0",
+  "version": "2.0.1",
   "author": "node-real",
   "private": false,
   "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",

diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx
@@ -39,10 +39,8 @@ export function binanceWeb3Wallet(props: InjectedWalletOptions = {}): WalletProp
           id: BINANCE_WEB3_WALLET_ID,
           name: BINANCE_WEB3_WALLET_NAME,
           async setup() {
-            if (isMobile()) {
-              if (typeof window !== 'undefined') {
-                (window.ethereum as any)?.enable?.();
-              }
+            if (isMobile() && hasInjectedBinanceWeb3Wallet()) {
+              (window.ethereum as any)?.enable?.();
               await sleep();
             }
           },

diff --git a/packages/walletkit/src/wallets/trustWallet/index.tsx b/packages/walletkit/src/wallets/trustWallet/index.tsx
@@ -51,6 +51,7 @@ export function trustWallet(props: InjectedWalletOptions = {}): WalletProps {
           id: TRUST_WALLET_ID,
           name: TRUST_WALLET_NAME,
           async setup() {
+            if (typeof window === 'undefined') return;
             await sleep();
           },
           async provider() {