# Use TronLink with frontend

### Process:
1. check [TronLink](https://chrome.google.com/webstore/detail/tronlink/ibnejdfjmmkpcnlpebklmnkoeoihofec) is install in chrome
2. connected **Tronlink** in website
3. get current **Tron node**
4. check if node is valid, **get contract**
5. use **contract.transfer** send transaction
6. if transaction is send, **get hash** to decode
7. **decode transaction** hash to check ui style

### Prerequisites:

yarn add ethers

// type window Tronlink types
declare global {
	interface Window {
		tronLink?: any;
	}
}

// connected tronlink response type
type requestAccountsResponse = {
	code: number; // 200：ok，4000：在队列中，不需要重复提交， 4001：user rejected
	message: string;
};


// send Tronlink transaction process
if (!window.tronLink) {
    // check if tronlink not install in chrome
} else {
    // if tronlink is install in chrome 
    try {
        // check tronlink is connect wallet in website
        const res: requestAccountsResponse =
            await window.tronLink.request({
                method: 'tron_requestAccounts',
            });
        if (!res) {
            // if tronlink is not connected .....
        } else if (res.code === 200) {
            // get tronlink current chains config
            const node =
                await window.tronLink.tronWeb.trx.getNodeInfo();
            
            // check if node is you want
            //  1 = shasta ,11111 = tron mainnet
            if (Number(node.configNodeInfo.p2pVersion) ===
                fromChainId) {
                // get contract, TRON-TOKEN-ADDRESS is Tron token address
                const contract = await window.tronLink.tronWeb
                    .contract()
                    .at(TRON_TOKEN_ADDRESS);

                // use contract tranfer to send transaction
                // must install ethers package for use ethers.utils.parseUnits
                const result = await contract
                    .transfer(
                        to_address, //address _to
                        parseInt(
                            ethers.utils.parseUnits(
                                values, // must string
                                decimal, // must number
                            )._hex,
                        ), //amount
                    )
                    .send({
                        feeLimit: 10000000,
                    })
                    .then((output: any) => {
                        // this output is transaction hash, do something ....
                        console.log('- Output:', output, '\n');
                    })
                    .catch((e: any) => {
                        // if transfer error .......
                    });
            } else {
                // if node not correct .....
            }
        }
    } catch (e) {
        // if connected Tronlink error .......
    }
}

// decode transaction hash
let timer: ReturnType<typeof setInterval>;

const [TronTransaction, setTronTransaction] = useState<any>();

async function updateTronTransaction(hash: string) {
    try {
        // get send transaction hash status
        // this result is not transction pedding status
        // this result is check transaction is send success or send error 
        const transaction = await window.tronLink.tronWeb.trx.getTransaction(hash);
        timer = setInterval(async () => {
            // get transaction hash is confirm
            // if transaction is confirm, has result, else no result
            const transactionInfo =
                await window.tronLink.tronWeb.trx.getTransactionInfo(hash);

            if (transactionInfo?.receipt?.result) {
                // if has result, clear timer
                setTronTransaction(transactionInfo);
                clearInterval(timer);
            } else {
                setTronTransaction(transaction);
            }
        }, 1000);
    } catch (e) {
        console.log(e, 'e');
    }
}

// ui style

if ((TronTransaction?.ret && TronTransaction?.ret[0].contractRet !== 'SUCCESS') || TronTransaction.result === 'FAILED') {
    // if transaction is fail .......
}
else if (TronTransaction?.receipt?.result === 'SUCCESS') {
    // if transaction is success ....
} else {
    // if transaction is pedding ....
}

:::info
:pushpin: Refrence:
1. [TronLink v4.5.2](https://cn.developers.tron.network/docs/dapp-integrate-with-tronlink-introduction)
2. [TronLink API v3.7](https://cn.developers.tron.network/v3.7/docs/trx-functions)
3. [Ethers](https://docs.ethers.io/v5/api/utils/display-logic/)
4. [gitbook](https://andelf.gitbook.io/tron/tron-by-example/transfer-trx)
5. [tron adapter](https://github.com/tronprotocol/tronwallet-adapter)
6. [tron link doc](https://docs.tronlink.org/dapp/general-transfer)
:::