V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
baiyun
V2EX  ›  分享创造

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

  •  
  •   baiyun · 137 天前 · 1314 次点击
    这是一个创建于 137 天前的主题,其中的信息可能已经有所发展或是发生改变。

    基于 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 的前端部分来说,最关键的就是要连接用户的钱包: web3.ant.design_components_wagmi.png

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

    NFTCardBrowserLink

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

    那我们是一套 UI 组件吗?

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

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

    下面是我们的架构设计图: image.png

    基于这套架构,你可以用不同的方式来使用 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 的所有贡献者,本项目没有任何收益,完全是用爱发电,在还未正式发布就得到了社区同学的热情帮助。感谢所有参与贡献的开发同学,也感谢支持的设计同学次北、文卿,是你们让开源真正变得伟大~ image.png

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

    2 条回复    2023-12-25 21:31:05 +08:00
    chancat
        1
    chancat  
       135 天前 via Android
    牛批
    1044523901
        2
    1044523901  
       134 天前
    666
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1102 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:36 · PVG 06:36 · LAX 15:36 · JFK 18:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.