FuelFolio - Brutalist Blockchain Portfolio Tracker

A brutalist-styled portfolio tracking application for the Fuel blockchain network. Built with Next.js 14, TypeScript, and Tailwind CSS.

Overview

FuelFolio is a web application that allows users to view their Fuel blockchain portfolio, including token holdings, transaction history, and interactive visualizations. The design follows a brutalist aesthetic with bold typography, sharp edges, and a vibrant green color palette.

Features

Landing Page

• Wallet Input: Enter any Fuel wallet address to explore its portfolio
• Address Validation: Real-time validation of Fuel address format (66 characters, hex)
• Brutalist Design: Grid background pattern, bold typography, and high contrast elements

Portfolio Dashboard

Token Holdings

• Donut Chart Visualization: Interactive pie chart showing portfolio allocation
• Real-time Prices: USD prices fetched from CoinGecko API
• Token Icons: Loaded from Fuel verified assets CDN
• Percentage Allocation: Visual breakdown of holdings
• P&L Indicators: Individual token profit/loss based on cost basis

Portfolio Statistics

• Total Portfolio Value: Sum of all token holdings in USD
• Transaction Count: Total number of transactions
• Asset Count: Number of unique tokens held
• Unrealized P&L: Calculated from transaction history

Transaction History

• Paginated View: 10 transactions per page with navigation
• Transaction Types: Send, Receive, Swap, Contract interactions
• Timestamp Parsing: Proper TAI64 timestamp conversion
• Block Explorer Links: Direct links to Fuel Network explorer
• Copy Transaction Hash: One-click copy functionality

Transaction Treemap

• Relationship Visualization: Shows top 20 interacted addresses
• View Modes: Toggle between "By Count" and "By Value"
• Interactive Tooltips: Hover for detailed transaction breakdown
• Explorer Links: Click to view addresses on Fuel explorer

Network Status

• Block Height: Current chain block number
• Gas Price: Real-time gas price in Gwei
• Auto-refresh: Updates every 15 seconds

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Charts: Recharts
• Data Fetching: SWR
• Icons: Lucide React
• Fonts: Space Grotesk (headings), JetBrains Mono (data)

Project Structure

``` ├── app/ │ ├── globals.css # Brutalist theme & design tokens │ ├── layout.tsx # Root layout with fonts │ ├── page.tsx # Landing page │ └── portfolio/ │ └── [address]/ │ └── page.tsx # Dynamic portfolio page │ ├── components/ │ ├── address-display.tsx # Truncated address with copy │ ├── brutalist-card.tsx # Reusable card component │ ├── footer.tsx # Site footer │ ├── header.tsx # Navigation header │ ├── network-status.tsx # Chain status display │ ├── nft-gallery.tsx # NFT grid (placeholder) │ ├── portfolio-client.tsx # Main portfolio logic │ ├── portfolio-stats.tsx # Stats grid │ ├── token-list.tsx # Holdings with donut chart │ ├── transaction-table.tsx# Paginated tx history │ ├── transaction-treemap.tsx # Address relationship viz │ └── wallet-input.tsx # Address input form │ ├── lib/ │ ├── fuel-api.ts # Fuel GraphQL API client │ ├── mock-data.ts # Demo data (unused) │ ├── types.ts # TypeScript interfaces │ └── utils.ts # Utility functions │ └── public/ └── fuel-logo.svg # Fuel logo ```

API Integration

Fuel Network GraphQL

• Endpoint: https://mainnet.fuel.network/v1/graphql
• Queries:
  • balances - Fetch token balances by owner
  • transactionsByOwner - Get transaction history
  • chain - Network status (block height, gas price)

Verified Assets

• CDN: https://verified-assets.fuel.network/
• Assets JSON: List of all verified tokens with metadata
• Icons: SVG/WebP images for token logos

Price Data

• CoinGecko API: Real-time USD prices
• Supported Tokens: ETH, FUEL, USDC, USDT, weETH, ezETH, wstETH, sDAI, rsETH

Design System

Colors

Token	Value	Usage
Primary	#00BF00	Accents, buttons, highlights
Background	#0A0A0A	Page background
Card	#141414	Card backgrounds
Border	#2A2A2A	Borders, dividers
Foreground	#FAFAFA	Primary text
Muted	#888888	Secondary text

Typography

• Headings: Space Grotesk (bold, uppercase)
• Body/Data: JetBrains Mono (monospace)

Brutalist Elements

• Zero border radius (--radius: 0)
• 3px thick borders
• Offset drop shadows (6px)
• High contrast colors
• Grid background patterns
• Uppercase labels

Getting Started

1. Clone the repository
2. Install dependencies: npm install
3. Run development server: npm run dev
4. Open http://localhost:3000

Usage

1. Navigate to the homepage
2. Enter a valid Fuel wallet address (66 characters starting with 0x)
3. Click "EXPLORE" to view the portfolio
4. Browse token holdings, transactions, and visualizations

Example Addresses

``` 0xf8f8b6283d7fa5b672b530cbb84fcccb4ff8dc40f8176ef4544ddb1f1952ad07 ```

License

MIT License - See LICENSE file for details.

Credits

• Fuel Network - Blockchain infrastructure
• Vercel - Hosting and deployment
• shadcn/ui - UI component library