The InvestInGas Frontend is a premium, institutional-grade terminal built with Next.js and Tailwind CSS. It provides a high-fidelity user interface for hedging against Ethereum gas price volatility using Uniswap v4 Hook-based gas positions.
- Institutional Dashboard: A terminal-style interface with a focus on "Tactical Alpha," featuring real-time state monitoring and institutional hedging signals.
- Interactive Notifications: Integrated Sonner toaster for real-time transaction feedback (Loading → Success/Error states).
- Real-time Gas Ticker: High-frequency feeds of gas prices across major EVM chains (Arbitrum, Base, Optimism, Sepolia).
- Position Management: Comprehensive portfolio view for monitoring and redeeming NFT-represented gas futures.
- Cross-Chain Settle: Seamlessly redeem gas positions for native ETH on any supported target chain via LI.FI integration.
app/dashboard/: The primary control plane for managing gas positions and analytics.app/dashboard/buy/: The specialized acquisition flow for securing new gas unit inventory.app/layout.tsx: Root layout with Sonner Toaster and global Providers.
components/dashboard/: Sophisticated UI for position management, terminal logs, and tactical alpha signals.components/ui/: Atomic design components optimized for wait-times and responsive interaction.GasTicker.tsx: The high-frequency price feed display with trend indicators.
useGasPrices.ts: Manages real-time price fetching and staleness logic via the Relayer.useGasFutures.ts: Core logic for position lifecycle (Signed EIP-712 intents for Gasless-like UX).
- Node.js v18+
- Yarn (Preferred)
- EIP-1193 compatible wallet (MetaMask, Rainbow, etc.)
# Install dependencies
yarn install
# Run the development server
yarn dev# Create an optimized build
yarn build
# Start production server
yarn start- Framework: Next.js 15+ (App Router, Turbopack)
- Styling: Tailwind CSS with custom glassmorphism utilities.
- Web3: Wagmi, Viem, RainbowKit
- Notifications: Sonner (Custom themed)
- Icons: React Icons (Ri library)
- Data Fetching: TanStack Query v5
- State Management: Zustand & React Context