Web3 <> AI/ML with Google & Alchemy

Building a Real-Time Ethereum Transaction Tracker with Alchemy SDK 💻

Building a Real-Time Ethereum Transaction Tracker with Alchemy SDK 💻

Subham Surana's photo
Subham Surana
·

3 min read

In this tutorial, we'll explore how to build a real-time Ethereum transaction tracker using Alchemy SDK. Alchemy SDK provides powerful APIs that simplify the interaction with Ethereum and enable developers to access real-time data effortlessly. By the end of this tutorial, you'll have a functional application that tracks Ethereum transactions in real time and displays relevant information about each transaction.

Prerequisites:

  1. Basic knowledge of JavaScript and HTML.

  2. Node.js is installed on your machine.

  3. A text editor or Integrated Development Environment (IDE) of your choice.

Let's get started!

👉 Step 1: Set Up Your Project

Create a new directory for your project and initialize a new Node.js project.

bashCopy codemkdir eth-transaction-tracker
cd eth-transaction-tracker
npm init -y

👉 Step 2: Install Dependencies

We'll need the following dependencies: express for creating a simple server, axios for making HTTP requests, and socket.io for real-time updates.

bashCopy codenpm install express axios socket.io

👉 Step 3: Create the Server

Create an index.js file in your project directory and set up a basic Express server with Socket.IO.

javascriptCopy code// index.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

const port = 3000;

app.use(express.static('public'));

http.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

👉 Step 4: Set Up the Frontend

Create a new directory called public in your project folder and create an index.html file inside it.

htmlCopy code<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ethereum Transaction Tracker</title>
</head>
<body>
  <h1>Ethereum Transaction Tracker</h1>
  <ul id="transaction-list"></ul>
  <script src="/socket.io/socket.io.js"></script>
  <script src="app.js"></script>
</body>
</html>

👉 Step 5: Implement the Transaction Tracker

Create a new app.js file inside the public directory.

javascriptCopy code// public/app.js
const socket = io();

const transactionList = document.getElementById('transaction-list');

socket.on('transaction', (transaction) => {
  const listItem = document.createElement('li');
  listItem.innerText = `Transaction Hash: ${transaction.hash}, Block Number: ${transaction.blockNumber}, From: ${transaction.from}, To: ${transaction.to}, Value: ${transaction.value}`;
  transactionList.appendChild(listItem);
});

👉 Step 6: Interact with Alchemy SDK

Back in the index.js file, let's integrate Alchemy SDK to track Ethereum transactions in real time.

javascriptCopy code// index.js
const axios = require('axios');
const ALCHEMY_API_KEY = 'YOUR_ALCHEMY_API_KEY'; // Replace with your Alchemy API key

const { createAlchemyWeb3 } = require('@alch/alchemy-web3');
const web3 = createAlchemyWeb3(ALCHEMY_API_KEY);

io.on('connection', (socket) => {
  console.log('A user connected.');

  // Subscribe to new pending transactions
  const subscription = web3.eth.subscribe('pendingTransactions', (error, result) => {
    if (!error) {
      console.log(result);
    }
  });

  // Listen to incoming transactions and emit them to the frontend
  subscription.on('data', async (txHash) => {
    const transaction = await web3.eth.getTransaction(txHash);
    socket.emit('transaction', transaction);
  });

  // Handle errors
  subscription.on('error', console.error);

  socket.on('disconnect', () => {
    subscription.unsubscribe((error, success) => {
      if (success) {
        console.log('Unsubscribed successfully.');
      }
    });
  });
});

👉 Step 7: Run the Application

Finally, let's start the server and see our real-time Ethereum transaction tracker in action!

bashCopy codenode index.js

Open your browser and visit http://localhost:3000. You should now see the Ethereum Transaction Tracker displaying live transactions as they occur on the Ethereum network.

Conclusion:

Congratulations! You've built a real-time Ethereum transaction tracker using Alchemy SDK and Socket.IO. This application provides valuable insights into Ethereum transactions as they happen, showcasing the real power of Alchemy's APIs in creating seamless and responsive Web3 applications.

Feel free to enhance this project further by adding features like transaction filtering or additional transaction details. Keep exploring Alchemy SDK's capabilities to build even more exciting applications on the Ethereum blockchain! Happy coding! 🚀🌐

NOTE: Remember to replace 'YOUR_ALCHEMY_API_KEY' with your actual Alchemy API key obtained from the Alchemy website.

If you liked this blog, then do follow
👉 Alchemy University: Alchemy University (@AlchemyLearn)
👉 Subham Surana: https://twitter.com/thesuranaverse

Web3BlockchainalchemyAlchemySDKDeveloper