MTK 代币交互应用

项目概述

这是一个基于 Next.js 和 Wagmi 构建的 Web3 应用，允许用户连接钱包、查看 MTK 代币余额以及向其他地址发送 MTK 代币。该应用提供了友好的用户界面和实时的交易反馈，适合用于支持创业项目或进行 MTK 代币转账操作。

主要功能

钱包连接

• 使用 RainbowKit 实现无缝的钱包连接体验
• 支持多种流行钱包（MetaMask、WalletConnect、Coinbase Wallet 等）
• 显示当前连接的网络和账户信息

MTK 代币余额显示

• 实时显示用户的 MTK 代币余额
• 自动获取并显示代币符号
• 在交易后自动更新余额

MTK 代币转账

• 向指定地址发送 MTK 代币
• 实时交易状态反馈（处理中、成功、失败）
• 交易完成后显示交易详情和 Etherscan 链接
• 防止向自己的地址发送代币

事件监听

• 监听 ERC-20 Transfer 事件，实时更新用户余额
• 捕获与用户相关的所有转账事件（发送和接收）
• 提供双重余额更新机制，确保数据一致性

技术栈

• 前端框架: Next.js
• Web3 交互: Wagmi, viem
• 钱包连接: RainbowKit
• UI 组件: 自定义 UI 组件库
• 状态管理: React Hooks

组件结构

WalletConnect

负责处理钱包连接和显示用户的 MTK 代币余额。包含以下功能：

• 连接/断开钱包按钮
• 网络选择器
• 账户信息显示
• MTK 余额显示

SendMIKTransaction

处理 MTK 代币的发送操作，包含以下功能：

• 输入发送金额
• 指定接收地址
• 交易状态反馈
• 成功交易详情
• 自动余额更新

特色功能

1. 实时余额更新：通过监听区块链事件，在任何 MTK 转账发生后自动更新用户余额
2. 用户友好的错误处理：提供清晰的错误信息和状态反馈
3. 交易安全检查：防止用户向自己的地址发送代币
4. 响应式设计：适配各种设备尺寸的界面布局

开发指南

安装依赖

npm install
# 或
yarn install

运行开发服务器

npm run dev
# 或
yarn dev

构建生产版本

npm run build
# 或
yarn build

配置

MTK 代币合约地址在 wagmi.ts 文件中配置，可以根据需要进行修改以支持不同的网络或合约。