DOCSEARCHbyAlgolia
Submit Docs

Ant Design Web3

repository·main·Indexed 22 days ago

https://github.com/ant-design/ant-design-web3

A collection of efficient React components designed to simplify the development of decentralized applications (dapps). It includes a core library (@ant-design/web3) and specialized adapters for multiple blockchains, including Bitcoin, Ethereum (via web3.js), Solana, Sui, TON, and TRON. The ecosystem provides components like Address, Connector, and ConnectButton, along with blockchain-specific config providers and wallet integrations.

Tokens
87K
Snippets
257
Records
429
Agent score
76%

What's inside Ant Design Web3

  1. Overview of the Ant Design Web3 DApp Development Course

    main

    The Ant Design Web3 course is designed for developers with frontend experience to transition from Web2 to Web3 development. It focuses on building Decentralized Applications (DApps) using Ant Design Web3.

    The course is structured into three main parts:

    1. DApp Fundamentals: Introduction to core concepts like blockchain and smart contracts to understand the requirements for DApp frontend development.
    2. DApp Practical Development: A hands-on guide to building a DApp frontend from scratch. This includes project initialization, connecting blockchain accounts, and calling smart contracts. In this section, pre-deployed contracts are provided so you can focus entirely on frontend development.
    3. Smart Contract Development: An advanced section for those interested in blockchain logic, teaching how to develop and replace existing contracts with your own.

    The final goal of the course is to create a Minimum Viable DApp (MVAP) that implements NFT display and minting functionality.

    Prerequisites:

    • A foundational understanding of React.

  2. Overview of Ant Design Web3 usage patterns

    main

    Ant Design Web3 is a React component library built on top of Ant Design designed for building decentralized applications (DApps). It offers a flexible architecture that separates the UI layer from the blockchain connection layer.

    There are four primary ways to use the library:

    1. UI-only approach: Use @ant-design/web3 directly for UI components like ConnectButton and Address. You manage the blockchain connection logic yourself using any SDK (e.g., ethers, viem, web3.js, or non-EVM SDKs).
    2. Official Adapters approach: Use official adapters to quickly connect to various blockchains without handling connection logic manually:
      • EVM-compatible chains: Use @ant-design/web3-wagmi or @ant-design/web3-ethers / @ant-design/web3-eth-web3js.
      • Solana: Use @ant-design/web3-solana.
      • Bitcoin: Use @ant-design/web3-bitcoin.
      • Sui: Use @ant-design/web3-sui.
    3. Custom Adapter approach: Implement your own adapter to support additional blockchains (refer to the adapter development guide).
    4. Adapter-only approach: Use official adapters (like @ant-design/web3-solana) to handle logic, but build your own custom UI components by consuming the adapter's capabilities via Web3ConfigProvider.

  3. Overview of the Ant Design Web3 Course

    main

    The Ant Design Web3 course is designed to transition front-end developers from Web2 to Web3 by teaching DApp (decentralized application) development. The course is structured into three progressive parts:

    1. What is DApp?: Covers fundamental blockchain and smart contract concepts required for front-end development.
    2. Develop DApp: A practical guide to building a DApp front-end from scratch. This includes project initialization, connecting blockchain accounts, and interacting with deployed smart contracts (without needing to write the contracts yourself).
    3. Develop smart contract: An advanced section for those interested in blockchain logic, teaching how to create and replace contracts used in the previous steps.

    The course uses Ant Design Web3 as the primary framework for explanations and aims to result in a minimum viable DApp capable of displaying and minting NFTs.

  6. Use @ant-design/web3-bitcoin for Bitcoin integration

    main

    The @ant-design/web3-bitcoin package enables Bitcoin chain capabilities for Ant Design Web3 components. It manages connection states globally via BitcoinWeb3ConfigProvider and provides common wallet methods like signing and transactions through the useBitcoinWallet hook. You can also access wallet-specific APIs directly through the provider object returned by the hook.

    Supported Wallets:

    • Xverse
    • OKX
    • Unisat
    • Phantom (Note: Phantom currently has limited support for PSBT; test thoroughly before use.)

  7. Choose an integration method for Ant Design Web3

    main

    Ant Design Web3 offers four primary ways to integrate into your application depending on your level of control and the blockchain you are targeting:

    1. Direct UI Component Usage: Use components like ConnectButton and Address from @ant-design/web3 directly. This method is chain-agnostic; you can use any blockchain SDK (e.g., ethers, viem, web3.js) to handle the underlying logic.
    2. Official Adapters: Use pre-built adapters to handle blockchain connection logic automatically. This is the fastest way to connect to specific ecosystems:
      • EVM-compatible chains: Use @ant-design/web3-wagmi, @ant-design/web3-ethers, or @ant-design/web3-eth-web3js.
      • Solana: Use @ant-design/web3-solana.
      • Bitcoin: Use @ant-design/web3-bitcoin.
      • Sui: Use @ant-design/web3-sui.
    3. Custom Adapters: Implement your own adapter to support unique blockchains or specific SDK requirements. Refer to the Developing Adapters guide for implementation details.
    4. Adapter + Custom UI: Use an official adapter (like @ant-design/web3-solana) to manage the logic, but completely replace the default UI components by consuming capabilities through Web3ConfigProvider.

  8. Key features of Ant Design Web3

    main

    Ant Design Web3 provides a comprehensive set of features for DApp development:

    • UI Components: High-quality components based on Ant Design, including ConnectModal, Address, NFTCard, and a rich icon library.
    • Architecture: A decoupled design separating the UI layer from the adapter layer, allowing for stable updates and support for various blockchain SDKs.
    • Core Capabilities:
      • Theme customization and responsive design.
      • Internationalization (i18n) support.
      • Full TypeScript support and 100% test coverage.
      • Support for EIP6963 and WalletConnect.
    • Chain Support:
      • Ethereum and its L2s (via wagmi, ethers, or web3.js).
      • Bitcoin, Solana, Sui, and TON.
      • Support for non-EVM chains via custom adapters.

  10. Use @ant-design/web3-tron to connect to the TRON ecosystem

    main

    Ant Design Web3 provides the @ant-design/web3-tron package to adapt @ant-design/web3 components to the TRON blockchain. This package manages connection states, global state, and interfaces automatically via the TronWeb3ConfigProvider.

    Key features:

    • Automatic State Management: You do not need to manually handle the connection state of components.
    • Pre-configured Wallets: Supports common TRON wallets including TronLink, OkxWallet, BitGet, and Bybit.
    • Simplified Interaction: The connector exposes standard methods for signing messages and sending transactions, removing the need for manual wallet customization.

  11. Integrate TON blockchain with Ant Design Web3

    main

    Use @ant-design/web3-ton to adapt the @ant-design/web3 component suite to the TON ecosystem. This package manages connection states, global state, and interfaces automatically via the Web3ConfigProvider.

    Key features:

    • Automatic State Management: You do not need to manually handle connection states for components.
    • Standardized Wallet Interface: The connector exposes common methods like signing and transaction that can be called directly without custom wallet implementation.
    • RPC Services: Uses Tonconnect for services like balance inquiries on both mainnet and testnet.

    Supported wallets include:

    • telegram-wallet
    • Tonkeeper
    • MyTonWallet
    • OpenMask
    • Tonhub
    • DeWallet
    • OKX (ensure the wallet is up to date)

  12. Use the CryptoInput component

    main

    The CryptoInput component is a specialized input field designed for cryptocurrency transactions. It handles token selection, amount input (both as raw bigint and human-readable string), and displays token balances and prices.

    Key features include:

    • Token Selection: Choose from a list of available tokens via the options prop.
    • Balance Display: Show user balances and current token prices using the balance prop.
    • Customizable Layout: Customize the header and footer areas, or use Swap mode for exchange interfaces.
    • Size Adjustment: Supports different size configurations.
    • TokenSelect Integration: Inherits various properties from the TokenSelect component.
    // Basic usage pattern
<CryptoInput 
  value={value} 
  onChange={onChange} 
  options={tokenOptions} 
  balance={tokenBalance} 
/>