Pulling refs/heads/staging into test-staging

components/markets/FavoriteMarketsList.tsx

@@ -1,11 +1,7 @@
-import { ScalarRangeType } from "@zeitgeistpm/sdk";
-import Decimal from "decimal.js";
-import { ZTG } from "lib/constants";
 import { useFavoriteMarkets } from "lib/hooks/queries/useFavoriteMarkets";
 import { useMarketsStats } from "lib/hooks/queries/useMarketsStats";
-import Loader from "react-spinners/PulseLoader";
+import { MdFavorite } from "react-icons/md";
 import MarketCard from "./market-card/index";
-import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
 
 export type FavoriteMarketsListProps = {
   className?: string;
@@ -36,44 +32,13 @@ const FavoriteMarketsList = ({ className = "" }: FavoriteMarketsListProps) => {
       </div>
       <div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">
         {markets?.map((market) => {
-          const volume = market.volume;
-          const scalarType = market.scalarType as ScalarRangeType;
           const stat = stats?.find((s) => s.marketId === market.marketId);
-          const question = market.question ?? "";
-          const image = market.img ?? "";
-          //check if market is categorical or scalar
-          let { categorical, scalar } = market.marketType ?? {};
-          if (categorical === null) {
-            categorical = "";
-          }
-          const filteredScalar =
-            scalar?.filter((item): item is string => item !== null) ?? [];
-          const marketType = { categorical, scalar: filteredScalar };
-          const pool = market.pool ?? null;
-          const tags =
-            market.tags?.filter((tag): tag is string => tag !== null) ?? [];
-
           return (
             <MarketCard
-              marketId={market.marketId}
-              outcomes={market.outcomes}
-              question={question}
-              creation={market.creation}
-              creator={market.creator}
-              img={image}
-              prediction={market.prediction}
-              endDate={market.period.end}
-              marketType={marketType}
-              scalarType={scalarType}
-              pool={pool}
-              neoPool={market.neoPool}
-              status={market.status}
-              baseAsset={market.baseAsset}
-              volume={new Decimal(volume).div(ZTG).toNumber()}
-              tags={tags}
+              key={market.marketId}
+              market={market}
               numParticipants={stat?.participants}
               liquidity={stat?.liquidity}
-              key={`market-${market.marketId}`}
             />
           );
         })}

components/markets/MarketScroll.tsx

@@ -3,11 +3,12 @@ import { BREAKPOINTS } from "lib/constants/breakpoints";
 import { useWindowSize } from "lib/hooks/events/useWindowSize";
 import { useMarketsStats } from "lib/hooks/queries/useMarketsStats";
 import { range } from "lodash-es";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import MarketCard, { IndexedMarketCardData } from "./market-card/index";
+import MarketCard from "./market-card/index";
 import { useDebouncedCallback } from "use-debounce";
 import { useHasMounted } from "lib/hooks/events/useHasMounted";
+import { FullMarketFragment } from "@zeitgeistpm/indexer";
 
 const MarketScroll = ({
   title,
@@ -17,7 +18,7 @@ const MarketScroll = ({
 }: {
   title: string;
   cta?: string;
-  markets: IndexedMarketCardData[];
+  markets: FullMarketFragment[];
   link?: string;
 }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -114,20 +115,16 @@ const MarketScroll = ({
             const isShown =
               showRange.includes(cardIndex) || windowWidth < BREAKPOINTS.md;
 
-            market = {
-              ...market,
-              numParticipants: stat?.participants,
-              liquidity: stat?.liquidity,
-            };
-
             return (
               <MarketCard
                 key={market.marketId}
                 disableLink={!isShown}
                 className={`market-card rounded-ztg-10 transition duration-500 ease-in-out ${
                   isShown ? "opacity-1" : "opacity-0"
                 }`}
-                {...market}
+                market={market}
+                numParticipants={stat?.participants}
+                liquidity={stat?.liquidity}
               />
             );
           })}

components/markets/MarketsList.tsx

@@ -118,44 +118,14 @@ const MarketsList = ({
 
       <div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">
         {markets?.map((market) => {
-          const volume = market.volume;
-          const scalarType = market.scalarType as ScalarRangeType;
           const stat = stats?.find((s) => s.marketId === market.marketId);
-          const question = market.question ?? "";
-          const image = market.img ?? "";
-          //check if market is categorical or scalar
-          let { categorical, scalar } = market.marketType ?? {};
-          if (categorical === null) {
-            categorical = "";
-          }
-          const filteredScalar =
-            scalar?.filter((item): item is string => item !== null) ?? [];
-          const marketType = { categorical, scalar: filteredScalar };
-          const pool = market.pool ?? null;
-          const tags =
-            market.tags?.filter((tag): tag is string => tag !== null) ?? [];
 
           return (
             <MarketCard
-              marketId={market.marketId}
-              outcomes={market.outcomes}
-              question={question}
-              creation={market.creation}
-              creator={market.creator}
-              img={image}
-              prediction={market.prediction}
-              endDate={market.period.end}
-              marketType={marketType}
-              scalarType={scalarType}
-              pool={pool}
-              neoPool={market.neoPool}
-              status={market.status}
-              baseAsset={market.baseAsset}
-              volume={new Decimal(volume).div(ZTG).toNumber()}
-              tags={tags}
+              key={`market-${market.marketId}`}
+              market={market}
               numParticipants={stat?.participants}
               liquidity={stat?.liquidity}
-              key={`market-${market.marketId}`}
             />
           );
         })}

components/markets/SimilarMarketsSection.tsx

@@ -42,15 +42,6 @@ export const SimilarMarketsSection = ({
           {recommendedMarkets?.markets.map((market, index) => {
             const stat = stats?.find((s) => s.marketId === market.marketId);
 
-            let { categorical, scalar } = market.marketType ?? {};
-            if (categorical === null) {
-              categorical = "";
-            }
-            const filteredScalar =
-              scalar?.filter((item): item is string => item !== null) ?? [];
-            const marketType = { categorical, scalar: filteredScalar };
-            const scalarType = market.scalarType as ScalarRangeType;
-
             return (
               <div
                 key={`market-${market.marketId}`}
@@ -60,25 +51,8 @@ export const SimilarMarketsSection = ({
                 }}
               >
                 <MarketCard
-                  marketId={market.marketId}
-                  outcomes={market.outcomes}
-                  question={market.question ?? ""}
-                  creation={market.creation}
-                  creator={market.creator}
-                  img={market.img ?? ""}
-                  prediction={market.prediction}
-                  endDate={market.period.end}
-                  marketType={marketType}
-                  scalarType={scalarType}
-                  pool={market.pool ?? null}
-                  neoPool={market?.neoPool}
-                  status={market.status}
-                  baseAsset={market.baseAsset}
-                  volume={new Decimal(market.volume ?? 0).div(ZTG).toNumber()}
-                  tags={
-                    market.tags?.filter((tag): tag is string => tag !== null) ??
-                    []
-                  }
+                  key={market.marketId}
+                  market={market}
                   numParticipants={stat?.participants}
                   liquidity={stat?.liquidity}
                 />