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

types.mddocs/

Core Type Definitions

Essential TypeScript interfaces and types for Web3 development, providing comprehensive type safety for accounts, chains, wallets, balances, and NFT metadata.

Capabilities

Account Interface

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;
}

Chain Interface

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;
  };
}

Chain IDs Enumeration

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,
}

Balance and Balance Metadata

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;
};

NFT Metadata Interface

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 Interfaces

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;
};

UI Component Props

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;
}

Browser Link Types

Type definitions for blockchain explorer link generation.

/**
 * Supported browser link types for blockchain explorers
 */
type BrowserLinkType = 'address' | 'transaction';

Usage Examples

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"
    }
  ]
};