1inchHunt
Swap to survive! An RPG where your hero levels up by completing real onchain swaps via 1inch.
Demo
About
**1inchHunt** is a comprehensive DeFi gaming application that leverages multiple 1inch APIs to create an immersive trading experience. The application combines real-time market data, limit order functionality, and gamification elements to provide users with a unique way to interact with DeFi protocols.
How it's made
🛠 How it's made We built SwapQuest using: Next.js 14 for frontend routing and structure Tailwind CSS + framer-motion for clean RPG-styled UI Wagmi + Viem for Web3 wallet interactions and transactions 1inch REST APIs to: Fetch real-time prices (Price Feed API) Show wallet token balances (Wallet Balance API) Get token data as in-game items (Token Metadata API) Trigger real swaps via Fusion+, Classic, or Limit Order (Swap API) Framer Motion for smooth grid-based character movement and level-up animations Emoji-based rendering for characters, enemies, and zones to keep it lightweight Custom key event handler to enable WASD or arrow-key movement in a grid-style RPG map We reused the Token Metadata and Wallet Balances to build a live inventory UI and track mission progress dynamically. Price data from 1inch was used to auto-generate smart quest objectives based on trending or volatile tokens. The hackiest part? Probably animating emoji characters across a grid using framer-motion while syncing Web3 state in real-time. Surprisingly fun. ## 1inch API ### **1. Real-Time Price Charts** - **API Used**: `https://api.1inch.dev/charts/v1.0/chart/line/{token0}/{token1}/{period}/{chainId}` - **Implementation**: Dynamic price charts with multiple timeframes (24H, 1W, 1M, 1Y, AllTime) - **Features**: - Live price updates - Interactive chart annotations - Start and current price displays - Price change calculations ### **2. Limit Order Management** - **API Used**: `https://api.1inch.dev/orderbook/v4.0/{chain}/address/{address}` - **Implementation**: Complete limit order creation, signing, and submission system - **Features**: - EIP-712 order signing - Real-time order status tracking - Order history management - Gas price optimization ### **3. Token Information & Portfolio** - **API Used**: `https://api.1inch.dev/token/v1.2/{chainId}/custom/{address}` - **Implementation**: Dynamic token data fetching and portfolio management - **Features**: - Real-time token prices - Token metadata (symbol, logo, decimals) - Portfolio value calculations - Multi-chain support ### **4. Gas Price Optimization** - **API Used**: `https://api.1inch.dev/gas-price/v1.4/1` - **Implementation**: Real-time gas price monitoring for optimal transaction timing - **Features**: - Live gas price updates - Transaction cost estimation - Gas optimization recommendations ## 🏗️ **Technical Architecture** ### **Frontend (Next.js + React)** - **Framework**: Next.js with TypeScript - **Styling**: Tailwind CSS with custom animations - **State Management**: React hooks with localStorage persistence - **Wallet Integration**: Wagmi + RainbowKit for Ethereum connectivity ### **Backend (Next.js API Routes)** - **API Routes**: `/api/charts/price`, `/api/limit-orders/*`, `/api/token-info` - **Authentication**: 1inch API key management - **Data Processing**: Real-time data transformation and caching ### **Key Components** - **ChartPrice**: Real-time price visualization - **LimitOrders**: Order management interface - **TokenSelector**: Dynamic token selection - **GasPrice**: Live gas monitoring - **MissionProgress**: Gamification tracking ## 🎮 **Gamification Features** ### **Mission System** - **Swap Mission**: Basic token swapping with XP rewards - **Advanced Swap**: Complex trading strategies - **Limit Order Mission**: Order creation and management - **Share Mission**: Social media integration ### **Progression System** - **Experience Points**: Earned through trading activities - **Level System**: 500 XP per level progression - **Character Customization**: Avatar and name selection - **Achievement Tracking**: Mission completion rewards