How to implement TronLink wallet connect in a React project?

Question

I'm trying to implement TronLink wallet connect in my React project using the TronWeb library. I tried TronWeb documentation, but not able to find good resource to start for React.

I tried to create TronWeb instance using the samples in the documentation, and don't know how to proceed to connecting wallet.

Can you help me with that?

Answer 1

What you have to do is connect with the tronlink extension through the instance offered by the browser, we are talking about window.tronlink, from then on you would be connected, for any other questions look within the documentation developers.tron.network

 var {tronWeb, wallet, contrato} = this.state;
var conexion = 0;

if ( typeof window.tronWeb !== 'undefined' && typeof window.tronLink !== 'undefined' ) {

  tronWeb['installed'] = true;

  if(window.tronWeb.ready || window.tronLink.ready){

    try {
      conexion = (await window.tronLink.request({ method: 'tron_requestAccounts' })).code;
    } catch(e) {
      conexion = 0
    }

    if(conexion === 200){
      tronWeb['loggedIn'] = true;
      wallet = window.tronLink.tronWeb.defaultAddress.base58

    }else{
      tronWeb['loggedIn'] = false;
      wallet = "T9yD14Nj9j7xAB4dbGeiX9h8unkKHxuWwb";

    }

    tronWeb['web3'] = window.tronWeb;

    //window.tronWeb.setHeader({"TRON-PRO-API-KEY": 'your api key'});

    if(this.state.contrato.BRST == null){

      window.tronWeb.setHeader(cons.TAK)

      contrato = {};

      if(cons.SC !== ""){
        contrato.BRUT_USDT = await window.tronWeb.contract().at(cons.SC);
      }
      if(cons.USDT !== ""){
        contrato.USDT = await window.tronWeb.contract().at(cons.USDT);
      }
      if(cons.BRUT !== ""){
        contrato.BRUT =  await window.tronWeb.contract().at(cons.BRUT);
      }
      
      if(cons.SC2 !== ""){
        contrato.BRST_TRX = await window.tronWeb.contract().at(cons.SC2);
      }
      if(cons.BRST !== ""){
        contrato.BRST = await window.tronWeb.contract().at(cons.BRST);
      }
      
      if(cons.BRGY !== ""){
        contrato.BRGY = await window.tronWeb.contract().at(cons.BRGY);
      }
      if(cons.SC3 !== ""){
        contrato.MBOX =  await window.tronWeb.contract().at(cons.SC3);
      }

      if(cons.BRLT !== ""){
        contrato.BRLT = await window.tronWeb.contract().at(cons.BRLT);
      }
      if(cons.SC4 !== ""){
        contrato.loteria = await window.tronWeb.contract().at(cons.SC4);
      }


      this.setState({
        contrato: contrato

      });

    }
    
    
    this.setState({
      accountAddress: wallet,
      tronWeb: tronWeb,

    });
  }else{

    this.setState({
      tronWeb: tronWeb,

    });

  }


} else {

  console.log("se salio")

  tronWeb['installed'] = false;
  tronWeb['loggedIn'] = false;

  this.setState({
    tronWeb: tronWeb

  });
}