前端DApp开发利器，Ant Design Web3 正式发布 1.0

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

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

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

初始化项目

我们将基于 React + Next.js + TypeScript 来初始化我们的项目。当然，如果你更熟悉 umi 等其它前端框架，也可以使用你熟悉的框架。在开始之前，请先确保已安装了 Node.js，并且版本大于 20.0.0。教程会基于最新的 Node.js 版本来编写，如果你使用的是旧版本的 Node.js，可能会遇到运行问题，此时可以尝试升级 Node.js 版本。

安装完成之后，可以通过如下命令检查 Node.js 和它自带的 npm 于 npx 是否安装成功。

node -v # => v20.0.0+
npm -v # => 10.0.0+
npx -v # => 10.0.0+

接下来，我们参考 Next.js 官方文档来创建一个新的DApp项目。

npx create-next-app@14.0.4 # 我们指定 create-next-app 的版本为 14.0.4，避免升级带来的差异影响教程的细节

然后，按照提示创建一个名为 ant-design-web3-demo的新项目，涉及的技术栈选择如下。

为了让示例项目变得更简单，此处去掉了 Tailwind CSS 和 App Router 的选择。创建完成之后，进入项目目录安装依赖。

cd ant-design-web3-demo
npm i

接着，执行 npm run dev 启动项目，就可以在浏览器中访问 http://localhost:3000 来查看项目是否启动成功。

添加Ant Design Web3

接下来，我们安装 Ant Design 和 Ant Design Web3 的基础组件到项目中。

npm i antd @ant-design/web3 --save

接下来，需要在 next.config.js 中添加如下配置。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+ transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],
}
module.exports = nextConfig

安装完成后，新建 pages/web3.tsx 的文件，填充内容如下。

import {Address} from '@ant-design/web3';
import React from "react";
export default () => {
    return (
        <div
            style={{
                height: '100vh',
                padding: 64,
            }}
        >
            <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"/>
        </div>
    );
};

然后，访问 http://localhost:3000/web3 可以看到你已经在项目中成功使用 Ant Design Web3 了。

连接区块链

首先，同快速开始中文档指引的类似，我们需要安装一些依赖。由于我们已经安装了 antd 和 @ant-design/web3，所以我们接下来只需要安装 @ant-design/web3-wagmi 和 wagmi。

npm install @ant-design/web3-wagmi wagmi --save 

@ant-design/web3 是一个 UI 组件库，它通过不同的适配器和不同的区块链连接。

import { createConfig, configureChains, mainnet } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { Address } from "@ant-design/web3";


export default () => {
  return (
    <div
      style={{
        height: "100vh",
        padding: 64,
      }}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
    </div>
  );
};

对应的配置说明如下：

• createConfig：wagmi 用来创建配置的方法。
• configureChains：wagmi 暴露的配置你要链接的区块链的方法，DApp 要获取链上数据，需要通过 JSON RPC 与链上节点进行通信。从前端的角度来说，就是配置一个 http 的请求地址。在区块链中，我们称之为节点服务。
• mainnet：代表以太坊主网，除了 mainnet 以外还会有类似 goerli 的测速网和类似 bsc 和 base 的 EVM 兼容的其它公链，有的是和以太坊一样的 L1 公链，有的是 L2 公链，这里先暂不展开。
• publicProvider：一个公共的节点服务，用于学习或者测试。实际项目中你通常需要换成其它正式的节点服务，比如 ZAN、alchemy 等。
• WagmiWeb3ConfigProvider：Ant Design Web3 用来接收 wagmi 配置的 Provider。

接着添加代码：

import { createConfig, configureChains, mainnet } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { Address } from "@ant-design/web3";


const { publicClient } = configureChains([mainnet], [publicProvider()]);
const config = createConfig({publicClient,});


export default () => {
  return (
    <WagmiWeb3ConfigProvider config={config}>
      <div
        style={{
          height: "100vh",
          padding: 64,
        }}
      >
        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      </div>
    </WagmiWeb3ConfigProvider>
  );
};

这样，我们就完成了 wagmi 的基础配置，接下来我们就可以通过 Ant Design Web3 的组件来获取链上的数据了。我们试一试使用 NFTCard 组件：

import { createConfig, configureChains, mainnet } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { NFTCard } from "@ant-design/web3";
const { publicClient } = configureChains([mainnet], [publicProvider()]);


const config = createConfig({
  publicClient,
});


export default () => {
  return (
    <WagmiWeb3ConfigProvider config={config}>
      <div
        style={{
          height: "100vh",
          padding: 64,
        }}
      >
              <NFTCard address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
      </div>
    </WagmiWeb3ConfigProvider>
  );
};

在上面的代码中，NFTCard 组件会从 0x79fcdef22feed20eddacbb2587640e45491b757f NFT 合约中获取 tokenId 为 8540 的 NFT 信息，然后展示在页面上。

配置钱包

上面步骤中的 NFT 智能合约中的信息是开放的，我们不需要连接用户钱包就可以直接通过节点服务获取到。但是，如果我们想要获取用户的钱包地址，那么我们就需要连接用户的钱包。我们以 MetaMask 为例，看一下如何配置钱包。

import { createConfig, configureChains, mainnet } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { Connector, ConnectButton } from "@ant-design/web3";


const { publicClient, chains } = configureChains([mainnet], [publicProvider()]);
const config = createConfig({
  publicClient,
  connectors: [
    new MetaMaskConnector({
      chains,
    }),
  ],
});
export default () => {
  return (
    <WagmiWeb3ConfigProvider config={config}>
      <div
        style={{
          height: "100vh",
          padding: 64,
        }}
      >
       <Connector>
         <ConnectButton />
       </Connector>
      </div>
    </WagmiWeb3ConfigProvider>
  );
};

最终得到的效果如图。

除此之外，Ant Design Web3 定义了一套通用的 API，基于这套 API，我们可以通过适配层对接不同的区块链。

 

参考链接：https://web3.ant.design/zh-CN/guide