关于 ConnectButton 的 buttonProps 属性

[kiner-tang]

目前，我们的 ConnectButton 是基于 antd 的 Button 进行的上层封装，在使用过程中，可能需要使用到 antd 的 Button 的各种原生属性，当前我们的设计是这样的：

这样设计有个好处是可以直接像使用 antd 的 Button 一样使用 ConnectButton，但也可能带来一些副作用，例如 antd 中 Button 属性增加了一个新的属性，刚好跟我们 ConnectButton 自定义的属性命名重名的话就会出现了冲突。以及如果使用这个设计的话，我们在文档中不方便描述那些原始属性。
因此，这边想参考 pro-components 中的设计，如：modalProps 属性，这样，我们在文档中只需要简单的导引过去即可：


并且可以避免上述的命名冲突的问题。

相关改动已经有 PR，可以到：#59 看看

[RedJue]

赞成第二种，相对解耦，因为我们不是基础组件，一些原生属性理论上应该只提供接口暴露。

[yutingzhao1991]

我觉得不需要， 这个组件本来就叫 ConnectButton，上面再有一个 buttonProps 太奇怪了。倒是可以有一个 modalProps。

冲突的问题感觉概率很小，即便是出现也可以换一个别名。

就好像 ProCard 继承了 Card 的属性一样，如果参考 antd pro 的话就更不应该修改了。

[kiner-tang]

目前设计稿，至少纯 Button 和 Dropdown 感觉就可以看成两种不同的变体：

[RedJue]

那名字可以换一下，用连接器可能更适合，API 参考 antd 的变体形式

[RedJue]

Button 形式可以作为默认展现，可以不用xx.Button，其他变体可以跟上后缀

[kiner-tang]

@yutingzhao1991 觉得如何，如果这个方案没问题，我再出一个详细的 RFC

[yutingzhao1991]

嗯看上去OK

[yutingzhao1991]

这个组件很重要，得 work 起来了，可以按照 https://web3.ant.design/zh-CN/guide/contributing 拆分下任务，这样可以更多人一起进来协作。

@kiner-tang @jeasonstudio 看看你们谁先做下一个模块拆分的设计，先按照新的设计思路把架子搭起来，尽快可以推动可以开发的任务拆分出来。这样我这边也可以一起来看看。

[kiner-tang]

好的，我这两天捋一捋，再跟 @jeasonstudio 一起出一个 RFC 出来大家讨论一下

[yutingzhao1991]

嗯，可以先把大概的组件架子和内部模块的接口定下来，这样后面可以大家一起来搞。

[jeasonstudio]

connector 组件本质是 button 的组合，但在当前的垂直场景下部分 props 可以考虑做裁剪，一些基本的设计如下：
@kiner-tang

export interface Chain {} // MOCK
export interface Account {} // MOCK

// Universal Props
// danger 看起来不需要
// href/htmlType/target
export interface UniversalConnectorProps
  extends Exclude<ButtonProps, 'danger' | 'href' | 'htmlType' | 'target'> {
  // 这里应该继承 Web3ConfigProvider 上定义的部分通用 props
  // 比如 onRequestAccounts/onRequestTokenMetadata 等
  // 这些与 UI 无关，暂时省略
}

// 链切换的 button/dropdown props, 无论展示形式如何都应该用 button 做 trigger
export interface ChainSwitcherProps extends UniversalConnectorProps {
  // 允许的链列表（这个只能受控）
  // 但如果不传我们应该要默认只有一个 eth mainnet
  chains?: Chain[];
  onChainChange?: (chain: Chain) => void;

  // 由于要兼容不同的弹出形式（dropdown 和 modal），这里不继承某一个组件的 props
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  destroyOnHide?: boolean;
}

// 未连接状态下的按钮
export interface UnconnectedConnectorProps extends UniversalConnectorProps {
  // 未连接状态按钮应该包含 `ConnectModal` 组件的 props
  // 这里预留出来
}

// 已连接状态下的按钮
export interface ConnectedConnectorProps extends UniversalConnectorProps {
  // 当前账户，如果不传则为非受控，传了按受控处理
  account?: Account;
  onAccountChange?: (account: Account) => void;

  // 是否展示余额
  showBalance?: boolean;

  // 是否展示地址信息(包括地址和 ens)
  showAddress?: 'full' | 'ellipsis' | 'ens' | false;

  // 是否展示头像
  showAvatar?: boolean;

  // 同样要兼容不同的弹出形式（dropdown 和 modal）
  // 本期暂时不支持扩展 dropdown 的 menus
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  destroyOnHide?: boolean;
}

// 对多种状态的组合组件，需要包含上述用到的几个组件的 props
export interface ConnectorProps
  extends UniversalConnectorProps,
    Pick<ChainSwitcherProps, 'chains' | 'onChainChange'>,
    Pick<
      ConnectedConnectorProps,
      'account' | 'onAccountChange' | 'showBalance' | 'showAddress' | 'showAvatar'
    > {
  // 参考 antd 命名规范选择了 showChainSwitcher
  showChainSwitcher?: boolean;
  // ChainSwitcherProps rename
  chainSwitcherOpen?: boolean;
  onchainSwitcherOpenChange?: (open: boolean) => void;
  destroyOnchainSwitcherHide?: boolean;

  // ConnectedConnectorProps rename
  connectorOpen?: boolean;
  onConnectorOpenChange?: (open: boolean) => void;
  destroyOnConnectorHide?: boolean;
}

[yutingzhao1991]

UnconnectedConnectorProps 这个是在哪里用的？看上面好像只做了定义，没有地方透出。

[kiner-tang]

// 链切换的 button/dropdown props, 无论展示形式如何都应该用 button 做 trigger

感觉这个是不是不必要限制得那么死，其实后期或许会有自定义 trigger 的方式满足更加灵活的场景，不一定要限制在 button 里面

[jeasonstudio]

UnconnectedConnector 的功能被 Connector 包含掉，这里是因为没有特殊的 props 所以没体现在 ConnectorProps 中

[jeasonstudio]

目前的大部分 UI props 都依赖 Button 的实现，如果不用 Button 做 trigger 会很难做适配，而且短期来看应该也不会有太灵活的扩展需求

[yutingzhao1991]

这个方案对应的用法是怎么样的？是下面这样直接吧 props 通过 Connector 暴露吗：

<Connector {...props} />

[yutingzhao1991]

我有一个想法大概是：

import { Connector } from '@ant-design/web3';

export default () => {
  return (
    <Connector
     /* 链相关的一些 props */
     accounts={[]}
     showBalance
     onRequestAccount={() => {}}
     chains={[]}
     onChainChanged={}

     /* 里面用到的各种组件暴露出来用户自定义 UI 的 props */
     connectButtonProps={/* ... */}
     connectModalProps={/* ... */}
     switchChainDropdownProps={/* ... */}
    />
  );
}

[kiner-tang]

感觉这样 Connector 就太大了，个人还是比较倾向于变种组件的形式：

export default () => {
  return (
     <>
          <Connector>text</Connector>
          <Connector.Button>Button</Connector.Button>
          <Connector.Dropdown>Dropdown</Connector.Dropdown>
     </>
  )
}

[yutingzhao1991]

但是 Dropdown 并不是一种 Connector 的形式，只是说在出现多链需要选择的时候需要用到 Dropdown

[kiner-tang]

主要是如果把所有的属性都混在一起的话，以后 Connector 会变得特别大，逻辑糅杂，不太好处理

[yutingzhao1991]

Connector 直接暴露的 props 只是必须的，其它的 props 只是暴露出来给用户自定义的，其实如果没有需求也可以不用暴露出来。

[yutingzhao1991]

其实 UI 上感觉有点像 Dropdown.Button 这个 https://ant.design/components/dropdown-cn#dropdownbutton。

[yutingzhao1991]

如果从这个角度看的话其实也不需要太纠结，就先搞一个 Connector.Button，以 Button 为主体，暴露需要的 props 即可：

export default () => {
  return (
    <Connector.Button chain={[]} onClick={() => {}} />
  );
}

也可以这样：

export default () => {
  return (
    <Connector chain={[]}>
       <Button />
    </Connector>
  );
}

[kiner-tang]

恩恩，我刚开始想的也是 Connector 作为一个包装容器，而子组件作为触发器可以让用户自定义，只是我们可以提供一些常见的变种，如：Connector.Button 或 Connector.Dropdown 之类的

[yutingzhao1991]

Button 应该还是最基础的，其次就是有多链切换的类似 Dropdown.Button 的形式。如果用户不想用 Button，比如想用 icon 那就这样：

export default () => {
  return (
    <Connector chain={[]}>
       <XxxIcon />
    </Connector>
  );
}

[yutingzhao1991]

Connector.Dropdown 应该不太需要，Dropdown 只是用来下来选择链的。不过我这样的思路可以， @jeasonstudio 觉得如何？

[yutingzhao1991]

除了组件，还要支持 hooks 的方式：

import { useConnector } from '@ant-design/web3';

export default () => {
  const { connect } = useConnector({
    chains: [],
  });
  return (
    <Button onClick={() => { connect() }}>Connect</Button>
  );
};

[yutingzhao1991]

应该直接暴露 ConnectModal 来用：

import { useConnector, ConnectModal } from '@ant-design/web3';

export default () => {
  const [wallet, setWallet] = React.useState();
  const { connect } = useConnector({
    chains: [],
  });
  return (
   <ConnectModal wallet={wallet} onWalletSelect={setWallet}>
      <Button onClick={() => { connect(wallet) }}>Connect</Button>
    </ConnectModal>
  );
};

[kiner-tang]

感觉这种方式或许会更好

[yutingzhao1991]

梳理了一下现在的想法，感觉可以分为三个组件 Connector, ConnectButton, ConnectModal。

其中 ConnectButton 和 ConnectModal 是基础的纯 UI 的组件，Connector 是不包含 UI 的，用于整合 ConnectButton, 和ConnectModal 的。

首先 ConnectButton 可以单独就作为一个 UI 组件来用：

export default () => {
  return (
    <ConnectButton
      address={'0x1111....111'}
      domain={'xxx.eth'}
      connected={false}
      chains={[]}
      onClick={() => {}}
      banlance={[{
        amount: 21,
        type: 'ETH',
      }]}
      avatar={}
      menuItems={}
      walletIcon={}
      tooltip
    />
  );
};

ConnectModal 也是一样，基本和现在一致，用户完全可以只以 UI 的方式来使用，和用 antd 的 Button 和 Modal 差不多：

import { useConnector, ConnectModal, ConnectButton } from '@ant-design/web3';

export default () => {
  const [wallet, setWallet] = React.useState();
  const { connect } = useConnector({
    chains: [],
  });
  return (
   <ConnectModal wallet={wallet} onWalletSelect={setWallet}>
      <ConnectButton onClick={() => { connect(wallet) }}>Connect</ConnectButton>
    </ConnectModal>
  );
};

但是我们再提供一个 Connector 组件，它的作用是把 ConnectModal 和 ConnectButton 整合，基于 Web3ConfigProvider 的 Context 来构造 ConnectButton 的 props，用法如下：

export default () => {
  return (
    <Connector showBalance={['ETH', 'USDT']} showDomain modalProps={}>
      <ConnectButton avatar={}>
    </Connector>
  );
}

关键点是：

• ConnectButton 不调用链相关接口，只接收数据，负责展示。ConnectModal 也一样。
• Connector 负责按照用户传入的 props 调用链的接口，转换为 ConnectButton 和 ConnectModal 的 props 传递给它们。
• 用户也可以通过 modalProps 或者直接在 ConnectButton 来定义 props 来覆盖 Connector 提供的 props。

@kiner-tang @jeasonstudio 看看这个设计怎么样，感觉这样搞就比较清晰了。

[yutingzhao1991]

#86 准备开搞了。