feat/Add Transaction Analysis & Visualization Tool

[RiH-137]

Please check PR #20

1. Introduction

This report documents the implementation of Idea 5: Transaction Analysis & Visualization Tool for the Bitcoin BTC-Module project. The goal of this contribution was to build a tool that parses Bitcoin transactions and visualizes them in an easy-to-understand format, showing inputs, outputs, fees, and coin flow paths.

2. Problem Description

Bitcoin transactions can be complex to understand from raw data alone. Users often struggle to visualize the flow of funds, specifically:

• Which inputs funded the transaction.
• Where the outputs are going (recipient vs change).
• How fees are calculated.

The Transaction Analysis & Visualization Tool solves this by providing a graphical representation of the transaction graph, making it easier for developers and users to analyze the flow of assets on the blockchain.

3. Goals Achieved

The following goals outlined in the project idea have been successfully implemented:

• Create transaction parser: Implemented a service to fetch and parse transaction data from the Mempool.space API.
• Build transaction visualization UI: Integrated vis-network to create an interactive graph showing inputs (pink), the transaction (orange), and outputs (green).
• Implement coin flow tracing: The visualization clearly traces the path from input addresses through the transaction to output addresses.
• Add transaction detail display: Detailed statistics (Fee, Size, Weight, Confirmation Status) are displayed in a side panel.
• Create UTXO tracking visualization: Visual representation of Unspent Transaction Outputs (UTXOs) via the graph nodes.

4. Implementation Details & Impact

Backend Implementation (btc-controller)

A new helper class was created to handle the logic of fetching and formatting transaction data.

• File Created: btc-controller/src/helper/transactionVisualizer.ts
  • Impact: Contains the core logic for the TransactionVisualizer class. It fetches raw transaction data and converts it into a generic node-edge format suitable for graphing libraries.
• File Modified: btc-controller/src/index.ts & src/helper/index.ts
  • Impact: Exports the new TransactionVisualizer to make it accessible to the rest of the application.
• File Created: btc-controller/test/transactionVisualizer.js
  • Impact: Added unit tests to ensure the parser correctly formats transaction data and handles API responses.