组件和链交互的规范讨论，欢迎大家来提想法

[yutingzhao1991]

最近开发的时候有了一些新的思考，感觉我们需要重新审视一下 Ant Design Web3 的定位，以及它的各个组件开发上的一些原则和规范，尤其是和区块链交互这一部分，是和 Ant Design 不一样的。比如：

• 组件暴露的属性应该遵循什么原则，尤其是涉及到和链交互的部分。
• 链的状态和组件需要的链的 API 通过什么方式提供？具体设计也要好好定义。
• 是否要兼容以太坊之外的链？
• 是否要使用或者兼容 wagmi 这套 hooks？

[Dunqing]

看了下代码，还提供了provider，这个定位是类似rainbow吗？看起来不是一个纯组件库。

[kiner-tang]

感觉定位应该是 web 3.0 的边界富集工具库和组件库的合集吧

[yutingzhao1991]

嗯，不完全是纯 UI 组件库，可以看我下面新的回复。

[yutingzhao1991]

狭义的 @ant-design/web3 这个包我觉得就是一个组件库，一个通用的 Web3 组件库，可以适用于不同的链。广义的就是一套 Web3 UI 组件解决方案。提供了一套规范，可以通过 @ant-design/web3-ethereum 这样的扩展更便捷的实现 Web3 Dapp 的 UI。

[yutingzhao1991]

结合之前在 #11 这里的讨论，我重新梳理了一下一些关键想法：

1. 首先 @ant-design/web3 这个 UI 组件库，可以理解为 Web3 垂直领域的 UI 组件。可以单独以 UI 组件的方式用。比如现在的 ConnectButton 包括后面要做 NFTCard，都应该要支持用户仅仅作为 UI 组件使用，可以不涉及到具体链的交互。保证这套组件的纯粹性，已经可以更灵活的适用到不同的场景。
2. 定义一个 Web3ConfigProvider 给组件提供链连接的状态信息和接口，比如提供 accounts 信息通过 React Context 传递给组件，组件如果发现有这样的 context 就可以直接用。Web3ConfigProvider 现在已经有实现了，只是名字感觉不是特别好，可以再想想。它本身并不提供实际的数据和接口，只是定义了一套通用的可以兼容不同链的规范，具体见现在的实现 https://github.com/ant-design/ant-design-web3/blob/main/packages/common/src/web3-config-provider/index.tsx。具体的实现需要开发者自己实现，当然我们会实现 @ant-design/web3-ethereum 作为官方的一套实现。
3. @ant-design/web3-ethereum 的实现也很重要，用来支持以太坊，另外还要做到可以和 ethers.js web3.js viem wagmi 这些社区流行的库和 SDK 一起使用。这里面其实逻辑细节特别多，涉及到和不同的钱包，不同的链（以太坊也有很多 L2 和测试链）交互，它的内部技术方案也很重要，不过内部的技术方案对于用户是无感的，只是为了我们可以更好维护。

从这个思路上来看，用户在使用的时候可以有如下的使用方式：

方式一，仅仅作为 UI 来使用：

export default () => {
  return (
    <ConnectButton accounts={[...]} chains={[...]} onClick={() => {}} />
  );
}

方式二，可以通过 Web3ConfigProvider 自己提供链的 API 给到组件：

export default () => {
  return (
    <Web3ConfigProvider accounts={[]} provider={{
        requestAccount: () => { ... }
    }}>
       <ConnectButton />
    </Web3ConfigProvider>
  );
}

方式三，可以用封装好的实现：

import { Web3Provider } from '@ant-design/web3-ethereum'; // 官方实现以太坊的适配，未来可能会有其它链的实现。

export default () => {
  return (
    <Web3Provider {/*这里的配置不同的链不一样*/}>
       <ConnectButton />
    </Web3Provider>
  );
}

这个是基本的思路，大家可以看看有没有什么想法。

[yutingzhao1991]

关于 Web3ConfigProvider 的涉及是比较关键的一个点，一方面它给组件提供链的连接状态等信息和交互接口，另外不同的链也要适配匹配到它的 API。

其中 ConfigConsumerProps 是组件中 Context 的类型，现在是这样的：

export interface ConfigConsumerProps {
  provider?: UniversalWeb3ProviderInterface;
  accounts?: Account[];
}

想了一下，应该还要加上当前连接的链，可用的钱包等信息：

export interface ConfigConsumerProps {
  provider?: UniversalWeb3ProviderInterface;
  accounts?: Account[];
  wallets?: Wallet[];
  chains?: Chains[];
}

这样 ConnectModel 就可以直接从 context 里面拿到 wallets 的信息了，不过组件应该优先用自己的 props 里面的。

UniversalWeb3ProviderInterface 的 API 涉及也要好好考虑下，下面是当前的接口：

export interface UniversalWeb3ProviderInterface {
  getAccounts: () => Promise<Account[]>;
  getCurrentAccount: () => Promise<Account | undefined>;
  getCurrentNetwork: () => Promise<number>;
  requestAccounts: (wallet?: string) => Promise<Account[]>;
  getQrCodeLink: () => Promise<string>;
  getNFTMetadata: (address: string, id: number) => Promise<NFTMetadata>;
  getAvaliableWallets: () => Promise<WalletMetadata[]>;
  disconnect: () => Promise<void>;
  on: (type: UniversalWeb3ProviderEventType, handler: (params?: any) => void) => void;
  off: (type: UniversalWeb3ProviderEventType, handler: (params?: any) => void) => void;
}

感觉可以再好好考量一下。

[jeasonstudio]

1. 组件层面我们尽量做到通用和解耦，UI 层需要能够单独使用，比如用户可以独立用我们的 UnconnectButton 和 ConnectButton 组件并组合成完成的功能模块；
2. 组件需要提供受控模式和非受控模式；
3. 组件层面通用的 Web3ConfigProvider 是一个更纯粹的 react context provider，它尽量不包括链相关状态的维护，它规范了各个组件调用的链方法规范，类似之前的 UniversalProvider API 设计；
4. Web3ConfigProvider 需要参考 ProComponents 中的设计思路，既要包括 AntD ConfigProvider 的配置能力（主题、多语言等等），又要根据自身组件需求做抽象，设计一些多个组件都可以复用的 props
5. 不同的链要实现不同的适配层逻辑，比如 @ant-design/web3-ethereum，它需要完整实现 Web3ConfigProvider 中要求的通用 API，同时也应该在 EthereumProvider 中做好部分链上状态的维护，比如连接钱包之后的当前用户信息、当前链信息等；
6. 链内部的 rpc 和钱包连接方式需要在适配层的包里面去设计和约束，如果是 ZAN、Infura 这种支持多条链的情况，后期再考虑如何通用化；
7. @ant-design/web3-ethereum 中通过 createEIP1193Provider 方法对外暴露了以太坊生态中比较标准的 API，方便用户对接其他 SDK，当然这个不是所有链的适配层都要实现的，具体情况具体分析；

以上是和 @yutingzhao1991 对齐的部分结论，愚指导看看有没有别的补充的

[yutingzhao1991]

嗯，没啥问题，我补充下对应具体的用法如下：

1. 纯 UI 组件用法

首先，所有组件都可以直接使用，当做纯 UI 组件。比如对于 ConnectButton 可以这么用：

import { ConnectButton, Account } from '@ant-deisgn/web3';

export default () => {
  const [accounts, setAccounts] = React.useState<Account[]>([]);
  return (
    <ConnectButton
      accounts={accounts}
      onAccountsChanged={setAccounts}
      onRequestAccounts={() => {
        // 用户自己处理连接，然后调用 setAccounts
        setAccounts(/**/)
    }}/>
  );
};

这里的 accounts 其实就类似 antd Input 的 value 一样，也可以支持受控，非受控。

2. Web3ConfigProvider 全局配置

另外，用户可以通过 Web3ConfigProvider 统一配置。比如：

import { ConnectButton, NFTCard, Web3ConfigProvider } from '@ant-deisgn/web3';

export default () => {
  return (
    <Web3ConfigProvider
      requestNFTMetadata={() => {/* TODO */}}
      accounts={[]}
      onAccountsChanged={setAccounts}
      onRequestAccounts={}
   >
        <ConnectButton />
        <ConnectButton />
        <NFTCard address="xxxx" tokenId="xxx" />
    <Web3ConfigProvider/>
  );
}
 

3. EthereumProvider 适配以太坊

1 和 2 其实都是纯 UI 的用法，用法 2 其实只是提供了一个 Context 来提供通用的配置。和链连接以及请求链数据和维护用户状态的逻辑还是需要用户自己实现。所以官方提供一个 @ant-design/web3-ethereum 来封装以太坊的相关逻辑。当然未来也可以实现类型 @ant-design/web-sui 这样的包用来支持 sui 这条链。其他链也类似。

EthereumProvider 封装 Web3ConfigProvider，用户的用法就变成：

import { EthereumProvider } from '@ant-design/web3';
import { ConnectButton, NFTCard } from '@ant-deisgn/web3';

export default () => {
  return (
    <EthereumProvider {/** EthereumProvider 的 Props 则和以太坊相关，和组件没有直接关系，未来其他不同的链的实现也都可能不一样 **/ }>
      <ConnectButton />
      <ConnectButton />
      <NFTCard address="xxxx" tokenId="xxx" />
    <EthereumProvider/>
  );
}