企业官网建设流程全解析

Nexth组件库详解：AddressInput、TokenBalance等核心UI组件使用教程

【免费下载链接】nexthA Next.js + Ethereum starter kit with Viem, Wagmi, Web3Modal, SIWE, Tailwind, daisyUI and more to quickly ship production-ready Web3 Apps ⚡项目地址: https://gitcode.com/gh_mirrors/ne/nexth

Nexth是一个强大的Next.js + Ethereum开发套件，集成了Viem、Wagmi、Web3Modal等工具，让开发者能够快速构建生产级Web3应用。本文将详细介绍Nexth组件库中AddressInput和TokenBalance这两个核心UI组件的使用方法，帮助开发者轻松实现区块链应用中的关键功能。

AddressInput组件：智能以太坊地址输入框

AddressInput是Nexth提供的一个智能以太坊地址输入组件，它不仅能够验证地址格式，还支持ENS名称解析，为用户提供友好的地址输入体验。

主要功能特点

• 实时地址格式验证，自动识别有效以太坊地址
• 支持ENS名称解析，输入ENS名称自动转换为对应地址
• 显示ENS头像和地址缩略，提升用户体验
• 输入防抖处理，优化性能
• 提供错误状态反馈，帮助用户正确输入

基本使用方法

要使用AddressInput组件，首先需要导入：

import { AddressInput } from '@/components/AddressInput'

然后在JSX中使用：

<AddressInput onRecipientChange={(address, isValid) => { console.log('输入的地址:', address) console.log('地址是否有效:', isValid) }} />

高级配置选项

AddressInput组件提供了一些可选属性，以满足不同场景的需求：

<AddressInput onRecipientChange={(address, isValid) => { // 处理地址变化 }} onRawInputChange={(rawInput) => { // 处理原始输入变化 }} disabled={false} // 是否禁用输入框 />

实际应用示例

在发送以太币的场景中，AddressInput的使用示例：

// 来自文件: packages/app/src/app/examples/send-ether/page.tsx <AddressInput onRecipientChange={(address, isValid) => { setToAddress(address) setIsValidToAddress(isValid) }} />

TokenBalance组件：实时代币余额显示

TokenBalance组件用于显示指定地址的代币余额，支持ETH和ERC20代币，能够自动获取并格式化余额数据。

主要功能特点

• 支持ETH余额查询
• 支持任意ERC20代币余额查询
• 自动格式化余额数据，支持自定义小数位数
• 提供余额变化回调，便于状态管理
• 简洁的UI设计，易于集成

基本使用方法

导入TokenBalance组件：

import { TokenBalance } from '@/components/TokenBalance'

显示ETH余额：

<TokenBalance address={userAddress} />

显示ERC20代币余额

要显示特定ERC20代币的余额，只需提供tokenAddress属性：

// 来自文件: packages/app/src/app/examples/send-token/page.tsx <TokenBalance address={address} tokenAddress={tokenAddress} />

高级配置选项

TokenBalance组件支持自定义小数位数和余额变化回调：

<TokenBalance address={userAddress} tokenAddress={tokenAddress} toFixed={4} // 保留4位小数 onBalanceChange={(data) => { console.log('当前余额:', data.balance) console.log('格式化后的余额:', data.formattedBalance) }} className="custom-style" // 自定义样式类 />

组件集成最佳实践

结合使用AddressInput和TokenBalance

在实际应用中，AddressInput和TokenBalance经常配合使用，例如在转账功能中：

// 伪代码示例 <div className="transfer-container"> <h3>发送代币</h3> <AddressInput onRecipientChange={(address, isValid) => { setRecipientAddress(address) setIsValidAddress(isValid) }} /> <div className="balance-display"> <p>你的余额:</p> <TokenBalance address={currentUserAddress} tokenAddress={selectedTokenAddress} toFixed={6} /> </div> </div>

错误处理与加载状态

在使用这些组件时，建议添加适当的错误处理和加载状态：

// 伪代码示例 {isLoading ? ( <div>加载中...</div> ) : error ? ( <div className="error-message">获取数据失败，请重试</div> ) : ( <TokenBalance address={userAddress} tokenAddress={tokenAddress} /> )}

总结

Nexth组件库中的AddressInput和TokenBalance组件为Web3应用开发提供了强大的UI支持。AddressInput简化了以太坊地址的输入和验证过程，而TokenBalance则轻松实现了余额查询和显示功能。通过这两个组件的灵活运用，开发者可以快速构建出专业、用户友好的区块链应用界面。

要开始使用这些组件，只需从Nexth项目中导入相应的组件文件：

• AddressInput组件: packages/app/src/components/AddressInput.tsx
• TokenBalance组件: packages/app/src/components/TokenBalance.tsx

Nexth组件库不仅提供了这两个核心组件，还有更多实用的UI组件等待你去探索和使用，帮助你快速构建出色的Web3应用。

【免费下载链接】nexthA Next.js + Ethereum starter kit with Viem, Wagmi, Web3Modal, SIWE, Tailwind, daisyUI and more to quickly ship production-ready Web3 Apps ⚡项目地址: https://gitcode.com/gh_mirrors/ne/nexth