Skip to main content

​
Overview

The TradeInterface component is a layout container that combines the TradeView and Depth components into a unified trading interface. It provides a responsive grid layout for displaying charts and market depth data.

​
Props

​
market
string
required
The market identifier for the trading pair (e.g., “SOL_USDC”)

​
Component Composition

The component renders two main child components:
Displays the main trading chart and price visualization. Takes up 3/4 of the width on desktop layouts.Props passed:
  • market: Forwarded from parent component
Shows order book and recent trades data. Takes up 1/4 of the width on desktop layouts.Props passed:
  • market: Forwarded from parent component

​
Layout Structure

​
Responsive Grid

The component uses CSS Grid for responsive layout: 
<div className="grid grid-rows-[600px_1fr] grid-cols-1 md:grid-cols-[3fr_1fr] gap-2">
  <TradeView market={market} />
  <Depth market={market} />
</div>
  • Single column: Components stack vertically
  • First row: TradeView at 600px height
  • Second row: Depth takes remaining space

​
Usage Example

import { TradeInterface } from '@/components/TradeInterface';

function MarketPage() {
  const marketId = "SOL_USDC";
  
  return (
    <div className="container">
      <TradeInterface market={marketId} />
    </div>
  );
}

​
Component Hierarchy

TradeInterface
├── TradeView
│   └── (Trading chart and price data)
└── Depth
    ├── OrderBook (Tab 1)
    └── RecentTrades (Tab 2)

​
Implementation Details

​
Props Forwarding

The component acts as a simple container that forwards the market prop to its children: 
export const TradeInterface = ({ market }: { market: string }) => {
  return (
    <div className="grid grid-rows-[600px_1fr] grid-cols-1 md:grid-cols-[3fr_1fr] gap-2">
      <TradeView market={market as string} />
      <Depth market={market as string} />
    </div>
  );
};
The component has no internal state or side effects - it’s purely presentational and focuses on layout.

​
Design Considerations

​
Fixed Height Strategy

The 600px height for the first row ensures:
  • Consistent chart visibility
  • Adequate space for price action
  • Prevents excessive vertical scrolling

​
Responsive Breakpoint

The md: breakpoint (768px) was chosen to:
  • Prioritize readability on smaller screens
  • Maximize chart space on desktop
  • Balance order book visibility

​
Source Code Reference

See implementation in: apps/web/src/components/TradeInterface.tsx:1-12 
import { Depth } from "./Depth";
import { TradeView } from "./trade_interface/TradeView";

export const TradeInterface = ({ market }: { market: string }) => {
  return (
    <div className="grid grid-rows-[600px_1fr] grid-cols-1 md:grid-cols-[3fr_1fr] gap-2">
      <TradeView market={market as string} />
      <Depth market={market as string} />
    </div>
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us