0xRay - Crypto Flow Visualizer

0xRay is a powerful React-based application for visualizing Ethereum transaction flows. It allows users to connect their wallet, fetch transaction history via Alchemy, and visualize fund movements in an interactive, time-ordered tree graph.

✨ Features

• Wallet Connection: Seamless integration with RainbowKit (MetaMask, WalletConnect, Coinbase Wallet, etc.).
• Interactive Visualization: Uses @xyflow/react (React Flow) to render interactive graphs.
• Automated Layout: Utilizes Dagre to automatically arrange nodes in a logical Left-to-Right tree structure, representing the flow of funds over time.
• Real-time Data: Fetches live transaction history using the Alchemy SDK.
• Modern UI: Built with Tailwind CSS v4 and Tabler Icons for a clean, glassmorphism-inspired aesthetic.

🛠 Tech Stack

• Frontend: React, Vite, TypeScript
• Web3: Wagmi, Viem, RainbowKit
• Data: Alchemy SDK, React Query
• Graph: @xyflow/react, Dagre
• Styling: Tailwind CSS v4, Prettier

🚀 Getting Started

Prerequisites

• Node.js (v18+)
• pnpm (recommended) or npm/yarn
• Alchemy API Key: You need an API key from Alchemy Dashboard.

Installation

1. Clone the repository

   git clone https://github.com/yourusername/0xRay.git
   cd 0xRay

2. Install dependencies

   pnpm install

3. Environment Setup Create a .env file in the root directory:

   VITE_ALCHEMY_API_KEY=your_alchemy_api_key_here

4. Run Development Server

   pnpm dev

   Open http://localhost:5173 in your browser.

📂 Project Structure

The project uses a feature-based architecture for scalability:

• src/features/wallet_analysis: Contains the core logic for the visualization dashboard.
• src/app/layouts: Global layout components like the Header.
• src/lib: Configuration for third-party libraries (Wagmi, etc.).

📝 License

MIT