added court rewards to portfolio

components/portfolio/CourtRewardsTable.tsx

@@ -0,0 +1,132 @@
+import Table, { TableColumn, TableData } from "components/ui/Table";
+import Link from "next/link";
+import EmptyPortfolio from "./EmptyPortfolio";
+import { useTradeHistory } from "lib/hooks/queries/useTradeHistory";
+import { formatNumberLocalized } from "lib/util";
+import { ZTG } from "lib/constants";
+import SubScanIcon from "components/icons/SubScanIcon";
+import { useMintedInCourt } from "lib/hooks/queries/useMintedInCourt";
+import { useZtgPrice } from "lib/hooks/queries/useZtgPrice";
+import Decimal from "decimal.js";
+import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+
+const columns: TableColumn[] = [
+  {
+    header: "Time",
+    accessor: "timestamp",
+    type: "text",
+  },
+  {
+    header: "Amount",
+    accessor: "amount",
+    type: "component",
+    alignment: "right",
+  },
+  {
+    header: "Subscan",
+    accessor: "subscan",
+    type: "component",
+    width: "100px",
+  },
+];
+
+const CourtRewardsTable = ({ address }: { address: string }) => {
+  const { data: mintedInCourt, isLoading } = useMintedInCourt({
+    account: address,
+  });
+  const { data: ztgPrice } = useZtgPrice();
+  const { data: constants } = useChainConstants();
+
+  const tableData: TableData[] | undefined = mintedInCourt?.map((mint) => {
+    return {
+      timestamp: new Intl.DateTimeFormat("default", {
+        dateStyle: "medium",
+        timeStyle: "medium",
+      }).format(new Date(mint?.timestamp)),
+      amount: (
+        <div>
+          <div>
+            {formatNumberLocalized(
+              new Decimal(mint?.dBalance ?? 0).div(ZTG).toNumber(),
+            )}{" "}
+            <b>{constants?.tokenSymbol}</b>
+          </div>
+          <div className="text-gray-400">
+            ${" "}
+            {formatNumberLocalized(
+              ztgPrice
+                ?.mul(mint?.dBalance ?? 0)
+                .div(ZTG)
+                .toNumber() ?? 0,
+            )}
+          </div>
+        </div>
+      ),
+      subscan: (
+        <a
+          className="center text-sm"
+          target="_blank"
+          referrerPolicy="no-referrer"
+          rel="noopener"
+          href={`https://zeitgeist.subscan.io/block/${mint?.blockNumber}?tab=event`}
+        >
+          <div className="">
+            <SubScanIcon />
+          </div>
+        </a>
+      ),
+      // question: (
+      //   <Link
+      //     href={`/markets/${trade?.marketId}`}
+      //     className="line-clamp-1 text-[14px]"
+      //   >
+      //     {trade?.question}
+      //   </Link>
+      // ),
+      // bought: `${formatNumberLocalized(
+      //   trade?.assetAmountOut.div(ZTG).toNumber() ?? 0,
+      // )} ${trade?.assetOut}`,
+      // sold: `${formatNumberLocalized(
+      //   trade?.assetAmountIn.div(ZTG).toNumber() ?? 0,
+      // )} ${trade?.assetIn}`,
+      // price: `${formatNumberLocalized(
+      //   trade?.price.toNumber() ?? 0,
+      // )} ${trade?.baseAssetName}`,
+      // time: new Intl.DateTimeFormat("default", {
+      //   dateStyle: "medium",
+      //   timeStyle: "medium",
+      // }).format(new Date(trade?.time)),
+      // links: (
+      //   <div className="center">
+      //     <a
+      //       className="center"
+      //       target="_blank"
+      //       referrerPolicy="no-referrer"
+      //       rel="noopener"
+      //       href={`https://zeitgeist.subscan.io/extrinsic/${trade?.extrinsic?.hash}`}
+      //     >
+      //       <SubScanIcon />
+      //     </a>
+      //   </div>
+      // ),
+    };
+  });
+
+  return (
+    <div>
+      {isLoading === false &&
+      (mintedInCourt == null || mintedInCourt?.length === 0) ? (
+        <EmptyPortfolio
+          headerText="No Court Rewards"
+          bodyText=""
+          buttonText="Go To Court"
+          buttonLink="/court"
+        />
+      ) : (
+        <Table columns={columns} data={tableData} />
+      )}
+    </div>
+  );
+};
+
+export default CourtRewardsTable;

components/portfolio/CourtTabGroup.tsx

@@ -0,0 +1,32 @@
+import { Tab } from "@headlessui/react";
+import SubTabsList from "components/ui/SubTabsList";
+import { useQueryParamState } from "lib/hooks/useQueryParamState";
+import CourtRewardsTable from "./CourtRewardsTable";
+
+type CourtGroupItem = "Rewards";
+const courtTabItems: CourtGroupItem[] = ["Rewards"];
+
+const CourtTabGroup = ({ address }: { address: string }) => {
+  const [historyTabSelection, setHistoryTabSelection] =
+    useQueryParamState<CourtGroupItem>("courtTab");
+
+  const courtTabIndex = courtTabItems.indexOf(historyTabSelection);
+  const selectedIndex = courtTabIndex !== -1 ? courtTabIndex : 0;
+
+  return (
+    <Tab.Group
+      defaultIndex={0}
+      selectedIndex={selectedIndex}
+      onChange={(index) => setHistoryTabSelection(courtTabItems[index])}
+    >
+      <SubTabsList titles={courtTabItems} />
+      <Tab.Panels>
+        <Tab.Panel>
+          <CourtRewardsTable address={address} />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
+
+export default CourtTabGroup;

pages/court/index.tsx

@@ -274,7 +274,10 @@ const CourtPage: NextPage = ({
               {mintedPayouts?.map((payout, index) => (
                 <div className="mb-1 flex gap-2">
                   <div className="flex-1 italic text-gray-500">
-                    {moment(payout?.timestamp).format("YYYY-MM-DDTHH:mm")}
+                    {Intl.DateTimeFormat("default", {
+                      dateStyle: "medium",
+                      timeStyle: "medium",
+                    }).format(new Date(payout?.timestamp))}
                   </div>
                   <div className="">
                     {formatNumberLocalized(

pages/portfolio/[address].tsx

@@ -4,6 +4,7 @@ import BadgesList from "components/avatar/BadgesList";
 import AccountPoolsTable from "components/portfolio/AccountPoolsTable";
 import BondsTable from "components/portfolio/BondsTable";
 import { PortfolioBreakdown } from "components/portfolio/Breakdown";
+import CourtTabGroup from "components/portfolio/CourtTabGroup";
 import CreatorFeePayouts from "components/portfolio/CreatorFeePayouts";
 import CurrenciesTable from "components/portfolio/CurrenciesTable";
 import EmptyPortfolio from "components/portfolio/EmptyPortfolio";
@@ -31,14 +32,16 @@ type MainTabItem =
   | "Balances"
   | "Markets"
   | "Badges"
-  | "History";
+  | "History"
+  | "Court";
 
 const mainTabItems: MainTabItem[] = [
   "Predictions",
   ...(process.env.NEXT_PUBLIC_SHOW_CROSS_CHAIN === "true" ? ["Balances"] : []),
   "Markets",
   "Badges",
   "History",
+  "Court",
 ] as MainTabItem[];
 
 type MarketsTabItem = "Created Markets" | "Liquidity" | "Creator Fee Payouts";
@@ -109,6 +112,7 @@ const Portfolio: NextPageWithLayout = () => {
                 "Markets",
                 "Badges",
                 "History",
+                "Court",
               ].map((title, index) => (
                 <Tab className="text-sm sm:text-xl" key={index}>
                   {({ selected }) => (
@@ -215,6 +219,9 @@ const Portfolio: NextPageWithLayout = () => {
             <Tab.Panel>
               {address && <HistoryTabGroup address={address} />}
             </Tab.Panel>
+            <Tab.Panel>
+              {address && <CourtTabGroup address={address} />}
+            </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>
       </div>