MarketBar

The MarketBar component provides a concise overview of important market details such as the last price, open interest, notional cap, and funding rates. It's structured to give traders quick insights into market conditions.

All components of the website are based on this selected token pair.

Overview:

• Component Structure: This component uses styled-components for styling. It includes sub-components like MarketInfo, BlinkingPrice, MarketDepths, and MarketFundingRate to display various pieces of market data.

• Hooks Used:

  • useActiveMarket to fetch the currently active market details.

  • useMarketOpenInterest and useMarketNotionalCap from @symmio/frontend-sdk/state/hedger/hooks to retrieve the market's open interest and notional cap, respectively.

Key Features:

1. Market Information: Displays key market details including the last price, which is highlighted using the BlinkingPrice component for visual emphasis on price updates.

2. Open Interest & Notional Cap: Presents the market's open interest and the specific symbol's notional cap.

3. Funding Rates & Market Depth: Integrates with MarketFundingRate and MarketDepths components to offer a broader view of the market, including funding rates and depth chart visualizations.

State Interactions:

• Market Data: Leverages global state management to access the current market data, open interest, and notional cap information.

• API State Management: Utilizes ApiState from @symmio/frontend-sdk/types/api to handle loading and error states, ensuring that the component reacts appropriately to the availability of data.