FavoriteBar

The FavoriteBar component is a horizontal scrolling bar that displays the user's favorite markets, allowing quick access to preferred trading pairs. Below is an in-depth look into how the FavoriteBar functions.

Overview:

• Component Structure: The component utilizes styled-components for styling. It features left and right navigation buttons to scroll through the list of favorite markets.

• Hooks Used:

  • useCallback and useEffect for performance optimizations and side effects.

  • useRef to reference the DOM element that holds the favorite markets for scrolling purposes.

  • useState to manage local state within the component, such as arrow visibility and the scrolling target.

  • useRouter from Next.js for routing purposes, allowing navigation to market details on click.

  • useFavoriteMarkets custom hook from @symmio/frontend-sdk/hooks/useMarkets to fetch the list of user's favorite markets.