0
# Address Display and Formatting
1

2
Components for displaying and formatting blockchain addresses with copy functionality, ellipsis truncation, and blockchain explorer integration.
3

4
## Capabilities
5

6
### Address
7

8
Component for displaying and formatting blockchain addresses with built-in copy functionality, ellipsis truncation, and customizable formatting.
9

10
```typescript { .api }
11
/**
12
 * Component for displaying and formatting blockchain addresses with copy functionality
13
 * @param address - The address to display
14
 * @param ellipsis - Ellipsis configuration for address truncation
15
 * @param addressPrefix - Address prefix (e.g., '0x')
16
 * @param copyable - Whether address is copyable (default: false)
17
 * @param tooltip - Tooltip configuration
18
 * @param format - Address formatting function or boolean
19
 * @param locale - Localization overrides
20
 * @param children - Custom content to display instead of address
21
 */
22
const Address: React.FC<React.PropsWithChildren<AddressProps>>;
23

24
interface AddressProps {
25
  address?: string;
26
  ellipsis?: boolean | { headClip?: number; tailClip?: number };
27
  addressPrefix?: string | false;
28
  copyable?: boolean;
29
  tooltip?: boolean | TooltipProps['title'];
30
  format?: boolean | ((address: string) => ReactNode);
31
  locale?: Locale['Address'];
32
}
33

34
interface Locale {
35
  Address?: {
36
    copied?: string;
37
    copy?: string;
38
  };
39
}
40
```
41

42
**Usage Examples:**
43

44
```typescript
45
import { Address } from "@ant-design/web3";
46

47
// Basic address display
48
<Address address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" />
49

50
// Address with copy functionality
51
<Address 
52
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
53
  copyable
54
/>
55

56
// Address with ellipsis truncation
57
<Address 
58
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
59
  ellipsis={{ headClip: 6, tailClip: 4 }}
60
  copyable
61
/>
62

63
// Address with custom formatting
64
<Address 
65
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
66
  format={(addr) => addr.toUpperCase()}
67
  tooltip="Ethereum Address"
68
/>
69

70
// Address with custom prefix
71
<Address 
72
  address="21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
73
  addressPrefix="0x"
74
  copyable
75
/>
76

77
// Custom content with address context
78
<Address address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B">
79
  <span style={{ color: 'blue' }}>Custom Address Display</span>
80
</Address>
81
```
82

83
### BrowserLink
84

85
Component for creating links to blockchain explorers with support for different link types (address, transaction) and custom styling.
86

87
```typescript { .api }
88
/**
89
 * Component for creating links to blockchain explorers
90
 * @param address - Address or transaction hash to link
91
 * @param type - Link type: 'address' | 'transaction' (default: 'address')
92
 * @param chain - Blockchain network for the link
93
 * @param icon - Icon display configuration
94
 * @param iconOnly - Whether to show only the icon
95
 * @param ellipsis - Whether to ellipsize the address display
96
 * @param name - Custom display name
97
 * @param href - Override the generated link
98
 */
99
const BrowserLink: React.FC<BrowserLinkProps>;
100

101
interface BrowserLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
102
  address: string;
103
  type?: BrowserLinkType;
104
  chain?: Chain;
105
  icon?: boolean | React.ReactNode;
106
  iconStyle?: React.CSSProperties;
107
  iconOnly?: boolean;
108
  ellipsis?: boolean;
109
  addressPrefix?: string | false;
110
  name?: string;
111
  href?: string;
112
}
113

114
type BrowserLinkType = 'address' | 'transaction';
115
```
116

117
**Usage Examples:**
118

119
```typescript
120
import { BrowserLink } from "@ant-design/web3";
121

122
// Basic address link
123
<BrowserLink 
124
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
125
  type="address"
126
/>
127

128
// Transaction hash link
129
<BrowserLink 
130
  address="0x8784d99762bcfadbcdf9e56b624b1357a4c3ad8e7d6cb37e5a4ec2fa6a933952"
131
  type="transaction"
132
/>
133

134
// Link with custom chain
135
<BrowserLink 
136
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
137
  chain={{
138
    id: 137,
139
    name: "Polygon",
140
    browser: {
141
      getBrowserLink: (address, type) => 
142
        `https://polygonscan.com/${type}/${address}`
143
    }
144
  }}
145
/>
146

147
// Icon-only display
148
<BrowserLink 
149
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
150
  iconOnly
151
/>
152

153
// Custom name with ellipsis
154
<BrowserLink 
155
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
156
  name="My Wallet Address"
157
  ellipsis
158
/>
159

160
// Custom href override
161
<BrowserLink 
162
  address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
163
  href="https://custom-explorer.com/address/0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
164
/>
165
```
166

167
### getBrowserLink Function
168

169
Utility function for generating blockchain explorer links programmatically.
170

171
```typescript { .api }
172
/**
173
 * Utility function to generate blockchain explorer links
174
 * @param address - Address or transaction hash
175
 * @param type - Link type: 'address' | 'transaction' (default: 'address')
176
 * @param chain - Blockchain network configuration
177
 * @returns Generated explorer URL
178
 */
179
function getBrowserLink(
180
  address: string, 
181
  type?: BrowserLinkType, 
182
  chain?: Chain
183
): string;
184
```
185

186
**Usage Example:**
187

188
```typescript
189
import { getBrowserLink } from "@ant-design/web3";
190

191
// Generate Ethereum mainnet address link
192
const addressLink = getBrowserLink(
193
  "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B",
194
  "address"
195
);
196
// Returns: "https://etherscan.io/address/0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
197

198
// Generate transaction link
199
const txLink = getBrowserLink(
200
  "0x8784d99762bcfadbcdf9e56b624b1357a4c3ad8e7d6cb37e5a4ec2fa6a933952",
201
  "transaction"
202
);
203

204
// Generate link for specific chain
205
const polygonLink = getBrowserLink(
206
  "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B",
207
  "address",
208
  {
209
    id: 137,
210
    name: "Polygon",
211
    browser: {
212
      getBrowserLink: (address, type) => 
213
        `https://polygonscan.com/${type}/${address}`
214
    }
215
  }
216
);
217
```
218

219
## Types
220

221
### Chain Interface for Browser Integration
222

223
```typescript { .api }
224
interface Chain {
225
  id: ChainIds | number;
226
  name: string;
227
  type?: ChainType;
228
  icon?: React.ReactNode;
229
  browser?: {
230
    icon?: React.ReactNode;
231
    getBrowserLink?: (address: string, type: BrowserLinkType) => string;
232
  };
233
  nativeCurrency?: BalanceMetadata & { name: string };
234
}
235

236
interface BalanceMetadata {
237
  name?: string;
238
  symbol?: string;
239
  icon?: React.ReactNode;
240
  decimal?: number;
241
}
242
```
243

244
### Address Utility Functions
245

246
```typescript { .api }
247
/**
248
 * Ensures address starts with '0x' prefix
249
 * @param address - Address string
250
 * @returns Address with '0x' prefix
251
 */
252
function fillAddressWith0x(address: string): `0x${string}`;
253

254
/**
255
 * Creates a function to generate blockchain explorer links
256
 * @param url - Base explorer URL template
257
 * @returns Function that generates explorer links
258
 */
259
function createGetBrowserLink(
260
  url: string
261
): (address: string, type: string) => string;
262
```
263

264
**Usage Examples:**
265

266
```typescript
267
import { fillAddressWith0x, createGetBrowserLink } from "@ant-design/web3";
268

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

273
// Create custom link generator
274
const getPolygonLink = createGetBrowserLink("https://polygonscan.com");
275
const addressUrl = getPolygonLink(
276
  "0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B",
277
  "address"
278
);
279
```