unique markets

src/compositions/events/Game/Game.tsx

@@ -12,6 +12,7 @@ import { OpponentLogo } from 'components/dataDisplay'
 import { Href } from 'components/navigation'
 import { LiveLabel } from 'components/ui'
 import Markets, { MarketsSkeleton } from 'compositions/events/Markets/Markets'
+import UniqueMarkets from 'compositions/events/UniqueMarkets/UniqueMarkets'
 
 
 export const GameSkeleton: React.FC<{ className?: string }> = ({ className }) => {
@@ -69,6 +70,7 @@ const Game: React.FC<GameProps> = ({ className, leagueUrl, game, withTopRadius,
   })
 
   const isInLive = status === GameStatus.Live
+  const MarketsComp = isUnique ? UniqueMarkets : Markets
 
   const rootClassName = cx(
     'group flex mb:flex-col ds:items-center justify-between',
@@ -123,7 +125,7 @@ const Game: React.FC<GameProps> = ({ className, leagueUrl, game, withTopRadius,
       <div className="w-full ds:max-w-[26.25rem] mb:mt-2">
         {
           isMarketsVisible ? (
-            <Markets gameId={gameId} gameStatus={status} />
+            <MarketsComp gameId={gameId} gameStatus={status} />
           ) : (
             <MarketsSkeleton />
           )

src/compositions/events/UniqueMarkets/UniqueMarkets.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import React from 'react'
+import { GameStatus } from '@azuro-org/toolkit'
+import { useActiveMarkets } from '@azuro-org/sdk'
+
+import { MarketsSkeleton } from 'compositions/events/Markets/Markets'
+import Market from 'compositions/events/Markets/components/Market/Market'
+
+
+type UniqueMarketsProps = {
+  gameId: string
+  gameStatus: GameStatus
+}
+
+
+const UniqueMarkets: React.FC<UniqueMarketsProps> = ({ gameId, gameStatus }) => {
+  const { markets, loading } = useActiveMarkets({ gameId, gameStatus, livePollInterval: 30_000 })
+
+
+  if (loading || gameStatus === GameStatus.Live && !markets?.length) {
+    return <MarketsSkeleton />
+  }
+
+  return (
+    <div className="w-full">
+      {
+        markets.map(market => (
+          <Market
+            key={market.marketKey}
+            market={market}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default UniqueMarkets