TronLink Integration

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:

should actually be :

async componentDidMount() {

this.setState({loading:true})
await new Promise(resolve => {
const tronWebState = {
installed: !!window.tronWeb,
loggedIn: window.tronWeb && window.tronWeb.ready
};

if(tronWebState.installed) {
this.setState({
tronWeb:
tronWebState
});
return resolve();
}
});
} — should actually be :
`async componentDidMount() { this.setState({loading:true}) await new Promise(resolve => { const tronWebState = { installed: !!window.tronWeb, loggedIn: window.tronWeb && window.tronWeb.ready }; if(tronWebState.installed) { this.setState({ tronWeb: tronWebState }); return resolve(); } }); }`

TronWeb interacts with the DApp as such:

If a user does not have TronLink or a similar application installed, then they most likely also don't have TronWeb in the browser when they use your web DApp. In this case, you can write a function that checks for tronWeb in the window object, and defines the HTTP ports for the user. The function can be written as below:

window.onload = function() {
  if (!window.tronWeb) {
    const HttpProvider = TronWeb.providers.HttpProvider;
    const fullNode = new HttpProvider('https://api.trongrid.io');
    const solidityNode = new HttpProvider('https://api.trongrid.io');
    const eventServer = 'https://api.trongrid.io/';
    
    const tronWeb = new TronWeb(
        fullNode,
        solidityNode,
        eventServer,
    );

    window.tronWeb = tronWeb;
  }
};