@leapwallet/ondo-gm-react-ui

React UI component library for Ondo protocol applications - comprehensive set of components, hooks, and utilities for DeFi user interfaces.

Features

• 🎨 Pre-built Components: Ready-to-use components for Ondo protocol operations
• 📊 Data Visualization: Charts, tables, and analytics components
• 🎛️ Form Controls: Validated forms for trading and account management
• 🌙 Theme Support: Built-in light/dark theme support with Tailwind CSS
• ♿ Accessibility: WCAG compliant components built with Radix UI
• 📱 Responsive: Mobile-first design with responsive layouts

Installation

npm install @leapwallet/ondo-gm-react-ui @leapwallet/ondo-gm-react-adapter @leapwallet/ondo-gm-core
# or
pnpm add @leapwallet/ondo-gm-react-ui @leapwallet/ondo-gm-react-adapter @leapwallet/ondo-gm-core
# or
yarn add @leapwallet/ondo-gm-react-ui @leapwallet/ondo-gm-react-adapter @leapwallet/ondo-gm-core

CSS Import

Import the required CSS files in your app:

import '@leapwallet/ondo-gm-react-ui/styles.css';
// Optional: Import CSS variables for theme customization
import '@leapwallet/ondo-gm-react-ui/styles/variables.css';

Quick Start

Theme Setup

import { ThemeProvider } from '@leapwallet/ondo-gm-react-ui';

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourAppComponents />
    </ThemeProvider>
  );
}

Basic Components

import {
  AccountView,
  AssetList,
  BalanceView,
  DataTable,
  ThemeToggle,
} from '@leapwallet/ondo-gm-react-ui';

function Dashboard() {
  return (
    <div className="p-6 space-y-6">
      {/* Theme toggle */}
      <div className="flex justify-end">
        <ThemeToggle />
      </div>

      {/* Account information */}
      <AccountView accountId="user-123" />

      {/* Asset list */}
      <AssetList />

      {/* Balance display */}
      <BalanceView balance="1,234.56" symbol="USDC" usdValue="1,234.56" />
    </div>
  );
}

Data Table

import { useAssets } from '@leapwallet/ondo-gm-react-adapter';
import { DataTable } from '@leapwallet/ondo-gm-react-ui';

function AssetTable() {
  const { data: assets, isLoading } = useAssets();

  const columns = [
    {
      accessorKey: 'symbol',
      header: 'Asset',
    },
    {
      accessorKey: 'price',
      header: 'Price',
      cell: ({ row }) => `$${row.original.price}`,
    },
    {
      accessorKey: 'change24h',
      header: '24h Change',
      cell: ({ row }) => {
        const change = row.original.change24h;
        return (
          <span className={change >= 0 ? 'text-green-500' : 'text-red-500'}>
            {change > 0 ? '+' : ''}
            {change}%
          </span>
        );
      },
    },
  ];

  if (isLoading) return <div>Loading...</div>;

  return (
    <DataTable
      data={assets || []}
      columns={columns}
      searchKey="symbol"
      searchPlaceholder="Search assets..."
    />
  );
}

Form Components

import { useForm } from 'react-hook-form';

import { Button, Card, Input } from '@leapwallet/ondo-gm-react-ui';

function TradeForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log('Trade data:', data);
  };

  return (
    <Card className="p-6">
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div>
          <Input
            {...register('amount', {
              required: 'Amount is required',
              min: { value: 0, message: 'Amount must be positive' },
            })}
            type="number"
            placeholder="Enter amount"
            step="0.000001"
          />
          {errors.amount && <p className="text-red-500 text-sm mt-1">{errors.amount.message}</p>}
        </div>

        <Button type="submit" className="w-full">
          Execute Trade
        </Button>
      </form>
    </Card>
  );
}

Component Reference

Layout Components

ThemeProvider

<ThemeProvider
  defaultTheme="system" // 'light' | 'dark' | 'system'
  storageKey="ondo-theme"
>
  {children}
</ThemeProvider>

Card

<Card className="p-4">
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card description</Card.Description>
  </Card.Header>
  <Card.Content>{/* Card content */}</Card.Content>
</Card>

Data Display Components

AccountView

<AccountView accountId="account-123" />

AssetList

<AssetList assets={assets} onAssetClick={(asset) => console.log('Clicked:', asset)} />

BalanceView

<BalanceView balance="1,234.56" symbol="USDC" usdValue="1,234.56" showUsdValue={true} />

DataTable

<DataTable
  data={data}
  columns={columns}
  searchKey="name"
  searchPlaceholder="Search..."
  enableSorting={true}
  enableFiltering={true}
  pageSize={10}
/>

Form Components

Button

<Button
  variant="default" // 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size="default" // 'default' | 'sm' | 'lg' | 'icon'
  disabled={false}
>
  Click me
</Button>

Input

<Input
  type="text"
  placeholder="Enter value"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error={errorMessage}
/>

Utility Components

ThemeToggle

<ThemeToggle />

Hooks Reference

Theme Hooks

useTheme

import { useTheme } from '@leapwallet/ondo-gm-react-ui';

function ThemeExample() {
  const { theme, setTheme, themes } = useTheme();

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      {themes.map((t) => (
        <option key={t} value={t}>
          {t}
        </option>
      ))}
    </select>
  );
}

Utility Hooks

useCopyToClipboard

import { useCopyToClipboard } from '@leapwallet/ondo-gm-react-ui';

function CopyExample() {
  const { copyToClipboard, isCopied } = useCopyToClipboard();

  return (
    <button onClick={() => copyToClipboard('Hello World!')}>{isCopied ? 'Copied!' : 'Copy'}</button>
  );
}

useTableFilters

import { useTableFilters } from '@leapwallet/ondo-gm-react-ui';

function FilteredTable() {
  const { searchValue, setSearchValue, sortColumn, sortDirection, handleSort, filteredData } =
    useTableFilters(originalData, 'name');

  // Use in your table implementation
}

Styling and Customization

CSS Classes

All components use the od: prefix for Tailwind classes to avoid conflicts:

<div className="od:bg-primary od:text-primary-foreground od:p-4">Styled content</div>

Theme Customization

Override CSS variables for custom theming:

:root {
  --od-primary: 220 90% 56%;
  --od-primary-foreground: 0 0% 100%;
  --od-secondary: 220 14% 96%;
  --od-secondary-foreground: 220 9% 46%;
  /* ... other variables */
}

[data-theme='dark'] {
  --od-primary: 217 91% 60%;
  --od-primary-foreground: 222 84% 5%;
  /* ... dark theme variables */
}

Motion Configuration

Components use Framer Motion for animations. Configure globally:

import { MotionConfig } from 'motion';

function App() {
  return (
    <MotionConfig transition={{ duration: 0.2 }}>
      <YourComponents />
    </MotionConfig>
  );
}

Advanced Usage

Custom Data Table Columns

const columns = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
      />
    ),
  },
  // ... other columns
];

Form Validation with Zod

import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const tradeSchema = z.object({
  amount: z.number().positive('Amount must be positive'),
  asset: z.string().min(1, 'Please select an asset'),
});

function ValidatedForm() {
  const form = useForm({
    resolver: zodResolver(tradeSchema),
  });

  // Form implementation
}

Dependencies

• react - React library
• @radix-ui/* - Accessibility primitives
• @tanstack/react-table - Table functionality
• motion - Animation library
• tailwindcss - Utility-first CSS framework
• class-variance-authority - Component variant management
• zod - Schema validation

License

ISC