Omniston DEX

A decentralized exchange (DEX) built with React and the Omniston SDK, enabling cross-DEX token swaps on the TON blockchain.

Features

• Cross-DEX Liquidity Aggregation: Access liquidity from multiple DEXs through a single interface
• Real-time Quote Fetching: Get best prices from multiple resolvers automatically
• Wallet Integration: Connect via TonConnect (supports Tonkeeper, TON Space, etc.)
• Trade Tracking: Monitor swap execution in real-time
• Modern UI: Clean, responsive interface with dark theme
• TypeScript: Full type safety throughout the application

Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Omniston SDK - DEX aggregation protocol
• TonConnect - Wallet connectivity
• TON Blockchain - Underlying blockchain

Getting Started

Prerequisites

• Node.js 18+ installed
• A TON wallet (Tonkeeper, TON Space, etc.)

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

Project Structure

omniston-dex/
├── src/
│   ├── components/          # React components
│   │   ├── QuoteDisplay.tsx # Display quote information
│   │   ├── SwapForm.tsx     # Main swap interface
│   │   ├── TokenSelect.tsx  # Token selection dropdown
│   │   ├── TradeTracker.tsx # Track swap execution
│   │   └── WalletButton.tsx # Wallet connection
│   ├── providers/           # Context providers
│   │   └── Providers.tsx    # TonConnect & Omniston setup
│   ├── types/               # TypeScript types
│   │   └── index.ts         # Token types and constants
│   ├── App.tsx              # Main app component
│   ├── main.tsx             # App entry point
│   ├── App.css              # Styles
│   └── index.css            # Base styles
├── public/
│   └── tonconnect-manifest.json # TonConnect configuration
└── vite.config.ts           # Vite configuration

How It Works

1. Connect Wallet: Click the wallet button to connect your TON wallet
2. Select Tokens: Choose the tokens you want to swap
3. Enter Amount: Input the amount you want to swap
4. Get Quote: The app automatically fetches the best quote from multiple sources
5. Execute Swap: Click swap to execute the transaction
6. Track Progress: Monitor your swap execution in real-time

Supported Tokens

The DEX currently supports popular TON tokens including:

• TON (Toncoin)
• USDT (Tether USD)
• STON (STON.fi token)
• SCALE

More tokens can be added in src/types/index.ts.

Configuration

TonConnect Manifest

Update public/tonconnect-manifest.json with your application details:

{
  "url": "https://your-domain.com",
  "name": "Your App Name",
  "iconUrl": "https://your-domain.com/icon.png"
}

Omniston API

The app connects to the Omniston WebSocket API at wss://omni-ws.ston.fi. This is configured in src/providers/Providers.tsx.

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Adding New Tokens

Edit src/types/index.ts and add tokens to the POPULAR_TOKENS array:

{
  address: 'TOKEN_ADDRESS',
  name: 'Token Name',
  symbol: 'SYMBOL',
  decimals: 9,
}

Resources

• Omniston Documentation: docs.ston.fi/developer-section/omniston
• Integration Guide: guide.ston.fi/en/how-to-integrate-omniston-into-your-react-app
• TonConnect: docs.ton.org/develop/dapps/ton-connect
• STON.fi: ston.fi

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.