feat: upgrade wagmi to 2.0 (#485)

* feat: upgrade wagmi to 2.0 * docs: add changelog * fix: wallet connect config bug * test: update test case for wagmi 2 * fix: test and ci * feat: split wallet and chains from assets * chore: update doc * fix: ci * fix: chains bug * test: improve test coverage * chore：remove useless code * chore: update demo wallet project id * feat: update wallet factory logic * test: update test case * chore: remove built-in for MetaMask * docs: update QueryClient doc * chore: update demo * feat: WalletConnect support useWalletConnectOfficialModal * docs: add @tanstack/react-query install * chore: update guide demo * Update packages/wagmi/src/interface.ts Co-authored-by: kiner-tang <[email protected]> * Update packages/wagmi/src/wagmi-provider/config-provider.tsx Co-authored-by: kiner-tang <[email protected]> * Update packages/wagmi/src/wagmi-provider/config-provider.tsx Co-authored-by: kiner-tang <[email protected]> * fix: move @tanstack/react-query to dep --------- Co-authored-by: kiner-tang <[email protected]>
ant-design · Jan 12, 2024 · 337971f · 337971f
1 parent aa67d6e
commit 337971f
Show file tree

Hide file tree

Showing 50 changed files with 3,524 additions and 1,670 deletions.
diff --git a/.changeset/eighty-items-lie.md b/.changeset/eighty-items-lie.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3-wagmi': major
+---
+
+feat: upgrade wagmi to 2.0
diff --git a/docs/course/demos/connect.tsx b/docs/course/demos/connect.tsx
@@ -1,18 +1,19 @@
 import { ConnectButton, Connector } from '@ant-design/web3';
 import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
-import { configureChains, createConfig, mainnet } from 'wagmi';
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
-import { publicProvider } from 'wagmi/providers/public';
-
-const { publicClient, chains } = configureChains([mainnet], [publicProvider()]);
+import { createConfig, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { injected } from 'wagmi/connectors';
 
 const config = createConfig({
-  publicClient,
+  chains: [mainnet],
   connectors: [
-    new MetaMaskConnector({
-      chains,
+    injected({
+      target: 'metaMask',
     }),
   ],
+  transports: {
+    [mainnet.id]: http(),
+  },
 });
 
 export default () => {

diff --git a/docs/guide/demos/adapter.tsx b/docs/guide/demos/adapter.tsx
@@ -29,11 +29,11 @@ export const YourAdapterPropsProvider: React.FC<YourAdapterProps> = (props) => {
         // 这里可以实现断开连接的逻辑
         return;
       }}
-      switchChain={async (c: Chain) => {
+      switchChain={async () => {
         // 这里可以实现切换链的逻辑
         return;
       }}
-      getNFTMetadata={async ({ address: contractAddress, tokenId }) => {
+      getNFTMetadata={async () => {
         // 这里可以实现获取 NFT 元数据的逻辑
         return {
           name: 'NFT',

diff --git a/docs/guide/demos/guide.tsx b/docs/guide/demos/guide.tsx
@@ -1,56 +1,45 @@
 import { ConnectButton, Connector } from '@ant-design/web3';
 import {
   CoinbaseWallet,
+  MetaMask,
   TokenPocket,
   WagmiWeb3ConfigProvider,
   WalletConnect,
 } from '@ant-design/web3-wagmi';
-import { configureChains, createConfig } from 'wagmi';
+import { createConfig, http } from 'wagmi';
 import { mainnet, polygon } from 'wagmi/chains';
-import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
-import { InjectedConnector } from 'wagmi/connectors/injected';
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
-import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { publicProvider } from 'wagmi/providers/public';
-
-const { publicClient, chains } = configureChains([mainnet, polygon], [publicProvider()]);
+import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
 
 const config = createConfig({
-  autoConnect: true,
-  publicClient,
+  chains: [mainnet, polygon],
+  transports: {
+    [mainnet.id]: http(),
+    [polygon.id]: http(),
+  },
   connectors: [
-    new MetaMaskConnector({
-      chains,
+    injected({
+      target: 'metaMask',
     }),
-    new WalletConnectConnector({
-      chains,
-      options: {
-        showQrModal: false,
-        projectId: YOUR_WALLET_CONNET_PROJECT_ID,
-      },
+    walletConnect({
+      showQrModal: false,
+      projectId: YOUR_WALLET_CONNET_PROJECT_ID,
     }),
-    new CoinbaseWalletConnector({
-      chains,
-      options: {
-        appName: 'ant.design.web3',
-        jsonRpcUrl: `https://api.zan.top/node/v1/eth/mainnet/${YOUR_ZAN_API_KEY}`,
-      },
+    coinbaseWallet({
+      appName: 'ant.design.web3',
+      jsonRpcUrl: `https://api.zan.top/node/v1/eth/mainnet/${YOUR_ZAN_API_KEY}`,
     }),
-    new InjectedConnector({
-      chains,
-      options: {
-        name: 'TokenPocket',
-        getProvider: () => {
-          return (window as any).tokenpocket?.ethereum;
-        },
-      },
+    injected({
+      target: 'tokenPocket',
     }),
   ],
 });
 
 const App: React.FC = () => {
   return (
-    <WagmiWeb3ConfigProvider config={config} assets={[WalletConnect, TokenPocket, CoinbaseWallet]}>
+    <WagmiWeb3ConfigProvider
+      config={config}
+      wallets={[MetaMask(), WalletConnect(), TokenPocket(), CoinbaseWallet()]}
+    >
       <Connector>
         <ConnectButton />
       </Connector>

diff --git a/docs/guide/demos/quick-start.tsx b/docs/guide/demos/quick-start.tsx
@@ -1,12 +1,13 @@
 import { NFTImage } from '@ant-design/web3';
 import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
-import { configureChains, createConfig, mainnet } from 'wagmi';
-import { publicProvider } from 'wagmi/providers/public';
-
-const { publicClient } = configureChains([mainnet], [publicProvider()]);
+import { createConfig, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
 
 const config = createConfig({
-  publicClient,
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
 });
 
 const App: React.FC = () => {

diff --git a/package.json b/package.json
@@ -82,7 +82,8 @@
     "typescript": "^5.3.3",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "~1.1.0",
-    "wagmi": "^1.4.12"
+    "wagmi": "^2.0.0",
+    "@tanstack/react-query": "^5.17.0"
   },
   "ci": {
     "type": "aci",

diff --git a/packages/wagmi/package.json b/packages/wagmi/package.json
@@ -36,16 +36,18 @@
   "dependencies": {
     "@ant-design/web3-assets": "workspace:*",
     "@ant-design/web3-common": "workspace:*",
-    "debug": "^4.3.4"
+    "debug": "^4.3.4",
+    "@wagmi/core": "^2.0.0",
+    "viem": "2.0.0",
+    "@tanstack/react-query": "^5.17.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "@wagmi/core": "^1.4.12",
     "father": "^4.3.8",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "wagmi": "^1.4.12"
+    "wagmi": "^2.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

diff --git a/packages/wagmi/src/interface.ts b/packages/wagmi/src/interface.ts
@@ -1,11 +1,13 @@
-import type { Wallet } from '@ant-design/web3-common';
+import type { Wallet, WalletMetadata } from '@ant-design/web3-common';
 import type { Connector } from 'wagmi';
 
 export interface WalletUseInWagmiAdapter extends Wallet {
-  getWagmiConnector?: () => Connector | undefined;
+  getWagmiConnector?: () => Promise<Connector | undefined>;
 }
 
+export type EthereumWallet = (metadata?: Partial<WalletMetadata>) => WalletFactory;
+
 export interface WalletFactory {
-  name: Connector['name'] | Connector['name'][];
-  create: (connector?: Connector | Connector[]) => WalletUseInWagmiAdapter;
+  connectors: Connector['name'][];
+  create: (connector?: readonly Connector[]) => WalletUseInWagmiAdapter;
 }
diff --git a/packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx
@@ -13,9 +13,13 @@ const mockConnector = {
 
 vi.mock('wagmi', () => {
   return {
+    useConfig: () => {
+      return {};
+    },
     // https://wagmi.sh/react/hooks/useAccount
     useAccount: () => {
       return {
+        chain: mainnet,
         address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
         connector: mockConnector,
       };
@@ -30,14 +34,9 @@ vi.mock('wagmi', () => {
         disconnectAsync: () => {},
       };
     },
-    useNetwork: () => {
-      return {
-        chain: mainnet,
-      };
-    },
-    useSwitchNetwork: () => {
+    useSwitchChain: () => {
       return {
-        switchNetwork: () => {},
+        switchChain: () => {},
       };
     },
     useBalance: () => {
@@ -59,7 +58,8 @@ describe('WagmiWeb3ConfigProvider balance', () => {
         availableConnectors={[]}
         balance
         availableChains={[mainnet]}
-        assets={[Mainnet, MetaMask]}
+        walletFactorys={[MetaMask()]}
+        chainAssets={[Mainnet]}
       >
         <Connector>
           <ConnectButton />
@@ -78,7 +78,8 @@ describe('WagmiWeb3ConfigProvider balance', () => {
       <AntDesignWeb3ConfigProvider
         availableConnectors={[]}
         availableChains={[mainnet]}
-        assets={[Mainnet, MetaMask]}
+        walletFactorys={[MetaMask()]}
+        chainAssets={[Mainnet]}
       >
         <Connector>
           <ConnectButton />