@bettoredge/market

Market liquidity display components for BettorEdge applications.

Installation

This package is part of the BettorEdge monorepo and is linked via npm workspaces.

npm install

Components

MarketDisplay

Main container component that displays market liquidity data for a specific contest.

Props:

• marketLiquidity: MarketLiquidityProps - Market liquidity data from the API
• contestHash: string - Contest hash to filter and display

Example:

import { MarketDisplay } from '@bettoredge/market';
import { getAvailableMarkets } from '@bettoredge/api';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await getAvailableMarkets('league-123');
      setData(result.available_markets[0]);
    };
    fetchData();
  }, []);

  if (!data) return <Text>Loading...</Text>;

  const contestHash = data.contests[0]?.contest_hash;

  return (
    <MarketDisplay
      marketLiquidity={data}
      contestHash={contestHash}
    />
  );
};

ContestHeader

Displays contest information including title, scheduled time, and team details.

Props:

• contest: MarketLiquidityProps['contests'][0] - Contest object

MarketSelector

Dropdown selector for choosing between different markets in a contest.

Props:

• markets: MarketLiquidityProps['contests'][0]['markets'] - Array of markets
• selectedMarket: MarketLiquidityProps['contests'][0]['markets'][0] - Currently selected market
• onSelectMarket: (market) => void - Callback when market is selected

LiquidityDisplay

Displays liquidity data for both sides (A and B) of a market.

Props:

• market: MarketLiquidityProps['contests'][0]['markets'][0] - Market object with liquidity data

Features

• ✅ Display contest information (title, time, teams)
• ✅ Dropdown market selection
• ✅ Side A vs Side B liquidity display
• ✅ Price and availability formatting
• ✅ Horizontal scrolling for multiple sides
• ✅ Responsive layout
• ✅ Uses @bettorEdge/styles components for consistent theming

Data Flow

1. Fetch market liquidity data using getAvailableMarkets() from @bettoredge/api
2. Pass MarketLiquidityProps and contest_hash to MarketDisplay
3. Component finds matching contest and displays first market by default
4. User can select different markets via dropdown
5. Liquidity display updates to show selected market's sides A and B

Dependencies

• @bettorEdge/types - Type definitions for MarketLiquidityProps
• @bettorEdge/styles - UI components (Dropdown, Card, Text, etc.)
• react - React library
• react-native - React Native framework

Future Enhancements

• Order placement functionality
• Live price updates via WebSocket
• Order book depth visualization
• Historical data and charts
• Multiple contest display

License

ISC