VeloraDEX Widget Documentation

Welcome to the VeloraDEX Widget documentation! This directory contains comprehensive guides for integrating and using the VeloraDEX trading widget in your React applications.

📚 Documentation Overview

Quick Start Guide

Get up and running in under 5 minutes with basic installation and setup instructions.

Perfect for: Developers who want to quickly integrate the widget with minimal configuration.

User Guide

Comprehensive documentation covering all features, configuration options, and integration patterns.

Perfect for: Developers who need detailed information about customization and advanced features.

API Reference

Complete API documentation with type definitions, component props, and configuration interfaces.

Perfect for: Developers who need detailed technical specifications.

🚀 What is the VeloraDEX Widget?

The VeloraDEX Widget is a comprehensive React component that provides a complete decentralized exchange (DEX) trading interface. It enables users to:

• Swap tokens across multiple blockchain networks
• Bridge assets between different chains
• Connect wallets with multiple provider support
• Execute trades with optimal routing and best prices
• Manage cross-chain transactions seamlessly

⚡ Quick Example

import { Widget } from "@velora-dex/widget";

function App() {
  return (
    <Widget
      config={{
        theme: "light",
        enableDelta: true,
        partner: "your-partner-id",
        widgetMode: "dapp",
      }}
      provider={window.ethereum}
    />
  );
}

🎯 Key Features

• 🔄 Multi-chain Support - Trade across Ethereum, Polygon, Arbitrum, and more
• 🎨 Customizable Themes - Light/dark mode with automatic system detection
• 🔐 Wallet Integration - Support for 100+ wallets via Privy
• ⚡ Optimal Routing - Best price execution through Velora's routing engine
• 📱 Responsive Design - Works perfectly on desktop and mobile
• 🛡️ Type Safety - Full TypeScript support with comprehensive type definitions
• 🔧 Easy Integration - Drop-in component for any React application

📖 Documentation Structure

For Beginners

1. Start with Quick Start Guide
2. Follow the basic examples
3. Customize with simple configuration options

For Advanced Users

1. Read the User Guide for comprehensive features
2. Check API Reference for detailed specifications
3. Explore advanced integration patterns and customization

🛠️ Installation

# NPM
npm install @velora-dex/widget @tanstack/react-query

# Yarn
yarn add @velora-dex/widget @tanstack/react-query

# PNPM
pnpm add @velora-dex/widget @tanstack/react-query

🔗 Useful Links

• GitHub Repository: VeloraDEX/widget
• NPM Package: @velora-dex/widget
• Website: velora.xyz

💬 Community & Support

• Discord: Join our community
• Twitter: @VeloraDEX
• GitHub Issues: Report bugs or request features
• Documentation: docs.velora.xyz

Ready to get started? Jump into the Quick Start Guide and have your widget running in minutes! 🚀