Ethereum (web3js) - A React Components Collection for Web3 Development

Web3 development is rapidly evolving, and developers need powerful, modular tools to build seamless decentralized applications (dApps). Ant Design Web3 offers a comprehensive suite of React components tailored for Web3, enabling developers to integrate blockchain functionality with ease. Among its many capabilities, the Ethereum (web3js) integration stands out as a robust solution for developers already familiar with the popular web3.js library.

This guide dives deep into how you can use @ant-design/web3-eth-web3js to streamline your Ethereum-based dApp development while leveraging familiar tools and patterns.

Why Use Ethereum (web3js) with Ant Design Web3?

Ant Design Web3 bridges the gap between traditional UI design principles and modern blockchain requirements. By integrating web3js — one of the most widely adopted Ethereum JavaScript libraries — developers gain access to a consistent, well-documented, and component-driven workflow.

Whether you're building a wallet connector, displaying NFTs, or enabling crypto payments, the combination of web3js and Ant Design Web3 accelerates development without sacrificing flexibility.

👉 Discover powerful Web3 tools that simplify blockchain integration.

Getting Started with web3js Integration

To begin using web3js within the Ant Design Web3 ecosystem, install the required packages using your preferred package manager:

npm install @ant-design/web3 @ant-design/web3-eth-web3js web3 --save

Alternatively, if you're using Yarn, pnpm, or Bun, replace npm install with the respective command. This setup ensures you have access to both the core component library and the web3js-specific adapter.

Once installed, you can start building interactive Web3 features using pre-built hooks and components that work seamlessly with web3.js.

Core Keywords

The primary keywords guiding this article include:

• Ethereum
• web3js
• React Web3 components
• Ant Design Web3
• Blockchain development
• dApp UI toolkit
• Web3 integration
• Decentralized apps

These terms reflect the core focus areas for developers seeking efficient ways to implement Ethereum-based functionality in React applications.

Basic Usage: Connecting to Ethereum

A fundamental feature of any Web3 app is connecting to the Ethereum network and retrieving real-time data. With useWeb3js, Ant Design Web3 provides a dedicated React Hook that returns a fully initialized web3 instance.

Here’s an example of how to retrieve the current block height:

import { useWeb3js } from '@ant-design/web3-eth-web3js';

function BlockHeight() {
  const { web3 } = useWeb3js();
  const [blockHeight, setBlockHeight] = useState('Loading...');

  useEffect(() => {
    if (web3) {
      web3.eth.getBlockNumber().then((number) => {
        setBlockHeight(number.toString());
      });
    }
  }, [web3]);

  return <div>Current block height: {blockHeight}</div>;
}

This pattern allows developers to focus on application logic rather than boilerplate connection code.

Signing Messages Securely

Secure user authentication is critical in decentralized applications. The web3js adapter supports message signing directly through wallet integration.

Below is an example of signing a message once a wallet is connected:

import { useWeb3js } from '@ant-design/web3-eth-web3js';

function SignMessage() {
  const { web3, account } = useWeb3js();
  const [signature, setSignature] = useState('');

  const handleSign = async () => {
    if (!web3 || !account) return;
    const msg = 'Sign this message to verify ownership.';
    const signed = await web3.eth.personal.sign(msg, account);
    setSignature(signed);
  };

  return (
    <div>
      <button onClick={handleSign} disabled={!account}>
        {account ? 'Sign Message' : 'Connect Wallet First'}
      </button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  );
}

This method leverages MetaMask or other EIP-1193-compatible wallets to securely sign messages without exposing private keys.

👉 Explore how easy it is to integrate secure blockchain interactions into your app.

Configuring Ethereum with EthWeb3jsConfigProvider

For advanced customization, Ant Design Web3 provides the EthWeb3jsConfigProvider component. It enables global configuration of Ethereum-related settings across your entire application.

Key Configuration Options

• wallets: Define supported wallets via WalletFactory[]. This lets you customize which wallets appear in connection modals.
• chains: Specify chain configurations using the Chain[] type, supporting custom RPCs and network parameters.
• ens: Enable or disable Ethereum Name Service (ENS) resolution for addresses.
• balance: Control whether token balances are automatically fetched and displayed.
• locale: Support multi-language interfaces by setting locale preferences.
• eip6963: Toggle support for the EIP-6963 standard, which enables discovery of installed wallets.
• walletConnect: Integrate WalletConnect for mobile wallet connectivity.
• storage: Persist user session states across reloads using custom storage solutions.

Example usage:

<EthWeb3jsConfigProvider
  chains={[mainnet, sepolia]}
  wallets={[metaMaskWallet(), coinbaseWallet()]}
  ens={true}
  balance={true}
  eip6963={true}
  walletConnect={{ projectId: 'your-wc-project-id' }}
>
  <App />
</EthWeb3jsConfigProvider>

This centralized configuration enhances consistency and reduces repetitive setup across components.

Frequently Asked Questions

What is web3js used for in this context?

web3js is used to interact directly with the Ethereum blockchain. When paired with Ant Design Web3, it enables developers to build rich UIs powered by real-time on-chain data and secure wallet interactions.

Can I use ethers.js instead of web3js?

Yes. Ant Design Web3 also supports an ethers.js adapter (@ant-design/web3-eth-ethers). Choose based on your team's familiarity and project requirements.

Is Ant Design Web3 suitable for production apps?

Absolutely. The library is designed with scalability and developer experience in mind, making it ideal for both prototypes and enterprise-grade dApps.

Does it support mobile wallets?

Yes, through WalletConnect and EIP-6963 compatibility, users can connect via mobile wallets like Rainbow, Trust Wallet, or MetaMask Mobile.

How does it handle multiple chains?

By defining multiple chains in the chains array within EthWeb3jsConfigProvider, your app can support cross-chain functionality with unified UI components.

Are there accessibility features included?

Yes. As part of the Ant Design ecosystem, all components follow WCAG standards, ensuring inclusive design for all users.

UI Components for Seamless Web3 Experiences

Beyond Ethereum connectivity, Ant Design Web3 offers ready-to-use UI components such as:

• ConnectButton and ConnectModal: Elegant, customizable wallet connection flows.
• Address and NFTCard: Display user addresses and NFTs with ENS support.
• CryptoPrice and TokenSelect: Show real-time token prices and enable selection from user balances.
• PayPanel: Streamline payment collection in crypto with a clean interface.

These components reduce development time while maintaining a professional look and feel aligned with modern design systems.

👉 Start building responsive, secure Web3 interfaces today.

Final Thoughts

Integrating Ethereum into React applications has never been easier. With @ant-design/web3-eth-web3js, developers can harness the full power of web3.js while benefiting from a rich set of UI components and hooks built for real-world use cases.

From basic block explorers to complex DeFi dashboards, Ant Design Web3 empowers teams to focus on innovation rather than infrastructure.

By combining semantic structure, SEO-friendly content, and practical code examples, this guide serves as a foundational resource for anyone entering the world of React-based Web3 development.