My Image
CoursesQuizzesProblemsContestsSmartBooks
Contest!

No results found

LOGINREGISTER
My ProgressCoursesQuizzesProblemsContestsSmartbooks
Published on 15 Aug 2021
Tronweb interaction client side
Connecting to tronlink wallet and sending trx from client side
img
Aniket Savji
0
Like
1385

Introduction

Previously in Introduction to Tronweb smartbook we had discussed about tronweb by doing little transaction on tron network by using it in server side code. So in this smartbook we will do the same interaction with tron network but from the client side code i.e we will use client side browser to send transaction through TronLink wallet.

User will interact with our index.html file which will be our client side webpage and it will be served by a simple nodejs server.

Configuration

1. Installing tronweb wallet i.e TronLink

You can visit chrome store and install TronLink extension. Create two accounts for this toutorial.

2. Getting test tokens

Shasta is testnetwork for tron blockchain. You can get test trx on shasta network from here , Enter your account address and submit to get the test trx.

 

Server Side Code

Initialise nodejs

> npm init

Installing express

> npm install --save express

Creating files and folders

Here index.js will be our server file and index.html will be main working file.

> touch index.js

> mkdir public

> touch public/index.html

Server file 

Our index.js file will be simple node server serving index.html file,

var express = require('express');
var app = require('express')();
var http = require('http').Server(app);
var path = require('path');
var port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, './public/')));

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

http.listen(port, function () {
    console.log('listening on *:' + port);
});

After this start the server with following command : 

> node index.js

 

Client Side Code

Client side code will consist of html and  script for interaction with blockchain.

1. HTML

As html UI isn't important for this topic, we will simply create a button  for triggering send function and an input to take receiver's address.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tronweb</title>
</head>

<body>
    <input id="receiver">
    <button onclick="send_trx()"> Sent TRX </button>
</body>

</html>

 2. Script

Scipt will consist of two parts,

  • Connect to TronLink wallet and fetching TronWeb
  • Send trx function

So for the first part our code will be as follows :

var tronWeb;
var receiver = document.getElementById('receiver')
var obj = setInterval(async () => {
        if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
        }
}, 100);

We need to use setInterval function to get injected tronweb from tronlink wallet of the browser.

And for second part code is as follows :

async function send_trx() {
        await tronWeb.trx.sendTransaction(receiver.value, 10000000);
}

 

Complete Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tronweb</title>

</head>

<body>
    <input id="receiver">
    <button onclick="send_trx()"> Sent TRX </button>
</body>

<script>
        var tronWeb;
        var receiver = document.getElementById('receiver')
        var obj = setInterval(async () => {
            if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
            }
        }, 100);
        async function send_trx() {
            await tronWeb.trx.sendTransaction(receiver.value, 10000000);
        }
</script>

</html>
Enjoyed the SmartBook?
Like
logo
contact@dapp-world.com
Katraj, Pune, Maharashtra, India - 411048

Follow Us

linkedintwitteryoutubediscordinstagram

Products

  • SmartBooks
  • Courses
  • Quizzes
  • Assessments

Support

  • Contact Us
  • FAQ
  • Privacy Policy
  • T&C

Backed By

ah! ventures

Copyright 2023 - All Rights Reserved.

Recommended from DAppWorld
img
1 May 2021
How to connect Ganache with Metamask and deploy Smart contracts on remix without
Set up your development environment with (Metamask + Ganache + Remix) and skip truffle :)
3 min read
11494
5
img
8 Jul 2021
How to interact with smart contarct from backend node js
call and send functions from backend server side using nodejs
3 min read
8069
2
img
18 Aug 2021
Send transaction with web3 using python
Introduction to web3.py and sending transaction on testnet
3 min read
6215
5
img
5 Aug 2021
Deploy Smart Contract on Polygon POS using Hardhat
how to deploy smart contracts on polygon pos chain using hardhat both mainnet and testnet ?
3 min read
5533
3