添加 @ant-design/web3-wagmi

[yutingzhao1991]

在研究 web3modal 和 wagmi 源码的时候有了新的想法，感觉我们还是应该先搞一个 @ant-design/web3-wagmi ，基于 wagmi 给我们的组件提供一套 universal api，原因如下：

• 实现成本更低，当前的 @ant-design/web3-ethereum 会更通用，理论上可以和 ethers.js , web3.js 和 wagmi 一起用，但是要实现得完整还是有很多细节要处理。但是如果只考虑 wagmi 的话，实现起来就容易多了，不需要考虑通用型，只要通过 wagmi 把我们定义的 universal api 实现就好了。
• 核心逻辑的质量由 wagmi 保证，多这个包的维护成本应该不高。
• 可以和 wagmi 针对性更深度的整合，能够吸引 wagmi 的用户。

@jeasonstudio 你怎么看。

[yutingzhao1991]

具体实现起来感觉我们还可以比 web3modal 更简单一些：

import { WagmiProvider } from '@ant-design/web3-wagmi';
import { ConnectButton } from '@ant-design/web3';

default () => {
  return (
    <WagmiProvider config={ /* 这里就用 wagmi 的配置 */}>
      <ConnectButton />
    </WagmiProvider>
  );
}

其实就是一个适配层，适配层就是基于 wagmi 来提供 antd-web3 组件要的接口和状态。

[jeasonstudio]

wagmi 和 viem 在桥接 react/js 和 rpc 上已经做的很出色了，我们如果不直接用其实也是要实现个差不多的东西，这么看下来直接使用 wagmi 也没什么太大问题，会帮助我们解决很多问题，我很赞成引入 wagmi

[yutingzhao1991]

其实不叫引入 wagmi，应该叫做适配 wagmi，@ant-design/web3 里面没有任何和 wagmi 相关的内容。

或者应该是：通过引入 wagmi 适配以太坊。以后可能要适配别的链也会面临类似的选择。

[yutingzhao1991]

用法上看看有没有什么建议 @jeasonstudio ?

[jeasonstudio]

wagmi 提供了很多好用的 hooks，比如 useConnect/useEnsName 等，但它本身是面向 Ethereum 设计的，如果我们在组件中直接用这些 hooks，会导致我们直接丢失掉对多链的支持能力；

如果我们是坚持要支持多链架构，就需要考虑下面两个方案：

1. 在 UI 组件的实现中使用 abstract api/hooks，需要我们在 web3-ethereum 中对 wagmi 做一层包装，其他链的包装其他 sdk，做到最终 api 统一；
2. 先不管其他链的需求，其他链的 api 都适配到 wagmi 的 API；

甚至现在我觉得坚持多链的架构会成为一个很大的负担，可以考虑 1.0 成熟后再去设计，或者直接从组件层面作区分，比如 EthConnector 和 SolanaConnector；

[yutingzhao1991]

我们不会在组件里面直接用 wagmi 的，组件里面用的都是通过 Web3ConfigProvider 暴露的统一的接口。

[yutingzhao1991]

甚至现在我觉得坚持多链的架构会成为一个很大的负担

这个目前看感觉还好，在 Web3ConfigProvider 上定义的 api 都比较简单通用

[yutingzhao1991]

仔细研究了一下 wagmi 的用法，感觉更简单的方式就是不改造 wagmi 的配置方式，只是基于 wagmi 的 hooks 来封装 @ant-design/web3 的 Web3ConfigProvider 即可：

import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { InjectedConnector } from 'wagmi/connectors/injected';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { ConnectButton } from '@ant-design/web3';
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
);
 
const config = createConfig({
  connectors: [
    new InjectedConnector({ chains }),
    new MetaMaskConnector(),
    new WalletConnectConnector({
      chains,
      options: {
        projectId: '...',
      },
    }),
  ],
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
});

function App() {
  return (
    <WagmiConfig config={config}>
      <WagmiWeb3ConfigProvider>
        <ConnectButton />
      </WagmiWeb3ConfigProvider>
    </WagmiConfig>
  )
}

我们要实现的其实就是 WagmiWeb3ConfigProvider，WagmiWeb3ConfigProvider 的实现方式其实就是基于 wagmi 的 hooks，提供 @ant-design/web3 的 Web3ConfigProvider 需要的 context。

或者可以这么理解，现在我们有了 @ant-design/web3 这个组件库，是纯 UI 的，我们需要提供相关链的逻辑，理论上讲用户完全可以自己用 wagmi 来实现，只是我们现在把这套实现封装了一下。按照这个逻辑的话 @ant-design/web3-wagmi 的逻辑和实现就很简单了，大概如下：

import React from 'react';
import { Web3ConfigProvider } from '@ant-design/web3';
import { useConnect, useAccount } from 'wagmi';

export interface WagmiWeb3ConfigProviderProps {
  children?: React.ReactNode;
}

export const WagmiWeb3ConfigProvider: React.FC<WagmiWeb3ConfigProviderProps> = ({ children }) => {
  const { connectors } = useConnect();
  const { acounts } = useAccount();
  const wallets = React.useMemo(() => {
    // 这里把 connectors 转换成 antd-web3 需要的格式
  }, [connectors]);
  return (
    <Web3ConfigProvider wallets={wallets} acounts={acounts}>
      {children}
    </Web3ConfigProvider>
  );
}

这样的话，@ant-design/web3 就可以通过 @ant-design/web3-wagmi 很丝滑的接入 wagmi，成为 wagmi 用户的很好的一个补充，也完全不会侵入 wagmi 原生的配置，我们只是提供 UI 组件。

未来其他链也是类似，本质上我们要做的事情就是基于这个链的生态已经有的东西来适配 @ant-design/web3，补充这个链生态中缺少的 UI 组件这一环。

当然 @ant-design/web3-ethereum 还是可以继续做的，思路还是不变，它是作为配合 web3.js 和 ethers.js 使用的选择。

[jeasonstudio]

是不是可以直接将 wagmi 集成到 @ant-design/web3-ethereum 内部，而不提供一个单独的 @ant-design/web3-wagmi，如果要兼容 ethers.js 的 v5/v6 可以直接透出官方的适配方案 https://wagmi.sh/core/ethers-adapters，如果要兼容 web3.js 肯能要我们做下兼容或者贡献到 viem 项目。

[yutingzhao1991]

看了一下，如果我们要实现 @ant-design/web3-ethereum 的话确实可以用 wagmi 的这套适配方案来做，这个后面可以具体看看。但是如果用户本身就是 wagmi 的用户的话应该还是用 @ant-design/web3-wagmi。这两个目前还是分开好，至少对于 wagmi 的用户来说，还是用 @ant-design/web3-wagmi 比较纯粹。

[yutingzhao1991]

已经完成开发，后面可以先主推这种方式，相对可靠一些。 @ant-design/web3-ethereum 可以先作为实验性功能和一个示例，反倒是未来可以先考虑做 @ant-design/web3-sui 这样的包来支持非以太坊的链。