🚀 前端 DApp 开发利器， Ant Design Web3 发布 1.0 🎉🎉🎉

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 342 天前的主题，其中的信息可能已经有所发展或是发生改变。

基于 Ant Design 的 Web3 开源组件库 Ant Design Web3 正式发布 🎉🎉🎉

官网：https://web3.ant.design/
国内加速：https://web3.antdigital.dev/
Github 地址：https://github.com/ant-design/ant-design-web3（欢迎 Star ⭐）
Twitter：https://twitter.com/AntDesignWeb3

本文会给大家介绍我们的设计理念和新特性，阅读时间大概 3 分钟。如果对我们的项目感兴趣欢迎给我们的 Github Star 或者关注我们的 Twitter，我们会非常高兴的。

在介绍 Ant Design Web3 之前先简单说说 Web3 DApp （去中心化应用）。DApp 可以说是除了 AI 应用外当下最受前端独立开发者青睐的应用了。当然，在 ChatGPT 还没有火的时候，Web3 DApp 才是最火的。因为通过一个连接区块链的 DApp （去中心化应用）你可以获得如下能力：

💰交易加密资产，你可以通过加密货币比如 ETH 、USDT 等加密货币交易，提高了经济活动的效率，无需任何后端支持你就可以让你的应用获得收款能力。
👥连接用户的 Web3 账号，触达更多加密用户。你不需要开发注册登录页面，就可以通过加密账号连接上用户。
📼发行加密资产，你可以通过发行 NFT 就能获得类似发布会员卡作用的功能。而且，当你理解了 Web3 的意义后，你会发现你能做的不止于此！

但是我们如何开发一个 DApp 呢？对于一个前端开发者来说开发一个 DApp 简单吗？或者不会前端的开发如何可以更方便的构建一个 DApp 呢？

其实对于一个 DApp 的前端部分来说，最关键的就是要连接用户的钱包： web3.ant.design_components_wagmi.png

如上图所示，Ant Design Web3 提供了开箱即用的连接组件，当然，我们并不止于此，我们还提供了，NFTCard 、Address 、BrowserLink 等组件，这些都是 DApp 开发中经常会用到的组件，能让你事半功倍！

NFTCard BrowserLink

更多组件你可以访问我们的组件文档了解更多👋

那我们是一套 UI 组件吗？

是，但是也不全是！我们还提供了和链交互的能力，多层架构的设计让我们可以兼容不同的链，也让组件拥有了超越 UI 的能力！

Ant Design Web3 定义了一套通用的 API ，基于这套 API ，我们可以通过适配层对接不同的区块链。目前，我们支持了以太坊（包括兼容 EVM 的链），未来会尝试支持更多的链，也欢迎社区同学来贡献。

下面是我们的架构设计图：

基于这套架构，你可以用不同的方式来使用 Ant Design Web3 ，首先你可以把它当做一个纯粹的 UI 组件使用：

import React from 'react';
import { NFTCard } from '@ant-design/web3';
const App: React.FC = () => {
  return (
    <NFTCard
      name="My NFT"
      tokenId={16}
      price={{
        value: 1230000000000000000n,
      }}
      like={{
        totalLikes: 1600,
      }}
      description="This is description"
      showAction
      footer="This is footer"
      image="https://api.our-metaverse.xyz/ourms/6_pnghash_0cecc6d080015b34f60bdd253081f36e277ce20ceaf7a6340de3b06d2defad6a_26958469.webp"
    />
  );
};

export default App;

你也可以通过引入适配器来对接区块链，同样是上面 NFTCard 的例子，引入适配器之后你只需要配置 address和 tokenId即可：

import { createConfig, configureChains, mainnet } from 'wagmi';
import { infuraProvider } from 'wagmi/providers/infura';
import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { NFTCard } from '@ant-design/web3';

const { publicClient } = configureChains(
  [mainnet],
  [
    infuraProvider({
      apiKey: YOUR_INFURA_API_KEY,
    }),
  ],
);

const config = createConfig({
  publicClient,
});

const App: React.FC = () => {
  return (
    <WagmiWeb3ConfigProvider config={config}>
      <NFTCard address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={42n} />
    </WagmiWeb3ConfigProvider>
  );
};

export default App;

NFTCard 基于以太坊的 ERC721 协议实现，你不需要关系协议细节，只需要给出合约地址和 tokenId即可，从这里我们可以看到巨大的想象空间。未来随着区块链协议的不断完善，也许我们真的可以实现我们一直依赖梦寐以求的宇宙统一接口了。或许未来 Ant Design Web3 提供一系列类似这样的『协议组件』，我们就可以更加快捷的搭建一个应用了，这样的 Web3 是不是还挺有趣的。

除了这套灵活高效的架构设计，Ant Design Web3 还有哪些特性呢？