fix market card stats

zeitgeistpm · Feb 16, 2024 · 026bb3f · 026bb3f
1 parent a3465a6
commit 026bb3f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/components/markets/market-card/index.tsx b/components/markets/market-card/index.tsx
@@ -1,4 +1,3 @@
-import type { ScalarRangeType } from "@zeitgeistpm/sdk";
 import Skeleton from "components/ui/Skeleton";
 import Decimal from "decimal.js";
 import { ZTG } from "lib/constants";

diff --git a/pages/topics/[topic].tsx b/pages/topics/[topic].tsx
@@ -115,32 +115,67 @@ const TopicPage: NextPage<{
           <div className="hidden lg:block">
             <div className="mb-3 flex gap-3">
               <div className="-mr-1 flex w-2/3 flex-col gap-3">
-                <MarketCard {...marketOne} />
-                <MarketCard {...marketTwo} />
+                <MarketCard
+                  key={marketOne.market.marketId}
+                  market={marketOne.market}
+                  liquidity={marketOne.stats.liquidity}
+                  numParticipants={marketOne.stats.participants}
+                />
+                <MarketCard
+                  key={marketTwo.market.marketId}
+                  market={marketTwo.market}
+                  liquidity={marketTwo.stats.liquidity}
+                  numParticipants={marketTwo.stats.participants}
+                />
               </div>
               <div className="flex w-1/3 flex-col gap-3 pl-1">
-                <MarketCard {...marketThree} />
-                <MarketCard {...marketFour} />
+                <MarketCard
+                  key={marketThree.market.marketId}
+                  market={marketThree.market}
+                  liquidity={marketThree.stats.liquidity}
+                  numParticipants={marketThree.stats.participants}
+                />
+                <MarketCard
+                  key={marketFour.market.marketId}
+                  market={marketFour.market}
+                  liquidity={marketFour.stats.liquidity}
+                  numParticipants={marketFour.stats.participants}
+                />
               </div>
             </div>
             <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
-              {restMarkets.map((market) => (
-                <MarketCard {...market} />
+              {restMarkets.map(({ market, stats }) => (
+                <MarketCard
+                  key={market.marketId}
+                  market={market}
+                  liquidity={stats.liquidity}
+                  numParticipants={stats.participants}
+                />
               ))}
             </div>
           </div>
 
           <div className="grid grid-cols-1  gap-3 md:grid-cols-3 lg:hidden">
-            {markets.map((market) => (
-              <MarketCard {...market} />
+            {markets.map(({ market, stats }) => (
+              <MarketCard
+                key={market.marketId}
+                market={market}
+                numParticipants={stats.participants}
+                liquidity={stats.liquidity}
+              />
             ))}
           </div>
         </>
       ) : (
         <>
           <div className="grid grid-cols-1  gap-3 md:grid-cols-3">
-            {markets.map((market) => (
-              <MarketCard {...market} />
+            {markets.map(({ market, stats }) => (
+              <MarketCard
+                key={market.marketId}
+                market={market}
+                numParticipants={stats.participants}
+                liquidity={stats.liquidity}
+              />
             ))}
           </div>
         </>