DApp Front-end development toolkit, Ant Design Web3 has released version 1.0 🎉🎉🎉

The open-source component library Ant Design Web3, based on Ant Design, has been officially released 🎉🎉🎉

• Official website: https://web3.ant.design/
• Github address: https://github.com/ant-design/ant-design-web3 (Welcome to Star ⭐)
• Twitter: https://twitter.com/AntDesignWeb3

This article will introduce our design philosophy and new features, with a reading time of about 3 minutes. If you are interested in our project, please give our Github a Star or follow us on Twitter, we would be very happy.

Before introducing Ant Design Web3, let’s briefly talk about Web3 DApps (decentralized applications). DApps can be said to be the most favored applications by front-end independent developers nowadays, apart from AI applications. Of course, before ChatGPT became popular, Web3 DApps were the hottest. Because through a DApp that connects to the blockchain, you can obtain the following capabilities:

• 💰 Trade encrypted assets, you can conduct transactions through cryptocurrencies such as ETH, USDT, etc., which improves the efficiency of economic activities. Without any backend support, you can enable your application to receive payments.
• 👥 Connect to users’ Web3 accounts, reaching more crypto users. You don’t need to develop a registration and login page, as you can connect to users through their crypto accounts.
• 📼 Issue encrypted assets, you can obtain functionality similar to issuing membership cards by issuing NFTs. Moreover, when you understand the significance of Web3, you will find that you can do much more!

But how do we develop a DApp? Is it easy for a front-end developer to develop a DApp? Or how can developers who are not proficient in front-end development build a DApp more conveniently?

Actually, for the front end of a DApp, the most crucial part is to connect to the user’s wallet.

wallet

As shown in the figure above, Ant Design Web3 offers an out-of-the-box connection component. Of course, that’s not all we offer. We also provide components like NFTCard, Address, BrowserLink, and others, which are commonly used in DApp development, help make your development more efficient.

nft card

hash

For more components, you can visit our component documentation to learn more. 👋

Is this just a set of UI components?

Ant Design Web3 not just that! We also provide the capability to interact with the blockchain. Our multi-layer architecture design allows us to be compatible with different blockchains, which also gives the components abilities beyond just UI!

Ant Design Web3 has defined a set of common APIs. Based on these APIs, we can connect to different blockchains through an adapter layer. Currently, we support Ethereum (including chains compatible with EVM), and we plan to support more blockchains in the future. Contributions from the community are also welcome.

Below is our architectural design diagram:

Based on this architecture, you can use Ant Design Web3 in different ways. Firstly, you can use it as a pure UI component:

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;

You can also interface with the blockchain by introducing Adapters. Taking the same example of the NFTCard above, after introducing an Adapter, you only need to configure the address and 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 is implemented based on Ethereum’s ERC721 protocol. You don’t need to worry about the protocol details; you only need to provide the contract address and tokenId. From here, we can see a vast space for imagination. As blockchain protocols continue to improve in the future, perhaps we can indeed achieve the long-desired and dreamt-of universal interface of the cosmos. Maybe in the future, Ant Design Web3 will provide a series of “protocol components” like this, allowing us to build an application more quickly. Isn’t such a Web3 interesting?

Besides this flexible and efficient architecture, what other features does Ant Design Web3 have?

• 😀 It is developed based on Ant Design components and can be well integrated with Ant Design’s basic components.
• 🧱 It provides a set of Web3 icons, which are really convenient.
• 🪜 The configuration of components and adapters is interconnected, ensuring both convenience and flexibility.
• 🎨 It is based on Ant Design’s theme customization scheme, making the theme customization more flexible.

Last but not least, we want to thank all the contributors to Ant Design Web3. This project has no revenue and is powered entirely by love. It received enthusiastic support from community members before its official release. Thank you to all the developers who have contributed, and the supportive designers, who make open source truly great.

Finally, anyone interested in the project is welcome to give us a Star, open Issues, submit PRs, and follow us on Twitter:

• Project address: https://github.com/ant-design/ant-design-web3
• Official website: https://web3.ant.design/
• Twitter: https://twitter.com/AntDesignWeb3