收款组件

[yutingzhao1991]

讨论下 #415 这个组件的具体设计

[yutingzhao1991]

首先我们看看开发者应该怎么用：

import { Payment } from '@ant-design/web3';
import { Tron, OkxWallet } from '@ant-design/assets';

<Payment value={10000000000n} token={
  name: 'USDT',
  icon: <xxx />,
  channels: [{
    chain: Tron,
    contract: '0x12312312312',
  }]
} wallets={[OkxWallet]} />

// 也可以内置快捷方式
import { USDT } from '@ant-design/assets/tokens';

<Payment value={10000000000n} target={{
  [Tron.id]: 0x8888888
}} token={USDT} wallets={[OkxWallet]} onFinish={() => {}}  />

开发者需要配置 value 代表要转多少，target 代表要转到哪里，不同的链收款地址不一样，用户要配置多个，token 代表要转什么币，token 包含了代币名称图标，以及各种链对应的合约地址，这些信息我们可以内置，wallets 代表支持哪些钱包，不同的钱包拼接的 URL 格式不同，我们也维护在对应钱包的信息里面。onFinish 是用户点击完成后的回调。

交互上面应该是这样的：

• 先让用户选择链，这个是比较重要的信息，必须用户主动选择，不然转错了就麻烦。
• 选好之后默认是展示对应的收款地址。
• 用户可以切换钱包显示钱包特有的地址。

选择链以后：

[yutingzhao1991]

三个调整的点：

有的钱包只支持部分链，所以钱包要添加支持的链的类型，不是链的 networkId，所以对应 Chain 这个类型也要支持一个 type：

使用通用地址，包括钱包不支持特定配置的情况下二维码为收款地址的二维码，下面的文字需要修改为对应说明：

检测到已经连接的情况下提供唤起当前钱包快捷转账的入口：