Merge pull request #1965 from zeitgeistpm/staging

components/markets/SimilarMarketsSection.tsx

@@ -4,7 +4,7 @@ import MarketCard from "components/markets/market-card";
 import Decimal from "decimal.js";
 import { ZTG } from "lib/constants";
 import { useMarketsStats } from "lib/hooks/queries/useMarketsStats";
-import { useSimilarMarkets } from "lib/hooks/queries/useSimilarMarkets";
+import { useRecommendedMarkets } from "lib/hooks/queries/useRecommendedMarkets";
 
 export const SimilarMarketsSection = ({
   market,
@@ -13,35 +13,34 @@ export const SimilarMarketsSection = ({
   market?: FullMarketFragment;
   limit?: number;
 }) => {
-  const similarMarkets = useSimilarMarkets(market?.marketId, limit ?? 2);
+  const { data: recommendedMarkets, isFetched: isMarketsFetched } =
+    useRecommendedMarkets(market?.marketId, limit ?? 2);
 
-  const hasSimilarMarkets = Boolean(similarMarkets?.data?.length);
-
-  const stats = useMarketsStats(
-    similarMarkets?.data?.map((m) => m.marketId) ?? [],
+  const { data: stats, isFetched: isStatsFetched } = useMarketsStats(
+    recommendedMarkets?.markets?.map((m) => m.marketId) ?? [],
   );
 
-  const isLoading = !similarMarkets.isFetched || !stats.isFetched;
+  const isLoading = !isMarketsFetched || !isStatsFetched;
 
   return (
     <div className="flex flex-col gap-4 relative z-[-1]">
       {!isLoading && (
         <>
-          {hasSimilarMarkets && (
+          {recommendedMarkets && (
             <h4
               className="mb-4 opacity-0 animate-pop-in"
               style={{
                 animationDelay: `200ms`,
               }}
             >
-              Similar Markets
+              {recommendedMarkets.type === "similar"
+                ? "Similar Markets"
+                : "Popular Markets"}
             </h4>
           )}
 
-          {similarMarkets?.data?.map((market, index) => {
-            const stat = stats?.data?.find(
-              (s) => s.marketId === market.marketId,
-            );
+          {recommendedMarkets?.markets.map((market, index) => {
+            const stat = stats?.find((s) => s.marketId === market.marketId);
 
             let { categorical, scalar } = market.marketType ?? {};
             if (categorical === null) {

lib/hooks/queries/useRecommendedMarkets.ts

@@ -0,0 +1,95 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  FullMarketFragment,
+  MarketOrderByInput,
+  MarketStatus,
+  ZeitgeistIndexer,
+} from "@zeitgeistpm/indexer";
+import { isIndexedSdk } from "@zeitgeistpm/sdk";
+import { getOutcomesForMarkets } from "lib/gql/markets-list/outcomes-for-markets";
+import { getCurrentPrediction } from "lib/util/assets";
+import { useSdkv2 } from "../useSdkv2";
+import { QueryMarketData } from "./useInfiniteMarkets";
+import { useMarket } from "./useMarket";
+
+export const recommendedMarketsRootKey = "recommended-markets";
+
+export const useRecommendedMarkets = (marketId?: number, limit = 2) => {
+  const [sdk, id] = useSdkv2();
+  const { data: market } = useMarket(marketId ? { marketId } : undefined);
+
+  const enabled = sdk && market && isIndexedSdk(sdk);
+
+  const query = useQuery(
+    [id, recommendedMarketsRootKey, market?.marketId],
+    async () => {
+      if (enabled) {
+        const { markets: similarMarkets } = await sdk.indexer.markets({
+          limit,
+          order: [MarketOrderByInput.PoolVolumeDesc],
+          where: {
+            tags_containsAny: market?.tags,
+            status_eq: MarketStatus.Active,
+            marketId_not_eq: marketId,
+            pool: {
+              volume_gt: "0",
+            },
+          },
+        });
+
+        if (similarMarkets.length > 0) {
+          return {
+            markets: await mapMarkets(sdk.indexer, similarMarkets),
+            type: "similar" as const,
+          };
+        } else {
+          const { markets: popularMarkets } = await sdk.indexer.markets({
+            limit,
+            order: [MarketOrderByInput.PoolVolumeDesc],
+            where: {
+              status_eq: MarketStatus.Active,
+              marketId_not_eq: marketId,
+              pool: {
+                volume_gt: "0",
+              },
+            },
+          });
+          return {
+            markets: await mapMarkets(sdk.indexer, popularMarkets),
+            type: "popular" as const,
+          };
+        }
+      }
+    },
+    {
+      enabled: Boolean(enabled),
+      staleTime: Infinity,
+    },
+  );
+
+  return query;
+};
+
+const mapMarkets = async (
+  indexer: ZeitgeistIndexer,
+  markets: FullMarketFragment[],
+) => {
+  const outcomes = await getOutcomesForMarkets(indexer.client, markets);
+
+  let resMarkets: Array<QueryMarketData> = [];
+
+  for (const market of markets) {
+    const marketOutcomes = outcomes[market.marketId];
+    const prediction =
+      market.pool != null
+        ? getCurrentPrediction(marketOutcomes, market)
+        : { name: "None", price: 0 };
+
+    resMarkets = [
+      ...resMarkets,
+      { ...market, outcomes: marketOutcomes, prediction },
+    ];
+  }
+
+  return resMarkets;
+};

pages/api/og/[marketId].ts

@@ -60,7 +60,7 @@ export default async function (
       },
     });
 
-    prediction = getCurrentPrediction(assets as any, market as any);
+    prediction = getCurrentPrediction(assets as any, market);
   }
 
   const volume = new Decimal(market.pool?.volume ?? 0).div(ZTG).toFixed(2);