Merge pull request #2280 from zeitgeistpm/tr-topic-adjustments

Topics adjustments
zeitgeistpm · Feb 20, 2024 · 6c06d49 · 6c06d49
2 parents 8b37136 + 026bb3f
commit 6c06d49
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 62 deletions.
diff --git a/components/markets/MarketsList.tsx b/components/markets/MarketsList.tsx
@@ -19,8 +19,6 @@ import { Topics } from "components/front-page/Topics";
 
 export type MarketsListProps = {
   className?: string;
-  cmsTopics: CmsTopicHeader[];
-  cmsTopicPlaceholders: string[];
 };
 
 const useChangeQuery = (
@@ -59,11 +57,7 @@ const useChangeQuery = (
   }, [withLiquidityOnly]);
 };
 
-const MarketsList = ({
-  className = "",
-  cmsTopics,
-  cmsTopicPlaceholders,
-}: MarketsListProps) => {
+const MarketsList = ({ className = "" }: MarketsListProps) => {
   const [filters, setFilters] = useState<MarketFilter[]>();
   const [orderBy, setOrderBy] = useState<MarketsOrderBy>();
   const [withLiquidityOnly, setWithLiquidityOnly] = useState<boolean>();
@@ -104,12 +98,6 @@ const MarketsList = ({
       data-testid="marketsList"
       id={"market-list"}
     >
-      {process.env.NEXT_PUBLIC_SHOW_TOPICS === "true" && (
-        <div className="flex gap-2 py-8">
-          <Topics topics={cmsTopics} imagePlaceholders={cmsTopicPlaceholders} />
-        </div>
-      )}
-
       <MarketFilterSelection
         onFiltersChange={setFilters}
         onOrderingChange={setOrderBy}

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/components/meta/OgHead.tsx b/components/meta/OgHead.tsx
@@ -9,49 +9,43 @@ export type OgProps = {
 const defaultDescription =
   "The application interface for Zeitgeist Prediction Markets. Built on Polkadot, Zeitgeist is the leader in decentralized prediction markets.";
 
-export const OgHead = (props: OgProps) => {
+export const OgHead = ({ title, description, image }: OgProps) => {
+  description ??= defaultDescription;
+
   return (
     <Head>
-      {props.title && (
+      {title && (
         <>
-          <title>{props.title}</title>
-          <meta key="og:title" property="og:title" content={props.title} />
-          <meta
-            key="twitter:title"
-            property="twitter:title"
-            content={props.title}
-          />
+          <title>{title}</title>
+          <meta key="og:title" property="og:title" content={title} />
+          <meta key="twitter:title" property="twitter:title" content={title} />
         </>
       )}
       <>
-        <meta
-          key="description"
-          name="description"
-          content={defaultDescription}
-        />
+        <meta key="description" name="description" content={description} />
         <meta
           key="og:description"
           property="og:description"
-          content={defaultDescription}
+          content={description}
         />
         <meta
           key="twitter:description"
           property="twitter:description"
-          content={defaultDescription}
+          content={description}
         />
       </>
-      {props.image && (
+      {image && (
         <>
-          <meta key="og:image" property="og:image" content={props.image.href} />
+          <meta key="og:image" property="og:image" content={image.href} />
           <meta
             key="twitter:image"
             property="twitter:image"
-            content={`${props.image}`}
+            content={`${image}`}
           />
           <meta
             key="twitter:image:src"
             property="twitter:image:src"
-            content={`${props.image}`}
+            content={`${image}`}
           />
         </>
       )}

diff --git a/pages/markets/index.tsx b/pages/markets/index.tsx
@@ -8,33 +8,20 @@ import { CmsTopicHeader, getCmsTopicHeaders } from "lib/cms/topics";
 import { getPlaiceholders } from "lib/util/getPlaiceHolders";
 
 const MarketsPage: NextPage = ({
-  cmsTopics,
   cmsTopicPlaceholders,
 }: {
-  cmsTopics: CmsTopicHeader[];
   cmsTopicPlaceholders: string[];
 }) => {
-  return (
-    <MarketsList
-      cmsTopics={cmsTopics}
-      cmsTopicPlaceholders={cmsTopicPlaceholders}
-    />
-  );
+  return <MarketsList />;
 };
 
 export async function getStaticProps() {
   const queryClient = new QueryClient();
 
-  const [cmsMarketMetaData, cmsTopics] = await Promise.all([
+  const [cmsMarketMetaData] = await Promise.all([
     getCmsMarketMetadataForAllMarkets(),
-    getCmsTopicHeaders(),
   ]);
 
-  const cmsTopicPlaceholders = await getPlaiceholders(
-    cmsTopics.map((topic) => topic.thumbnail ?? ""),
-    { size: 16 },
-  ).then((plh) => plh.map((c) => c.base64) ?? []);
-
   for (const marketCmsData of cmsMarketMetaData) {
     if (marketCmsData.marketId) {
       queryClient.setQueryData(
@@ -47,8 +34,6 @@ export async function getStaticProps() {
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
-      cmsTopics,
-      cmsTopicPlaceholders,
     },
     revalidate:
       environment === "production"

diff --git a/pages/topics/[topic].tsx b/pages/topics/[topic].tsx
@@ -1,7 +1,8 @@
-import { PortableText } from "@portabletext/react";
+import { PortableText, toPlainText } from "@portabletext/react";
 import { FullMarketFragment } from "@zeitgeistpm/indexer";
 import { ZeitgeistIpfs, create } from "@zeitgeistpm/sdk";
 import MarketCard from "components/markets/market-card";
+import { OgHead } from "components/meta/OgHead";
 import { sanityImageBuilder } from "lib/cms/sanity";
 import {
   CmsTopicFull,
@@ -74,6 +75,10 @@ const TopicPage: NextPage<{
 
   return (
     <div>
+      <OgHead
+        title={cmsTopic.title}
+        description={toPlainText(cmsTopic.description)}
+      />
       {banner && (
         <div className="relative mb-10 mt-3 h-[150px] w-full md:h-[262px]">
           <Image
@@ -110,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>
         </>