讨论 wagmi 配置的最佳实践：https://github.com/ant-design/ant-design-web3/pull/900#discussion_r1613405108

[Jeason]

讨论 wagmi 配置的最佳实践：#900 (comment)

1. 用户在外部 createConfig 创建好传入（目前的方式）
2. 把 createConfig params 拆出来放到 WagmiProvider 上
3. 同时支持两种

Originally posted by @jeasonstudio in #917 (comment)

倾向用方案 2，需要写系分看下，在这里跟进

[愚指导]

可以先以 https://web3.ant.design/components/ethereum 这个推荐配置看看优化为什么样：

这个是优化前：

import { ConnectButton, Connector } from '@ant-design/web3';
import {
  MetaMask,
  OkxWallet,
  TokenPocket,
  WagmiWeb3ConfigProvider,
  WalletConnect,
} from '@ant-design/web3-wagmi';
import { QueryClient } from '@tanstack/react-query';
import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { walletConnect } from 'wagmi/connectors';

const queryClient = new QueryClient();

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  connectors: [
    walletConnect({
      showQrModal: false,
      projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
    }),
  ],
});

const App: React.FC = () => {
  return (
    <WagmiWeb3ConfigProvider
      eip6963={{
        autoAddInjectedWallets: true,
      }}
      ens
      wallets={[
        MetaMask(),
        WalletConnect(),
        TokenPocket({
          group: 'Popular',
        }),
        OkxWallet(),
      ]}
      config={config}
      queryClient={queryClient}
    >
      <Connector
        modalProps={{
          mode: 'simple',
        }}
      >
        <ConnectButton quickConnect />
      </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

export default App;

优化后我的想法是可以改为：

import { ConnectButton, Connector } from '@ant-design/web3';
import {
  MetaMask,
  OkxWallet,
  TokenPocket,
  WagmiWeb3ConfigProvider,
  WalletConnect,
  Mainnet,
} from '@ant-design/web3-wagmi';

const App: React.FC = () => {
  return (
    <WagmiWeb3ConfigProvider
      walletConnect={{
         projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
      }}
      eip6963={{
        autoAddInjectedWallets: true,
      }}
      ens
      chains={[Mainnet({
        http: true, // 这里也可以用 string，指定 rpc 地址，比如用 zan 的 rpc 地址
      })]}
      wallets={[
        MetaMask(),
        WalletConnect(),
        TokenPocket({
          group: 'Popular',
        }),
        OkxWallet(),
      ]}
    >
      <Connector
        modalProps={{
          mode: 'simple',
        }}
      >
        <ConnectButton quickConnect />
      </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

export default App;

[愚指导]

如果按照上面这个方案来的话好像改动也不大，现有的逻辑都不用改，判断如果用户没有传 config 的话就帮忙按照配置 create 一个就可以了。