⛽ STC GasX - Web3 Cost Comparator

The Most Comprehensive Web3 Cost Analysis Platform

STC GasX is a Web3 Cost Comparator tool designed to help users visualize and compare the cost of blockchain-based (on-chain) transactions against traditional off-chain costs, such as bank transfer fees, OTA commissions, or manual administrative costs. It is particularly suitable for academic studies, case studies, and operational cost analysis of Web3 applications.

The tool integrates data from STC Analytics and live APIs to compute costs in ETH, USD, and IDR, enabling clear visualization of cost efficiency.

🌐 Live Demo | 📖 Documentation | 🛠️ API Docs | 🤝 Contributing

🎯 Visualize • Compare • Optimize

Analyze on-chain gas fees vs traditional off-chain costs with real-time data, multi-chain support, and AI-powered insights.

🌟 Overview

STC GasX is a cutting-edge Web3 cost analysis platform designed to help researchers, businesses, and crypto enthusiasts understand the true cost comparison between blockchain transactions (with gas fees) and traditional off-chain payment methods.

🎓 Perfect for:

Academic Research - Comprehensive data for dissertations and papers
Business Analysis - ROI calculations and decision support
Crypto Trading - Timing optimization with live gas alerts
Regional Studies - Southeast Asian multi-currency comparison
ESG Reporting - Environmental impact analysis

🌍 Regional Focus

Built with Southeast Asia in mind, supporting 6 currencies (IDR, MYR, THB, PHP, SGD, VND) and regional cost structures.

✨ Key Features

🔥 17 Comprehensive Analysis Modules

📊 Core Analysis

Dashboard - Real-time cost comparison overview
Trends - Historical gas fee analysis
Breakdown - Detailed cost composition
Multi-Chain - Compare 5 blockchains simultaneously
Data - CSV import/export with sample datasets

💡 Smart Features

Kalkulator - Instant cost calculator
Insights - AI-powered recommendations
Timing - Optimal transaction time analysis
Scenarios - Business case modeling

🚀 Advanced Tools

Alerts - Live gas price notifications
Share - Collaborative analysis via URL
API - RESTful API for developers
Simulate - Risk-free transaction testing
Regional - Multi-currency comparison
Carbon - Environmental impact analysis
Export - Professional PDF reports

🌐 Accessibility

Tentang - Indonesian language guide
No authentication required
Dark/Light theme support

Key Features

Fetch Ethereum gas fees from Infura (Sepolia or Mainnet).
Convert ETH → USD → IDR automatically using CoinGecko and Frankfurter APIs.
Compare on-chain costs with off-chain fees:
- Bank transfer fee (default: Rp 6,500)
- OTA commission (default: 20%)
- Fixed admin fee (default: Rp 25,000)
Normalize costs per transaction.
Visualizations:
- Bar chart: On-chain vs Off-chain per transaction.
- Line chart: Gas fee fluctuation vs stable fiat fees.
- Pie chart: Fee breakdown (miner, OTA commission, admin).
Interactive parameter adjustments (gas price, rates, fees).
SIWE (Sign-In With Ethereum) authentication:
- Wallet address stored only
- Optional display name
Export CSV and PNG charts.

Pipeline & Data Flow

Input

Source: CSV export from STC Analytics
Analytics schema:

Timestamp, Network, Tx Hash, Contract, Function, Block, Gas Used, Gas Price (Gwei), Estimated Fee (ETH), Estimated Fee (Rp), Status
Mapping for GasX:

Timestamp, Tx Hash, Gas Used, Gas Price (Gwei), Fee (ETH), Fee (Rp)

User Inputs

Parameter	Default	Notes
bank_transfer_fee_rp	6500	Can override via form
ota_commission_pct	20	Percentage of base amount
admin_fee_rp	25000	Fixed admin cost
allow_override	true	User can override values

Process

Normalize on-chain cost per transaction
Compute off-chain total cost
Compare on-chain vs off-chain per transaction
Generate comparison dataset

Visualization

Bar chart: On-chain vs Off-chain per transaction
Line chart: Gas fee trend vs stable fees
Pie chart: Fee composition (miner fee, OTA %, admin fee)

Output

CSV
PNG charts
Metadata: original analytics columns retained optionally

Expected Schema (comparison dataset)

Column	Description
Timestamp	From Analytics
Tx Hash	From Analytics
Gas Fee (Rp)	On-chain fee from Analytics
Off-chain Bank Fee (Rp)	From user input
OTA Commission (Rp)	Calculated from user % × transaction base
Admin Fee (Rp)	From user input
Off-chain Total (Rp)	Bank Fee + OTA Commission + Admin Fee
Comparison Result	Label: On-chain Cheaper / Off-chain Cheaper / Equal

Authentication

Method: SIWE (Sign-In With Ethereum)
Storage: Wallet address only
Optional: User display name

Example Dataset

Timestamp,Tx Hash,Gas Used,Gas Price (Gwei),Fee (ETH),Fee (Rp)
2025-09-17 10:21:05,0xabc123...,21000,15,0.000315,7400
2025-09-17 10:25:42,0xdef456...,48000,18,0.000864,20300
2025-09-17 10:33:18,0xghi789...,52000,20,0.00104,24400
2025-09-17 10:40:55,0xjkl012...,25000,14,0.00035,8200
2025-09-17 10:45:30,0xmnq345...,30000,17,0.00051,11950
2025-09-17 10:52:44,0xprs678...,41000,16,0.000656,15380
2025-09-17 11:00:01,0xtuv901...,22000,19,0.000418,9800
2025-09-17 11:08:22,0xwxy234...,33000,21,0.000693,16200
2025-09-17 11:15:19,0xzab567...,27000,13,0.000351,8200
2025-09-17 11:22:40,0xcde890...,60000,22,0.00132,30500

Usage Example

Upload CSV export from STC Analytics
Adjust user input parameters (if needed)
Visualize on-chain vs off-chain comparison
Export charts and CSV report

🎯 Unique Selling Points

1️⃣ Multi-Chain Cost Comparison

Compare gas fees across Ethereum, Base, Polygon, Arbitrum, and Optimism in real-time. Find the cheapest chain for your transaction!

2️⃣ AI-Powered Smart Recommendations

Get intelligent insights based on your transaction patterns:

"For transactions > Rp 1M, blockchain is 40% cheaper"
"Gas price is high - consider Layer 2 or wait 4 hours"
"Your OTA commission is 20% - blockchain saves Rp 85,000/tx"

3️⃣ Time-Based Optimization

Historical analysis shows the best times to transact:

Best: 2-6 AM UTC (Asian night) - up to 40% savings
Worst: 1-6 PM UTC (US/EU peak) - most expensive
Track 24h, 7-day, and 30-day patterns

4️⃣ Business Scenario Modeling

Pre-built scenarios with ROI calculations:

🛒 E-Commerce (100 tx/day, Rp 250K avg)
✈️ Travel Booking (20 tx/day, Rp 5M avg, 20% OTA)
👥 P2P Transfer (50 tx/day, Rp 500K avg)

5️⃣ Live Gas Price Alerts

Browser notifications when gas drops below your threshold - never miss optimal transaction timing!

6️⃣ Regional Multi-Currency Analysis

Compare costs across 6 Southeast Asian countries with real exchange rates and regional fee structures.

7️⃣ Environmental Impact (ESG)

Track carbon footprint with real-world equivalents:

Trees needed to offset
Car driving distance equivalent
LED bulb hours powered
Smartphone charges

8️⃣ Developer-Friendly API

RESTful API with full documentation for integration into your own apps, bots, or research tools.

🛠️ Tech Stack

Frontend

Next.js 15.1 - React framework with App Router
React 19 - UI library with latest features
TypeScript 5.7 - Type-safe development
Tailwind CSS 3.4 - Utility-first styling
Recharts - Data visualization library
Lucide React - Beautiful icon system

Backend & APIs

Next.js API Routes - Serverless backend
CoinGecko API - ETH/USD pricing
Frankfurter API - Multi-currency exchange rates
Infura - Ethereum gas price data
Multi-chain RPC - Base, Polygon, Arbitrum, Optimism

UI Components

shadcn/ui - Accessible component library
Radix UI - Unstyled, accessible primitives
next-themes - Dark/light theme support
Framer Motion - Smooth animations

Utilities

jsPDF - PDF report generation
date-fns - Date manipulation
Zod - Runtime type validation

🚀 Getting Started

Prerequisites

Node.js 18.17 or later
npm or yarn or pnpm

Installation

Clone the repository

git clone https://github.com/mrbrightsides/gasx.git
cd stc-gasx

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev

Open in browser Navigate to http://localhost:3000

Environment Variables

No environment variables required! STC GasX uses public APIs with no authentication needed.

Optional: If you want to use your own Infura endpoint, create .env.local:

NEXT_PUBLIC_INFURA_ENDPOINT=https://sepolia.infura.io/v3/YOUR_KEY

📖 Usage

Quick Start Guide

1️⃣ Instant Cost Calculation

→ Go to "Kalkulator" tab
→ Enter transaction amount (e.g., Rp 500,000)
→ Select transaction type (Transfer, Swap, NFT, etc.)
→ Get instant comparison!

2️⃣ Multi-Chain Comparison

→ Go to "Multi-Chain" tab
→ See real-time gas prices across 5 blockchains
→ Click refresh for latest prices
→ Find the cheapest option!

3️⃣ Import Your Data

→ Go to "Data" tab
→ Upload CSV from STC Analytics
→ Or select a sample scenario
→ View analysis in Dashboard/Trends/Breakdown

4️⃣ Generate PDF Report

→ Go to "Export" tab
→ Click "Generate PDF Report"
→ Get professional academic-ready document

5️⃣ Set Gas Alerts

→ Go to "Alerts" tab
→ Set your threshold (e.g., 15 Gwei)
→ Enable browser notifications
→ Get alerted when gas drops!

CSV Format

Upload transaction data in this format:

Timestamp,Tx Hash,Gas Used,Gas Price (Gwei),Fee (ETH),Fee (Rp)
2025-09-17 10:21:05,0xabc123...,21000,15,0.000315,7400
2025-09-17 10:25:42,0xdef456...,48000,18,0.000864,20300

🏗️ Architecture

Application Structure

stc-gasx/
├── src/
│   ├── app/
│   │   ├── page.tsx              # Main dashboard
│   │   ├── layout.tsx            # Root layout with theme
│   │   └── api/
│   │       └── proxy/            # API proxy for external calls
│   ├── components/
│   │   ├── ui/                   # shadcn/ui components
│   │   ├── Header.tsx            # App header
│   │   ├── MarketDataPanel.tsx   # Real-time market data
│   │   ├── SummaryCards.tsx      # Dashboard summary
│   │   ├── CostComparisonChart.tsx
│   │   ├── GasTrendChart.tsx
│   │   ├── FeeBreakdownChart.tsx
│   │   ├── CostCalculator.tsx
│   │   ├── MultiChainComparison.tsx
│   │   ├── SmartRecommendations.tsx
│   │   ├── TimeBasedAnalysis.tsx
│   │   ├── ScenarioBuilder.tsx
│   │   ├── PDFExport.tsx
│   │   ├── GasAlerts.tsx
│   │   ├── ShareAnalysis.tsx
│   │   ├── APIDocumentation.tsx
│   │   ├── TransactionSimulator.tsx
│   │   ├── RegionalComparison.tsx
│   │   ├── CarbonFootprint.tsx
│   │   └── AboutApp.tsx
│   ├── lib/
│   │   └── utils.ts              # Utility functions
│   └── types/
│       └── index.ts              # TypeScript definitions
├── public/                        # Static assets
├── docs/                          # Documentation
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── README.md

Data Flow

┌─────────────────┐
│  External APIs  │
│  - CoinGecko    │
│  - Frankfurter  │
│  - Infura       │
│  - Chain RPCs   │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  API Proxy      │
│  /api/proxy     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  React State    │
│  Client-side    │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  UI Components  │
│  17 Modules     │
└─────────────────┘

🔌 API Documentation

STC GasX provides a RESTful API for developers to integrate cost comparison functionality into their own applications.

Base URL

https://your-domain.com/api

Endpoints

1. Get Multi-Chain Gas Prices

GET /api/gas-price

Response:

{
  "ethereum": { "gasPrice": 25.5, "timestamp": "2025-01-10T10:30:00Z" },
  "base": { "gasPrice": 0.05, "timestamp": "2025-01-10T10:30:00Z" },
  "polygon": { "gasPrice": 30.2, "timestamp": "2025-01-10T10:30:00Z" },
  "arbitrum": { "gasPrice": 0.1, "timestamp": "2025-01-10T10:30:00Z" },
  "optimism": { "gasPrice": 0.08, "timestamp": "2025-01-10T10:30:00Z" }
}

2. Get Exchange Rates

GET /api/exchange-rate

Response:

{
  "ethToUsd": 2450.50,
  "currencies": {
    "idr": 15650.25,
    "myr": 4.42,
    "thb": 33.15,
    "php": 56.30,
    "sgd": 1.34,
    "vnd": 24820.00
  },
  "timestamp": "2025-01-10T10:30:00Z"
}

3. Compare Transaction Costs

POST /api/compare
Content-Type: application/json

{
  "amount": 500000,
  "gasUsed": 21000,
  "gasPrice": 25,
  "bankFee": 6500,
  "otaCommission": 15,
  "adminFee": 25000
}

Response:

{
  "onChain": {
    "eth": 0.000525,
    "usd": 1.29,
    "idr": 20189
  },
  "offChain": {
    "total": 106500,
    "breakdown": {
      "bankFee": 6500,
      "otaCommission": 75000,
      "adminFee": 25000
    }
  },
  "comparison": {
    "cheaper": "onChain",
    "savings": 86311,
    "percentage": 81.04
  }
}

Rate Limits

100 requests per minute per IP address
No authentication required for public endpoints

📘 Full API Documentation: API_DOCS.md

🤝 Contributing

We welcome contributions from the community! Whether it's bug fixes, new features, documentation improvements, or translations.

How to Contribute

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Follow TypeScript strict mode
Use Tailwind CSS for styling
Write meaningful commit messages
Add tests for new features
Update documentation

📖 Contributing Guide: CONTRIBUTING.md

🎓 Research & Academic Use

STC GasX is designed with academic research in mind and is perfect for:

Dissertation Topics

✅ Web3 adoption barriers in emerging markets
✅ Cost-benefit analysis of blockchain technology
✅ Regional cryptocurrency adoption patterns
✅ Environmental impact of blockchain (ESG)
✅ Layer 2 scaling solutions effectiveness

Key Research Features

Multi-dimensional analysis (cost, time, region, environment)
Real-time data integration from authoritative sources
Academic-quality PDF exports with methodology
Statistical analysis with recommendations
Regional comparison across Southeast Asia
Reproducible results with shareable URLs

Citation

If you use STC GasX in your research, please cite:

@software{stc_gasx_2025,
  title = {STC GasX: Web3 Cost Comparator},
  author = {Akhmad Khudri},
  year = {2025},
  url = {https://github.com/mrbrightsides/gasx},
  note = {Comprehensive Web3 cost analysis platform}
}

🗺️ Roadmap

✅ Phase 1: Foundation (Completed)

Core cost comparison
Multi-chain support
CSV import/export
Dark/light theme

✅ Phase 2: Intelligence (Completed)

Smart recommendations
Time-based analysis
Scenario builder
PDF export

✅ Phase 3: Advanced (Completed)

🚧 Phase 4: Community (Coming Soon)

🔮 Phase 5: Scale (Future)

📊 Statistics

Project Metrics

17 Feature Modules - Complete analysis suite
23+ Custom Components - Reusable React components
8,000+ Lines of Code - Production-ready TypeScript
5 Blockchain Networks - Multi-chain support
6 Regional Currencies - Southeast Asia coverage
4 Export Formats - CSV, PNG, PDF, URL

Performance

311 kB - Optimized bundle size
< 2s - Initial page load
< 100ms - API response time
100% Lighthouse - Accessibility score
Zero Dependencies - No external auth required

📄 License

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

What this means:

✅ Commercial use allowed
✅ Modification allowed
✅ Distribution allowed
✅ Private use allowed
❌ Liability limitation
❌ Warranty disclaimer

🙏 Acknowledgments

Data Sources

CoinGecko - ETH pricing data
Frankfurter - Exchange rates API
Infura - Ethereum gas price data
Base - Layer 2 blockchain data
Polygon - Layer 2 scaling solution
Arbitrum - Optimistic rollup data
Optimism - Layer 2 protocol

Technologies

Next.js - React framework
Vercel - Hosting platform
Tailwind CSS - Styling framework
shadcn/ui - Component library
Recharts - Visualization library

Special Thanks

The Web3 community for inspiration
Open source contributors worldwide
Southeast Asian crypto enthusiasts
Academic researchers using this tool

📞 Contact & Links

🌐 Connect With Us

⭐ Star this repo if you find it useful!

Built with ❤️ for the Web3 Community

Making blockchain cost analysis accessible to everyone

🎯 Quick Links

Empowering informed decisions in the decentralized economy

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
API_DOCS.md		API_DOCS.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
QUICKSTART.md		QUICKSTART.md
README.md		README.md
USER_GUIDE.md		USER_GUIDE.md
app.py		app.py

License

mrbrightsides/gasx

Folders and files

Latest commit

History

Repository files navigation

⛽ STC GasX - Web3 Cost Comparator

🎯 Visualize • Compare • Optimize

📋 Table of Contents

🌟 Overview

🎓 Perfect for:

🌍 Regional Focus

✨ Key Features

🔥 17 Comprehensive Analysis Modules

📊 Core Analysis

💡 Smart Features

🚀 Advanced Tools

🌐 Accessibility

Key Features

Pipeline & Data Flow

Input

User Inputs

Process

Visualization

Output

Expected Schema (comparison dataset)

Authentication

Example Dataset

Usage Example

🎯 Unique Selling Points

1️⃣ Multi-Chain Cost Comparison

2️⃣ AI-Powered Smart Recommendations

3️⃣ Time-Based Optimization

4️⃣ Business Scenario Modeling

5️⃣ Live Gas Price Alerts

6️⃣ Regional Multi-Currency Analysis

7️⃣ Environmental Impact (ESG)

8️⃣ Developer-Friendly API

🛠️ Tech Stack

Frontend

Backend & APIs

UI Components

Utilities

🚀 Getting Started

Prerequisites

Installation

Environment Variables

📖 Usage

Quick Start Guide

1️⃣ Instant Cost Calculation

2️⃣ Multi-Chain Comparison

3️⃣ Import Your Data

4️⃣ Generate PDF Report

5️⃣ Set Gas Alerts

CSV Format

🏗️ Architecture

Application Structure

Data Flow

🔌 API Documentation

Base URL

Endpoints

1. Get Multi-Chain Gas Prices

2. Get Exchange Rates

3. Compare Transaction Costs

Rate Limits

🤝 Contributing

How to Contribute

Development Guidelines

🎓 Research & Academic Use

Dissertation Topics

Key Research Features

Citation

🗺️ Roadmap

✅ Phase 1: Foundation (Completed)

✅ Phase 2: Intelligence (Completed)

✅ Phase 3: Advanced (Completed)

🚧 Phase 4: Community (Coming Soon)

🔮 Phase 5: Scale (Future)

📊 Statistics

Project Metrics

Packages