Skip to main content

Architecture Overview

This document provides an overview of the OtcHub platform's architecture, detailing its various layers and their key integration points.

Smart Contract Layer​

  • OtcHub.sol: The primary OTC trading contract, implementing a dual collateral mechanism to secure trades.
  • MockERC20.sol: A test ERC20 token contract used for development and testing purposes.
  • Trade States: Trades progress through well-defined states: Open → Funded → Settled/Cancelled/Disputed.
  • Trade Directions: Supports both MakerSells (seller-initiated) and MakerBuys (buyer-initiated) trade directions.

Backend API Layer​

  • Express.js Server: Runs on port 3001, providing the core API services.
  • Prisma ORM: Utilized for seamless PostgreSQL database operations, abstracting raw SQL queries.
  • Blockchain Integration: Achieved using Viem for robust Web3 interactions, including transaction broadcasting and event monitoring.
  • Event Listener: A dedicated service listens for smart contract events to ensure backend data consistency with blockchain state.
  • JWT Authentication: Secure user authentication implemented with JSON Web Tokens (JWT) and bcrypt for password hashing.
  • Security Middleware: Includes rate limiting, Helmet for HTTP header security, and CORS for cross-origin resource sharing control.

Frontend Layer​

  • React 18 with TypeScript and Vite: Modern frontend stack for building a responsive and type-safe user interface.
  • Wagmi + RainbowKit: Essential libraries for Web3 wallet connections, enabling seamless interaction with blockchain networks.
  • React Query: Manages server state, caching, and data synchronization, enhancing performance and user experience.
  • React Router: Handles client-side navigation, providing a smooth single-page application experience.
  • Tailwind CSS: A utility-first CSS framework for rapid and consistent styling.
  • React Hook Form with Zod Validation: Streamlines form management and ensures data integrity through schema-based validation.

Key Integration Points​

  • Backend - Smart Contracts: The backend's BlockchainService actively listens to smart contract events, ensuring that off-chain data reflects the on-chain state.
  • Frontend - Backend API: Frontend components communicate with the backend via a REST API, utilizing endpoints like /api/auth, /api/offers, and /api/trades for data exchange.
  • Frontend - Smart Contracts: The frontend interacts directly with smart contracts using Wagmi hooks for operations such as creating trades, funding, and confirmations.
  • Database - Trade Metadata: The PostgreSQL database, managed by Prisma, stores essential trade metadata and user information, acting as the central data repository for the platform.