0
# Cryptocurrency Components
1

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

4
## Capabilities
5

6
### CryptoPrice
7

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

10
```typescript { .api }
11
/**
12
 * Component for displaying cryptocurrency prices and amounts
13
 * @param value - Token amount value in wei or smallest unit
14
 * @param symbol - Token symbol (e.g., 'ETH', 'BTC')
15
 * @param decimals - Token decimal places (default: 18)
16
 * @param chain - Associated blockchain
17
 * @param icon - Icon display configuration
18
 * @param fixed - Number of decimal places to display
19
 * @param format - Custom formatting function
20
 */
21
const CryptoPrice: React.FC<CryptoPriceProps>;
22

23
interface CryptoPriceProps {
24
  value?: bigint;
25
  symbol?: string;
26
  decimals?: number;
27
  chain?: Chain;
28
  icon?: boolean | React.ReactNode;
29
  fixed?: number;
30
  format?: CryptoPriceBalanceProps['format'];
31
}
32

33
interface CryptoPriceBalanceProps {
34
  format?: (value: bigint, decimals: number) => string;
35
}
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import { CryptoPrice } from "@ant-design/web3";
42

43
// Basic price display
44
<CryptoPrice 
45
  value={BigInt("1000000000000000000")} // 1 ETH in wei
46
  symbol="ETH"
47
  decimals={18}
48
/>
49

50
// Price with fixed decimal places
51
<CryptoPrice 
52
  value={BigInt("1500000000000000000")} // 1.5 ETH
53
  symbol="ETH"
54
  decimals={18}
55
  fixed={4} // Show 4 decimal places
56
/>
57

58
// Price with chain icon
59
<CryptoPrice 
60
  value={BigInt("2000000000000000000")} // 2 ETH
61
  symbol="ETH"
62
  decimals={18}
63
  chain={{
64
    id: 1,
65
    name: "Ethereum",
66
    icon: <EthereumIcon />
67
  }}
68
  icon={true}
69
/>
70

71
// Custom formatting
72
<CryptoPrice 
73
  value={BigInt("1234567890123456789")} // 1.234... ETH
74
  symbol="ETH"
75
  decimals={18}
76
  format={(value, decimals) => {
77
    const formatted = Number(value) / Math.pow(10, decimals);
78
    return formatted.toLocaleString('en-US', {
79
      minimumFractionDigits: 2,
80
      maximumFractionDigits: 6
81
    });
82
  }}
83
/>
84

85
// Custom icon
86
<CryptoPrice 
87
  value={BigInt("50000000")} // 0.5 BTC (8 decimals)
88
  symbol="BTC"
89
  decimals={8}
90
  icon={<BitcoinIcon />}
91
/>
92
```
93

94
### CryptoInput
95

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

98
```typescript { .api }
99
/**
100
 * Input component for entering cryptocurrency amounts with token selection
101
 * @param value - Input value containing amount, input string, and selected token
102
 * @param onChange - Value change callback
103
 * @param balance - Token balance information for max button
104
 * @param header - Custom header content
105
 * @param footer - Footer configuration or custom content
106
 * @param size - Input size: 'small' | 'middle' | 'large'
107
 * @param placeholder - Input placeholder text
108
 * @param disabled - Whether input is disabled
109
 * @param loading - Whether input is in loading state
110
 * Extends TokenSelectProps for token selection functionality
111
 */
112
const CryptoInput: React.FC<CryptoInputProps>;
113

114
interface CryptoInputProps extends TokenSelectProps {
115
  value?: {
116
    amount?: bigint;
117
    inputString?: string;
118
    token?: Token;
119
  };
120
  onChange?: (value?: CryptoInputProps['value']) => void;
121
  balance?: {
122
    amount: bigint;
123
    unit: string;
124
    price: number | string;
125
  };
126
  header?: React.ReactNode;
127
  footer?: FooterProps | React.ReactNode | false;
128
  size?: 'small' | 'middle' | 'large';
129
  placeholder?: string;
130
  disabled?: boolean;
131
  loading?: boolean;
132
}
133

134
interface FooterProps {
135
  text?: React.ReactNode;
136
  extra?: React.ReactNode;
137
}
138

139
interface Token {
140
  name: string;
141
  symbol: string;
142
  icon: React.ReactNode;
143
  decimal: number;
144
  availableChains: Array<{
145
    chain: Chain;
146
    contract?: string;
147
  }>;
148
}
149
```
150

151
**Usage Examples:**
152

153
```typescript
154
import { CryptoInput } from "@ant-design/web3";
155

156
// Basic crypto input
157
<CryptoInput 
158
  placeholder="Enter amount"
159
  onChange={(value) => {
160
    console.log('Amount:', value?.amount);
161
    console.log('Input string:', value?.inputString);
162
    console.log('Selected token:', value?.token);
163
  }}
164
/>
165

166
// Crypto input with balance and max button
167
<CryptoInput 
168
  value={{
169
    amount: BigInt("500000000000000000"), // 0.5 ETH
170
    inputString: "0.5",
171
    token: {
172
      name: "Ethereum",
173
      symbol: "ETH",
174
      icon: <EthIcon />,
175
      decimal: 18,
176
      availableChains: [{ chain: ethereumChain }]
177
    }
178
  }}
179
  balance={{
180
    amount: BigInt("2000000000000000000"), // 2 ETH balance
181
    unit: "ETH",
182
    price: 2500 // $2500 per ETH
183
  }}
184
  onChange={(value) => {
185
    console.log('New value:', value);
186
  }}
187
/>
188

189
// Crypto input with custom header and footer
190
<CryptoInput 
191
  header={
192
    <div style={{ marginBottom: 8 }}>
193
      <strong>Send Amount</strong>
194
    </div>
195
  }
196
  footer={{
197
    text: "Network fee: 0.002 ETH",
198
    extra: <span style={{ color: 'green' }}>≈ $5.00</span>
199
  }}
200
  size="large"
201
/>
202

203
// Token selection with custom options
204
<CryptoInput 
205
  options={[
206
    {
207
      name: "Ethereum",
208
      symbol: "ETH",
209
      icon: <EthIcon />,
210
      decimal: 18,
211
      availableChains: [{ chain: ethereumChain }]
212
    },
213
    {
214
      name: "USD Coin",
215
      symbol: "USDC",
216
      icon: <USDCIcon />,
217
      decimal: 6,
218
      availableChains: [{ chain: ethereumChain }]
219
    }
220
  ]}
221
  onChange={(value) => {
222
    if (value?.token) {
223
      console.log('Selected token:', value.token.symbol);
224
    }
225
  }}
226
/>
227
```
228

229
### TokenSelect
230

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

233
```typescript { .api }
234
/**
235
 * Select component for choosing tokens with search and filtering
236
 * @param value - Selected token(s)
237
 * @param onChange - Selection change callback
238
 * @param options - Available token list
239
 * @param mode - Selection mode (undefined for single, 'multiple' for multi-select)
240
 * @param tokenList - Deprecated: use 'options' instead
241
 * @param placeholder - Placeholder text
242
 * @param loading - Whether component is loading
243
 * @param disabled - Whether component is disabled
244
 * Extends Ant Design SelectProps for additional select functionality
245
 */
246
const TokenSelect: React.FC<TokenSelectProps>;
247

248
interface TokenSelectProps extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
249
  value?: Token | Token[];
250
  onChange?: (value: Token) => void;
251
  options?: Token[];
252
  mode?: 'multiple';
253
  /** @deprecated Use options instead */
254
  tokenList?: Token[];
255
}
256

257
interface SelectProps {
258
  placeholder?: string;
259
  loading?: boolean;
260
  disabled?: boolean;
261
  size?: 'small' | 'middle' | 'large';
262
  allowClear?: boolean;
263
  showSearch?: boolean;
264
  filterOption?: boolean | ((input: string, option: any) => boolean);
265
}
266
```
267

268
**Usage Examples:**
269

270
```typescript
271
import { TokenSelect } from "@ant-design/web3";
272

273
const tokenOptions = [
274
  {
275
    name: "Ethereum",
276
    symbol: "ETH",
277
    icon: <EthIcon />,
278
    decimal: 18,
279
    availableChains: [{ chain: ethereumChain }]
280
  },
281
  {
282
    name: "USD Coin",
283
    symbol: "USDC", 
284
    icon: <USDCIcon />,
285
    decimal: 6,
286
    availableChains: [{ chain: ethereumChain }]
287
  },
288
  {
289
    name: "Chainlink",
290
    symbol: "LINK",
291
    icon: <LinkIcon />,
292
    decimal: 18,
293
    availableChains: [{ chain: ethereumChain }]
294
  }
295
];
296

297
// Basic token selection
298
<TokenSelect 
299
  options={tokenOptions}
300
  placeholder="Select a token"
301
  onChange={(token) => {
302
    console.log('Selected token:', token.symbol);
303
  }}
304
/>
305

306
// Token select with search
307
<TokenSelect 
308
  options={tokenOptions}
309
  showSearch
310
  placeholder="Search and select token"
311
  filterOption={(input, option) =>
312
    option.symbol.toLowerCase().includes(input.toLowerCase()) ||
313
    option.name.toLowerCase().includes(input.toLowerCase())
314
  }
315
/>
316

317
// Multiple token selection
318
<TokenSelect 
319
  options={tokenOptions}
320
  mode="multiple"
321
  placeholder="Select multiple tokens"
322
  onChange={(tokens) => {
323
    console.log('Selected tokens:', tokens.map(t => t.symbol));
324
  }}
325
/>
326

327
// Token select with custom styling
328
<TokenSelect 
329
  options={tokenOptions}
330
  size="large"
331
  allowClear
332
  loading={false}
333
  disabled={false}
334
  onChange={(token) => {
335
    console.log('Token selected:', token);
336
  }}
337
/>
338

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

342
<TokenSelect 
343
  options={tokenOptions}
344
  value={selectedToken}
345
  onChange={setSelectedToken}
346
/>
347
```
348

349
## Types
350

351
### Token Interface
352

353
```typescript { .api }
354
type Token = {
355
  name: string;
356
  symbol: string;
357
  icon: React.ReactNode;
358
  decimal: number;
359
  availableChains: Array<{
360
    chain: Chain;
361
    contract?: string;
362
  }>;
363
};
364
```
365

366
### Balance Interface
367

368
```typescript { .api }
369
type Balance = BalanceMetadata & {
370
  value?: bigint;
371
  coverAddress?: boolean;
372
};
373

374
interface BalanceMetadata {
375
  name?: string;
376
  symbol?: string;
377
  icon?: React.ReactNode;
378
  decimal?: number;
379
}
380
```
381

382
## Utility Functions
383

384
### Number and BigInt Conversion
385

386
```typescript { .api }
387
/**
388
 * Converts number to bigint safely
389
 * @param num - Number or bigint to convert
390
 * @returns Converted bigint or undefined
391
 */
392
function parseNumberToBigint(num?: number | bigint): bigint | undefined;
393
```
394

395
**Usage Example:**
396

397
```typescript
398
import { parseNumberToBigint } from "@ant-design/web3";
399

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

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

408
// Handle undefined/null
409
const undefined_result = parseNumberToBigint(undefined); // Returns undefined
410
```
411

412
## Validation and Error Handling
413

414
Crypto components include built-in validation and error handling:
415

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

422
**Example with Validation:**
423

424
```typescript
425
import { CryptoInput } from "@ant-design/web3";
426

427
<CryptoInput 
428
  value={inputValue}
429
  balance={userBalance}
430
  onChange={(value) => {
431
    // Validate amount doesn't exceed balance
432
    if (value?.amount && userBalance?.amount) {
433
      if (value.amount > userBalance.amount) {
434
        setError('Insufficient balance');
435
        return;
436
      }
437
    }
438
    
439
    // Validate minimum amount
440
    if (value?.amount && value.amount < BigInt("1000000000000000")) { // 0.001 ETH min
441
      setError('Amount too small');
442
      return;
443
    }
444
    
445
    setError('');
446
    setInputValue(value);
447
  }}
448
/>
449
```