Skip to content

Commit 337971f

Browse files
yutingzhao1991kiner-tang
yutingzhao1991
and
kiner-tang
authored
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]>
1 parent aa67d6e commit 337971f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+3524
-1670
lines changed

‎.changeset/eighty-items-lie.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ant-design/web3-wagmi': major
3+
---
4+
5+
feat: upgrade wagmi to 2.0

‎docs/course/demos/connect.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { ConnectButton, Connector } from '@ant-design/web3';
22
import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
3-
import { configureChains, createConfig, mainnet } from 'wagmi';
4-
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
5-
import { publicProvider } from 'wagmi/providers/public';
6-
7-
const { publicClient, chains } = configureChains([mainnet], [publicProvider()]);
3+
import { createConfig, http } from 'wagmi';
4+
import { mainnet } from 'wagmi/chains';
5+
import { injected } from 'wagmi/connectors';
86

97
const config = createConfig({
10-
publicClient,
8+
chains: [mainnet],
119
connectors: [
12-
new MetaMaskConnector({
13-
chains,
10+
injected({
11+
target: 'metaMask',
1412
}),
1513
],
14+
transports: {
15+
[mainnet.id]: http(),
16+
},
1617
});
1718

1819
export default () => {

‎docs/guide/demos/adapter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ export const YourAdapterPropsProvider: React.FC<YourAdapterProps> = (props) => {
2929
// 这里可以实现断开连接的逻辑
3030
return;
3131
}}
32-
switchChain={async (c: Chain) => {
32+
switchChain={async () => {
3333
// 这里可以实现切换链的逻辑
3434
return;
3535
}}
36-
getNFTMetadata={async ({ address: contractAddress, tokenId }) => {
36+
getNFTMetadata={async () => {
3737
// 这里可以实现获取 NFT 元数据的逻辑
3838
return {
3939
name: 'NFT',

‎docs/guide/demos/guide.tsx

+22-33
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,45 @@
11
import { ConnectButton, Connector } from '@ant-design/web3';
22
import {
33
CoinbaseWallet,
4+
MetaMask,
45
TokenPocket,
56
WagmiWeb3ConfigProvider,
67
WalletConnect,
78
} from '@ant-design/web3-wagmi';
8-
import { configureChains, createConfig } from 'wagmi';
9+
import { createConfig, http } from 'wagmi';
910
import { mainnet, polygon } from 'wagmi/chains';
10-
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
11-
import { InjectedConnector } from 'wagmi/connectors/injected';
12-
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
13-
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
14-
import { publicProvider } from 'wagmi/providers/public';
15-
16-
const { publicClient, chains } = configureChains([mainnet, polygon], [publicProvider()]);
11+
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
1712

1813
const config = createConfig({
19-
autoConnect: true,
20-
publicClient,
14+
chains: [mainnet, polygon],
15+
transports: {
16+
[mainnet.id]: http(),
17+
[polygon.id]: http(),
18+
},
2119
connectors: [
22-
new MetaMaskConnector({
23-
chains,
20+
injected({
21+
target: 'metaMask',
2422
}),
25-
new WalletConnectConnector({
26-
chains,
27-
options: {
28-
showQrModal: false,
29-
projectId: YOUR_WALLET_CONNET_PROJECT_ID,
30-
},
23+
walletConnect({
24+
showQrModal: false,
25+
projectId: YOUR_WALLET_CONNET_PROJECT_ID,
3126
}),
32-
new CoinbaseWalletConnector({
33-
chains,
34-
options: {
35-
appName: 'ant.design.web3',
36-
jsonRpcUrl: `https://api.zan.top/node/v1/eth/mainnet/${YOUR_ZAN_API_KEY}`,
37-
},
27+
coinbaseWallet({
28+
appName: 'ant.design.web3',
29+
jsonRpcUrl: `https://api.zan.top/node/v1/eth/mainnet/${YOUR_ZAN_API_KEY}`,
3830
}),
39-
new InjectedConnector({
40-
chains,
41-
options: {
42-
name: 'TokenPocket',
43-
getProvider: () => {
44-
return (window as any).tokenpocket?.ethereum;
45-
},
46-
},
31+
injected({
32+
target: 'tokenPocket',
4733
}),
4834
],
4935
});
5036

5137
const App: React.FC = () => {
5238
return (
53-
<WagmiWeb3ConfigProvider config={config} assets={[WalletConnect, TokenPocket, CoinbaseWallet]}>
39+
<WagmiWeb3ConfigProvider
40+
config={config}
41+
wallets={[MetaMask(), WalletConnect(), TokenPocket(), CoinbaseWallet()]}
42+
>
5443
<Connector>
5544
<ConnectButton />
5645
</Connector>

‎docs/guide/demos/quick-start.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { NFTImage } from '@ant-design/web3';
22
import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
3-
import { configureChains, createConfig, mainnet } from 'wagmi';
4-
import { publicProvider } from 'wagmi/providers/public';
5-
6-
const { publicClient } = configureChains([mainnet], [publicProvider()]);
3+
import { createConfig, http } from 'wagmi';
4+
import { mainnet } from 'wagmi/chains';
75

86
const config = createConfig({
9-
publicClient,
7+
chains: [mainnet],
8+
transports: {
9+
[mainnet.id]: http(),
10+
},
1011
});
1112

1213
const App: React.FC = () => {

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,8 @@
8282
"typescript": "^5.3.3",
8383
"vite-plugin-svgr": "^4.2.0",
8484
"vitest": "~1.1.0",
85-
"wagmi": "^1.4.12"
85+
"wagmi": "^2.0.0",
86+
"@tanstack/react-query": "^5.17.0"
8687
},
8788
"ci": {
8889
"type": "aci",

‎packages/wagmi/package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,18 @@
3636
"dependencies": {
3737
"@ant-design/web3-assets": "workspace:*",
3838
"@ant-design/web3-common": "workspace:*",
39-
"debug": "^4.3.4"
39+
"debug": "^4.3.4",
40+
"@wagmi/core": "^2.0.0",
41+
"viem": "2.0.0",
42+
"@tanstack/react-query": "^5.17.0"
4043
},
4144
"devDependencies": {
4245
"@types/debug": "^4.1.12",
43-
"@wagmi/core": "^1.4.12",
4446
"father": "^4.3.8",
4547
"typescript": "^5.3.3"
4648
},
4749
"peerDependencies": {
48-
"wagmi": "^1.4.12"
50+
"wagmi": "^2.0.0"
4951
},
5052
"publishConfig": {
5153
"registry": "https://registry.npmjs.org",

‎packages/wagmi/src/interface.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import type { Wallet } from '@ant-design/web3-common';
1+
import type { Wallet, WalletMetadata } from '@ant-design/web3-common';
22
import type { Connector } from 'wagmi';
33

44
export interface WalletUseInWagmiAdapter extends Wallet {
5-
getWagmiConnector?: () => Connector | undefined;
5+
getWagmiConnector?: () => Promise<Connector | undefined>;
66
}
77

8+
export type EthereumWallet = (metadata?: Partial<WalletMetadata>) => WalletFactory;
9+
810
export interface WalletFactory {
9-
name: Connector['name'] | Connector['name'][];
10-
create: (connector?: Connector | Connector[]) => WalletUseInWagmiAdapter;
11+
connectors: Connector['name'][];
12+
create: (connector?: readonly Connector[]) => WalletUseInWagmiAdapter;
1113
}

‎packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@ const mockConnector = {
1313

1414
vi.mock('wagmi', () => {
1515
return {
16+
useConfig: () => {
17+
return {};
18+
},
1619
// https://wagmi.sh/react/hooks/useAccount
1720
useAccount: () => {
1821
return {
22+
chain: mainnet,
1923
address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
2024
connector: mockConnector,
2125
};
@@ -30,14 +34,9 @@ vi.mock('wagmi', () => {
3034
disconnectAsync: () => {},
3135
};
3236
},
33-
useNetwork: () => {
34-
return {
35-
chain: mainnet,
36-
};
37-
},
38-
useSwitchNetwork: () => {
37+
useSwitchChain: () => {
3938
return {
40-
switchNetwork: () => {},
39+
switchChain: () => {},
4140
};
4241
},
4342
useBalance: () => {
@@ -59,7 +58,8 @@ describe('WagmiWeb3ConfigProvider balance', () => {
5958
availableConnectors={[]}
6059
balance
6160
availableChains={[mainnet]}
62-
assets={[Mainnet, MetaMask]}
61+
walletFactorys={[MetaMask()]}
62+
chainAssets={[Mainnet]}
6363
>
6464
<Connector>
6565
<ConnectButton />
@@ -78,7 +78,8 @@ describe('WagmiWeb3ConfigProvider balance', () => {
7878
<AntDesignWeb3ConfigProvider
7979
availableConnectors={[]}
8080
availableChains={[mainnet]}
81-
assets={[Mainnet, MetaMask]}
81+
walletFactorys={[MetaMask()]}
82+
chainAssets={[Mainnet]}
8283
>
8384
<Connector>
8485
<ConnectButton />

0 commit comments

Comments
 (0)