Skip to content

Instantly share code, notes, and snippets.

@thestriver

thestriver/gist:05419c8215c039aeed3630d7e34e6732

Created June 12, 2021 11:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thestriver/05419c8215c039aeed3630d7e34e6732 to your computer and use it in GitHub Desktop.
Save thestriver/05419c8215c039aeed3630d7e34e6732 to your computer and use it in GitHub Desktop.
Download ZIP
ETH chain explorer
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ethereum Blockchain Explorer</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="py-10">
<div class="text-center">
<img src="img/ethereum-logo.png" class="w-1/3 h-1/2 mx-auto" alt="logo">
<p class="py-5" >A simple Ethereum Blockchain Explorer that displays the last 10 transactions with selected details</p>
</div>
<div class="flex flex-col">
<div class="my-2 overflow-x-auto sm:mx-6 lg:mx-2">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-3">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 px-10 ">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Block Number
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Address
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Hash
</th>
<th scope="col" class="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Timestamp
</th>
</tr>
</thead>
<tbody class="bg-white divide-y-2 divide-gray-100 ">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- Web3 -->
<script src="js/web3.min.js"></script>
<script>
const provider = ''; // Add your quiknode HTTP provider link here
const web3Provider = new Web3.providers.HttpProvider(provider);
const web3 = new Web3(web3Provider);
// web3.eth.getBlock('latest').then(answer => console.log(answer))
// web3.eth.getBlockNumber().then(blockNum => console.log(blockNum))
web3.eth.getBlockNumber().then(blockNum => {
//loop through and get the last 10
for (let i = 0; i < 10; i++) {
web3.eth.getBlock(blockNum - i).then(answer => {
$('tbody').append("<tr><td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>" + answer.number + "</td><td>" + answer.author + "</td><td class='text-gray-600 text-sm'>" + answer.hash + "</td><td class=' px-2 py-1 mt-3 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800'>" + answer.timestamp + "</td></tr>");
})
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment