Swap Converter

Installation

dedevsshadcn

npx dedevs-ui@latest add defi-swap

Features

• Simple Converter: Minimal, focused swap experience
• Token Selection: Professional dropdown with token icons and symbols
• Live Conversion: Instant rate calculation with formatted values
• Balance Context: Optional balance hints for clarity
• Sleek Design: Modern card, subtle gradients, dark mode ready
• Accessible: Keyboard navigation and screen reader labels

Examples

Basic Usage

This basic example showcases a clean, focused converter ideal for most swap flows.

Component Structure

The Converter component includes:

• From/To Fields: Token selectors and amount inputs
• Rate Preview: Inline exchange rate and minimal fee hint
• Primary Action: Clear call-to-action button

Usage Examples

Basic Swap Interface

import { Converter } from '@repo/defi/swap';

export function SwapWidget() {
  return (
    <div className="w-full max-w-7xl">
      <Converter />
    </div>
  );
}

Token Configuration

The component uses a coins array for token selection:

const coins = [
  {
    id: "1",
    name: "Ark",
    image: "https://example.com/ark-icon.svg"
  },
  {
    id: "2", 
    name: "Tok",
    image: "https://example.com/tok-icon.svg"
  }
];

Styling Features

• Subtle Gradients: Refined, professional look
• Masked Borders: Elegant depth with CSS masks
• Iconography: Crisp token icons with fallbacks
• Responsive: Mobile-first, adapts seamlessly
• Dark Mode: First-class dark theme support

Accessibility

• Screen reader labels for all interactive elements
• Keyboard navigation support
• Proper ARIA attributes
• Focus management
• High contrast color schemes

Integration

Perfect for:

• DeFi Apps: Core swap flow
• Wallets: Embedded, lightweight swap
• Trading UIs: Quick convert widget
• Dashboards: Inline asset conversion

Customization

The component can be customized by:

• Modifying the coins array for different tokens
• Setting default amounts and balances
• Tuning rate/fee display text
• Styling with custom CSS classes