Merge branch 'development' of https://github.com/optimism-java/disput…

…e-explorer-frontend into development

src/components/Cards/GameItemCard.tsx

@@ -0,0 +1,49 @@
+import { FC } from "react";
+import { Card } from "./Card";
+import cn from "classnames";
+import Skeleton from "react-loading-skeleton";
+
+export type GameItemCardProps = Partial<{
+  name: string;
+  content: string;
+  compact: boolean;
+}>;
+
+export const GameItemCard: FC<GameItemCardProps> = ({
+  name,
+  content,
+  compact,
+}) => {
+  return (
+    <Card compact={compact}>
+      <div
+        className={cn(
+          {
+            "sm:gap-4": !compact,
+            "sm:gap-1": compact,
+          },
+          "flex flex-col justify-between gap-1"
+        )}
+      >
+        <div
+          className={cn(
+            "text-xl",
+            "font-semibold dark:text-warmGray-50",
+            "text-center"
+          )}
+        >
+          {name ?? <Skeleton width={80} height={20} />}
+        </div>
+        <div
+          className={cn(
+            "text-lg",
+            "font-semibold dark:text-warmGray-50",
+            "text-center"
+          )}
+        >
+          {content ?? <Skeleton width={80} height={20} />}
+        </div>
+      </div>
+    </Card>
+  );
+};

src/hooks/useLatestGame.ts

@@ -6,29 +6,31 @@ import { useEffect, useState } from "react";
 const url = "/index/indexes/disputegames/search";
 
 type GamesParams = {
-  limit?: string,
-  offset?: string,
-  sort?: any
-}
+  limit?: string;
+  offset?: string;
+  sort?: any;
+  q?: string;
+};
 
 const defaultParams: GamesParams = {
-  limit: '5',
-  offset: '0',
+  limit: "5",
+  offset: "0",
   sort: ["block_number:desc"],
 };
 
-
 const getFetcher = (u: string) => {
   return async (): Promise<IndexResponse<Game>> => {
     return await get(u);
   };
-}
+};
 
-export const useLatestGame = (params?: GamesParams): SWRResponse<IndexResponse<Game>, Error, boolean> => {
+export const useLatestGame = (
+  params?: GamesParams
+): SWRResponse<IndexResponse<Game>, Error, boolean> => {
   const p = {
     ...defaultParams,
-    ... (params ? params : {})
-  }
+    ...(params ? params : {}),
+  };
   const queryString = new URLSearchParams(p);
   const requestUrl = `${url}?${queryString.toString()}`;
   const res = useSWR(requestUrl, getFetcher(requestUrl));

src/pages/game/[game].tsx

@@ -2,21 +2,65 @@ import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 import ClaimChart from "@/components/Charts/ClaimChart";
 import { useClaimData } from "@/hooks/useClaimData";
+import { ChartSkeleton } from "@/components/ChartSkeleton";
+import { ClaimData } from "@/types";
+import { useLatestGame } from "@/hooks/useLatestGame";
+import { GameItemCard } from "@/components/Cards/GameItemCard";
+import Skeleton from "react-loading-skeleton";
+import { shortenAddress } from "@/utils";
+import {
+  formatSeconds,
+  formatTimestamp,
+  formatTtl,
+  getHumanDate,
+} from "@/utils/date";
 
 const GameDetail = () => {
   const router = useRouter();
-  console.log(router);
   const address = (router.query.game as string | undefined) ?? "";
-  console.log(address);
 
   const { data, isLoading } = useClaimData(address);
-  if (!data) {
-    return <>no data</>;
-  }
-
+  const { data: game, isLoading: gameLoading } = useLatestGame({
+    limit: "1",
+    q: address,
+  });
   return (
-    <div className="min-h-screen">
-      <ClaimChart claimData={isLoading? [] : data.data} />
+    <div className="flex flex-col gap-4">
+      {gameLoading && isLoading ? (
+        <Skeleton style={{ width: "100%" }} height={250} />
+      ) : (
+        <div className="col-span-3 grid w-full grid-cols-3 gap-2 sm:col-span-3 sm:grid-cols-3">
+          <GameItemCard
+            name="Game Address"
+            content={shortenAddress(game?.hits[0].game_contract as string, 8)}
+          />
+          <GameItemCard
+            name="Root Claim"
+            content={"0x" + shortenAddress(data?.data[0].claim as string, 8)}
+          />
+          <GameItemCard
+            name="Created"
+            content={formatSeconds(game?.hits[0].block_time as number)}
+          />
+          <GameItemCard name="Claims" content={data?.data.length.toString()} />
+          <GameItemCard
+            name="Status"
+            content={game?.hits[0].status === 0 ? "In Progress" : "Resloved"}
+          />
+          <GameItemCard
+            name="Disputed L2 Block"
+            content={game?.hits[0].l2_block_number.toString()}
+          />
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="flex h-full w-full items-center justify-center">
+          <ChartSkeleton itemsCount={6} />
+        </div>
+      ) : (
+        <ClaimChart claimData={data?.data as ClaimData[]} />
+      )}
     </div>
   );
 };

src/utils/date.ts

@@ -36,3 +36,8 @@ export function formatTtl(ttl: number) {
 export function getHumanDate(date: string | Date) {
   return dayjs(date).format("dddd, MMMM, DD YYYY");
 }
+
+export function formatSeconds(secs: number) {
+  const date = new Date(secs * 1000);
+  return dayjs(date).format("YYYY/MM/DD hh:mm:ss");
+}