Merge pull request #2258 from zeitgeistpm/tr-leaderboard-markets

Leaderboard fix + breakdown

lib/hooks/queries/cms/useMarketCmsMetadata.ts

@@ -15,6 +15,7 @@ export const useMarketCmsMetadata = (marketId: string | number) => {
     async () => {
       return batcher.fetch(Number(marketId));
     },
+    { staleTime: 100_000 },
   );
 };
 

pages/leaderboard/[period].tsx

@@ -1,3 +1,4 @@
+import { Dialog } from "@headlessui/react";
 import { dehydrate, QueryClient } from "@tanstack/react-query";
 import {
   FullHistoricalAccountBalanceFragment,
@@ -15,6 +16,7 @@ import {
   ZeitgeistIpfs,
 } from "@zeitgeistpm/sdk";
 import Avatar from "components/ui/Avatar";
+import Modal from "components/ui/Modal";
 import Table, { TableColumn, TableData } from "components/ui/Table";
 import Decimal from "decimal.js";
 import {
@@ -42,7 +44,7 @@ import { NextPage } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { getPlaiceholder } from "plaiceholder";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 // Approach: aggregate base asset movements in and out of a market
 // "In events": swaps, buy full set
@@ -185,6 +187,7 @@ export async function getStaticProps({ params }) {
       limit: limit,
       offset: pageNumber * limit,
       order: MarketOrderByInput.IdAsc,
+      where: { period: { start_gte: periodStart.getTime() } },
     });
     return markets;
   });
@@ -397,16 +400,13 @@ export async function getStaticProps({ params }) {
 
       const suspiciousActivity = marketTotal.baseAssetIn.eq(0);
 
-      if (market?.status === "Resolved" && !suspiciousActivity) {
+      if (
+        market?.status === "Resolved" &&
+        market.question &&
+        !suspiciousActivity
+      ) {
         const diff = marketTotal.baseAssetOut.minus(marketTotal.baseAssetIn);
 
-        marketsSummary.push({
-          question: market.question!,
-          marketId: market.marketId,
-          baseAssetId: parseAssetIdString(market.baseAsset) as BaseAssetId,
-          profit: diff.div(ZTG).toNumber(),
-        });
-
         const endTimestamp = market.period.end;
 
         const marketEndBaseAssetPrice = lookupPrice(
@@ -416,6 +416,14 @@ export async function getStaticProps({ params }) {
         );
 
         const usdProfitLoss = diff.mul(marketEndBaseAssetPrice ?? 0);
+
+        marketsSummary.push({
+          question: market.question,
+          marketId: market.marketId,
+          baseAssetId: parseAssetIdString(market.baseAsset) as BaseAssetId,
+          profit: usdProfitLoss.div(ZTG).toNumber(),
+        });
+
         volume = volume.plus(
           marketTotal.baseAssetIn
             .plus(marketTotal.baseAssetOut)
@@ -510,6 +518,7 @@ const columns: TableColumn[] = [
     collapseOrder: 2,
   },
   { header: "Volume", accessor: "volume", type: "text", collapseOrder: 1 },
+  { header: "", accessor: "button", type: "component" },
 ];
 
 const UserCell = ({ address, name }: { address: string; name?: string }) => {
@@ -551,6 +560,7 @@ const Leaderboard: NextPage<{
           numMarketsWon: rankObj.markets.filter((m) => m.profit > 0).length,
           totalProfit: `$${rankObj.profitUsd.toFixed(0)}`,
           volume: `$${rankObj.volumeUsd.toFixed(0)}`,
+          button: <MarketBreakdownModal markets={rankObj.markets} />,
         },
       ];
     }
@@ -602,4 +612,37 @@ const Leaderboard: NextPage<{
   );
 };
 
+const MarketBreakdownModal = ({ markets }: { markets: MarketSummary[] }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>View Breakdown</button>
+      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+        <Dialog.Panel className="flex max-h-[350px] w-full max-w-[600px] flex-col gap-y-6 overflow-y-auto rounded-ztg-10 bg-white p-[15px] py-5 md:max-h-[600px]">
+          <div className="text-lg font-bold">Market Profit Breakdown</div>
+          {markets
+            .sort((a, b) => b.profit - a.profit)
+            .map((market, index) => (
+              <div key={index} className="flex">
+                <Link
+                  href={`/markets/${market.marketId}`}
+                  className="line-clamp-1 max-w-[80%]"
+                >
+                  {market.question}
+                </Link>
+                <div
+                  className={`ml-auto ${
+                    market.profit > 0 ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  ${market.profit.toFixed(2)}
+                </div>
+              </div>
+            ))}
+        </Dialog.Panel>
+      </Modal>
+    </>
+  );
+};
+
 export default Leaderboard;