Feat/gateway app #556
Draft
Feat/gateway app #556
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updated all CLMM operations to use PancakeswapSolConfig.config.slippagePct as default - Fixed quote-position schema to show correct default (10) in Swagger UI instead of hardcoded 1 - Operations affected: quote-swap, quote-position, open-position, add-liquidity - Added app-docs with Gateway App plans and UI mockups 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Created full-stack desktop app with Portfolio, Swap, Pools, and Liquidity views - Built with Tauri v2, React 18, TypeScript, Vite, and TailwindCSS v4 - Implemented simple API client (~30 lines) using fetch for Gateway API calls - Created AppContext for global state (wallet, network, chain selection) - Added shadcn/ui components (Button, Card, Tabs, Input, Select) - Portfolio View: displays wallet balances and LP positions - Swap View: supports router-based swaps (Jupiter, 0x, Uniswap) - Pools View: search and save liquidity pools - Liquidity View: manage CLMM/AMM positions - Updated app-docs with revised tab order (Portfolio → Swap → Pools → Liquidity) - Configuration sharing: app reuses conf/ folder from Gateway server - KISS architecture: no complex state libraries, direct schema imports Testing: - Gateway server running on localhost:15888 ✓ - App dev server running on localhost:1420 ✓ - API connectivity verified ✓ - Build succeeded ✓ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Renamed "Portfolio View" to "Wallet View" in 01-portfolio-view.md - Updated all navigation tabs across docs: Portfolio → Wallet, Config → Configs - Changed sub-tab in Wallet view: Wallet → Tokens - Updated ASCII diagrams to reflect current UI structure - Ensured consistency across all view documentation files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Frontend (gateway-app/): - Renamed Portfolio → Wallet, Config → Configs, Wallet tab → Tokens - Added theme toggle with light/dark mode support - Implemented ConfigView with namespace sidebar (Server, RPC Providers, Chains, Networks, Connectors) - Added WalletSelector with chain grouping and icons (◎ for Solana, ⟠ for Ethereum) - Added AddWalletModal for adding new wallets - Flattened cache object editing for helius/infura configs - Auto-switch to default network when changing chains - Theme persistence via localStorage Backend (src/): - Added defaultNetwork field to /config/chains endpoint - Changed chain order to return Solana first, then Ethereum - Updated getChains route to include default network from config Dependencies: - Updated gateway-app dependencies (React, TailwindCSS, shadcn/ui) - Configured TailwindCSS for dark mode support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Resolved conflict in pancakeswap-sol/clmm-routes/quoteSwap.ts - Kept latest slippagePct handling without fallback - Includes wrap/unwrap endpoints for Solana and Ethereum - Test files for wrap/unwrap routes removed (were failing)
- Removed Pools and Liquidity tabs from main navigation - Removed LP Positions tab from Wallet view - Cleaned up unused imports (PoolsView, LiquidityView) - Streamlined PortfolioView to show only Token Balances
…ctionality - Display all tokens from network's token list in Wallet view - Show actual balances for tokens with non-zero amounts, '0' for others - Add 'Add Token' button in Token Balances header - Create AddTokenModal component (similar to AddWalletModal) - Modal allows selecting chain, network, and entering token address - Calls POST /tokens/save to add new tokens to the list - Auto-refreshes token list after adding new token - Fetches available networks from /config/chains API
- Remove Total Holdings card - Remove Value column from balances table - Rename 'Token Balances' to 'Balances' - Show only Asset and Balance columns
- Add tokens from balances response that aren't in token list - Ensures native tokens (ETH, SOL) are displayed even if not in token list - Update handleWalletChange to properly set network when switching chains
- Native token always displayed first with balance from balances endpoint - Token list displayed after native token - Balances endpoint always returns native currency symbol
- Filter out native token from token list to avoid showing it twice - Native token always shown first, then other tokens from list
- Add clickable links to token symbols with addresses - Links open in new tab to solscan.io token page - Native token (no address) displays as plain text
…bot/gateway into feat/gateway-app
- Add delete token functionality with hover-to-show delete button - Add confirmation modal for token deletion - Show token name column in balances table - Integrate Tauri notifications for desktop app - Add react-hot-toast for browser notifications with bottom-center positioning - Include token symbols in success notifications - Fix token save endpoint to use correct route format (POST /tokens/save/:address) - Fix chain-network parameter format (ethereum-mainnet instead of eth-mainnet) - Add CORS configuration to Gateway server with preflight support - Replace all alert() calls with proper notification system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Redesign ConfigView with table layout matching Balances view - Add inline editing with hover-to-show pencil icon - Show checkmark/X icons for save/cancel actions - Right-align values and edit inputs for better layout - Add toast notifications for config update success/error - Use POST /config/update for single config updates - Dynamically build chain sections from /config/chains API - Show full chain-network names in sidebar and network selector - Remove hardcoded chain lists, use API data instead - Organize sidebar: Server, RPC Providers, Chains (dynamic), Connectors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add optional API key authentication to secure Gateway API when running in production mode with remote clients. Gateway changes: - Add apiKeys configuration to server.yml and server-schema.json - Implement API key validation middleware in app.ts - Validate X-API-Key header for all requests when keys configured - Skip authentication in dev mode (--dev flag or GATEWAY_TEST_MODE=dev) - Log warning when running production mode without API keys - Add X-API-Key to CORS allowedHeaders Gateway-app changes: - Make Gateway URL configurable via VITE_GATEWAY_URL env var - Add API key support via VITE_GATEWAY_API_KEY env var - Update api.ts to include X-API-Key header when configured - Create .env.example with configuration template - Add vite-env.d.ts for TypeScript environment variable types Authentication behavior: - Dev mode: No authentication required - Production with apiKeys: Requires valid X-API-Key header - Production without apiKeys: Warning logged, no authentication Testing: - Add comprehensive test suite for API key configuration - Verify dev mode works without API keys - Validate schema accepts empty and populated apiKeys arrays Documentation: - Create API_KEY_AUTHENTICATION.md with complete setup guide - Document key generation, configuration, and testing - Include security best practices and troubleshooting 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…pport Replace hardcoded mTLS requirement with configurable authentication to support both traditional Hummingbot (client certificates) and browser-based clients (API key). Gateway changes: - Add useCerts config (default: false) to toggle between cert and API key auth - Add allowedOrigins config for CORS support - Add sample API key to default template for easy setup - Disable client cert requirement when useCerts is false - Update HTTPS options to use useCerts configuration - Log appropriate auth method on startup Gateway-app changes: - Install and configure @tauri-apps/plugin-http - Use Tauri's fetch with acceptInvalidCerts for self-signed certificates - Add HTTP plugin scope for localhost Gateway URLs - Update default Gateway URL to HTTPS Configuration structure: - useCerts: false (API key auth, no client certs needed) - useCerts: true (traditional mTLS with client certificates) - apiKeys: list of valid API keys (only used when useCerts is false) - allowedOrigins: CORS origins for browser clients This maintains backward compatibility - existing Hummingbot users can set useCerts: true to continue using client certificates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove apiKeys from server.yml config to prevent exposure through the editable config API. API keys are now managed via GATEWAY_API_KEYS environment variable for better security. Changes: - Remove apiKeys from server.yml template and schema - Read API keys from GATEWAY_API_KEYS env var (comma-separated) - Update documentation to use environment variable - Add usage instructions for multiple keys Usage: export GATEWAY_API_KEYS=key1,key2,key3 GATEWAY_API_KEYS=mykey pnpm start --passphrase=a This prevents API keys from being readable/editable via the /config API while maintaining support for multiple keys per instance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove standalone API_KEY_AUTHENTICATION.md and integrate authentication documentation into main README.md and gateway-app/README.md for better discoverability. Changes: - Remove docs/API_KEY_AUTHENTICATION.md - Add Authentication section to main README.md with both auth methods - Update gateway-app/README.md with setup and auth instructions - Document environment variables and usage for both Gateway and app Authentication methods documented: - API Key (default, useCerts: false): via GATEWAY_API_KEYS env var - Client Certificates (useCerts: true): traditional mTLS for Hummingbot 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…d certs This commit adds full Tauri HTTP plugin support to enable the desktop app to connect to Gateway's HTTPS server with self-signed certificates. Changes: - Add tauri-plugin-http with dangerous-settings feature to Cargo.toml - Initialize HTTP plugin in Rust code (lib.rs) - Configure HTTP permissions in capabilities files - Create http.json capabilities for localhost:15888 URL scope - Update api.ts to use Tauri fetch with acceptInvalidCerts option - Update app identifier to io.hummingbot.gateway - Add comprehensive dev and production build docs to README The app now works in both dev mode (pnpm tauri dev) and production builds, with API key authentication and automatic SSL certificate acceptance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Major improvements to the swap interface: - Redesign layout: wider card (max-w-2xl), start at top like other pages - Token selection: dropdowns with all available tokens from network - Balance display: show token balance with Max button to fill amount - Token list: reuse shared getSelectableTokenList utility (native first, no duplicates) - Quote details: display comprehensive swap info (amounts, price, slippage, route hops, quote ID) - Swap direction: clickable arrow button to reverse from/to tokens - Toast notifications: show pending (⏳), success (✅ with txHash), and error states - Auto-fetch balances when wallet/network changes Shared utility: - Create getSelectableTokenList() in utils.ts for consistent token ordering - Works for both Ethereum (ETH not in list) and Solana (SOL in list) - Update PortfolioView to use shared utility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Move navigation from top tabs to bottom navbar for better mobile UX - Make header responsive with wallet selector positioning - Add responsive ConfigView with mobile dropdown and desktop sidebar - Make config table responsive with horizontal scrolling on small screens - Add responsive text sizes and input widths throughout - Optimize padding and spacing for mobile viewports 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace dropdown selectors with icon buttons on mobile (< 640px) - Add globe icon for network selection - Add wallet icon for wallet selection - Create bottom-sheet style modals for network and wallet selection - Keep full dropdowns on desktop for better UX - Change toast position from bottom-center to top-center - Maintain truncated wallet addresses in mobile modal - Add "Add Wallet" option in wallet selection modal 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Move wallet icon before network icon in mobile navbar - Change wallet icon from wallet to key icon for better clarity - Change network icon from globe to satellite icon - Maintain consistent order across mobile and desktop views 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Change network icon from satellite to satellite dish for better clarity - Rename bottom navigation from "Wallet" to "Portfolio" - Improve visual consistency and user understanding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Create reusable NetworkStatus component - Show green/red dot based on block number status - Display current block number next to status dot - Click status to open modal with detailed chain information - Auto-fetch status when network changes - Show loading state with yellow pulsing dot - Display: chain, network, block number, RPC URL, provider, swap provider - Add refresh button to update status - Position indicator next to Gateway title in navbar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Backend (Tauri): - Add read_app_config and write_app_config commands - Store config in app config directory (app-config.json) - Return default config if file doesn't exist Frontend: - Create app-config.ts helper library for Tauri integration - Add "app" namespace to config system - Handle "app" namespace specially (local file vs Gateway API) - Rename "Server" section to "Gateway" with "app" and "server" subsections - Update AppContext to load/save theme from app config file - Theme persists across app restarts - Config UI feels identical for both app and server configs Features: - Users can now configure app settings in Config sidebar - Theme preference stored in local JSON file - Foundation for future UI customization (colors, etc.) - Seamless UX - app config looks like server config 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add responsive design to quote cards - On mobile (< md breakpoint): show only router name and price - On desktop (>= md): show all metrics (You Pay, You Receive, Price Impact)
- Add truncate class to price number to handle long values - Reduce text size on mobile: price from text-2xl to text-lg - Reduce gaps between elements on mobile (gap-2 vs gap-6) - Add flex-shrink-0 to prevent router name and label compression - Add overflow-hidden to price container for proper truncation
- Show selectedQuote's amountOut in the To token input after quotes are fetched - Display amount with 4 decimal places - Updates automatically when user selects a different quote
- Remove disabled prop from To token input to allow user selection - Add handleToTokenChange function to clear quotes when To token changes - Ensures quotes are regenerated with new token pair when user changes destination token
- Add handleAmountChange and handleFromTokenChange to clear quotes when inputs change - Update handleMaxClick to also clear quotes when MAX is clicked - Change button text from 'Execute Quote' to 'Execute Swap' - Ensures users always re-fetch quotes after changing swap parameters
- Replace Badge components with plain text spans in sidebar pool list - Replace Badge components with plain text in pool details header - Use text-muted-foreground for connector type and fee percentage - Cleaner, less cluttered appearance
…tep as badges - Changed connector/type (Meteora CLMM) from Badge to plain span in sidebar - Changed connector/type from Badge to plain span in pool details header - Kept feePct as Badge (outline variant in sidebar, default in header) - Kept binStep as Badge (secondary variant) - Removed muted text color from connector/type text
- Moved Pool Details button next to View on DEX button for better spacing - Repositioned zoom controls above chart to prevent obstruction by bars - Aligned zoom controls to the right for better visual hierarchy
…stency - Add NetworkSelector component following Dialog/Drawer pattern - Update WalletSelector with Close button in DrawerFooter - Replace custom modals in App.tsx with shadcn/ui components - Remove 97 lines of custom modal code - Standardize all modals with consistent Close button design - Enable click-outside-to-close for all modals - Replace hand-rolled icons with lucide-react throughout app - Add toggle-group component for router selection - Use Route icon for router toggles with accent border styling - Align quote card price display - Fix pool metadata layout with separator 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Updated WalletSelector and NetworkSelector to use lucide-react icons - Mobile: Show icon-only buttons (Wallet and Network icons) matching NetworkStatus/LogsSheet pattern - Desktop: Keep full-width buttons with text - Consistent button styling: variant="ghost" size="icon" h-10 w-10 - Icon sizing: h-5 w-5 for all navbar icons - Fixes mobile navbar overflow issue 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…oint The unified /trading/swap/quote endpoint was failing with 500 error for Ethereum networks because it was passing empty string for walletAddress parameter to router quote functions. Router-based swap providers (Uniswap, PancakeSwap) require a valid wallet address to generate quotes with the Universal Router, even for quote-only operations (no transaction execution). Changes: - Import and call getEthereumChainConfig() to get default wallet address - Pass defaultWallet to uniswapRouterQuoteSwap() instead of empty string - Pass defaultWallet to pancakeswapRouterQuoteSwap() instead of empty string This aligns the unified endpoint behavior with connector-specific endpoints which already use the default wallet from chain config. Fixes the issue where: GET /trading/swap/quote?chainNetwork=ethereum-base&connector=uniswap/router&... was returning 500 error with "invalid address" message, while: GET /connectors/uniswap/router/quote-swap?network=base&... was working correctly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Changed the Add Token button alignment from right-justified to left-justified below the token table for better UX consistency. Changes: - Modified flex justification from justify-end to justify-start - Button now appears on the left side below the table 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add mobile filter controls with collapsible sections for both Transactions and Pools - Reorganize desktop sidebar with clear sections (Fetch, Filter, Transactions) - Auto-select first matched transaction on load - Rename "Hide Unmatched" to "Hide Unknown" - Apply muted text styling to unknown transactions - Add spacing above transaction list - Optimize transaction parsing to avoid re-parsing cached results Backend improvements: - Fix transaction error handling to return 503 instead of 200 with empty data - Include detailed error messages from Etherscan API result field - Change Solana transaction errors to serviceUnavailable status 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…rer link - Add wallet address card to Portfolio view with truncated address display - Create Solana and Ethereum SVG icon components for chain identification - Add "View on Explorer" button linking to block explorer (Solscan/Etherscan) - Update WalletSelector to use SVG icons instead of text characters - Improve icon sizing: w-6 h-6 for Portfolio heading, w-5 h-5 for WalletSelector - Match address truncation format across Portfolio and WalletSelector components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update theme names to align with corresponding DEX protocols: - Sunset Orange → Meteora Orange - Forest Green → Jupiter Green - Neon Pink → Uniswap Pink 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…igation Update mobile navigation to display chain-specific icons instead of generic wallet icon: - Portfolio tab: Shows Solana or Ethereum icon based on selected chain - Wallet selector: Shows chain icon in mobile view header - Increases icon size from h-5 to h-6 for better visibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Implement pool info caching to reduce API calls: - Create pool-cache.ts with LRU cache (max: 200, TTL: 2 minutes) - Cache key format: chain:network:connector:address - Integrate cache into PoolsView for pool-info endpoint - Fix TypeScript errors in PortfolioView (remove parseFloat on number types) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Replace default Tauri icons with Hummingbot logo (logo-bw-dark-square.png): - Generated all icon formats using Tauri CLI (PNG, ICNS, ICO) - Updated desktop app icons for macOS, Windows, and Linux - Updated mobile icons for Android and iOS - Updated Windows Store logos 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Change hover background from accent/50 to full accent color: - Token table rows in Portfolio view - Position table rows in Portfolio view - Add Position collapsible header in Pools view Provides more visible hover feedback for interactive elements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Change all bottom navigation tabs hover state from hover:text-foreground to hover:text-accent: - Portfolio tab - Swap tab - Pools tab - Transactions tab - Config tab Provides consistent accent color feedback on hover. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Reduce lightness values for Solana Purple theme accent colors: - accent: 169 100% 65% → 169 100% 45% - accentDark: 169 100% 55% → 169 100% 40% Makes the accent color less bright and more visually comfortable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update gateway-app README to distinguish between development and production modes: - Development mode: HTTP, no API key required - Production mode: HTTPS, API key authentication required - Emphasize VITE_GATEWAY_URL protocol must match Gateway server's conf/server.yml - Reorganize Setup and Authentication sections for clarity 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Before submitting this PR, please make sure:
A description of the changes proposed in the pull request:
Tests performed by the developer:
Tips for QA testing: