CODEWITHSUNDEEP
javascriptethereumweb3js
Paul Butler
Paul Butler

Reputation: 37

Retrieving Ethereum transaction value using client-sided JavaScript

I just want to write a simple script to get the Ethereum transaction data for this transaction. For some reason the script below is not working. https://rinkeby.etherscan.io/tx/0xd8b3c50230fb2f1d3d8586f5179b514e913dbe7868effd490a5743caaabda6b9

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script>
    //import Web3 from 'web3';
    
    async function getData(){
        //var Web3 = require('web3');
        var web3 = new Web3(new Web3.providers.HttpProvider('https://rinkeby.etherscan.io/tx/'));
        var trans = await web3.eth.getTransaction('0xd8b3c50230fb2f1d3d8586f5179b514e913dbe7868effd490a5743caaabda6b9');
        console.log(trans);
    }
  </script>
</head>

<body>

<input type="button" value="GetData" id="myCheck" onclick="getData()">

</body>
</html>

However, this is the error I am receiving. Any help would be appreciated.

Uncaught (in promise) Error: Invalid JSON RPC response: "\n<!doctype html>\n<html lang=\"en\">\n<title>Etherscan Error Page</title>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n<meta name=\"Description\" content=\"The Ethereum BlockChain Explorer, API and Analytics Platform\">\n<meta name=\"author\" content=\"etherscan.io\">\n<meta name=\"keywords\" content=\"ethereum, explorer, ether, search, blockchain, crypto, currency\">\n<meta name=\"format-detection\" content=\"telephone=no\">\n<link rel=\"shortcut icon\" href='/images/favicon2.ico'>\n<link rel=\"stylesheet\" href=\"/assets/vendor/font-awesome/css/fontawesome-all.min.css?v=22.6.2.0\">\n<link rel=\"stylesheet\" href=\"/assets/css/theme.min.css?v=22.6.2.0\">\n<script async src='/cdn-cgi/challenge-platform/h/g/scripts/invisible.js?ts=1655136000'></script></head>\n<body>\n<header id=\"header\" class=\"u-header\">\n<div class=\"u-header__section\">\n<div id=\"logoAndNav\" class=\"container\">\n<nav class=\"js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space 1d-block\">\n<div>\n<a class=\"navbar-brand\" href=\"/\" target=\"_parent\" aria-label=\"Etherscan\">\n<img width=\"160\" src=\"/assets/svg/logos/logo-etherscan.svg?v=0.0.2\" alt=\"Etherscan Logo\">\n</a>\n</div>\n</nav>\n</div>\n</div>\n</header>\n<main id=\"content\" class=\"bg-img-hero-center\" style=\"background-image: url(images/error-404.svg);\" role=\"main\">\n<div class=\"container d-lg-flex align-items-lg-center min-height-100vh\">\n<div class=\"w-lg-60 w-xl-50\">\n<div class=\"mb-5\">\n<h1 class=\"text-secondary font-weight-normal\"><span class=\"font-weight-semi-bold mr-2\">Sorry!</span>We encountered an unexpected error.</h1>\n<p class=\"mb-0 \">An unexpected error occurred. <br />Please check back later</p>\n</div>\n<a class=\"btn btn-primary btn-wide transition-3d-hover\" href=\"/\">Back Home</a>\n</div>\n</div>\n</main>\n<script type=\"text/javascript\">(function(){window['__CF$cv$params']={r:'71ac69d69dcdfb94',m:'kRT6PH.JaKfrrlNZDA8qUZQoLnuIL6WDEgb7vf.ju1A-1655139951-0-AdSH8wUwnN4/UDWZCb6E7p+JnSImKLhp0vn7pFWiMh/CJQRo6bgtRW4xr8hxx2r4SHQGEzuIp2dTAFdWxZlqX8gFGYUW/Zg+ey3+Cc6eoR6QkzHvMTz+XSNZiG5rSZkClA==',s:[0xfeec06b72f,0x45e731b888],u:'/cdn-cgi/challenge-platform/h/g'}})();</script></body>\n</html>\n"
    at Object.InvalidResponse (errors.js:43:16)
    at i.onreadystatechange (index.js:95:32)

Upvotes: 1

Views: 724

Answers (2)

Paul Butler
Paul Butler

Reputation: 37

Found the answer based on guidance here.

const ethNetwork = 'https://rinkeby.infura.io/v3/<Infura Project ID>'; //get this from your infura dashboard
const web3 = new Web3(new Web3.providers.HttpProvider(ethNetwork));

// let's fetch the transaction value           
var trans = await web3.eth.getTransaction('0xd8b3c50230fb2f1d3d8586f5179b514e913dbe7868effd490a5743caaabda6b9');
console.log(trans)
var input = web3.utils.toAscii(trans.input)
console.log(input)

Upvotes: 2

Petr Hejda
Petr Hejda

Reputation: 43481

https://rinkeby.etherscan.io/tx/ is not a valid provider. It's a blockchain explorer - a service displaying blockchain data in human-readable form, but it doesn't publish the JSON-RPC API that web3js expects.

You'll need to connect to a JSON-RPC node provider. Either third-party such as Alchemy and Infura, or your own node.

Example code:

var web3 = new Web3(new Web3.providers.HttpProvider('https://mainnet.infura.io/v3/<your_api_key>'));

Upvotes: 0

Related Questions