EN

Quick Start

Author of this section: @Fish, @Xiaofu

In this lecture, we will guide you to quickly create a React project and display an NFT image in it.

This course is mainly aimed at students who have a certain front-end development foundation, helping you to move from Web2 to Web3 and obtain the research and development capability of DApp (decentralized application).

Courses will be based on Ant Design Web3 to explain, so that you can get started more easily. Of course, this will not affect your understanding of the basic concepts. We will explain the relevant concepts in the course to ensure that you can master the basic knowledge of DApp development after the course is completed.

The course has certain pre-requirements that require you React front-end development has a basic understanding. If you are not familiar with React, you can learn first. React Official Documentation .

Initialize A React project

we will be based on React + Next.js + TypeScript to initialize our project. Of course, if you're more familiar umi Other front-end frameworks, such as, can also use the framework you are familiar. You can still refer to this tutorial, but for non-professional front-end developers, we recommend following our tutorial step by step to avoid problems caused by some framework differences.

Before you begin, make sure you have installed Node.js and the version is greater than 20.0.0. The tutorial will be based on the latest Node.js version. If you are using an old version of Node.js, you may also be able to run, but if you encounter problems, you can try to upgrade the Node.js version.

After the installation is complete, you can check Node.js and its own npm and npx whether the installation was successful: 

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

next we refer Next.js Official Documentation to create a new project:

npx create-next-app@14.0.4# We specify the version of the create-next-app as 14.0.4 to avoid the differences brought by the upgrade from affecting the details of the tutorial.

Please follow the prompts to create a new project, we will name it ant-design-web3-demo , you can refer to the following figure for specific technology stack selection:

we removed Tailwind CSS and App Router the choice to make the project easier, the actual project you should choose the content you need according to your needs.

Install dependencies and start Project

after the creation is complete, enter the project directory to install dependencies: 

cd ant-design-web3-demo
npm i

execute after installation is complete npm run dev start the project, which you can access in your browser. http://localhost:3000 to see if the project started successfully.

Add Ant Design Web3

next, we install Ant Design and Ant Design Web3 the basic components of and other dependencies into the project:

npm I antd @ant-design/web3 @ant-design/web3-wagmi wagmi @tanstack/react-query --save

  • @ant-design/web3 is a UI component library that passes through different adapter and different blockchain connections. In this course, we are mainly based on ethereum DApp development.
  • @ant-design/web3-wagmi is one based on wagmi 2.x the Ant Design Web3 Ethereum adapter, which is. @ant-design/web3 the component provides the ability to connect Ethereum and other EVM compatible chains. Through it, you don't need to deal with the connection state of components, chain data requests and other logic. It will pass through the [Web3ConfigProvider]( https://web3.ant.design/components/web3-config-provider-cn] provides relevant global states and interfaces for components.
  • wagmi is an open source service Ethereum's React Hooks library and relies on @tanstack/react-query . Adapter for Ant Design Web3 @ant-design/web3-wagmi it is based on its implementation, and later in this course, if there is no special description, the adapter mentioned is referred. @ant-design/web3-wagmi .

After the installation is complete, because the current version of Next.js an existing problem you need to be in next.config.js add the following configuration: 

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

module.exports = nextConfig

after the installation is complete, create a new pages/web3.tsx the file is populated as follows: 

import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
}

and then visit http://localhost:3000/web3 you can see that you have successfully used Ant Design Web3 in your project.

In order to make the page more beautiful and avoid the horizontal bar style in the above figure, you can styles/global.css of the No. 85 add the following to the line: 

html,
body {
  max-width: 100vw;
+  min-height: 100vh;
  overflow-x: hidden;
}

of course, this is not necessary.

Configure the adapter

the adapter allows the UI component of Ant Design Web3 to quickly connect to the block chain. For example, when you use @ant-design/web3-wagmi after that, components such as Connector and NFTCard can be directly connected to Ethernet Square. The configuration of the adapter can refer ethereum recommend Configuration in this course, we will first use the simplest configuration, and then walk you through the configuration you need in your actual project.

First, please continue editing. pages/web3.tsx file, introducing the required content: 

+ import { http } from "wagmi";
+ import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};

the contents introduced therein are described as follows:

  • http:wagmi is used to create HTTP JSON RPC the connection method, through which you can access the blockchain through HTTP requests.
  • Mainnet: represents the Ethereum Mainnet, Mainnet other than support Sepolia test network and BSC and Arbitrum multiple chains such as; Supported chain references here. .
  • WagmiWeb3ConfigProvider the Provider that Ant Design Web3 uses to receive the wagmi configuration.

Then create the configuration: 

import { http } from "wagmi";
import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
+    <WagmiWeb3ConfigProvider
+      chains={[Mainnet]}
+      transports={{
+        [Mainnet.id]: http(),
+      }}
+    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+    </WagmiWeb3ConfigProvider>
  );
};

in this way, we have completed the configuration of the adapter, and then we can obtain the data on the chain through the components of Ant Design web3.

We try to use NFTCard components: 

import { http } from "wagmi";
import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
- import { Address } from "@ant-design/web3";
+ import { Address, NFTCard } from "@ant-design/web3";

export default function Web3() {
  return (
    <WagmiWeb3ConfigProvider
      chains={[Mainnet]}
      transports={{
        [Mainnet.id]: http(),
      }}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+     <NFTCard
+       address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+       tokenId={641}
+     />
    </WagmiWeb3ConfigProvider>
  );
};

NFTCard Components from kan the tokenId obtained in the NFT contract is 641 the NFT information is then displayed on the page.

The effect is as follows:

if it is not displayed, please check whether your network is normal. If NFT pictures can be rendered normally, congratulations, we will finish this lecture!