可以自动使用对应区块链浏览器的 icon，可以在 @ant-design/web3-assets 里面配置。

Should just keep the one that comes with the Address.

For discussions #79

Development tasks:

• #82
• Support connect with Metamask
• Support connect with WallectConnect
• Add getNFTMetadata for NFTImage
• Add doc

调用 EthereumProvider 的 request 时，需要判断应该是通过 WalletProvider 请求还是通过 JsonRpcProvider 请求，现在的逻辑比较简单，具体见 https://github.com/ant-design/ant-design-web3/blob/main/packages/ethereum/src/ethereum-provider.ts#L19 ，通过判断 method 是否是 'eth_requestAccounts', 'eth_accounts' 来判断是否走钱包的请求，这里需要完善下。

具体应该怎么做需要参考现在一些 sdk 的实现，可以参考下 wagmi。

Summary

NFTCard component for web3 component library.

API

Basic Example

import { NFTCard } from '@ant-design/web3'

const Demo = () => (
  <NFTCard
   name="Demo NFT"
   image ={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
   showAction
   price={1.2}
   likes={9000}
   isLike
   serialNumber={404}
  />
);

#60 (comment)

• #87
• #93
• #92
• #98
• #91
• #89
• #90

📝 [RFC] The new Component: ConnectModal

主题

在 DApp 中，当用户需要支付时，可以点击 ConnectButton 进行支付，此时，需要向用户展示新手指引、支持的钱包列表以及其他的一些附加信息，用户可以选择唤起相应的钱包进行后续的支付流程。

基于上述原因，需要实现 ConnectModal 组件，以弹出框形式在用户点击 ConnectButton 时展示以上关键信息。

API

Base

Wallet

GuideInfoItem

示例

export default () => {
	const [open, setOpen] = useState(false);
  
  return (
  	<>
    	<ConnectButton onOpen={() => setOpen(true)} />
    	<ConnectModal
        open={open}
        onOpenChange={open => setOpen(open)}
        title="连接你的钱包"
        walletList={[
        	{
            icon: "https://test.com/test.png",
            name: "测试钱包",
            remark: "备注",
            link: "https://test.com/xxx",
            group: 'Popular',
            pluginLink: 'https://test.com/xxx'
          },
        	{
            icon: "https://test.com/test.png",
            name: "测试钱包2",
            remark: "备注",
            group: 'More',
            pluginLink: 'https://test.com/xxx'
          },
      	]}
        // 设置为 null 或 false 则切换为无新手指引的简洁模式
        // guide={false}
        
        guide={{
        	title: 'What is a Wallet?',
          infos: [
            {
	            icon: "https://test.com/test.png",
              title: 'A Home for your Digital Assets',
              desc: 'Wallets are used to send, receive, store, and display digital assets like Ethereum and NFTs.'
            },
            {
	            icon: "https://test.com/test.png",
              title: 'A Home for your Digital Assets',
              desc: 'Wallets are used to send, receive, store, and display digital assets like Ethereum and NFTs.'
            },
          ],
        	moreLink: 'https://test.com/xxx'
	      }}
        footer={
        	<div className="footer">蚂蚁链提供技术支持</div>
      	}
      />
    </>
  );
}

细节

ConnectModal 组件需与 ConnectButton 配合使用。

https://web3.ant.design/zh-CN/guide/contributing need translate to english

1

1. https://github.com/web3/web3.js
2. https://github.com/ethers-io/ethers.js
3. https://github.com/wagmi-dev/viem

Which one? Or should we design a plugin system to accommodate all?

add a api requestEns like:

{
  requestEns: ({
    address: 'xxxx',
  }): Promise<{
    domain: string;
  }>;
}

ens 可以理解为以太坊的域名，后面 ConnectButton 需要用。

本地开发时修改 icon 不生效

当前钱包断开连接后 ConnectButton 的状态没有变化，需要监听下相关事件，如果用户断开连接需要同步下状态：

可以参考 https://opensea.io/ 的交互效果。

外部的 PR ci 报错：

Currently only supports ZAN https://github.com/ant-design/ant-design-web3/tree/main/packages/common/src/rpc-providers

Need Support Infura and Alchemy

like Ant Design https://ant.design/components/icon-cn

Milestone

• 0824 ConnectButton & ConnectModal Design
• 0907 All components design
• 1110 Official website design
• 1201 Finish components develop
• 1208 Release beta
• 1215 Release 1.0
• 1218 Official release and promotionn 🚀

Architecture

• #11

Components

• #8
• #4
• #3
• #6
• #5
• #9
• #10
• #7

Others

• Official website
• Release Blog
• #152

📝 [RFC] The new Component: ConnectButton

API

Base

Avatar

ChainOption

@ant-design/web3-ethereum 的 createProvider 返回的对象应该是满足 EIP1193 规范的，这样才能通过它和其它 sdk 结合使用。

当前支持了 request，还缺事件，具体规范参考 https://eips.ethereum.org/EIPS/eip-1193

• 官网
  • #210
  • #116
• 文档
  • #304
  • #163
  • #160
  • useAccount 文档 @liangchaofei
  • #203
• 组件开发
  • #208
  • #153
  • #154
  • #155
  • #156
  • #189
  • #215
  • BrowserLink 通过自动判断要使用什么浏览器的 icon，比如以太坊就默认用 Etherscan 的 icon
  • #118
  • 支持更多钱包
    • #146
      • #317
      • More chains: Tron,Sui,,Aptos,Avalanche,Fantom
  • #122
  • #3
    • #162
    • #161
• ~~脚手架 ~~
  • #219
  • Add scaffolding for umi #114
• 单测
  • CI 添加单侧覆盖率检查，每个 PR 提交后单测覆盖率不能下降
  • #256
• #287
• 发布宣传
  • #264
  • 掘金 https://juejin.cn/post/7316202755159572531
  • 知乎
  • Twitter（看看 Twitter 是否需要单独建个账号）
  • 其它各种渠道待讨论

• Chains
• Tokens
• Tools
• Others

  disconnect = async () => {
    // TODO: disconnect for MetaMask
    const walletProvider = await this.getWalletProvider();
    if (walletProvider) {
      await walletProvider?.disconnect?.();
    }
  };

现在调用 disconnect 并不会真的断开 MetaMask，需要研究下如何实现。

支持自动通过上下文获取当前连接的是什么链，不需要手动配置。

requestNFTMetadata is better.

requestNFTMetadata({
  contractAddress: 'xx',
  tokenId: 12
});

ref: #54 (reply in thread)

• Rename Web3Provider in @ant-design/ethereum to EthereumProvider.
• Refactor Web3ConfigProvider props.
• Move accounts and wallets to EthereumProvider from Web3ConfigProvider