or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

address-display.mdcommon-types.mdconfiguration.mdcrypto-components.mdhooks.mdindex.mdnft-components.mdpayment.mdwallet-connection.md
tile.json

tessl/npm-ant-design--web3

Efficient React components for building Web3 dApps with comprehensive wallet integration and blockchain UI components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ant-design/web3@1.25.x

To install, run

npx @tessl/cli install tessl/npm-ant-design--web3@1.25.0

index.mddocs/

Ant Design Web3

Ant Design Web3 is a comprehensive React/TypeScript Web3 UI component library that provides efficient components for building Web3 dApps with comprehensive wallet integration and blockchain UI components. It extends Ant Design with Web3-specific functionality including wallet connection management, blockchain address display, NFT handling, cryptocurrency operations, and payment interfaces.

Package Information

  • Package Name: @ant-design/web3
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ant-design/web3

Core Imports

import { 
  ConnectButton, 
  Address, 
  NFTCard, 
  CryptoPrice, 
  Web3ConfigProvider,
  useAccount,
  useConnection
} from "@ant-design/web3";

For CommonJS:

const { 
  ConnectButton, 
  Address, 
  NFTCard, 
  CryptoPrice, 
  Web3ConfigProvider,
  useAccount,
  useConnection 
} = require("@ant-design/web3");

Basic Usage

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

function App() {
  return (
    <Web3ConfigProvider>
      <div>
        {/* Wallet connection with chain selection */}
        <ConnectButton />
        
        {/* Display blockchain addresses */}
        <Address 
          address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
          copyable
          ellipsis
        />
      </div>
    </Web3ConfigProvider>
  );
}

Architecture

Ant Design Web3 is built around several key architectural components:

  • Configuration System: Web3ConfigProvider context providing Web3 state management and configuration to all child components
  • Wallet Integration: Comprehensive wallet connection, management, and chain switching capabilities
  • Component Library: 35+ React components for Web3 UI patterns including addresses, NFTs, crypto amounts, and payments
  • Hooks System: React hooks for accessing Web3 state and operations from any component
  • Type System: Complete TypeScript support with interfaces for accounts, chains, wallets, tokens, and NFT metadata
  • Theming: Integration with Ant Design's theme system plus Web3-specific theme extensions
  • Localization: Built-in i18n support with English and Chinese locales

Capabilities

Wallet Connection and Management

Complete wallet connection system with support for multiple wallet types, chain switching, and connection state management.

function connect(wallet?: Wallet, options?: ConnectOptions): Promise<void | Account>;
function disconnect(): Promise<void>;
function switchChain(chain: Chain): Promise<void>;

Wallet Connection

Address Display and Formatting

Components for displaying and formatting blockchain addresses with copy functionality and explorer links.

const Address: React.FC<React.PropsWithChildren<AddressProps>>;

interface AddressProps {
  address?: string;
  ellipsis?: boolean | { headClip?: number; tailClip?: number };
  copyable?: boolean;
  format?: boolean | ((address: string) => ReactNode);
}

Address Display

NFT Components

Display and interact with NFTs including image loading, metadata display, and card layouts.

const NFTCard: React.FC<NFTCardProps>;
const NFTImage: React.FC<NFTCardProps>;

interface NFTCardProps {
  address?: string;
  tokenId?: number | bigint;
  type?: 'default' | 'pithy';
  price?: CryptoPriceProps;
}

NFT Components

Cryptocurrency Components

Handle cryptocurrency amounts, prices, and token selection with proper decimal handling and formatting.

const CryptoPrice: React.FC<CryptoPriceProps>;
const CryptoInput: React.FC<CryptoInputProps>;
const TokenSelect: React.FC<TokenSelectProps>;

interface CryptoPriceProps {
  value?: bigint;
  symbol?: string;
  decimals?: number;
  fixed?: number;
}

Cryptocurrency Components

Payment Interface

Payment panel component for handling cryptocurrency payments with multi-chain support and QR code generation.

const PayPanel: React.FC<React.PropsWithChildren<PayPanelProps>>;

interface PayPanelProps {
  amount: number | bigint;
  target: PayPanelTargetProps | (() => Promise<PayPanelTargetProps>);
  supportedChains: { chain: Chain; extra?: React.ReactNode }[];
  token: Token;
  wallets: WalletMetadata[];
  onFinish: () => void;
}

Payment Interface

React Hooks

React hooks for accessing Web3 state and functionality from any component within a Web3ConfigProvider.

function useAccount(): Pick<ConfigConsumerProps, 'account'>;
function useConnection(): Pick<ConfigConsumerProps, 'connect' | 'disconnect'>;
function useProvider(props?: UniversalWeb3ProviderInterface): UniversalWeb3ProviderInterface;
function useNFT(address?: string, tokenId?: bigint | number): { loading: boolean; metadata: NFTMetadata; error?: Error };

React Hooks

Configuration and Theming

Web3ConfigProvider for application-wide configuration and Ant Design theme integration with Web3-specific extensions.

const Web3ConfigProvider: React.FC<{ theme?: Web3ThemeConfig } & Web3ConfigProviderProps>;

interface Web3ConfigProviderProps extends UniversalWeb3ProviderInterface {
  children?: React.ReactNode;
  locale?: Locale;
}

interface Web3ThemeConfig extends ThemeConfig {
  web3Components?: {
    ConnectModal?: Partial<ConnectModalComponentToken>;
  };
}

Configuration and Theming

Common Types and Interfaces

Core type definitions from @ant-design/web3-common including Account, Chain, Wallet, Token, and NFTMetadata interfaces.

interface Account {
  address: string;
  name?: string;
  avatar?: string;
  addresses?: [`0x${string}`, ...`0x${string}`[]] | readonly `0x${string}`[];
  status?: ConnectStatus;
}

interface Chain {
  id: ChainIds | number;
  name: string;
  type?: ChainType;
  icon?: React.ReactNode;
  browser?: {
    icon?: React.ReactNode;
    getBrowserLink?: (address: string, type: BrowserLinkType) => string;
  };
  nativeCurrency?: BalanceMetadata & { name: string };
}

Common Types and Interfaces