---

name: orderly-ui-components description: Build trading interfaces using pre-built React components - OrderEntry, Positions, TradingPage, WalletConnect, Sheets, Tables

---

Orderly Network: UI Components

This skill covers building trading interfaces using Orderly's pre-built React components from @orderly.network/react.

When to Use

Rapidly building a trading UI

Using pre-built, styled components

Implementing standard trading interface patterns

Prerequisites

React 18+

@orderly.network/react installed

Tailwind CSS (recommended for styling)

Installation

npm install @orderly.network/react @orderly.network/hooks @orderly.network/types
Or with yarn
yarn add @orderly.network/react @orderly.network/hooks @orderly.network/types

Core Providers

Wrap your app with the required providers:

import {
  OrderlyAppProvider,
  TradingPageProvider,
  SymbolProvider,
  WalletConnector
} from '@orderly.network/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
  return (
    
      
        
          
            
              
              
            
          
        
      
    
  );
}

---

Order Entry Component

Basic Order Entry

import { OrderEntry, OrderEntryProvider } from '@orderly.network/ui-order-entry';
import { useOrderEntry } from '@orderly.network/hooks';
function OrderEntryContainer() {
  const { onSubmit } = useOrderEntry();
  const handleSubmit = async (params: any) => {
    try {
      await onSubmit(params);
      console.log('Order submitted');
    } catch (e) {
      console.error('Order failed', e);
    }
  };
  return (
    

      
    
  );
}
export function OrderEntryWidget() {
  return (
    
      
    
  );
}

Order Entry Props

interface OrderEntryProps {
  onSubmit?: (params: OrderParams) => Promise;
  defaultTab?: 'limit' | 'market';
  hideMarket?: boolean;
  hideLimit?: boolean;
  showLeverage?: boolean;
  className?: string;
}

---

Positions Component

Basic Positions Table

import { Positions } from '@orderly.network/ui-positions';
export function PositionsWidget() {
  const handleSymbolClick = (symbol: string) => {
    console.log('Navigate to:', symbol);
  };
  return (
    

      
    
  );
}

Positions Props

interface PositionsProps {
  filter?: {
    symbol?: string;
    side?: 'BUY' | 'SELL';
  };
  onSymbolClick?: (symbol: string) => void;
  showPagination?: boolean;
  pageSize?: number;
  className?: string;
}

---

Orderbook Component

import { Orderbook, OrderbookProvider } from '@orderly.network/ui-orderbook';
export function OrderbookWidget({ symbol }: { symbol: string }) {
  return (
    
       {
          console.log('Price clicked:', price, side);
        }}
      />
    
  );
}

---

Wallet Connect Component

Basic Wallet Connect

import { WalletConnect } from '@orderly.network/react';
export function Header() {
  return (
    

      
My DEX
      
    
  );
}

Custom Wallet Button

import { useAccount, useWalletConnector } from '@orderly.network/hooks';
export function CustomWalletButton() {
  const { account, state } = useAccount();
  const wallet = useWalletConnector();
  if (state.status !== 'connected') {
    return (
       wallet.connect()}
        className="btn-primary"
      >
        Connect Wallet
      
    );
  }
  return (
    

      {account.address?.slice(0, 6)}...{account.address?.slice(-4)}
       wallet.disconnect()}>
        Disconnect
      
    
  );
}

---

Chart Components

TradingView Widget

import { TradingView } from '@orderly.network/ui-chart';
export function ChartWidget({ symbol }: { symbol: string }) {
  return (
    

      
    
  );
}

Lightweight Charts

import { LightweightChart } from '@orderly.network/ui-chart';
export function SimpleChart({ symbol }: { symbol: string }) {
  return (
    

      
    
  );
}

---

Data Table Component

Generic Table

import { Table } from '@orderly.network/ui';
type TradeRow = {
  id: string;
  price: number;
  size: number;
  time: string;
  side: 'BUY' | 'SELL';
};
export function TradesTable({ data }: { data: TradeRow[] }) {
  return (
    
      dataSource={data}
      columns={[
        {
          title: 'Price',
          dataIndex: 'price',
          render: (value, record) => (
            
              {value.toFixed(2)}
            
          ),
        },
        {
          title: 'Size',
          dataIndex: 'size',
          render: (value) => value.toFixed(4),
        },
        {
          title: 'Time',
          dataIndex: 'time',
        },
      ]}
      rowKey="id"
      pagination={{ pageSize: 20 }}
    />
  );
}

---

Sheet (Drawer) Component

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from '@orderly.network/ui';
export function OrderDetailsSheet({ order }: { order: Order }) {
  return (
    
      
        View Details
      
      
        
          
Order Details
        
        

          

            Symbol:
            {order.symbol}
            Side:
            {order.side}
            Price:
            {order.price}
            Quantity:
            {order.order_qty}
            Status:
            {order.status}
          
        
        
          Close Position
        
      
    
  );
}

---

Modal Component

import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@orderly.network/ui';
export function ConfirmOrderModal({ order, onConfirm }: { order: Order; onConfirm: () => void }) {
  return (
    
      
        Place Order
      
      
        
          
Confirm Order
        
        
          
Are you sure you want to place this order?
          

            
{order.side} {order.quantity} {order.symbol} @ {order.price}
          
        
        
          Cancel
          Confirm
        
      
    
  );
}

---

Empty State Component

import { NoData } from '@orderly.network/ui';
export function EmptyOrders() {
  return (
    

      
      
No open orders
      Place Order
    
  );
}

---

Notification/Toast Component

import { Toast, ToastProvider, useToast } from '@orderly.network/ui';
function TradingPage() {
  const { toast } = useToast();
  const handleOrderSubmit = async () => {
    try {
      await submitOrder();
      toast({
        title: 'Order Placed',
        description: 'Your order has been submitted successfully',
        variant: 'success',
      });
    } catch (error) {
      toast({
        title: 'Order Failed',
        description: error.message,
        variant: 'error',
      });
    }
  };
  return Place Order;
}
// In your app root
function App() {
  return (
    
      
    
  );
}

---

Complete Trading Page Example

import {
  OrderlyAppProvider,
  TradingPageProvider,
  SymbolProvider,
  WalletConnect,
} from '@orderly.network/react';
import { OrderEntry, OrderEntryProvider } from '@orderly.network/ui-order-entry';
import { Positions } from '@orderly.network/ui-positions';
import { Orderbook, OrderbookProvider } from '@orderly.network/ui-orderbook';
import { TradingView } from '@orderly.network/ui-chart';
import { useOrderEntry } from '@orderly.network/hooks';
function TradingPage() {
  const symbol = 'PERP_BTC_USDC';
  return (
    

      {/* Header */}
      

        
My DEX
        
      
      {/* Main Content */}
      

        {/* Left: Orderbook */}
        

          
            
          
        
        {/* Center: Chart + Order Entry */}
        

          

            
          
          
            
          
        
        {/* Right: Positions */}
        

          
        
      
    
  );
}
export function App() {
  return (
    
      
        
          
        
      
    
  );
}

---

Styling

Orderly components use Tailwind CSS classes. Customize with:

/* Override component styles */
.order-entry-root {
  /* Your styles */
}
.positions-table {
  /* Your styles */
}
/* Use Tailwind dark mode */
.dark .order-entry-root {
  /* Dark mode styles */
}

---

Common Issues

Components not rendering

Ensure all providers are wrapped correctly

Check that SymbolProvider is above symbol-dependent components

Verify Tailwind CSS is configured

Styling conflicts

Components use Tailwind utility classes

Override with higher-specificity CSS

Use className prop when available

Data not updating

Check WebSocket connection status

Verify account is connected

Ensure hooks are called inside provider components

Related Skills

orderly-sdk-react-hooks - Hook reference

orderly-trading-orders - Order management

orderly-websocket-streaming - Real-time data

React 18+

@orderly.network/react installed

Tailwind CSS (recommended for styling)