OmniToken DApp - Cross-Chain Token Platform

A comprehensive decentralized application (DApp) for managing cross-chain fungible tokens built with React, TypeScript, and Web3 technologies. This platform enables seamless token transfers across multiple blockchain networks using LayerZero V2 OFT (Omnichain Fungible Token) standard.

🌟 Features

Cross-Chain Token Management: Transfer tokens seamlessly across Ethereum Sepolia, Optimism Sepolia, Arbitrum Sepolia, and Base Sepolia
Web3 Wallet Integration: Connect with popular wallets using RainbowKit
Real-Time Balance Tracking: Monitor token balances across all supported networks
Bridge Functionality: Intuitive interface for cross-chain token transfers
Token Purchase Interface: Buy tokens directly through the platform
Responsive Design: Modern UI built with shadcn/ui and Tailwind CSS
Dark Theme Support: Built-in dark mode with next-themes
Type-Safe Development: Full TypeScript support throughout the application

🏗️ Architecture

Frontend Stack

React 18 - Modern React with hooks and concurrent features
TypeScript - Type-safe development environment
Vite - Fast build tool and development server
Tailwind CSS - Utility-first CSS framework
shadcn/ui - High-quality, accessible UI components
React Router - Client-side routing

Web3 Integration

Wagmi - React hooks for Ethereum
RainbowKit - Wallet connection interface
Ethers.js - Ethereum library for blockchain interactions
Viem - TypeScript interface for Ethereum

Smart Contracts

LayerZero V2 OFT - Cross-chain token standard
Foundry - Smart contract development framework
OpenZeppelin - Secure smart contract libraries

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Git
A Web3 wallet (MetaMask, WalletConnect, etc.)
Test ETH on supported networks

Installation

Clone the repository

git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:8080

Smart Contract Setup

The project includes a complete smart contract setup in the contracts/ directory. See the Smart Contract Documentation for detailed deployment instructions.

📁 Project Structure

├── src/
│   ├── components/          # Reusable UI components
│   │   ├── ui/             # shadcn/ui components
│   │   ├── Navbar.tsx      # Navigation component
│   │   └── Footer.tsx      # Footer component
│   ├── pages/              # Application pages
│   │   ├── Index.tsx       # Home page
│   │   ├── Balance.tsx     # Balance tracking page
│   │   ├── Bridge.tsx      # Cross-chain bridge interface
│   │   ├── Buy.tsx         # Token purchase page
│   │   └── Documentation.tsx # Documentation page
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility libraries and configurations
│   │   └── wagmi.ts        # Wagmi configuration
│   ├── constants/          # Application constants
│   └── main.tsx           # Application entry point
├── contracts/              # Smart contract code (Foundry project)
│   ├── src/               # Solidity contracts
│   ├── script/            # Deployment scripts
│   ├── test/              # Contract tests
│   └── foundry.toml       # Foundry configuration
├── public/                # Static assets
└── package.json           # Project dependencies and scripts

🔧 Available Scripts

npm run dev - Start development server with hot reload
npm run build - Build production bundle
npm run build:dev - Build development bundle
npm run lint - Run ESLint for code quality
npm run preview - Preview production build locally

🌐 Supported Networks

Network	Chain ID	LayerZero Endpoint ID	Status
Ethereum Sepolia	11155111	40161	✅ Active
Optimism Sepolia	11155420	40232	✅ Active
Arbitrum Sepolia	421614	40231	✅ Active
Base Sepolia	84532	40245	✅ Active

🔗 Key Dependencies

Core Framework

React (^18.3.1) - UI library
TypeScript (^5.8.3) - Type safety
Vite (^5.4.19) - Build tool

Web3 & Blockchain

@rainbow-me/rainbowkit (^2.2.9) - Wallet connection
wagmi (^2.19.2) - React hooks for Ethereum
ethers (^6.15.0) - Ethereum library
viem (^2.38.6) - TypeScript Ethereum interface

UI & Styling

@radix-ui/react-* - Accessible UI primitives
tailwindcss (^3.4.17) - CSS framework
lucide-react (^0.462.0) - Icon library
next-themes (^0.3.0) - Theme management

State Management & Data Fetching

@tanstack/react-query (^5.90.7) - Server state management
react-hook-form (^7.61.1) - Form handling
zod (^3.25.76) - Schema validation

🎨 UI Components

The application uses shadcn/ui components built on top of Radix UI primitives:

Navigation: Responsive navbar with wallet connection
Forms: Type-safe forms with validation
Dialogs & Modals: Accessible overlay components
Data Display: Tables, cards, and charts for token information
Feedback: Toast notifications and loading states

🔐 Security Features

Type Safety: Full TypeScript coverage prevents runtime errors
Input Validation: Zod schemas for all user inputs
Secure Wallet Integration: Industry-standard wallet connection patterns
Smart Contract Security: OpenZeppelin libraries and LayerZero standards
Environment Variables: Secure configuration management

🚀 Deployment Options

Build the project: npm run build
Deploy the dist/ folder to your hosting provider
Configure environment variables for production

🛠️ Development Workflow

Local Development

Start the dev server: npm run dev
Make changes: Edit files in src/
Hot reload: Changes appear instantly in browser
Type checking: TypeScript provides real-time error checking

Code Quality

ESLint: Automated code quality checks
TypeScript: Compile-time error detection
Prettier: Code formatting (configured in editor)

Testing

Smart Contracts: Use Foundry for contract testing
Frontend: Add React Testing Library for component tests

🤝 Contributing

Development Setup

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Run linting: npm run lint
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

Code Style

Use TypeScript for all new code
Follow existing component patterns
Add proper type definitions
Include JSDoc comments for complex functions

📚 Additional Resources

🐛 Troubleshooting

Common Issues

Wallet Connection Issues

Ensure you're on a supported network
Check that your wallet has test ETH
Try refreshing the page and reconnecting

Build Errors

Clear node_modules: rm -rf node_modules && npm install
Check TypeScript errors: npx tsc --noEmit
Verify all dependencies are installed

Cross-Chain Transfer Issues

Ensure smart contracts are properly deployed
Check LayerZero message status on LayerZero Scan
Verify you have sufficient gas on both chains

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

UI components from shadcn/ui
Cross-chain functionality powered by LayerZero
Web3 integration via RainbowKit and Wagmi

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
contracts @ 5d7f4e0		contracts @ 5d7f4e0
public		public
src		src
.gitignore		.gitignore
.gitmodules		.gitmodules
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

rakibhossain72/omni-Token

Folders and files

Latest commit

History

Repository files navigation