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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Ant Design Web3

Name: tessl/npm-ant-design--web3
Author: tessl

Ant Design Web3 is a comprehensive React/TypeScript Web3 UI component library that provides efficient components for building Web3 dApps with comprehensive wallet integration and blockchain UI components. It extends Ant Design with Web3-specific functionality including wallet connection management, blockchain address display, NFT handling, cryptocurrency operations, and payment interfaces.

Package Information

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

Core Imports

import { 
  ConnectButton, 
  Address, 
  NFTCard, 
  CryptoPrice, 
  Web3ConfigProvider,
  useAccount,
  useConnection
} from "@ant-design/web3";

For CommonJS:

const { 
  ConnectButton, 
  Address, 
  NFTCard, 
  CryptoPrice, 
  Web3ConfigProvider,
  useAccount,
  useConnection 
} = require("@ant-design/web3");

Basic Usage

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

function App() {
  return (
    <Web3ConfigProvider>
      <div>
        {/* Wallet connection with chain selection */}
        <ConnectButton />
        
        {/* Display blockchain addresses */}
        <Address 
          address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
          copyable
          ellipsis
        />
      </div>
    </Web3ConfigProvider>
  );
}

Architecture

Ant Design Web3 is built around several key architectural components:

Configuration System: Web3ConfigProvider context providing Web3 state management and configuration to all child components
Wallet Integration: Comprehensive wallet connection, management, and chain switching capabilities
Component Library: 35+ React components for Web3 UI patterns including addresses, NFTs, crypto amounts, and payments
Hooks System: React hooks for accessing Web3 state and operations from any component
Type System: Complete TypeScript support with interfaces for accounts, chains, wallets, tokens, and NFT metadata
Theming: Integration with Ant Design's theme system plus Web3-specific theme extensions
Localization: Built-in i18n support with English and Chinese locales

Capabilities

Wallet Connection and Management

Complete wallet connection system with support for multiple wallet types, chain switching, and connection state management.

function connect(wallet?: Wallet, options?: ConnectOptions): Promise<void | Account>;
function disconnect(): Promise<void>;
function switchChain(chain: Chain): Promise<void>;

Wallet Connection

Address Display and Formatting

Components for displaying and formatting blockchain addresses with copy functionality and explorer links.

const Address: React.FC<React.PropsWithChildren<AddressProps>>;

interface AddressProps {
  address?: string;
  ellipsis?: boolean | { headClip?: number; tailClip?: number };
  copyable?: boolean;
  format?: boolean | ((address: string) => ReactNode);
}

Address Display

NFT Components

Display and interact with NFTs including image loading, metadata display, and card layouts.

const NFTCard: React.FC<NFTCardProps>;
const NFTImage: React.FC<NFTCardProps>;

interface NFTCardProps {
  address?: string;
  tokenId?: number | bigint;
  type?: 'default' | 'pithy';
  price?: CryptoPriceProps;
}

NFT Components

Cryptocurrency Components

Handle cryptocurrency amounts, prices, and token selection with proper decimal handling and formatting.

const CryptoPrice: React.FC<CryptoPriceProps>;
const CryptoInput: React.FC<CryptoInputProps>;
const TokenSelect: React.FC<TokenSelectProps>;

interface CryptoPriceProps {
  value?: bigint;
  symbol?: string;
  decimals?: number;
  fixed?: number;
}

Cryptocurrency Components

Payment Interface

Payment panel component for handling cryptocurrency payments with multi-chain support and QR code generation.

const PayPanel: React.FC<React.PropsWithChildren<PayPanelProps>>;

interface PayPanelProps {
  amount: number | bigint;
  target: PayPanelTargetProps | (() => Promise<PayPanelTargetProps>);
  supportedChains: { chain: Chain; extra?: React.ReactNode }[];
  token: Token;
  wallets: WalletMetadata[];
  onFinish: () => void;
}

Payment Interface

React Hooks

React hooks for accessing Web3 state and functionality from any component within a Web3ConfigProvider.

function useAccount(): Pick<ConfigConsumerProps, 'account'>;
function useConnection(): Pick<ConfigConsumerProps, 'connect' | 'disconnect'>;
function useProvider(props?: UniversalWeb3ProviderInterface): UniversalWeb3ProviderInterface;
function useNFT(address?: string, tokenId?: bigint | number): { loading: boolean; metadata: NFTMetadata; error?: Error };

React Hooks

Configuration and Theming

Web3ConfigProvider for application-wide configuration and Ant Design theme integration with Web3-specific extensions.

const Web3ConfigProvider: React.FC<{ theme?: Web3ThemeConfig } & Web3ConfigProviderProps>;

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

interface Web3ThemeConfig extends ThemeConfig {
  web3Components?: {
    ConnectModal?: Partial<ConnectModalComponentToken>;
  };
}

Configuration and Theming

Common Types and Interfaces

Core type definitions from @ant-design/web3-common including Account, Chain, Wallet, Token, and NFTMetadata interfaces.

interface Account {
  address: string;
  name?: string;
  avatar?: string;
  addresses?: [`0x${string}`, ...`0x${string}`[]] | readonly `0x${string}`[];
  status?: ConnectStatus;
}

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

Common Types and Interfaces