🚀 BlockscoutAnalyser: Real-Time Ethereum Transaction Analysis Tool | Next.js & TypeScript

Introduction

In the rapidly evolving world of blockchain technology, having access to clear and actionable transaction data is crucial. BlockscoutAnalyser is a powerful web application that provides real-time insights into Ethereum transactions, built with modern web technologies and a focus on user experience.

Key Features

• 🔍 Real-time transaction analysis

• 💰 Token transfer tracking

• 📊 Interactive data visualization

• 👛 MetaMask wallet integration

• ⚡ Fast and responsive UI

• 🔄 Automatic data updates

• 📱 Mobile-friendly design

Technical Stack

• Frontend Framework: Next.js 15

• Programming Language: TypeScript

• Styling: Tailwind CSS

• Blockchain: Ethereum

• Data Source: Blockscout API

Core Implementation

1. Transaction Fetching System

const fetchTransactions = async (e: FormEvent) => {
  try {
    const apiUrl = `https://eth.blockscout.com/api?module=account&action=txlist&address=${address}&page=1&offset=20&sort=desc`

    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
      },
    })

    const data = await response.json()

    if (data.status === "1" && data.result) {
      const transformedTransactions = data.result.map((tx: any) => ({
        blockNumber: tx.blockNumber,
        timestamp: tx.timeStamp,
        hash: tx.hash,
        from: tx.from,
        to: tx.to,
        value: tx.value,
        gasPrice: tx.gasPrice,
        gas: tx.gas,
        isError: tx.isError,
        input: tx.input,
        functionName: tx.functionName || "Transfer"
      }))

      setTransactions(transformedTransactions)
    }
  } catch (err) {
    console.error('Error fetching transactions:', err)
    setError(err.message || "Failed to fetch transaction data")
  }
}

2. Token Transfer Analysis

const fetchTokenTransfers = async (address: string) => {
  try {
    const apiUrl = `https://eth.blockscout.com/api?module=account&action=tokentx&address=${address}&page=1&offset=5&sort=desc`

    const response = await fetch(apiUrl)
    const data = await response.json()

    if (data.status === "1" && data.result) {
      const transformedTokens = data.result.map((tx: any) => ({
        blockNumber: tx.blockNumber,
        timestamp: tx.timeStamp,
        hash: tx.hash,
        from: tx.from,
        to: tx.to,
        value: tx.value,
        tokenName: tx.tokenName,
        tokenSymbol: tx.tokenSymbol,
        tokenDecimal: tx.tokenDecimal
      }))

      setTokenTransfers(transformedTokens)
    }
  } catch (err) {
    console.error('Error fetching token transfers:', err)
  }
}

3. Data Visualization System

const processChartData = (txs: Transaction[]) => {
  const valueRanges: { [key: string]: number } = {
    "0 ETH": 0,
    "0-0.1 ETH": 0,
    "0.1-1 ETH": 0,
    "1-10 ETH": 0,
    "10+ ETH": 0,
  }

  txs.forEach((tx) => {
    const value = Number.parseInt(tx.value) / 1e18

    if (value === 0) {
      valueRanges["0 ETH"]++
    } else if (value <= 0.1) {
      valueRanges["0-0.1 ETH"]++
    } else if (value <= 1) {
      valueRanges["0.1-1 ETH"]++
    } else if (value <= 10) {
      valueRanges["1-10 ETH"]++
    } else {
      valueRanges["10+ ETH"]++
    }
  })

  const valueChartData = Object.entries(valueRanges).map(([label, value], index) => ({
    label,
    value,
    color: colors[index % colors.length],
  }))

  setValueDistribution(valueChartData)
}

Technical Challenges and Solutions

1. API Rate Limiting

We implemented efficient data fetching with proper error handling:

const fetchData = async (address: string) => {
  try {
    // Parallel API calls for better performance
    const [txResponse, tokenResponse] = await Promise.all([
      fetchTransactions(address),
      fetchTokenTransfers(address)
    ])

    // Process responses
    if (txResponse.status === "1") {
      setTransactions(txResponse.result)
    }
    if (tokenResponse.status === "1") {
      setTokenTransfers(tokenResponse.result)
    }
  } catch (err) {
    setError("Failed to fetch data. Please try again later.")
  }
}

2. Real-time Updates

Using React's useEffect for automatic updates:

useEffect(() => {
  if (transactions.length > 0) {
    processChartData(transactions)
  }
}, [transactions])

Future Improvements

1. Support for more blockchain networks

2. Advanced filtering options

3. Enhanced visualization capabilities

4. Transaction export functionality

5. Historical data analysis

6. Custom API key support

Getting Started

Prerequisites

• Node.js 18+ installed

• npm or yarn package manager

• Basic understanding of Ethereum blockchain

Installation

1. Clone the repository:

git clone https://github.com/Vikash-8090-Yadav/BlockscoutAnalyser.git

2. Install dependencies:

cd BlockscoutAnalyser
npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Resources

• GitHub Repository

• Blockscout API Documentation

• Next.js Documentation

• Demo Video:https://youtu.be/uzCRVqF-mTo

• Live Frontend:https://blockscout-analyser.vercel.app/

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

1. Fork the repository

2. Create your feature branch (git checkout -b feature/AmazingFeature)

3. Commit your changes (git commit -m 'Add some AmazingFeature')

4. Push to the branch (git push origin feature/AmazingFeature)

5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you find this project helpful, please consider:

• Starring the repository

• Sharing with others

• Contributing to the project

• Reporting bugs or suggesting features

Connect With Us

• GitHub

• [YouTube Channel]([Your YouTube Channel Link])

• [Twitter]([Your Twitter Handle])

Acknowledgments

• Blockscout API team for providing reliable blockchain data

• Next.js team for the amazing framework

• All contributors who have helped improve this project

Conclusion

BlockscoutAnalyser demonstrates how modern web technologies can make blockchain data accessible and understandable. The combination of Next.js, TypeScript, and the Blockscout API creates a powerful tool for blockchain analysis. As blockchain technology continues to evolve, tools like BlockscoutAnalyser will play an increasingly important role in making blockchain data more accessible to everyone.