Ant Design Web3 发布 ,聊聊我们的设计理念~

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

本文会给大家介绍我们的设计理念和新特性,阅读时间大概 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 的例子,引入适配器之后你只需要配置 addresstokenId即可:

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:

赞 (2) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏