Essential TypeScript interfaces and types for Web3 development, providing comprehensive type safety for accounts, chains, wallets, balances, and NFT metadata.
Represents a Web3 account with address and optional display name.
/**
* Represents a Web3 account with address and optional display name
*/
interface Account {
/** Account address (typically Ethereum address) */
address: string;
/** Optional human-readable name for the account */
name?: string;
}Blockchain network configuration with metadata and browser integration.
/**
* Blockchain network configuration with metadata and browser integration
*/
interface Chain {
/** Chain identifier, can use predefined ChainIds or custom number */
id: ChainIds | number;
/** Human-readable chain name */
name: string;
/** Optional chain icon for UI display */
icon?: React.ReactNode;
/** Browser integration configuration for blockchain explorers */
browser?: {
/** Optional browser/explorer icon */
icon?: React.ReactNode;
/** Function to generate blockchain explorer links */
getBrowserLink?: (address: string, type: BrowserLinkType) => string;
};
/** Native currency information for this chain */
nativeCurrency?: BalanceMetadata & {
/** Native currency name (e.g., "Ether") */
name: string;
};
}Predefined blockchain network identifiers for major networks.
/**
* Predefined blockchain network identifiers for major networks
*/
enum ChainIds {
/** Ethereum Mainnet */
Mainnet = 1,
/** Polygon (Matic) Network */
Polygon = 137,
/** Binance Smart Chain */
BSC = 56,
/** Arbitrum One */
Arbitrum = 42_161,
/** Optimism */
Optimism = 10,
/** Goerli Testnet */
Goerli = 5,
/** Avalanche C-Chain */
Avalanche = 43_114,
}Token balance information with metadata for display and formatting.
/**
* Token metadata for balance display and formatting
*/
type BalanceMetadata = {
/** Token icon for UI display */
icon?: React.ReactNode;
/** Number of decimal places for the token */
decimals?: number;
/** Token symbol (e.g., "ETH", "USDC") */
symbol?: string;
};
/**
* Token balance information combining value and metadata
*/
type Balance = BalanceMetadata & {
/** Balance value as BigInt for precision */
value?: bigint;
};Comprehensive NFT token metadata structure following common standards.
/**
* Comprehensive NFT token metadata structure following common standards
*/
interface NFTMetadata {
/** NFT name */
name?: string;
/** NFT description */
description?: string;
/** NFT image URL */
image?: string;
/** DNA hash for generative NFTs */
dna?: string;
/** Edition number for limited collections */
edition?: number;
/** Creation or mint date timestamp */
date?: number;
/** Array of trait attributes */
attributes?: {
/** Trait category name */
trait_type?: string;
/** Trait value */
value?: string;
}[];
/** Compiler information for generated NFTs */
compiler?: string;
}Wallet metadata and functionality interfaces for wallet integration.
/**
* Complete wallet interface extending metadata with functionality
*/
interface Wallet extends WalletMetadata {
/** Check if wallet is ready for connection */
hasWalletReady?: () => Promise<boolean>;
/** Get QR code for wallet connection */
getQrCode?: () => Promise<{
uri: string;
}>;
}
/**
* Wallet metadata and configuration information
*/
type WalletMetadata = {
/** Wallet name for display */
name: string;
/** Wallet description or introduction */
remark: string;
/** Unique identifier for the wallet */
key?: React.Key;
/** Wallet icon for UI display */
icon?: string | React.ReactNode;
/** Browser extension information, false if no extensions */
extensions?: false | WalletExtensionItem[];
/** Mobile app information, false if no app */
app?: false | {
/** App store or download link */
link: string;
};
/** Wallet group name for categorization */
group?: string;
};
/**
* Browser extension information for wallet integration
*/
type WalletExtensionItem = {
/** Browser identifier */
key: 'Chrome' | 'Firefox' | 'Edge' | 'Safari' | (string & {});
/** Extension store link */
link: string;
/** Browser icon for display */
browserIcon: React.ReactNode | string;
/** Browser name for display */
browserName: string;
/** Extension description */
description: string;
};Props interfaces for UI components in the Web3 ecosystem.
/**
* Props for wallet connector trigger components
*/
interface ConnectorTriggerProps {
/** Current connected account */
account?: Account;
/** Connection loading state */
loading?: boolean;
/** Handler for connect button click */
onConnectClick?: () => void;
/** Handler for disconnect button click */
onDisconnectClick?: () => void;
/** Handler for chain switching */
onSwitchChain?: (chain: Chain) => Promise<void>;
/** Available chains for switching */
availableChains?: Chain[];
/** Currently selected chain */
chain?: Chain;
/** Current account balance */
balance?: Balance;
}Type definitions for blockchain explorer link generation.
/**
* Supported browser link types for blockchain explorers
*/
type BrowserLinkType = 'address' | 'transaction';import { ChainIds, type Chain, type Account, type Wallet } from "@ant-design/web3-common";
// Create a chain configuration
const ethereumChain: Chain = {
id: ChainIds.Mainnet,
name: "Ethereum Mainnet",
nativeCurrency: {
name: "Ether",
symbol: "ETH",
decimals: 18
}
};
// Define an account
const userAccount: Account = {
address: "0x742d35cc6634c0532925a3b8d6ac013bbce29cd4",
name: "My Wallet"
};
// Create wallet metadata
const metamaskWallet: WalletMetadata = {
name: "MetaMask",
remark: "Connect using MetaMask",
extensions: [
{
key: "Chrome",
link: "https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn",
browserIcon: "chrome-icon",
browserName: "Chrome",
description: "MetaMask extension for Chrome"
}
]
};