🎉Ant Design Web3 发布 1.0 ，聊聊我们的设计理念~

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

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

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

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

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

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

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

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

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

那我们是一套 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 还有哪些特性呢？

• 😀 基于 Ant Design 组件开发，可以很好的和 Ant Design 基础组件搭配使用。
• 🧱 提供了一套 Web3 的图标，真的很方便~
• 🪜 组件配置和适配器配置打通，同时拥有便捷性和灵活性。
• 🎨 基于 Ant Design 主题定制方案，主题定制更灵活。

除了组件库外，我们正在编写一套课程，希望可以帮助更多开发者上手 DApp 开发，如果你是前端开发，你可以基于这套课程学习智能合约开发，上手 DApp 全栈开发。如果你是合约开发者，也可以基于这套课程上手 DApp 前端开发，不过当前课程还在编写中，欢迎给我们提建议或者参与共建~

最后的最后，这里要感谢 Ant Design Web3 的所有贡献者，本项目没有任何收益，完全是用爱发电，在还未正式发布就得到了社区同学的热情帮助。感谢所有参与贡献的开发同学，也感谢支持的设计同学次北、文卿，是你们让开源真正变得伟大~

最后，对项目感兴趣的同学欢迎给我们 Star，提 Issue，提 PR，关注我们的 Twitter：

• 项目地址：github.com/ant-design/…
• 官网：web3.ant.design/（or web3.antdigital.dev/）
• Twitter：twitter.com/AntDesignWe…

原文链接：https://juejin.cn/post/7316202755159572531 作者：愚指导