or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

i18n.mdindex.mdreact-provider.mdtypes.mdutilities.mdweb3-provider.md
tile.json

index.mddocs/

Ant Design Web3 Common

Ant Design Web3 Common provides comprehensive utilities, type definitions, and shared functionality for the Ant Design Web3 ecosystem. It includes TypeScript interfaces for Web3 concepts like wallets, chains, accounts, balances, and NFT metadata, along with a universal Web3 provider interface for abstracting different wallet connections.

Package Information

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

Core Imports

Most commonly used imports:

import { 
  // Core types
  Account, 
  Chain, 
  ChainIds,
  Balance,
  Wallet,
  // React components and provider
  Web3ConfigProvider,
  UniversalWeb3ProviderInterface,
  // Utility functions
  createGetBrowserLink,
  fillAddressWith0x,
  // Internationalization
  en_US,
  zh_CN
} from "@ant-design/web3-common";

All exports (for reference):

import {
  // Types and interfaces
  Account, Chain, ChainIds, Balance, Wallet, NFTMetadata,
  BrowserLinkType, UniversalWeb3ProviderInterface,
  WalletMetadata, WalletExtensionItem, ConnectorTriggerProps,
  RequiredLocale, Locale, BalanceMetadata,
  // React provider
  Web3ConfigProvider, ConfigContext, Web3ConfigProviderProps, 
  ConfigConsumerProps,
  // Utilities
  createGetBrowserLink, fillAddressWith0x, parseNumberToBigint,
  getWeb3AssetUrl, requestWeb3Asset, mockFetch,
  // Locales
  en_US, zh_CN, defaultLocale
} from "@ant-design/web3-common";

For CommonJS:

const { 
  Account, Chain, ChainIds, Balance, Wallet,
  Web3ConfigProvider, UniversalWeb3ProviderInterface,
  createGetBrowserLink, fillAddressWith0x,
  en_US, zh_CN
} = require("@ant-design/web3-common");

Basic Usage

import { 
  ChainIds, 
  Web3ConfigProvider, 
  createGetBrowserLink,
  fillAddressWith0x,
  type Account,
  type Chain
} from "@ant-design/web3-common";

// Create a chain configuration
const chain: Chain = {
  id: ChainIds.Mainnet,
  name: "Ethereum Mainnet",
  browser: {
    getBrowserLink: createGetBrowserLink("https://etherscan.io")
  }
};

// Format an address
const formattedAddress = fillAddressWith0x("abcd1234");
// Result: "0xabcd1234"

// Use Web3 configuration provider
function App() {
  return (
    <Web3ConfigProvider chain={chain}>
      <YourWeb3Components />
    </Web3ConfigProvider>
  );
}

Architecture

Ant Design Web3 Common is organized around several key areas:

  • Type System: Complete TypeScript definitions for Web3 entities (accounts, chains, wallets, NFTs)
  • Universal Provider Interface: Abstract interface for different wallet implementations
  • Utility Functions: Helper functions for formatting, browser links, and Web3 asset handling
  • React Integration: Configuration provider for managing Web3 context in React applications
  • Internationalization: Built-in locale support for English and Chinese

Capabilities

Core Type Definitions

Essential TypeScript interfaces and types for Web3 development, including accounts, chains, wallets, and NFT metadata.

interface Account {
  address: string;
  name?: string;
}

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

enum ChainIds {
  Mainnet = 1,
  Polygon = 137,
  BSC = 56,
  Arbitrum = 42_161,
  Optimism = 10,
  Goerli = 5,
  Avalanche = 43_114,
}

Core Types

Utility Functions

Helper functions for Web3 operations including address formatting, browser link generation, and asset URL handling.

function fillAddressWith0x(address: string): `0x${string}`;
function createGetBrowserLink(url: string): (address: string, type: string) => string;
function getWeb3AssetUrl(url?: string): string | undefined;
function requestWeb3Asset<T = any>(url: string): Promise<T>;

Utilities

Universal Web3 Provider Interface

Abstract interface for wallet providers that enables consistent interaction across different wallet implementations.

interface UniversalWeb3ProviderInterface {
  account?: Account;
  chain?: Chain;
  balance?: Balance;
  availableWallets?: Wallet[];
  availableChains?: Chain[];
  connect?: (wallet?: Wallet) => Promise<void>;
  disconnect?: () => Promise<void>;
  switchChain?: (chain: Chain) => Promise<void>;
  getNFTMetadata?: (params: { address: string; tokenId: bigint }) => Promise<NFTMetadata>;
}

Web3 Provider Interface

React Configuration Provider

React context provider for managing Web3 configuration and state across your application.

const Web3ConfigProvider: React.FC<Web3ConfigProviderProps>;

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

React Provider

Internationalization

Built-in locale support with complete translations for English and Chinese, plus extensible locale system.

const en_US: RequiredLocale;
const zh_CN: RequiredLocale;
const defaultLocale: RequiredLocale;

interface Locale {
  ConnectButton?: Partial<RequiredLocale['ConnectButton']>;
  ConnectModal?: Partial<RequiredLocale['ConnectModal']>;
  NFTCard?: Partial<RequiredLocale['NFTCard']>;
}

Internationalization