fix: use wagmi alias for fix bug

.dumirc.ts

@@ -1,7 +1,9 @@
 import { existsSync, readdirSync } from 'fs';
-import { join } from 'path';
+import { join, resolve } from 'path';
 import { defineConfig } from 'dumi';
 
+const openSSR = process.env.SSR || process.env.NODE_ENV === 'production';
+
 // utils must build before core
 // runtime must build before renderer-react
 const pkgList = readdirSync(join(__dirname, 'packages'))
@@ -34,7 +36,14 @@ const alias = pkgList.reduce(
 
     return pre;
   },
-  {} as Record<string, string>,
+  (openSSR
+    ? {
+        // 打开 SSR 的情况下需要配置 wagmi 的别名，因为安装了 18.3.0-canary-c3048aab4-20240326 版本的 react 会导致文档 demo 和 packages 中依赖不同版本的 wagmi（pnpm 的包管理机制的原因），导致出现类似下面这样的错误
+        // `useConfig` must be used within `WagmiProvider`. Docs: https://wagmi.sh/react/api/WagmiProvider.html Version: wagmi@2.12.13
+        wagmi: resolve('./node_modules/wagmi'),
+        '@tanstack/react-query': resolve('./node_modules/@tanstack/react-query'),
+      }
+    : {}) as Record<string, string>,
 );
 
 export default defineConfig({
@@ -52,17 +61,16 @@ export default defineConfig({
     gtag('config', 'G-C31HWEY1D4');
     `,
   ],
-  ssr:
-    process.env.SSR || process.env.NODE_ENV === 'production'
-      ? {
-          // for improve seo
-          // 需要使用 React 18.3.0-canary-c3048aab4-20240326 版本，因为 umi 是基于整个 HTML 做的水合，在 18.3.1 版本有 bug，会导致浏览器插件的内容影响水合
-          // 在 pnpm run build:docs 修改 react 版本，不能在依赖中直接修改，一方面是为了组件开发环境尽可能和用户环境一致，另外一方面是为了避免 vitest 使用多个版本的 React 情况下报错
-          // config useStream to false, 否则会导致 html 不是直接插入到 root 中的
-          // 本地开发关闭 SSR，因为本地使用的是 18.3.1 版本，打开会因为水合失败报错，如果要调试，可以临时安装 React 18.3.0-canary-c3048aab4-20240326 版本，然后打开 ssr 调试
-          useStream: false,
-        }
-      : false,
+  ssr: openSSR
+    ? {
+        // for improve seo
+        // 需要使用 React 18.3.0-canary-c3048aab4-20240326 版本，因为 umi 是基于整个 HTML 做的水合，在 18.3.1 版本有 bug，会导致浏览器插件的内容影响水合
+        // 在 pnpm run build:docs 修改 react 版本，不能在依赖中直接修改，一方面是为了组件开发环境尽可能和用户环境一致，另外一方面是为了避免 vitest 使用多个版本的 React 情况下报错
+        // config useStream to false, 否则会导致 html 不是直接插入到 root 中的
+        // 本地开发关闭 SSR，因为本地使用的是 18.3.1 版本，打开会因为水合失败报错，如果要调试，可以临时安装 React 18.3.0-canary-c3048aab4-20240326 版本，然后打开 ssr 调试
+        useStream: false,
+      }
+    : false,
   mfsu: false,
   alias,
   metas: [

package.json

@@ -135,9 +135,9 @@
     "dumi-theme-antd-web3": "0.4.3",
     "ethers": "^6.13.4",
     "github-contributors-lists": "^1.0.3",
-    "react": "18.3.1",
+    "react": "18.3.0-canary-c3048aab4-20240326",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "18.3.1",
+    "react-dom": "18.3.0-canary-c3048aab4-20240326",
     "viem": "^2.21.3",
     "wagmi": "^2.12.13"
   }

packages/wagmi/src/wagmi-provider/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Locale } from '@ant-design/web3-common';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { Transport, Chain as WagmiChain } from 'viem';
-import { createConfig, http, WagmiProvider } from 'wagmi';
+import { createConfig, http, useReadContract, WagmiProvider } from 'wagmi';
 import type { Config, State } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { walletConnect as wagmiWalletConnect } from 'wagmi/connectors';
@@ -27,6 +27,24 @@ export interface WalletConnectOptions
   useWalletConnectOfficialModal?: boolean;
 }
 
+const CallTest = () => {
+  const result = useReadContract({
+    abi: [
+      {
+        type: 'function',
+        name: 'balanceOf',
+        stateMutability: 'view',
+        outputs: [{ type: 'uint256' }],
+      },
+    ],
+    address: '0x12313',
+    functionName: 'balanceOf',
+    args: [],
+  });
+
+  return <div>xxx</div>;
+};
+
 export type WagmiWeb3ConfigProviderProps = {
   config?: Config;
   locale?: Locale;
@@ -142,6 +160,7 @@ export function WagmiWeb3ConfigProvider({
             typeof walletConnect === 'object' && walletConnect?.useWalletConnectOfficialModal
           }
         >
+          <CallTest />
           {children}
         </AntDesignWeb3ConfigProvider>
       </QueryClientProvider>

packages/web3/src/ethereum/demos/custom-wallet.tsx

@@ -30,7 +30,7 @@ const App: React.FC = () => {
                 return {
                   id: 'testWallet',
                   name: 'TestWallet',
-                  provider: window.ethereum,
+                  provider: typeof window !== 'undefined' && window.ethereum,
                 };
               },
             });

packages/web3/src/ethereum/demos/siwe/sign-btn.tsx

@@ -38,7 +38,7 @@ export default function App() {
         domain: window.location.hostname,
         address,
         statement: 'Sign in with Ethereum',
-        uri: window.location.origin,
+        uri: typeof window !== 'undefined' ? window.location.origin : '',
         version: '1',
         chainId: Mainnet.id,
         nonce,

packages/web3/src/sui/demos/query-client.tsx

@@ -14,7 +14,7 @@ const queryClient = new QueryClient({
 });
 
 const persister = createSyncStoragePersister({
-  storage: window.localStorage,
+  storage: typeof window !== 'undefined' ? window.localStorage : undefined,
 });
 
 const App: React.FC = () => {