feat: Draft for Payment Components

[Likang0122]

[中文版模板 / Chinese template]

💡 Background and solution

1. interface Chain 支持 token 配置
2. 链配置信息默认填充 USDT 信息，如果要配置别的 token ，可通过如下配置支持

{
  ..Mainnet, 
  token: {
    address: '',
    symbol: '',
    decimals: ''
  }
}

3. Payment 组件参数 supportChains 为必填，传入要支持的链；symbol 为不必填，传入则去找该 token 的信息使用，不传入则为主链币信息；toAddress 为必填，传入收款地址；number 目前为不必填，考虑不传入显示为输入数量的输入框？

🔗 Related issue link

#415

[changeset-bot]

⚠️ No Changeset found

Latest commit: c3ad436

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ant-design-web3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 23, 2024 9:08am

[github-actions]

[Likang0122]

目前草稿为 api 设计，暂时没有 UI 层的实现

[codecov]

Codecov Report

Attention: Patch coverage is 91.30435% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 99.96%. Comparing base (c75919f) to head (0781dfb).
Report is 4 commits behind head on main.

❗ Current head 0781dfb differs from pull request most recent head c3ad436. Consider uploading reports for the commit c3ad436 to get more accurate results

Files	Patch %	Lines
packages/web3/src/payment/index.tsx	85.71%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #812      +/-   ##
==========================================
- Coverage   99.97%   99.96%   -0.01%     
==========================================
  Files         705      707       +2     
  Lines       21289    21338      +49     
  Branches     1200     1201       +1     
==========================================
+ Hits        21283    21330      +47     
- Misses          6        8       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Likang0122]

改造了下维护的钱包信息，增加是否支持快捷扫码支付，和快捷扫码支付的模板字符串，目前想到的是模板字符串去匹配，看看有没有更好的方式方法

[yutingzhao1991]

组件名可以再讨论下，Payment 是付款的意思，但是感觉这个组件应该是“收款组件”。

[jeasonstudio]

PayPanel

[AmAzing129]

关于 token 简单想法，需要再优化：

逻辑层面，token 和 chain 是两层，不应该混在一起。但是他们之间有桥梁。比如链确定的时候，我们可能就会使用到其主币，即Chain['nativeCurrency'] （BTW，之前这个字段定义有不一致，比如 Polygon 用了 MATIC，但是 Arbitrum 又用了 Ether，没用 ARB）

因此这里就会有两种视角：

• 把 USDT 看作链绑定的。因为 USDT 是链通用和付款常用的，这样当选择了某条链，也就可以自动拿到其上的 USDT 信息。至于重复配置个人感觉是另一个较小的问题。比如每个钱包插件都会有其支持的浏览器，其中的 Chrome 信息也是重复的。

• 把 USDT 仅看作代币。这个视角下 USDT 仅仅是某条链上的一个代币合约，开发者可以扩展其他代币。在付款领域也有用到其他代币的需求。比如有些 meme 具备打赏 / 捐赠属性，部分项目官网就会用他们收款。但是这种情况下，其实是直接选择了币，而不是先选择了链。

结论

1. 需要一个 Token 类型（BalanceMetadata ）

2. Chain 中不应该新增一个 token 属性。如果有视角一的需求，建议新增一个 paymentCurrency 属性，与 nativeCurrency 等价，意为“这条链的支付货币”，比如 USDT / USDC / ETH，算是内置。

interface Chain {
   ...
   paymentCurrency: Token[],
   ...
}

类似于 provider 传入不同的钱包，想自定义货币，导出 USDT / USDC 供用户导入，如

import { USDT } from '@ant-design/assets/tokens';

<Payment
  supportChains={supportChains}
  token={USDT}
  ...
/>

3. 感觉付款展示金额可能会用到 < CryptoPrice /> ，两个 API 结合起来看看

[AmAzing129]

补充一下，忘记之前的交互讨论有没有提了，先选择代币后选择链的场景也有

[Likang0122]

改造为钱包支持的链；
后续 token 信息会收录进 import { USDT } from '@ant-design/assets/tokens';

[jeasonstudio]

改为 format callback，payQRCodeFormatter: (params: Record<string, any>) => string