Tronlink事件

TronLink目前支持侧链和主链,开发者可以通过在DAPP中监听TronLink发出的message事件来感知到TronLink当前选择的侧链还是主链, 以及当前选择的是哪个账户。我们通过一个示例来了解它:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    window.addEventListener('message', function (e) {
      
        if (e.data.message && e.data.message.action == "tabReply") {
            console.log("tabReply event", e.data.message)
            if (e.data.message.data.data.node.chain == '_'){
                console.log("tronLink currently selects the main chain")
            }else{
                console.log("tronLink currently selects the side chain")
            }
        }

        if (e.data.message && e.data.message.action == "setAccount") {
            console.log("setAccount event", e.data.message)
            console.log("current address:", e.data.message.data.address)

        }
        if (e.data.message && e.data.message.action == "setNode") {
            console.log("setNode event", e.data.message)
            if (e.data.message.data.node.chain == '_'){
                console.log("tronLink currently selects the main chain")
            }else{
                console.log("tronLink currently selects the side chain")
            }
       // Tronlink chrome v3.22.1 & Tronlink APP v4.3.4 started to support 
        if (e.data.message && e.data.message.action == "connect") {
            console.log("connect event", e.data.message.isTronLink)
        }
          
       // Tronlink chrome v3.22.1 & Tronlink APP v4.3.4 started to support 
        if (e.data.message && e.data.message.action == "disconnect") {
            console.log("disconnect event", e.data.message.isTronLink)
        }
          
       // Tronlink chrome v3.22.0 & Tronlink APP v4.3.4 started to support 
        if (e.data.message && e.data.message.action == "accountsChanged") {
            console.log("accountsChanged event", e.data.message)
            console.log("current address:", e.data.message.data.address)
        }
          
       // Tronlink chrome v3.22.0 & Tronlink APP v4.3.4 started to support  
        if (e.data.message && e.data.message.action == "connectWeb") {
            console.log("connectWeb event", e.data.message)
            console.log("current address:", e.data.message.data.address)
        }
          
        // Tronlink chrome v3.22.0 & Tronlink APP v4.3.4 started to support      
        if (e.data.message && e.data.message.action == "acceptWeb") {
            console.log("acceptWeb event", e.data.message)
        }
        // Tronlink chrome v3.22.0 & Tronlink APP v4.3.4 started to support      
        if (e.data.message && e.data.message.action == "disconnectWeb") {
            console.log("disconnectWeb event", e.data.message)
        }
          
        // Tronlink chrome v3.22.0 & Tronlink APP v4.3.4 started to support     
        if (e.data.message && e.data.message.action == "rejectWeb") {
            console.log("rejectWeb event", e.data.message)
        }
           
        }
    })
    var obj = setInterval(async ()=>{
      //if (window.tronLink)
        if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
            clearInterval(obj)
          //let tronweb = window.tronLink.tronWeb
            let tronweb = window.tronWeb

        }
    }, 10)

</script>

</body>
</html>

上面代码涉及3个事件分别是tabReply、setAccount 、setNode,下面是这些事件的触发场景如下:

TronLink初始化完成(页面加载后)

tabReply

TronLink中主链和侧链切换

setAccount、setNode

TronLink中设置节点

setAccount、setNode

  • DAPP页面加载之前,可以通过判断tabReply事件的data.message.data.data.node.chain字段来判断页面加载时,TronLink选择的是侧链还是主链,如果是'_' 表示的是主链,否则就是侧链,同时chain表示的侧链的编号,每一条侧链的编号是唯一的。

  • DAPP页面加载之后,可以通过判断setNode事件的data.message.data.data.node.chain字段来判断用户在TronLink中手动选择的是侧链还是主链,如果是'_' 表示的是主链,否则就是侧链,同时chain表示的侧链的编号,每一条侧链的编号是唯一的。

当选择 MainChain(主链)的时候,返回的消息事件中的node即是所选择的网络。

当选择 MainChain(主链)的时候,返回的消息事件中的node即是所选择的网络。

当选择 Shasta 测试网的时候,返回的消息事件中的node即是所选择的网络。

新增初始化注⼊事件

📘

注意:

Tronlink chrome v3.22.0 版本开始支持此初始化注入事件,Tronlink APP 安卓及IOS版本将在 v4.3.4版本开始支持此初始化注入事件。

当变量注入完毕后,会发送 tronLink#initialized事件,dapp开发者可监听此事件来使用tronWebtronLink变量。

// 插件发送代码
window.dispatchEvent(new Event('tronLink#initialized'));

// 示例
// 建议接收方法
if (window.tronLink) {
  handleTronLink();
} else {
  window.addEventListener('tronLink#initialized', handleTronLink, {
    once: true,
  });

  // If the event is not dispatched by the end of the timeout,
  // the user probably doesn't have TronLink installed.
  setTimeout(handleTronLink, 3000); // 3 seconds
}

function handleTronLink() {
  const { tronLink } = window;
  if (tronLink) {
    console.log('tronLink successfully detected!');
    // Access the decentralized web!
  } else {
    console.log('Please install TronLink-Extension!');
  }
}

新增通知事件

📘

Tronlink chrome v3.22.0 版本开始支持如下新增通知事件,Tronlink APP 安卓及IOS版本将在 v4.3.4版本开始支持如下新增通知事件。

accountsChanged事件

切换账户时Tronlink会发送 accountsChanged事件

{
  message: {
    action: 'accountsChanged',
    data: {
      address: currentAddress
    }
  },
  isTronLink: true
}

connectWeb事件

插件popup页面中,主动连接dapp时Tronlink会发送此事件

{
  message: {
    action: 'connectWeb',
    data: {
      websiteName: '',
      websiteIcon: '',
      origin: '',
      hostname:''
    },
  }
}

acceptWeb事件

插件白名单授权页面中,用户接受dapp发起的授权请求,Tronlink会发送此事件

{
  message: {
    action: 'acceptWeb',
    data: {
      websiteName: '',
      websiteIcon: '',
      origin: '',
      hostname:''
    },
  }
}

disconnectWeb事件

插件popup页面中,主动拒绝dapp时Tronlink会发送此事件

{
  message: {
    action: 'disconnectWeb',
    data: {
      websiteName: '',
      websiteIcon: '',
      origin: '',
      hostname:''
    },
  }
}

rejectWeb事件

插件白名单授权页面中,用户拒绝dapp发起的授权请求,Tronlink会发送此事件

{
  message: {
    action: 'rejectWeb',
    data: {
      websiteName: '',
      websiteIcon: '',
      origin: '',
      hostname:''
    },
  }
}

📘

Note:

Tronlink chrome v3.22.1 & Tronlink APP v4.3.4版本(安卓及IOS) 开始支持connect&disconnect通知事件.

connect事件

popup⻚⾯主动连接dapp和⽩名单授权⻚⾯中⽤户接受请求的时候,会更新注⼊变量,待更新完成后,Tronlink会发送connect 事件

{
  message: {
    action: 'connect'
},
 isTronLink: true
}

disconnect事件

popup⻚⾯主动拒绝dapp和⽩名单授权⻚⾯中⽤户拒绝请求的时候,会更新注⼊变量,待更新完成后,Tronlink会发送disconnect 事件

{
   message: {
      action: 'disconnect'
},
  isTronLink: true
}