使用JavaScript开发TronLink钱包集成指南

使用JavaScript开发TronLink钱包集成指南

什么是TronLink钱包？

TronLink是波场(TRON)区块链上最受欢迎的数字钱包之一，它允许用户在浏览器中与TRONdApps交互。作为一款浏览器扩展钱包，TronLink类似于以太坊的MetaMask，但专门为TRON生态系统设计。

为什么要在网站中集成TronLink？

集成TronLink可以为您的用户提供：
-安全的TRX和TRC代币存储
-便捷的dApp交互体验
-去中心化身份验证
-无需中间人的交易能力

检测TronLink是否安装

首先，我们需要检查用户是否安装了TronLink扩展：

//检测TronLink是否安装
asyncfunctioncheckTronLinkInstalled(){
//等待一小段时间确保window对象已加载
awaitnewPromise(resolve=>setTimeout(resolve,100));

if(window.tronWeb||window.tronLink){
returntrue;
}

returnfalse;
}

//使用示例
checkTronLinkInstalled().then(installed=>{
if(installed){
console.log('TronLink已安装');
}else{
console.log('未检测到TronLink，请先安装');
//可以在这里显示安装提示或跳转到安装页面
}
});

连接TronLink钱包

检测到TronLink后，我们需要请求用户授权连接：

//连接TronLink钱包
asyncfunctionconnectTronLink(){
try{
//检查是否已安装
constinstalled=awaitcheckTronLinkInstalled();
if(!installed){
thrownewError('TronLink未安装');
}

//获取tronWeb实例
consttronWeb=window.tronWeb||window.tronLink.tronWeb;

//检查是否已登录
if(!tronWeb.ready){
//请求用户授权
awaittronWeb.request({method:'tron_requestAccounts'});
}

//验证连接状态
if(tronWeb.ready&&tronWeb.defaultAddress.base58){
return{
success:true,
address:tronWeb.defaultAddress.base58,
tronWeb:tronWeb
};
}else{
thrownewError('连接失败，用户可能拒绝了授权');
}
}catch(error){
console.error('连接TronLink出错:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
document.getElementById('connect-btn').addEventListener('click',async()=>{
constresult=awaitconnectTronLink();
if(result.success){
console.log('连接成功，用户地址:',result.address);
//更新UI显示已连接状态
}else{
alert('连接失败:'+result.error);
}
});

获取账户余额

连接成功后，我们可以查询用户的TRX和TRC代币余额：

//获取TRX余额
asyncfunctiongetTRXBalance(tronWeb,address){
try{
constbalance=awaittronWeb.trx.getBalance(address);
//将sun单位转换为TRX
consttrxBalance=tronWeb.fromSun(balance);
return{
success:true,
balance:trxBalance,
symbol:'TRX'
};
}catch(error){
console.error('获取TRX余额出错:',error);
return{
success:false,
error:error.message
};
}
}

//获取TRC20代币余额
asyncfunctiongetTRC20Balance(tronWeb,contractAddress,address){
try{
//创建合约实例
constcontract=awaittronWeb.contract().at(contractAddress);

//调用balanceOf方法
constbalance=awaitcontract.balanceOf(address).call();

//获取代币精度
constdecimals=awaitcontract.decimals().call();

//计算实际余额
constadjustedBalance=balance/(10decimals);

//获取代币符号
constsymbol=awaitcontract.symbol().call();

return{
success:true,
balance:adjustedBalance,
symbol:symbol
};
}catch(error){
console.error('获取TRC20余额出错:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
asyncfunctiondisplayBalances(){
consttronWeb=window.tronWeb;
constaddress=tronWeb.defaultAddress.base58;

//获取TRX余额
consttrxResult=awaitgetTRXBalance(tronWeb,address);
if(trxResult.success){
console.log(`TRX余额:${trxResult.balance}${trxResult.symbol}`);
}

//获取USDT余额(TRC20合约地址示例)
constusdtContract='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';
constusdtResult=awaitgetTRC20Balance(tronWeb,usdtContract,address);
if(usdtResult.success){
console.log(`USDT余额:${usdtResult.balance}${usdtResult.symbol}`);
}
}

发送TRX交易

以下是发送TRX的基本功能实现：

//发送TRX
asyncfunctionsendTRX(toAddress,amount){
try{
consttronWeb=window.tronWeb;

//验证是否已连接
if(!tronWeb.ready||!tronWeb.defaultAddress.base58){
thrownewError('请先连接TronLink钱包');
}

//转换金额为sun单位
constamountInSun=tronWeb.toSun(amount);

//创建交易
consttransaction=awaittronWeb.transactionBuilder.sendTrx(
toAddress,
amountInSun,
tronWeb.defaultAddress.base58
);

//签名交易
constsignedTransaction=awaittronWeb.trx.sign(transaction);

//广播交易
constresult=awaittronWeb.trx.sendRawTransaction(signedTransaction);

return{
success:true,
txId:result.transaction.txID,
message:'交易发送成功'
};
}catch(error){
console.error('发送TRX出错:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
document.getElementById('send-trx-btn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('recipient-address').value;
constamount=document.getElementById('trx-amount').value;

if(!toAddress||!amount){
alert('请输入接收地址和金额');
return;
}

constresult=awaitsendTRX(toAddress,amount);
if(result.success){
alert(`交易成功!交易ID:${result.txId}`);
//可以在这里显示交易详情链接
}else{
alert('交易失败:'+result.error);
}
});

发送TRC20代币交易

发送TRC20代币需要与智能合约交互：

//发送TRC20代币
asyncfunctionsendTRC20(contractAddress,toAddress,amount){
try{
consttronWeb=window.tronWeb;

//验证是否已连接
if(!tronWeb.ready||!tronWeb.defaultAddress.base58){
thrownewError('请先连接TronLink钱包');
}

//创建合约实例
constcontract=awaittronWeb.contract().at(contractAddress);

//获取代币精度
constdecimals=awaitcontract.decimals().call();

//计算实际要发送的数量
constamountInWei=amount(10decimals);

//调用transfer方法
constresult=awaitcontract.transfer(
toAddress,
amountInWei
).send();

return{
success:true,
txId:result,
message:'TRC20代币转账成功'
};
}catch(error){
console.error('发送TRC20代币出错:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
document.getElementById('send-trc20-btn').addEventListener('click',async()=>{
constcontractAddress=document.getElementById('contract-address').value;
consttoAddress=document.getElementById('recipient-address').value;
constamount=document.getElementById('trc20-amount').value;

if(!contractAddress||!toAddress||!amount){
alert('请输入合约地址、接收地址和金额');
return;
}

constresult=awaitsendTRC20(contractAddress,toAddress,amount);
if(result.success){
alert(`TRC20代币转账成功!交易ID:${result.txId}`);
}else{
alert('TRC20代币转账失败:'+result.error);
}
});

监听账户变化

为了提供更好的用户体验，我们应该监听账户变化：

//监听账户变化
functionsetupAccountChangeListener(){
if(window.tronLink){
window.tronLink.on('addressChanged',(newAddress)=>{
console.log('账户已变更:',newAddress.base58);
//更新UI显示新账户
updateUIForNewAccount(newAddress.base58);
});

window.tronLink.on('disconnect',()=>{
console.log('用户已断开连接');
//更新UI显示未连接状态
updateUIForDisconnected();
});
}
}

//初始化时设置监听器
window.addEventListener('load',()=>{
setupAccountChangeListener();

//如果已连接，自动更新UI
if(window.tronWeb&&window.tronWeb.ready){
updateUIForNewAccount(window.tronWeb.defaultAddress.base58);
}
});

完整的HTML示例

以下是集成所有功能的完整HTML示例：

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="TronLink钱包集成示例-学习如何在您的网站中集成TRON区块链钱包功能">
<title>TronLink钱包集成示例|TRONdApp开发指南</title>
<style>
body{
font-family:Arial,sans-serif;
max-width:800px;
margin:0auto;
padding:20px;
line-height:1.6;
}
.section{
margin-bottom:30px;
padding:20px;
border:1pxsolidddd;
border-radius:5px;
}
button{
background-color:2e86de;
color:white;
border:none;
padding:10px15px;
border-radius:5px;
cursor:pointer;
margin:5px0;
}
button:hover{
background-color:1e6fbf;
}
input{
padding:8px;
width:100%;
margin:5px015px;
box-sizing:border-box;
}
.connected{
color:green;
}
.disconnected{
color:red;
}
account-info{
font-weight:bold;
margin-bottom:20px;
}
</style>
</head>
<body>
<h1>TronLink钱包集成示例</h1>

<divclass="section">
<h2>钱包连接</h2>
<divid="account-info"class="disconnected">未连接钱包</div>
<buttonid="connect-btn">连接TronLink钱包</button>
</div>

<divclass="section">
<h2>账户余额</h2>
<buttonid="refresh-balance-btn">刷新余额</button>
<divid="balance-info"></div>
</div>

<divclass="section">
<h2>发送TRX</h2>
<div>
<labelfor="recipient-address">接收地址:</label>
<inputtype="text"id="recipient-address"placeholder="T...">
</div>
<div>
<labelfor="trx-amount">TRX数量:</label>
<inputtype="number"id="trx-amount"placeholder="10">
</div>
<buttonid="send-trx-btn">发送TRX</button>
<divid="trx-result"></div>
</div>

<divclass="section">
<h2>发送TRC20代币</h2>
<div>
<labelfor="contract-address">合约地址:</label>
<inputtype="text"id="contract-address"placeholder="TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t(USDT示例)">
</div>
<div>
<labelfor="recipient-address-trc20">接收地址:</label>
<inputtype="text"id="recipient-address-trc20"placeholder="T...">
</div>
<div>
<labelfor="trc20-amount">代币数量:</label>
<inputtype="number"id="trc20-amount"placeholder="10">
</div>
<buttonid="send-trc20-btn">发送TRC20代币</button>
<divid="trc20-result"></div>
</div>

<script>
//全局变量
lettronWeb;

//DOM元素
constconnectBtn=document.getElementById('connect-btn');
constaccountInfo=document.getElementById('account-info');
constrefreshBalanceBtn=document.getElementById('refresh-balance-btn');
constbalanceInfo=document.getElementById('balance-info');
constsendTrxBtn=document.getElementById('send-trx-btn');
constsendTrc20Btn=document.getElementById('send-trc20-btn');
consttrxResult=document.getElementById('trx-result');
consttrc20Result=document.getElementById('trc20-result');

//检测TronLink是否安装
asyncfunctioncheckTronLinkInstalled(){
awaitnewPromise(resolve=>setTimeout(resolve,100));

if(window.tronWeb||window.tronLink){
returntrue;
}

returnfalse;
}

//连接TronLink钱包
asyncfunctionconnectTronLink(){
try{
constinstalled=awaitcheckTronLinkInstalled();
if(!installed){
thrownewError('TronLink未安装');
}

tronWeb=window.tronWeb||window.tronLink.tronWeb;

if(!tronWeb.ready){
awaittronWeb.request({method:'tron_requestAccounts'});
}

if(tronWeb.ready&&tronWeb.defaultAddress.base58){
return{
success:true,
address:tronWeb.defaultAddress.base58,
tronWeb:tronWeb
};
}else{
thrownewError('连接失败，用户可能拒绝了授权');
}
}catch(error){
console.error('连接TronLink出错:',error);
return{
success:false,
error:error.message
};
}
}

//获取TRX余额
asyncfunctiongetTRXBalance(tronWeb,address){
try{
constbalance=awaittronWeb.trx.getBalance(address);
consttrxBalance=tronWeb.fromSun(balance);
return{
success:true,
balance:trxBalance,
symbol:'TRX'
};
}catch(error){
console.error('获取TRX余额出错:',error);
return{
success:false,
error:error.message
};
}
}

//获取TRC20代币余额
asyncfunctiongetTRC20Balance(tronWeb,contractAddress,address){
try{
constcontract=awaittronWeb.contract().at(contractAddress);
constbalance=awaitcontract.balanceOf(address).call();
constdecimals=awaitcontract.decimals().call();
constadjustedBalance=balance/(10decimals);
constsymbol=awaitcontract.symbol().call();

return{
success:true,
balance:adjustedBalance,
symbol:symbol
};
}catch(error){
console.error('获取TRC20余额出错:',error);
return{
success:false,
error:error.message
};
}
}

//发送TRX
asyncfunctionsendTRX(toAddress,amount){
try{
if(!tronWeb.ready||!tronWeb.defaultAddress.base58){
thrownewError('请先连接TronLink钱包');
}

constamountInSun=tronWeb.toSun(amount);
consttransaction=awaittronWeb.transactionBuilder.sendTrx(
toAddress,
amountInSun,
tronWeb.defaultAddress.base58
);
constsignedTransaction=awaittronWeb.trx.sign(transaction);
constresult=awaittronWeb.trx.sendRawTransaction(signedTransaction);

return{
success:true,
txId:result.transaction.txID,
message:'交易发送成功'
};
}catch(error){
console.error('发送TRX出错:',error);
return{
success:false,
error:error.message
};
}
}

//发送TRC20代币
asyncfunctionsendTRC20(contractAddress,toAddress,amount){
try{
if(!tronWeb.ready||!tronWeb.defaultAddress.base58){
thrownewError('请先连接TronLink钱包');
}

constcontract=awaittronWeb.contract().at(contractAddress);
constdecimals=awaitcontract.decimals().call();
constamountInWei=amount(10decimals);
constresult=awaitcontract.transfer(toAddress,amountIn