Skip to main content

​
Overview

The MarketBar component displays real-time market information including the current price, 24-hour statistics (volume, high, low), and market pair details. It integrates with the trading context to show live price updates.

​
Props

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

​
Displayed Information

​
Market Pair Section

  • Token icons: Overlapping SOL and USDC logos
  • Market name: “SOL/USDC” text label
  • Fixed width: 308px container with rounded border
  • Styling: Container background with border and hover effect

​
Price Section

The component shows:
  • Current price: Live price from TradesContext
  • Status indicator: Green dot showing market is active
  • Price change: 24h percentage change with color coding
<span className="text-positive-green flex items-center">
  {ticker?.priceChange}%
</span>

​
24-Hour Statistics

The component displays three key metrics:
​
24h Volume
number
Total trading volume in USD over the last 24 hoursFormat: $XX,XXX with locale-specific number formatting
​
24h High
number
Highest price reached in the last 24 hoursFormat: $XXX.XX
​
24h Low
number
Lowest price reached in the last 24 hoursFormat: $XXX.XX

​
Context Integration

The component uses TradesContext for state management: 
const { ticker, setTicker, stats, setStats, price } = useContext(TradesContext);
Contains 24h market statistics:
interface Ticker {
  volume: number;      // 24h volume
  high: string;        // 24h high price
  low: string;         // 24h low price
  priceChange: string; // % change
}

​
Data Loading

​
Initial Fetch

On component mount or market change: 
useEffect(() => {
  getTicker(market).then(setTicker);
  
  setStats([
    { label: "24h Volume", value: `$${ticker?.volume.toLocaleString()}` },
    { label: "24h High", value: `$${ticker?.high}` },
    { label: "24h Low", value: `$${ticker?.low}` },
  ]);
}, [market, setStats, setTicker, ticker?.high, ticker?.low, ticker?.volume]);
The effect depends on ticker values, so it updates whenever ticker data changes.

​
Color Coding

​
Price Change Indicator

The component uses semantic colors for price changes:
  • Positive: text-positive-green (price increased)
  • Negative: text-negative-red (price decreased)
<span className="text-positive-green flex items-center">
  {ticker?.priceChange}%
</span>

​
Status Indicator

A green dot indicates the market is active: 
<div className="block h-2 w-2 rounded-full bg-positive-green mr-1"></div>

​
Responsive Behavior

  • Market name hidden (hidden md:block)
  • Statistics section hidden
  • Only icons and price visible

​
Usage Example

import { MarketBar } from '@/components/MarketBar';
import { TradesProvider } from '@/state/TradesProvider';

function TradingLayout() {
  return (
    <TradesProvider>
      <MarketBar market="SOL_USDC" />
      {/* Other trading components */}
    </TradesProvider>
  );
}
Must be wrapped in TradesProvider to access market data context.

​
Layout Structure

MarketBar
├── Market Pair Container (fixed width)
│   ├── Token Icons (overlapping)
│   └── Market Name (SOL/USDC)
└── Stats Container (flexible width)
    ├── Price Section
    │   ├── Status Dot
    │   ├── Current Price
    │   └── Price Change %
    └── Statistics (hidden on mobile)
        ├── 24h Volume
        ├── 24h High
        └── 24h Low

​
Styling Features

​
Container Styling

  • Background: bg-container-bg
  • Borders: border-container-border
  • Hover: hover:bg-container-bg-hover
  • Rounded corners: rounded-xl on containers

​
Scrolling

  • Desktop: Thin scrollbar (thin-scroll)
  • Mobile: Hidden scrollbar (hidden-scroll)
  • Behavior: Horizontal scroll for overflow stats

​
Source Code Reference

See implementation in: apps/web/src/components/MarketBar.tsx:1-109 
{stats.map((stat, index) => (
  <div key={index} className="px-2 xl:px-6 hidden md:flex flex-col justify-center">
    <div className="outline-none focus:outline-none flex">
      <div className="flex flex-col">
        <div className="text-nowrap overflow-hidden text-text-label">
          {stat.label}
        </div>
        <div className="flex items-center grow">
          <span className="font-semibold text-[13px] leading-[16px] text-text-default">
            {stat.value}
          </span>
        </div>
      </div>
    </div>
  </div>
))}

Build docs developers (and LLMs) love

Get started for freeTalk to us