The TRON Developer Hub

Welcome to the TRON developer hub. You'll find comprehensive guides and documentation to help you start working with TRON as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

TronLink Integration

Introduction

TronLink, similar to MetaMask, is a bridge for allowing TRON DApps to run in the browser without having to deploy a TRON Full Node. If a user has TronLink already installed in the Chrome extension, then TronLink injects a version of TronWeb into every browser page. This allows for the web DApp to interact with the TRON network. Let's learn it with a simple example:

<!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>
    <button onclick="gettronweb()">Can you get tronweb from tronlink?</button>
    <script>
        function gettronweb(){
            if(window.tronWeb && window.tronWeb.defaultAddress.base58){
                document.write("Yes, catch it:",window.tronWeb.defaultAddress.base58)
            }
        }
    </script>
    </body>
</html>

Of course, tronweb has many functions waiting for you to use.

Signature

In the process of completing the transaction, tronweb needs to let tronlink perform the signature. Here tronlink rewrites the signature. The signature process is completed in tronlink, and then the signed transaction is returned to tronweb for broadcasting. Let's learn it with a simple example:

<!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>
        var obj = setInterval(async ()=>{
            if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
                var tx = await tronweb.transactionBuilder.sendTrx('TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP', 10, 'TTSFjEG3Lu9WkHdp4JrWYhbGP6K1REqnGQ')
                var signedTx = await tronweb.trx.sign(tx)
                var broastTx = await tronweb.trx.sendRawTransaction(signedTx)
                console.log(broastTx)
            }
        }, 10)
    </script>
    </body>
</html>

When the code is executed to tronweb.trx.sign (tx), TronLink will pop up a window to confirm the signature.

Now, I believe you have been able to complete TronWeb function calls in conjunction with TronLink.

TronLink events

TronLink currently supports sidechains and mainchains. Developers can detect the event message sent by TronLink in DAPP, what we can learn from this event message contain the sidechain or mainchain currently selected by TronLink, and which account is currently selected. Let's learn it with a simple example.

<!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")
            }

        }
    })
    var obj = setInterval(async ()=>{
        if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
            clearInterval(obj)
            let tronweb = window.tronWeb

        }
    }, 10)

</script>

</body>
</html>

The above code involves three events: tabReply, setAccount, and setNode. The following are the triggering scenarios of these events:

The completing TronLink initialization(after page load)

tabReply

Main chain and side chain switching in TronLink:

setAccount、setNode

Setting nodes in TronLink

setAccount、setNode

  • Before the DAPP page is loaded, you can judge the data.message.data.data.node.chain field of the tabReply event to determine whether TronLink chose the side chain or the main chain when the page was loaded. If it is '_', it means the main chain. , Otherwise it is the side chain, and the number of the side chain represented by chain, the number of each side chain is unique.

  • After the DAPP page is loaded, you can judge the data.message.data.data.node.chain field of the setNode event to determine whether the user manually selected the side chain or the main chain in TronLink. If it is '_', it means the main chain , Otherwise it is the side chain, and the number of the side chain represented by chain, the number of each side chain is unique.

When MainChain is selected, the node in the returned message event is the selected network.

When DAppChain is selected, the node in the returned message event is the selected network.

📘

Note

Actually, when calling the functions, for the main chain and side chain, it can be called according to the method,because SunWeb inherits Tronweb.

When the Shasta test network is selected, the node in the returned message event is the selected network.

Add asset into TronLink

TronWeb object in TronLink provides an API for developers to add tokens to TronLink so that they can be displayed in the TronLink asset list.

Developers can provide users with buttons in the project to directly add the specified Token into the asset list of the user's TronLink Chrome plug-in.

📘

Note

Currently only the mainnet and nile testnet are supported, not the shasta testnet

Let's learn it with several examples:

Add TRC-20 asset

<!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>
        var obj = setInterval(async ()=>{
            if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
                var tx = await tronweb.request({method: 'wallet_watchAsset',
                                                params:{type: 'trc20',
                                                        options: {address: 'TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t'},
                                                        },
                                                }
                                               )

            }
        }, 10)
    </script>
</body>
</html>

When the code is executed, TronLink will pop up a window for the user to confirm or cancel the addition of a TRC-20.

Click the "Add" button, the asset will be displayed in the asset list.

Add TRC-10 asset

<!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>
        var obj = setInterval(async ()=>{
            if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
                var tx = await tronweb.request({method: 'wallet_watchAsset',
                                                params:{type: 'trc10',
                                                        options: {address: '1002000'},
                                                        },
                                                }
                                               )

            }
        }, 10)
    </script>
</body>
</html>

When the code is executed, TronLink will pop up a window for the user to confirm or cancel the addition of a TRC-10.

Click the "Add" button, the asset will be displayed in the asset list.

Add TRC-721 asset

<!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>
        var obj = setInterval(async ()=>{
            if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
                var tx = await tronweb.request({method: 'wallet_watchAsset',
                                                params:{type: 'trc721',
                                                        options: {address: 'TCzUYnFSwtH2bJkynGB46tWxWjdTQqL1SG'},
                                                        },
                                                }
                                               )

            }
        }, 10)
    </script>
</body>
</html>

When the code is executed, TronLink will pop up a window for the user to confirm or cancel the addition of a TRC-721.

Click the "Add" button, the TRC-721 asset will be displayed in the collectibles list.

The description of “request” function and its parameter:

TronWeb requests a method call of the TronLink plug-in.

await tronWeb.request({
    method: 'wallet_watchAsset',
    params: <WatchAssetParams>,
})

Parameter description:
The parameter of the “request” function is an object include "method" and "params".

method: the invoked method of TronLink plug-in by TronWeb ,currently support 'wallet_watchAsset'

params: the parameters of above method. Below is the parameter description of 'wallet_watchAsset'

interface WatchAssetParams {
  type: 'TRC20'; // supported token types : `trc10`, `trc20`, `trc721` 
  options: { address: string;   // token’s contract address or token ID ,  required
             symbol?: string;   // currently not used, optional 
             decimals?: number; // currently not used, optional
             image?: string;    // currently not used, optional
           }; 
}

Updated 29 days ago

TronLink Integration


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.