DEV Community

Slobodan Jevtić
Slobodan Jevtić

Posted on

Building a Multi-Chain Blockchain Transaction Tracer: Integrating It into My React Portfolio Site

#react #blockchain #webdev #tutorial

Hey DEV community! I'm Slobodan Jevtić, a self-taught developer diving deep into Python, React, and blockchain tech. If you've followed my portfolio journey, you know I'm all about hands-on projects that solve real problems. Today, I'm excited to share progress on my latest tool: a Blockchain KYT (Know Your Transaction) Tracer designed to trace wallet transactions using public data. The goal? Help fight crypto crime by tracking illicit funds, identifying risky addresses, and potentially aiding fund recovery—all while showcasing it as part of my React-based portfolio.

This tool is live at econdev.studio/crypto-tool. It started as a simple Ethereum tracer and now supports Bitcoin too, with more chains on the way. Let's break down how I built it, integrated it into my site, and why it's a game-changer for ethical blockchain sleuthing.

Why Build This? The Vision Behind the Tool
Blockchain is transparent by design—every transaction is public, making it a goldmine for investigators. Tools like this can help trace stolen funds from hacks (e.g., Ronin Bridge) or scam payments. My tracer focuses on KYT: analyzing transactions to flag risks, follow specific amounts, and visualize flows across addresses, DEXes, and chains.

As a portfolio piece, it demonstrates:

React routing and component architecture.
API integrations (Etherscan, Blockcypher).
Secure env handling and deployment.
The UI has a "hacker-y" vibe—dark mode, monospace fonts, green accents—to appeal to the cyber-investigator crowd. But it's ethical: Public data only, with disclaimers for lawful use.

Portfolio Site Basics: React + Vite Setup
My site (econdev.studio) is a single-page app built with Vite + React. It features scrollable sections (Hero, About, Projects, Blog, Contact), particle effects via tsParticles, tilt animations with VanillaTilt, and a Konami code Easter egg for Tic-Tac-Toe fun.

Key files:

App.jsx: Handles routing with react-router-dom.
Home.jsx: The main portfolio content.
Deployment: GitHub Pages via npm run build and npm run deploy (using gh-pages package).
To add the tool, I installed react-router-dom and axios:

npm install react-router-dom axios
Enter fullscreen mode Exit fullscreen mode

Then, updated App.jsx for the new route:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import CryptoTool from './components/CryptoTool';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/crypto-tool" element={<CryptoTool />} />
      </Routes>
    </Router>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Added a link in Navbar.jsx:

import { Link } from 'react-router-dom';

// In the nav-links ul:
<Link to="/crypto-tool">Crypto Tool</Link>
Enter fullscreen mode Exit fullscreen mode

This keeps the portfolio intact while adding a dedicated page.

Building the Core: Ethereum Tracing with Etherscan
Started simple: Fetch recent transactions for an ETH address using the free Etherscan API (sign up for a key at etherscan.io/apis).

In CryptoTool.jsx:

Input for address.
Fetch last 10 txs.
Display in a table with links to Etherscan.
Code snippet:

const fetchTransactions = async () => {
  // ... (API call logic)
  const response = await axios.get(
    `https://api.etherscan.io/api?module=account&action=txlist&address=${address}&...&apikey=${ETHERSCAN_API_KEY}`
  );
  setTransactions(response.data.result.map(tx => ({
    // Normalize data
  })));
};
Enter fullscreen mode Exit fullscreen mode

Security tip: Store the key in .env (e.g., VITE_ETHERSCAN_API_KEY=your_key), access via import.meta.env.VITE_ETHERSCAN_API_KEY. Add .env to .gitignore!

Adding Multi-Chain Support: Bitcoin with Blockcypher
To make it versatile, added a dropdown for chains. BTC uses Blockcypher's free API (no key needed).

Updated fetch logic:

if (chain === 'BTC') {
  response = await axios.get(
    `https://api.blockcypher.com/v1/btc/main/addrs/${address}?limit=10`
  );
  setTransactions(response.data.txrefs.map(txref => ({
    // Normalize BTC data, infer direction
  })));
}
Enter fullscreen mode Exit fullscreen mode

Normalized the table for both chains (added "Direction" column). Test BTC with Satoshi's address: 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa.

UI and Enhancements
Hacker Vibe: Dark BG (#1e1e1e), green text (#00ff00), monospace font.
Form: Chain select, address input, "Trace" button.
Table: Clickable hashes to explorers.
Future: Solana (via RPC), BEP20 (BSCScan), fund flow graphs (React-Flow), risk flagging (scam DBs), cross-chain tracing.
Challenges overcome:

API rate limits: Inform users, add pagination.
BTC complexity: Simplified multi-input/output txs; will expand to full details.
Deployment and Going Live
After updates:

git add . && git commit -m "Added BTC support" && git push
npm run build && npm run deploy
Live in minutes on GitHub Pages. Custom domain (econdev.studio) via CNAME file.

What's Next?
Add Solana and BEP20.
Implement recursive tracing (follow amounts hops).
Visualize with graphs.
Integrate Grok (xAI) for AI analysis (e.g., "Is this risky?").
Open-source on GitHub for contributions.
Check it out at econdev.studio/crypto-tool and let me know your thoughts! If you're into blockchain dev or crime-fighting tools, drop a comment—what chain should I add next?

Thanks for reading! Follow for more updates on my dev journey. 🚀

Top comments (0)