Address Display and Formatting

/**
 * Component for displaying and formatting blockchain addresses with copy functionality
 * @param address - The address to display
 * @param ellipsis - Ellipsis configuration for address truncation
 * @param addressPrefix - Address prefix (e.g., '0x')
 * @param copyable - Whether address is copyable (default: false)
 * @param tooltip - Tooltip configuration
 * @param format - Address formatting function or boolean
 * @param locale - Localization overrides
 * @param children - Custom content to display instead of address
 */
const Address: React.FC<React.PropsWithChildren<AddressProps>>;

interface AddressProps {
  address?: string;
  ellipsis?: boolean | { headClip?: number; tailClip?: number };
  addressPrefix?: string | false;
  copyable?: boolean;
  tooltip?: boolean | TooltipProps['title'];
  format?: boolean | ((address: string) => ReactNode);
  locale?: Locale['Address'];
}

interface Locale {
  Address?: {
    copied?: string;
    copy?: string;
  };
}

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

// Basic address display
<Address address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" />

// Address with copy functionality
<Address 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  copyable
/>

// Address with ellipsis truncation
<Address 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  ellipsis={{ headClip: 6, tailClip: 4 }}
  copyable
/>

// Address with custom formatting
<Address 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  format={(addr) => addr.toUpperCase()}
  tooltip="Ethereum Address"
/>

// Address with custom prefix
<Address 
  address="21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  addressPrefix="0x"
  copyable
/>

// Custom content with address context
<Address address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B">
  <span style={{ color: 'blue' }}>Custom Address Display</span>
</Address>

/**
 * Component for creating links to blockchain explorers
 * @param address - Address or transaction hash to link
 * @param type - Link type: 'address' | 'transaction' (default: 'address')
 * @param chain - Blockchain network for the link
 * @param icon - Icon display configuration
 * @param iconOnly - Whether to show only the icon
 * @param ellipsis - Whether to ellipsize the address display
 * @param name - Custom display name
 * @param href - Override the generated link
 */
const BrowserLink: React.FC<BrowserLinkProps>;

interface BrowserLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  address: string;
  type?: BrowserLinkType;
  chain?: Chain;
  icon?: boolean | React.ReactNode;
  iconStyle?: React.CSSProperties;
  iconOnly?: boolean;
  ellipsis?: boolean;
  addressPrefix?: string | false;
  name?: string;
  href?: string;
}

type BrowserLinkType = 'address' | 'transaction';

import { BrowserLink } from "@ant-design/web3";

// Basic address link
<BrowserLink 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  type="address"
/>

// Transaction hash link
<BrowserLink 
  address="0x8784d99762bcfadbcdf9e56b624b1357a4c3ad8e7d6cb37e5a4ec2fa6a933952"
  type="transaction"
/>

// Link with custom chain
<BrowserLink 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  chain={{
    id: 137,
    name: "Polygon",
    browser: {
      getBrowserLink: (address, type) => 
        `https://polygonscan.com/${type}/${address}`
    }
  }}
/>

// Icon-only display
<BrowserLink 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  iconOnly
/>

// Custom name with ellipsis
<BrowserLink 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  name="My Wallet Address"
  ellipsis
/>

// Custom href override
<BrowserLink 
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
  href="https://custom-explorer.com/address/0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
/>

/**
 * Utility function to generate blockchain explorer links
 * @param address - Address or transaction hash
 * @param type - Link type: 'address' | 'transaction' (default: 'address')
 * @param chain - Blockchain network configuration
 * @returns Generated explorer URL
 */
function getBrowserLink(
  address: string, 
  type?: BrowserLinkType, 
  chain?: Chain
): string;

import { getBrowserLink } from "@ant-design/web3";

// Generate Ethereum mainnet address link
const addressLink = getBrowserLink(
  "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B",
  "address"
);
// Returns: "https://etherscan.io/address/0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"

// Generate transaction link
const txLink = getBrowserLink(
  "0x8784d99762bcfadbcdf9e56b624b1357a4c3ad8e7d6cb37e5a4ec2fa6a933952",
  "transaction"
);

// Generate link for specific chain
const polygonLink = getBrowserLink(
  "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B",
  "address",
  {
    id: 137,
    name: "Polygon",
    browser: {
      getBrowserLink: (address, type) => 
        `https://polygonscan.com/${type}/${address}`
    }
  }
);

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

interface BalanceMetadata {
  name?: string;
  symbol?: string;
  icon?: React.ReactNode;
  decimal?: number;
}

/**
 * Ensures address starts with '0x' prefix
 * @param address - Address string
 * @returns Address with '0x' prefix
 */
function fillAddressWith0x(address: string): `0x${string}`;

/**
 * Creates a function to generate blockchain explorer links
 * @param url - Base explorer URL template
 * @returns Function that generates explorer links
 */
function createGetBrowserLink(
  url: string
): (address: string, type: string) => string;

import { fillAddressWith0x, createGetBrowserLink } from "@ant-design/web3";

// Ensure address has 0x prefix
const address = fillAddressWith0x("21CDf0974d53a6e96eF05d7B324a9803735fFd3B");
// Returns: "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"

// Create custom link generator
const getPolygonLink = createGetBrowserLink("https://polygonscan.com");
const addressUrl = getPolygonLink(
  "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B",
  "address"
);