Markets

The Markets component displays a list of market entities, differentiated into "Favorite Markets" and a general "Markets" category. It provides a UI for user interaction with market entries.

Props

• markets (Market[]): Array of market objects representing all available markets.

• favoriteMarkets (Market[]): Array of market objects that the user has marked as favorites.

Behavior

• Displays two sections if conditions are met:

  1. Favorite Markets: Shown if there are entries in both markets and favorites arrays. useNeutralMarkets is a custom hook that filters out markets listed in favorites from the total list of markets retrieved via useMarkets.

  2. Markets: Always displayed, listing all markets or showing an empty state if no markets are available.

• Uses MarketRow components to render individual market entries in both sections.

Hooks

• useState (favorites): Initializes and manages an array of favorite markets based on the favoriteMarkets prop.

• useNeutralMarkets: Fetches an array of all neutral market entries, markets not market as favorite.