[frenemies] Add claim workflow (MystenLabs#8256)

dapps/frenemies/src/components/Card.tsx

@@ -11,13 +11,14 @@ const cardStyles = cva(["rounded-2xl", "shadow-notification"], {
       leaderboard: "bg-gradient-to-b from-[#76B9F7] to-[#A2D0FB] text-white",
       default: "bg-white/90",
       white: "bg-white",
-      error: 'bg-issue-light text-gray-90'
+      error: "bg-issue-light text-gray-90",
     },
     spacing: {
       sm: "p-6",
       md: "p-8",
       lg: "p-10",
       xl: "p-12",
+      "2xl": "p-16",
     },
   },
   defaultVariants: {

dapps/frenemies/src/components/GameEnding.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { GAME_END_DATE, gameIsOver } from "../config";
+import { Card } from "./Card";
+
+export function useGameOverRedirect() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (gameIsOver()) {
+      navigate("/claim", { replace: true });
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      navigate("/claim", { replace: true });
+    }, GAME_END_DATE.getTime() - Date.now());
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+}
+
+export function GameEnding() {
+  return (
+    <Card>
+      <h2 className="text-steel-darker font-semibold text-heading2">
+        Frenemies is ending soon
+      </h2>
+      <div className="text-left text-steel-darker mt-4">
+        Frenemies will end on{" "}
+        <span className="font-bold">
+          {GAME_END_DATE.toLocaleString("en-US", {
+            day: "numeric",
+            month: "long",
+            minute: "2-digit",
+            hour: "numeric",
+            timeZoneName: "short",
+          })}
+        </span>
+        . We will take a snapshot of the leaderboard by 10am PST. Please submit
+        your final moves before that time.
+      </div>
+    </Card>
+  );
+}

dapps/frenemies/src/components/Layout.tsx

@@ -9,7 +9,7 @@ export function Layout({ children }: { children: ReactElement | ReactElement[] }
   return (
     <>
       <Header />
-      <div className="mx-auto max-w-6xl px-4 w-full flex flex-col gap-5 mb-24 mt-4">
+      <div className="mx-auto max-w-6xl px-4 w-full flex flex-col gap-5 pb-24 mt-4">
         {children}
       </div>
       <Footer />

dapps/frenemies/src/components/your-score/Refresh.tsx

@@ -38,16 +38,14 @@ export function Refresh({ fallback = null }: Props) {
     0n;
 
   return (
-    <div className="absolute top-0 right-0">
-      <button
-        className="bg-white shadow-button text-body font-semibold text-frenemies py-3 px-4 rounded-lg inline-flex items-center gap-2"
-        onClick={() => {
-          refreshScorecard.mutate();
-        }}
-      >
-        <img src="/refresh.svg" alt="refresh" />
-        Play Round {(round || 0).toString()}
-      </button>
-    </div>
+    <button
+      className="bg-white shadow-button text-body font-semibold text-frenemies py-3 px-4 rounded-lg inline-flex items-center gap-2"
+      onClick={() => {
+        refreshScorecard.mutate();
+      }}
+    >
+      <img src="/refresh.svg" alt="refresh" />
+      Play Round {(round || 0).toString()}
+    </button>
   );
 }

dapps/frenemies/src/components/your-score/YourScore.tsx

@@ -39,7 +39,9 @@ export function YourScore() {
 
   return (
     <>
-      <Refresh />
+      <div className="absolute top-0 right-0">
+        <Refresh />
+      </div>
       <div className="flex gap-16 mt-3 mb-7">
         <Stat variant="leaderboard" label="Rank">
           {rank === -1 ? "--" : rank + 1}

dapps/frenemies/src/config.ts

@@ -7,6 +7,12 @@ import { Network } from "@mysten/sui.js";
 // Oops, we need to bump the round.
 export const ROUND_OFFSET = 5n;
 
+export const GAME_END_DATE = new Date(
+  "Tue Feb 14 2023 10:00:00 GMT-0800 (Pacific Standard Time)"
+);
+
+export const gameIsOver = () => Date.now() >= GAME_END_DATE.getTime();
+
 const ConfigSchema = z.object({
   VITE_NETWORK: z
     .union([z.nativeEnum(Network), z.string()])
@@ -22,6 +28,8 @@ const ConfigSchema = z.object({
   VITE_OLD_PKG: z.string(),
   /** Registry for the previous version of frenemies: */
   VITE_OLD_REGISTRY: z.string(),
+  /** The noop package */
+  VITE_NOOP: z.string().default("0x7829fea9bbd3aecdc7721465789c5431bdaf9436"),
 });
 
 export const config = ConfigSchema.parse(import.meta.env);

dapps/frenemies/src/main.tsx

@@ -19,6 +19,7 @@ import { Connect } from "./routes/Connect";
 import { Setup } from "./routes/Setup";
 import { toast } from "react-hot-toast";
 import { Migrate } from "./routes/Migrate";
+import { Claim } from "./routes/Claim";
 
 const plausible = Plausible({});
 plausible.enableAutoPageviews();
@@ -54,6 +55,10 @@ const router = createBrowserRouter([
         path: "migrate",
         element: <Migrate />,
       },
+      {
+        path: "claim",
+        element: <Claim />,
+      },
       {
         path: "*",
         element: <Navigate to="/" replace />,

dapps/frenemies/src/network/queries/coin.ts

@@ -26,6 +26,7 @@ export function useBalance() {
     {
       enabled: !!currentAccount,
       refetchInterval: 60 * 1000,
+      staleTime: 2000,
     }
   );
 }

dapps/frenemies/src/network/queries/epoch.ts

@@ -49,6 +49,7 @@ export function useEpoch() {
     {
       // Refetch every 10 minutes:
       refetchInterval: 10 * 60 * 1000,
+      staleTime: 10 * 60 * 1000,
     }
   );
 

dapps/frenemies/src/network/queries/scorecard-history.ts

@@ -42,6 +42,7 @@ export function useScorecardHistory(scorecardId?: string | null) {
       enabled: !!scorecardId,
       refetchOnWindowFocus: false,
       refetchInterval: 60 * 1000,
+      staleTime: 20 * 1000,
     }
   );
 }

dapps/frenemies/src/network/queries/sui-system.ts

@@ -24,6 +24,7 @@ export function useValidators() {
     },
     {
       refetchInterval: 60 * 1000,
+      staleTime: 5000,
     }
   );
 }