CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ant-design--web3

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

crypto-components.mddocs/

Cryptocurrency Components

Components for handling cryptocurrency amounts, prices, token selection, and input with proper decimal handling, formatting, and user interactions.

Capabilities

CryptoPrice

Component for displaying cryptocurrency prices and amounts with proper decimal formatting, chain integration, and customizable display options.

/**
 * Component for displaying cryptocurrency prices and amounts
 * @param value - Token amount value in wei or smallest unit
 * @param symbol - Token symbol (e.g., 'ETH', 'BTC')
 * @param decimals - Token decimal places (default: 18)
 * @param chain - Associated blockchain
 * @param icon - Icon display configuration
 * @param fixed - Number of decimal places to display
 * @param format - Custom formatting function
 */
const CryptoPrice: React.FC<CryptoPriceProps>;

interface CryptoPriceProps {
  value?: bigint;
  symbol?: string;
  decimals?: number;
  chain?: Chain;
  icon?: boolean | React.ReactNode;
  fixed?: number;
  format?: CryptoPriceBalanceProps['format'];
}

interface CryptoPriceBalanceProps {
  format?: (value: bigint, decimals: number) => string;
}

Usage Examples:

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

// Basic price display
<CryptoPrice 
  value={BigInt("1000000000000000000")} // 1 ETH in wei
  symbol="ETH"
  decimals={18}
/>

// Price with fixed decimal places
<CryptoPrice 
  value={BigInt("1500000000000000000")} // 1.5 ETH
  symbol="ETH"
  decimals={18}
  fixed={4} // Show 4 decimal places
/>

// Price with chain icon
<CryptoPrice 
  value={BigInt("2000000000000000000")} // 2 ETH
  symbol="ETH"
  decimals={18}
  chain={{
    id: 1,
    name: "Ethereum",
    icon: <EthereumIcon />
  }}
  icon={true}
/>

// Custom formatting
<CryptoPrice 
  value={BigInt("1234567890123456789")} // 1.234... ETH
  symbol="ETH"
  decimals={18}
  format={(value, decimals) => {
    const formatted = Number(value) / Math.pow(10, decimals);
    return formatted.toLocaleString('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 6
    });
  }}
/>

// Custom icon
<CryptoPrice 
  value={BigInt("50000000")} // 0.5 BTC (8 decimals)
  symbol="BTC"
  decimals={8}
  icon={<BitcoinIcon />}
/>

CryptoInput

Input component for entering cryptocurrency amounts with integrated token selection, balance display, and validation.

/**
 * Input component for entering cryptocurrency amounts with token selection
 * @param value - Input value containing amount, input string, and selected token
 * @param onChange - Value change callback
 * @param balance - Token balance information for max button
 * @param header - Custom header content
 * @param footer - Footer configuration or custom content
 * @param size - Input size: 'small' | 'middle' | 'large'
 * @param placeholder - Input placeholder text
 * @param disabled - Whether input is disabled
 * @param loading - Whether input is in loading state
 * Extends TokenSelectProps for token selection functionality
 */
const CryptoInput: React.FC<CryptoInputProps>;

interface CryptoInputProps extends TokenSelectProps {
  value?: {
    amount?: bigint;
    inputString?: string;
    token?: Token;
  };
  onChange?: (value?: CryptoInputProps['value']) => void;
  balance?: {
    amount: bigint;
    unit: string;
    price: number | string;
  };
  header?: React.ReactNode;
  footer?: FooterProps | React.ReactNode | false;
  size?: 'small' | 'middle' | 'large';
  placeholder?: string;
  disabled?: boolean;
  loading?: boolean;
}

interface FooterProps {
  text?: React.ReactNode;
  extra?: React.ReactNode;
}

interface Token {
  name: string;
  symbol: string;
  icon: React.ReactNode;
  decimal: number;
  availableChains: Array<{
    chain: Chain;
    contract?: string;
  }>;
}

Usage Examples:

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

// Basic crypto input
<CryptoInput 
  placeholder="Enter amount"
  onChange={(value) => {
    console.log('Amount:', value?.amount);
    console.log('Input string:', value?.inputString);
    console.log('Selected token:', value?.token);
  }}
/>

// Crypto input with balance and max button
<CryptoInput 
  value={{
    amount: BigInt("500000000000000000"), // 0.5 ETH
    inputString: "0.5",
    token: {
      name: "Ethereum",
      symbol: "ETH",
      icon: <EthIcon />,
      decimal: 18,
      availableChains: [{ chain: ethereumChain }]
    }
  }}
  balance={{
    amount: BigInt("2000000000000000000"), // 2 ETH balance
    unit: "ETH",
    price: 2500 // $2500 per ETH
  }}
  onChange={(value) => {
    console.log('New value:', value);
  }}
/>

// Crypto input with custom header and footer
<CryptoInput 
  header={
    <div style={{ marginBottom: 8 }}>
      <strong>Send Amount</strong>
    </div>
  }
  footer={{
    text: "Network fee: 0.002 ETH",
    extra: <span style={{ color: 'green' }}>≈ $5.00</span>
  }}
  size="large"
/>

// Token selection with custom options
<CryptoInput 
  options={[
    {
      name: "Ethereum",
      symbol: "ETH",
      icon: <EthIcon />,
      decimal: 18,
      availableChains: [{ chain: ethereumChain }]
    },
    {
      name: "USD Coin",
      symbol: "USDC",
      icon: <USDCIcon />,
      decimal: 6,
      availableChains: [{ chain: ethereumChain }]
    }
  ]}
  onChange={(value) => {
    if (value?.token) {
      console.log('Selected token:', value.token.symbol);
    }
  }}
/>

TokenSelect

Select component for choosing tokens with search functionality, filtering, and support for multiple selection modes.

/**
 * Select component for choosing tokens with search and filtering
 * @param value - Selected token(s)
 * @param onChange - Selection change callback
 * @param options - Available token list
 * @param mode - Selection mode (undefined for single, 'multiple' for multi-select)
 * @param tokenList - Deprecated: use 'options' instead
 * @param placeholder - Placeholder text
 * @param loading - Whether component is loading
 * @param disabled - Whether component is disabled
 * Extends Ant Design SelectProps for additional select functionality
 */
const TokenSelect: React.FC<TokenSelectProps>;

interface TokenSelectProps extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
  value?: Token | Token[];
  onChange?: (value: Token) => void;
  options?: Token[];
  mode?: 'multiple';
  /** @deprecated Use options instead */
  tokenList?: Token[];
}

interface SelectProps {
  placeholder?: string;
  loading?: boolean;
  disabled?: boolean;
  size?: 'small' | 'middle' | 'large';
  allowClear?: boolean;
  showSearch?: boolean;
  filterOption?: boolean | ((input: string, option: any) => boolean);
}

Usage Examples:

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

const tokenOptions = [
  {
    name: "Ethereum",
    symbol: "ETH",
    icon: <EthIcon />,
    decimal: 18,
    availableChains: [{ chain: ethereumChain }]
  },
  {
    name: "USD Coin",
    symbol: "USDC", 
    icon: <USDCIcon />,
    decimal: 6,
    availableChains: [{ chain: ethereumChain }]
  },
  {
    name: "Chainlink",
    symbol: "LINK",
    icon: <LinkIcon />,
    decimal: 18,
    availableChains: [{ chain: ethereumChain }]
  }
];

// Basic token selection
<TokenSelect 
  options={tokenOptions}
  placeholder="Select a token"
  onChange={(token) => {
    console.log('Selected token:', token.symbol);
  }}
/>

// Token select with search
<TokenSelect 
  options={tokenOptions}
  showSearch
  placeholder="Search and select token"
  filterOption={(input, option) =>
    option.symbol.toLowerCase().includes(input.toLowerCase()) ||
    option.name.toLowerCase().includes(input.toLowerCase())
  }
/>

// Multiple token selection
<TokenSelect 
  options={tokenOptions}
  mode="multiple"
  placeholder="Select multiple tokens"
  onChange={(tokens) => {
    console.log('Selected tokens:', tokens.map(t => t.symbol));
  }}
/>

// Token select with custom styling
<TokenSelect 
  options={tokenOptions}
  size="large"
  allowClear
  loading={false}
  disabled={false}
  onChange={(token) => {
    console.log('Token selected:', token);
  }}
/>

// Controlled token selection
const [selectedToken, setSelectedToken] = useState(tokenOptions[0]);

<TokenSelect 
  options={tokenOptions}
  value={selectedToken}
  onChange={setSelectedToken}
/>

Types

Token Interface

type Token = {
  name: string;
  symbol: string;
  icon: React.ReactNode;
  decimal: number;
  availableChains: Array<{
    chain: Chain;
    contract?: string;
  }>;
};

Balance Interface

type Balance = BalanceMetadata & {
  value?: bigint;
  coverAddress?: boolean;
};

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

Utility Functions

Number and BigInt Conversion

/**
 * Converts number to bigint safely
 * @param num - Number or bigint to convert
 * @returns Converted bigint or undefined
 */
function parseNumberToBigint(num?: number | bigint): bigint | undefined;

Usage Example:

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

// Convert number to bigint
const amount = parseNumberToBigint(1.5); // For ETH, multiply by 10^18 first
const weiAmount = parseNumberToBigint(1.5 * Math.pow(10, 18));

// Convert existing bigint (passthrough)
const existingBigint = BigInt("1000000000000000000");
const converted = parseNumberToBigint(existingBigint); // Returns same value

// Handle undefined/null
const undefined_result = parseNumberToBigint(undefined); // Returns undefined

Validation and Error Handling

Crypto components include built-in validation and error handling:

  • Input Validation: Numeric input validation with decimal precision checking
  • Balance Validation: Automatic balance checking when max button is used
  • Format Validation: Proper formatting of large numbers and scientific notation
  • Token Validation: Verification of token decimals and contract addresses
  • Network Validation: Chain compatibility checking for selected tokens

Example with Validation:

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

<CryptoInput 
  value={inputValue}
  balance={userBalance}
  onChange={(value) => {
    // Validate amount doesn't exceed balance
    if (value?.amount && userBalance?.amount) {
      if (value.amount > userBalance.amount) {
        setError('Insufficient balance');
        return;
      }
    }
    
    // Validate minimum amount
    if (value?.amount && value.amount < BigInt("1000000000000000")) { // 0.001 ETH min
      setError('Amount too small');
      return;
    }
    
    setError('');
    setInputValue(value);
  }}
/>

docs

address-display.md

common-types.md

configuration.md

crypto-components.md

hooks.md

index.md

nft-components.md

payment.md

wallet-connection.md

tile.json