Skip to content

replit.md

Latest commit

 

History

History
110 lines (85 loc) · 4.85 KB

replit.md

File metadata and controls

110 lines (85 loc) · 4.85 KB

FIO Handle Resolver - Replit.md

Overview

This is a React-based web application that allows users to resolve FIO (Foundation for Interwallet Operability) handles to cryptocurrency wallet addresses and generate scannable QR codes. The application provides a clean, modern interface for converting FIO handles (formatted as name@domain) into specific blockchain addresses for various cryptocurrencies.

System Architecture

The application follows a full-stack architecture with clear separation between frontend and backend components:

  • Frontend: React application with TypeScript, built using Vite
  • Backend: Express.js server with TypeScript support
  • Database: PostgreSQL with Drizzle ORM (configured but minimal implementation)
  • UI Framework: shadcn/ui components with Tailwind CSS
  • State Management: TanStack Query for server state management
  • Routing: Wouter for client-side routing

Key Components

Frontend Architecture

  • React 18 with TypeScript for type safety
  • Vite as the build tool and development server
  • Tailwind CSS for styling with a custom design system
  • shadcn/ui component library for consistent UI elements
  • TanStack Query for API state management and caching
  • Wouter for lightweight client-side routing

Backend Architecture

  • Express.js server with TypeScript
  • Modular routing system with separate route handlers
  • In-memory storage implementation with interface for easy database migration
  • Error handling middleware for consistent API responses

Database Layer

  • Drizzle ORM configured for PostgreSQL
  • Schema-first approach with TypeScript types
  • Migration system ready for database schema changes
  • Currently uses in-memory storage with interface for easy PostgreSQL integration

UI Components

  • Comprehensive component library including forms, dialogs, cards, and utilities
  • Accessibility-first design using Radix UI primitives
  • Responsive design with mobile-first approach
  • Dark mode support built into the design system

Data Flow

  1. User Input: Users enter FIO handles in the format name@domain
  2. API Resolution: Frontend calls FIO API to resolve handles to wallet addresses
  3. QR Code Generation: Resolved addresses are converted to QR codes using client-side generation
  4. Display & Actions: Users can view, copy, download, or share the generated QR codes

FIO API Integration

  • Direct integration with FIO mainnet API (fio.eosusa.io)
  • Support for 38+ blockchain networks including Bitcoin, Ethereum, Solana, Cardano, Polkadot, Avalanche, Polygon, and many more
  • Added support for privacy coins and alternative cryptocurrencies: Zano, PIVX, eCash
  • Native tokens set as defaults for each network (BTC for Bitcoin, ETH for Ethereum, etc.)
  • Comprehensive token support including stablecoins (USDT, USDC) for applicable networks
  • Error handling for invalid handles and network issues
  • Working examples: vitalik@safu (ETH), tempo@edge (SOL)

External Dependencies

Core Dependencies

  • @neondatabase/serverless: PostgreSQL client for serverless environments
  • drizzle-orm: Type-safe ORM for database operations
  • @tanstack/react-query: Server state management
  • wouter: Lightweight React router

UI Dependencies

  • @radix-ui/*: Accessible component primitives
  • tailwindcss: Utility-first CSS framework
  • class-variance-authority: Type-safe styling variants
  • lucide-react: Icon library

Development Dependencies

  • vite: Build tool and development server
  • typescript: Type checking and compilation
  • tsx: TypeScript execution for development

Deployment Strategy

Build Process

  • Client build: Vite builds the React application to dist/public
  • Server build: esbuild bundles the Express server to dist/index.js
  • Production mode: Serves static files and API endpoints from single process

Environment Configuration

  • DATABASE_URL: PostgreSQL connection string (required for production)
  • NODE_ENV: Environment flag for development/production modes
  • Development: Uses Vite dev server with HMR
  • Production: Serves built assets through Express

Replit-Specific Features

  • Runtime error overlay for development debugging
  • Cartographer plugin for enhanced development experience
  • Development banner for external access

Changelog

Changelog:

  • June 29, 2025. Initial setup
  • June 29, 2025. Fixed QR code generation and optimized for mobile devices with new clean UI design
  • June 29, 2025. Expanded blockchain support to 35+ networks with native tokens as defaults
  • July 4, 2025. Added support for Zano, PIVX, and eCash networks (38+ total networks)
  • July 4, 2025. Simplified UI by removing token selection field - now automatically uses native token for each network

User Preferences

Preferred communication style: Simple, everyday language.