> For the complete documentation index, see [llms.txt](https://symmdocs.gitbook.io/frontend-sdk-technical-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://symmdocs.gitbook.io/frontend-sdk-technical-docs/frontend-sdk/cloverfield-app/components/marketbar.md).

# 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.<br>