XFlows API Demo

This is a XFlows API demonstration application built with Vite + React + TypeScript, showcasing the complete functionality of the Wanchain XFlows cross-chain swap protocol.

Features

Cross-chain Swapping

• Support for multi-chain asset cross-chain swapping
• 6 work modes: direct cross-chain, cross-chain then swap, swap only, etc.
• Real-time quote retrieval and slippage settings
• Smart path selection and fee calculation

Transaction Status Tracking

• Real-time transaction execution status queries
• Support for multi-chain transaction hash queries
• Detailed transaction information display
• Status code explanations and error handling

API Interface Explorer

• Complete XFlows API interface demonstration
• Query supported chains, tokens, bridges, and DEXes
• Real-time API calls and response display
• cURL command generation

Wallet Integration

• Support for MetaMask and other browser extension wallets
• Automatic wallet connection status detection
• Chain switching and token balance queries
• Transaction authorization and execution

Tech Stack

• Frontend Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• Web3: Viem + Native Ethereum API
• HTTP Client: Axios

Quick Start

Install Dependencies

npm install

Start Development Server

npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

Project Structure

src/
├── components/          # React Components
│   ├── WalletConnect.tsx    # Wallet connection component
│   ├── ChainSelector.tsx    # Chain selector
│   ├── TokenSelector.tsx    # Token selector
│   ├── SwapInterface.tsx    # Swap interface
│   ├── StatusTracker.tsx    # Status tracker
│   ├── ApiExplorer.tsx      # API explorer
│   └── Tabs.tsx            # Tab component
├── hooks/              # React Hooks
│   └── useWallet.ts        # Wallet hook
├── services/           # Service Layer
│   └── xflowsApi.ts        # XFlows API service
├── types/              # TypeScript Type Definitions
│   └── xflows.ts           # XFlows types
└── App.tsx             # Main application component

Usage Instructions

1. Connect Wallet: Click the "Connect Wallet" button in the top right corner
2. Select Chains and Tokens: Choose source chain, target chain, and corresponding tokens in the swap interface
3. Enter Amount: Input the amount of tokens to swap
4. Get Quote: Click "Get Quote" to view swap details
5. Execute Swap: Authorize tokens if needed, then execute the swap
6. Track Status: Enter transaction hash in the status query page to view progress

License

MIT License