@velora-dex/widget

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

• Start with Quick Start Guide
• Follow the basic examples
• Customize with simple configuration options

For Advanced Users

• Read the User Guide for comprehensive features
• Check API Reference for detailed specifications
• Explore advanced integration patterns and customization

🛠️ Installation

# NPM
npm install @velora-dex/widget

# Yarn
yarn add @velora-dex/widget

# PNPM
pnpm add @velora-dex/widget

🔗 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! 🚀