[frenemies] Signup flow (MystenLabs#7622)

.gitignore

@@ -50,3 +50,4 @@ yarn-error.log*
 
 # misc
 *.key
+.env

dapps/frenemies/src/components/Card.tsx

@@ -15,6 +15,7 @@ const cardStyles = cva(["rounded-2xl", "shadow-notification"], {
       sm: "p-6",
       md: "p-8",
       lg: "p-10",
+      xl: 'p-12'
     },
   },
   defaultVariants: {

dapps/frenemies/src/main.tsx

@@ -12,6 +12,7 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { Root } from "./routes/Root";
 import { Home } from "./routes/Home";
 import { Connect } from "./routes/Connect";
+import { Setup } from "./routes/Setup";
 
 const plausible = Plausible({});
 plausible.enableAutoPageviews();
@@ -30,6 +31,9 @@ const router = createBrowserRouter([
       {
         path: 'connect',
         element: <Connect />
+      },{
+        path: 'setup',
+        element: <Setup />
       }
     ],
   },

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

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { getRawObjectParsedUnsafe, ObjectData } from "../rawObject";
+import { getRawObjectParsedUnsafe } from "../rawObject";
 import { useQuery } from "@tanstack/react-query";
 import { Scorecard } from "../types";
 import provider from "../provider";
@@ -18,7 +18,7 @@ const SCORECARD_TYPE = "frenemies::Scorecard";
  * We do not guarantee correct behavior if people registered more than once,
  * lookup is done with `Array.prototype.find` for the first occurrence.
  */
-export function useScorecard(account: string | null) {
+export function useScorecard(account?: string | null) {
   return useQuery(
     ["scorecard", account],
     async () => {
@@ -33,7 +33,14 @@ export function useScorecard(account: string | null) {
         return null;
       }
 
-      return getRawObjectParsedUnsafe<Scorecard>(provider, search.objectId, "frenemies::Scorecard");
+      return getRawObjectParsedUnsafe<Scorecard>(
+        provider,
+        search.objectId,
+        "frenemies::Scorecard"
+      );
+    },
+    {
+      enabled: !!account,
     }
   );
 }

dapps/frenemies/src/routes/Connect.tsx

@@ -1,8 +1,41 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { ConnectButton } from "@mysten/wallet-kit";
+import { ConnectButton, useWalletKit } from "@mysten/wallet-kit";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Card } from "../components/Card";
 
 export function Connect() {
-  return <ConnectButton />;
+  const navigate = useNavigate();
+  const { currentAccount } = useWalletKit();
+
+  useEffect(() => {
+    if (currentAccount) {
+      navigate("/setup", { replace: true });
+    }
+  }, [currentAccount]);
+
+  return (
+    <div className="max-w-4xl w-full mx-auto text-center">
+      <Card spacing="xl">
+        <h1 className="text-steel-darker text-2xl leading-tight font-semibold mb-5">
+          Welcome to Sui Frenemies game
+        </h1>
+        <img src="/capy_cowboy.svg" className="mb-5 h-64 w-64 mx-auto" />
+        <div className="text-steel-dark uppercase leading-tight mb-1">
+          Your Objective
+        </div>
+        <p className="text-steel-dark text-sm max-w-xs mb-12 mx-auto">
+          The goal of the game is to stake Sui tokens to move your assigned
+          Validator to one of three designated positions: Friend (top third),
+          Neutral (middle third), or Foe (bottom third).
+        </p>
+        <ConnectButton
+          connectText="Connect Wallet to participate"
+          className="!bg-frenemies !text-white !shadow-notification !leading-none !px-5 !py-3 "
+        />
+      </Card>
+    </div>
+  );
 }

dapps/frenemies/src/routes/Home.tsx

@@ -10,13 +10,22 @@ import { YourScore } from "../components/your-score/YourScore";
 import { useScorecard } from "../network/queries/scorecard";
 import { formatAddress, formatGoal } from "../utils/format";
 import { useWalletKit } from "@mysten/wallet-kit";
+import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
 
 /**
  * The Home page.
  */
 export function Home() {
+  const navigate = useNavigate();
   const { currentAccount } = useWalletKit();
-  const { data: scorecard } = useScorecard(currentAccount || '');
+  const { data: scorecard } = useScorecard(currentAccount || "");
+
+  useEffect(() => {
+    if (!currentAccount) {
+      navigate("/connect");
+    }
+  }, [currentAccount]);
 
   // TODO: Render login screen (not registered)
   // TODO: Track wallet connection and make sure user is logged in
@@ -36,7 +45,9 @@ export function Home() {
           <Stat label="Your Role">{formatGoal(assignment.goal)}</Stat>
         </Card>
         <Card spacing="sm">
-          <Stat label="Assigned Validator">{formatAddress(assignment.validator)}</Stat>
+          <Stat label="Assigned Validator">
+            {formatAddress(assignment.validator)}
+          </Stat>
         </Card>
         <Card spacing="sm">
           <Stat label="Time Remaining">