Skip to Content
Welcome to RitoSwap's documentation!
Overview

Welcome to RitoSwap Docs

A Full-Stack Multichain dApp Showcase

RitoSwap represents a comprehensive vision of the modern decentralized application experience, delivering a smooth and stylish end-to-end multichain system with token trading, minting, burning, token-gating, portfolio viewing, and crypto-themed music.

View Live Page

Here’s a faucet for free testnet Ether to try out the Sepolia dApp with.

Project Overview

RitoSwap is a Blade Runner-inspired multichain dApp that showcases the integration of multiple blockchain technologies and modern web development practices. The project demonstrates professional-grade implementation across smart contracts, blockchain infrastructure, frontend development, and comprehensive documentation.

GitHub Repository: https://github.com/ritovision/ritoswap

Core Features

The platform delivers several key functionalities that demonstrate the breadth of modern dApp capabilities:

Blockchain Integration: The system provides fully on-chain NFT minting with algorithmically randomized colors, implementing a burn-to-reset identity system through hybrid blockchain and Prisma infrastructure. Token-gated access controls exclusive content through secure Sign-In with Ethereum (SIWE) authentication.

Multi-Chain Capabilities: Users can view their portfolio across multiple EVM chains through Alchemy API integration, while cross-chain token trading is enabled through the embedded Rango widget. The infrastructure supports Ethereum, Sepolia, Polygon, Arbitrum, Avalanche, Base, Optimism, Fantom, and local blockchain deployments.

Security and Testing: The smart contracts undergo robust testing and security analysis using Mocha, Slither, Mythril, and Echidna. The implementation prioritizes security through proven OpenZeppelin foundations with minimal custom logic additions.

User Experience: The interface features Blade Runner-inspired UI design with mobile-optimized wallet UX, custom WalletConnect session management for automatic mobile wallet opening, real-time information updates for both on-chain and backend data, and token-aware, stateful UI with color-coded visuals. The experience is enhanced with embedded crypto-themed music throughout the platform.

Technology Stack

This TypeScript-first codebase leverages modern development tools and frameworks across all layers of the stack.

Frontend Technologies

The frontend is built with Next.js as the core framework, utilizing Wagmi and Tanstack Query for blockchain interactions, Zustand for state management, and Framer Motion for animations. The audio experience is powered by Howler, while documentation uses Nextra. Progressive Web App functionality is enabled through Next-PWA, complemented by custom wallet UI components, portfolio viewer interfaces, and mobile deeplinking implementations.

Backend Infrastructure

The backend leverages PostgreSQL with Prisma ORM for database management, Redis for caching and rate limiting, Cloudflare R2 for object storage, and Brevo for SMTP email services. The deployment infrastructure includes Vercel for serverless functions and middleware, Cloudflare Workers for edge computing, and SIWE for secure authentication.

Blockchain Components

The blockchain layer includes Geth Node running in Docker for local development, Blockscout explorer for transaction inspection, integration with Alchemy API for multi-chain data, and connections to public RPC endpoints. Smart contracts implement the ERC-721 standard using Hardhat for development, with security analysis through Echidna, Slither, and Mythril. The contracts interface with both Ethers.js and Viem libraries, with comprehensive testing using Mocha.

Workspace Architecture

    • package.json
    • pnpm-workspace.yaml
    • .changeset/

The monorepo contains five workspaces, including the root workspace that serves as the entry point for pnpm, changesets scripts, CI workflows, and shared configuration.

Diagram of 4 workspaces

Workspace Descriptions

Local Blockchain & Block Explorer (/local-blockchain): Creates a live blockchain environment for deploying smart contracts locally and connecting the dApp. This workspace provides a complete Ethereum Proof of Authority setup with Geth and Blockscout explorer.


Geth and Blockscout

Smart Contract & Security Tests (/colored-keys): Contains the ERC-721 smart contract implementation with comprehensive testing and security analysis tools. This workspace handles compilation, testing, deployment, and interaction with the Colored Keys NFT contract.


Color Keys Smart Contract Diagram

Decentralized Application (/dapp): The main user-facing application showcasing dApp features for interacting with smart contracts, cross-chain token trading, portfolio viewing, and crypto music integration. This workspace implements the complete frontend and backend infrastructure.


RitoSwap Cover

Documentation (/docs): Comprehensive documentation built with Nextra 4, detailing the architecture, setup, and usage of each workspace component. This docs site is that workspace deployed.

Current Versions

The following table displays the current version of each workspace in the monorepo:

WorkspaceVersionDescription
Root1.0.0Monorepo configuration and shared tooling
Local Blockchain0.2.0Docker-based Ethereum PoA environment
Colored Keys0.2.0ERC-721 smart contract implementation
DApp0.2.0Full-stack decentralized application
Documentation0.2.0Nextra-based documentation site

System Requirements

To build and run this project locally, your development environment requires Node.js version 20.18.1 or higher (recommended minimum) and Docker Engine through Docker Desktop on macOS/Windows or Docker Engine on Linux with the latest stable release.

⚠️

Critical: Use pnpm, not npm

This project is a monorepo with four separate workspaces built specifically for pnpm. Using npm will almost certainly lead to dependency conflicts due to its hoisting behavior. While Yarn might work, this repository is built, tested, and maintained exclusively with pnpm.

Getting Started

Each workspace provides specific functionality that can be explored independently or integrated as part of the complete RitoSwap ecosystem. The documentation for each workspace includes detailed setup instructions, configuration guides, and implementation details.

About the Project

Creator and Vision

At least initially and currently, RitoSwap was conceived and built end-to-end by Rito, also known by his music alias Rito Rhymes, with assistance from AI models including Claude and ChatGPT. The project serves as a comprehensive showcase of multi-disciplinary expertise across product development, brand management, UX design, and technology integration.

Rito standing in red suit in neon lit futuristic background

Rito serves as Chief Integration Officer through RitoVision, his hybrid studio and consultancy. This project demonstrates the harmonious integration of multiple roles including full-stack engineering, UX design, product strategy, brand management, music production, and creative direction.

Red RitoVision logo

With a Master’s in Human-Computer Interaction and over a decade of experience leading startups and building digital products, Rito brings deep expertise in connecting disciplines to solve complex business challenges. His work has garnered significant media attention, with features in The New York Times, ScreenRant, and U.Today, along with profile interviews on NYC’s flagship 77 WABC radio and Stockhead magazine. His portfolio includes co-authoring blockchain standards with William Entriken (architect of ERC-721 NFTs), designing wearable technology showcased by celebrity fashion designers, leveraging global press coverage to drive patches in the multi-billion-dollar Call of Duty franchise, and spearheading end-to-end platform development for high-profile clients.

License and Usage

The source code is licensed under the MIT License. However, trademarks including Rito Rhymes, RitoVision, and all associated branding, images, logos, and music remain privately owned. Use of these brand assets is not granted under the open source license.

Support and Resources

For technical questions and implementation details, consult the comprehensive documentation for each workspace. For questions about the project, its architecture, or potential collaboration opportunities with Rito including fractional services, visit RitoVision.

Explore the Documentation

Ready to dive deeper into the technical implementation? Start with any of the workspace documentation sections to understand the architecture, configuration, and deployment processes that power RitoSwap.