0
# Ant Design Web3
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @ant-design/web3
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @ant-design/web3`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  ConnectButton, 
16
  Address, 
17
  NFTCard, 
18
  CryptoPrice, 
19
  Web3ConfigProvider,
20
  useAccount,
21
  useConnection
22
} from "@ant-design/web3";
23
```
24

25
For CommonJS:
26

27
```javascript
28
const { 
29
  ConnectButton, 
30
  Address, 
31
  NFTCard, 
32
  CryptoPrice, 
33
  Web3ConfigProvider,
34
  useAccount,
35
  useConnection 
36
} = require("@ant-design/web3");
37
```
38

39
## Basic Usage
40

41
```typescript
42
import { ConnectButton, Address, Web3ConfigProvider } from "@ant-design/web3";
43

44
function App() {
45
  return (
46
    <Web3ConfigProvider>
47
      <div>
48
        {/* Wallet connection with chain selection */}
49
        <ConnectButton />
50
        
51
        {/* Display blockchain addresses */}
52
        <Address 
53
          address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
54
          copyable
55
          ellipsis
56
        />
57
      </div>
58
    </Web3ConfigProvider>
59
  );
60
}
61
```
62

63
## Architecture
64

65
Ant Design Web3 is built around several key architectural components:
66

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

75
## Capabilities
76

77
### Wallet Connection and Management
78

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

81
```typescript { .api }
82
function connect(wallet?: Wallet, options?: ConnectOptions): Promise<void | Account>;
83
function disconnect(): Promise<void>;
84
function switchChain(chain: Chain): Promise<void>;
85
```
86

87
[Wallet Connection](./wallet-connection.md)
88

89
### Address Display and Formatting
90

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

93
```typescript { .api }
94
const Address: React.FC<React.PropsWithChildren<AddressProps>>;
95

96
interface AddressProps {
97
  address?: string;
98
  ellipsis?: boolean | { headClip?: number; tailClip?: number };
99
  copyable?: boolean;
100
  format?: boolean | ((address: string) => ReactNode);
101
}
102
```
103

104
[Address Display](./address-display.md)
105

106
### NFT Components
107

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

110
```typescript { .api }
111
const NFTCard: React.FC<NFTCardProps>;
112
const NFTImage: React.FC<NFTCardProps>;
113

114
interface NFTCardProps {
115
  address?: string;
116
  tokenId?: number | bigint;
117
  type?: 'default' | 'pithy';
118
  price?: CryptoPriceProps;
119
}
120
```
121

122
[NFT Components](./nft-components.md)
123

124
### Cryptocurrency Components
125

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

128
```typescript { .api }
129
const CryptoPrice: React.FC<CryptoPriceProps>;
130
const CryptoInput: React.FC<CryptoInputProps>;
131
const TokenSelect: React.FC<TokenSelectProps>;
132

133
interface CryptoPriceProps {
134
  value?: bigint;
135
  symbol?: string;
136
  decimals?: number;
137
  fixed?: number;
138
}
139
```
140

141
[Cryptocurrency Components](./crypto-components.md)
142

143
### Payment Interface
144

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

147
```typescript { .api }
148
const PayPanel: React.FC<React.PropsWithChildren<PayPanelProps>>;
149

150
interface PayPanelProps {
151
  amount: number | bigint;
152
  target: PayPanelTargetProps | (() => Promise<PayPanelTargetProps>);
153
  supportedChains: { chain: Chain; extra?: React.ReactNode }[];
154
  token: Token;
155
  wallets: WalletMetadata[];
156
  onFinish: () => void;
157
}
158
```
159

160
[Payment Interface](./payment.md)
161

162
### React Hooks
163

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

166
```typescript { .api }
167
function useAccount(): Pick<ConfigConsumerProps, 'account'>;
168
function useConnection(): Pick<ConfigConsumerProps, 'connect' | 'disconnect'>;
169
function useProvider(props?: UniversalWeb3ProviderInterface): UniversalWeb3ProviderInterface;
170
function useNFT(address?: string, tokenId?: bigint | number): { loading: boolean; metadata: NFTMetadata; error?: Error };
171
```
172

173
[React Hooks](./hooks.md)
174

175
### Configuration and Theming
176

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

179
```typescript { .api }
180
const Web3ConfigProvider: React.FC<{ theme?: Web3ThemeConfig } & Web3ConfigProviderProps>;
181

182
interface Web3ConfigProviderProps extends UniversalWeb3ProviderInterface {
183
  children?: React.ReactNode;
184
  locale?: Locale;
185
}
186

187
interface Web3ThemeConfig extends ThemeConfig {
188
  web3Components?: {
189
    ConnectModal?: Partial<ConnectModalComponentToken>;
190
  };
191
}
192
```
193

194
[Configuration and Theming](./configuration.md)
195

196
### Common Types and Interfaces
197

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

200
```typescript { .api }
201
interface Account {
202
  address: string;
203
  name?: string;
204
  avatar?: string;
205
  addresses?: [`0x${string}`, ...`0x${string}`[]] | readonly `0x${string}`[];
206
  status?: ConnectStatus;
207
}
208

209
interface Chain {
210
  id: ChainIds | number;
211
  name: string;
212
  type?: ChainType;
213
  icon?: React.ReactNode;
214
  browser?: {
215
    icon?: React.ReactNode;
216
    getBrowserLink?: (address: string, type: BrowserLinkType) => string;
217
  };
218
  nativeCurrency?: BalanceMetadata & { name: string };
219
}
220
```
221

222
[Common Types and Interfaces](./common-types.md)