[frenemies] Autoconnect and leaderboard (MystenLabs#7656)

nitingujarathi · Jan 25, 2023 · 68433cd · 68433cd
1 parent 090252c
commit 68433cd
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 29 deletions.
diff --git a/dapps/frenemies/src/components/Card.tsx b/dapps/frenemies/src/components/Card.tsx
@@ -4,25 +4,29 @@
 import { cva, VariantProps } from "class-variance-authority";
 import { ReactNode } from "react";
 
-const cardStyles = cva(["rounded-2xl", "shadow-notification"], {
-  variants: {
-    variant: {
-      leaderboard: "bg-gradient-to-b from-[#768AF7] to-[#97A7FF] text-white",
-      default: "bg-white/90",
-      white: "bg-white",
+const cardStyles = cva(
+  ["rounded-2xl", "shadow-notification"],
+  {
+    variants: {
+      variant: {
+        score: "bg-gradient-to-b from-[#768AF7] to-[#97A7FF] text-white",
+        leaderboard: "bg-gradient-to-b from-[#76B9F7] to-[#A2D0FB] text-white",
+        default: "bg-white/90",
+        white: "bg-white",
+      },
+      spacing: {
+        sm: "p-6",
+        md: "p-8",
+        lg: "p-10",
+        xl: "p-12",
+      },
     },
-    spacing: {
-      sm: "p-6",
-      md: "p-8",
-      lg: "p-10",
-      xl: 'p-12'
+    defaultVariants: {
+      variant: "default",
+      spacing: "md",
     },
-  },
-  defaultVariants: {
-    variant: "default",
-    spacing: "md",
-  },
-});
+  }
+);
 
 interface CardProps extends VariantProps<typeof cardStyles> {
   children: ReactNode;

diff --git a/dapps/frenemies/src/components/Layout.tsx b/dapps/frenemies/src/components/Layout.tsx
@@ -4,8 +4,11 @@
 import { Header } from "./Header";
 import { Footer } from "./Footer";
 import { ReactElement } from "react";
+import { useAutoconnect } from "../utils/useAutoconnect";
 
 export function Layout({ children }: { children: ReactElement | ReactElement[] }) {
+  useAutoconnect();
+
   return (
     <>
       <Header />

diff --git a/dapps/frenemies/src/components/Scoreboard/index.tsx b/dapps/frenemies/src/components/Scoreboard/index.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Tab } from "@headlessui/react";
+import { ReactNode, useState } from "react";
+import { Card } from "../Card";
+import { Leaderboard } from "../leaderboard/Leaderboard";
+import { YourScore } from "../your-score/YourScore";
+
+function TabItem({ children }: { children: ReactNode }) {
+  return (
+    <Tab className="font-semibold leading-tight px-5 py-2 rounded-full ui-selected:bg-white ui-selected:text-steel-darker ui-not-selected:bg-transparent ui-not-selected:text-white">
+      {children}
+    </Tab>
+  );
+}
+
+export function Scoreboard() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  return (
+    <Card variant={selectedIndex === 0 ? "score" : "leaderboard"}>
+      <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+        <Tab.List className="inline-flex space-x-1 rounded-full bg-white/[15%]">
+          <TabItem>You</TabItem>
+          <TabItem>Leaderboard</TabItem>
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>
+            <YourScore />
+          </Tab.Panel>
+          <Tab.Panel>
+            <Leaderboard />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </Card>
+  );
+}
diff --git a/dapps/frenemies/src/components/leaderboard/Leaderboard.tsx b/dapps/frenemies/src/components/leaderboard/Leaderboard.tsx
@@ -3,7 +3,6 @@
 
 import { useLeaderboard } from "../../network/queries/leaderboard";
 import { config } from "../../config";
-import { Card } from "../Card";
 import { Stat } from "../Stat";
 import { Table } from "./Table";
 
@@ -21,8 +20,7 @@ export function Leaderboard() {
   }
 
   return (
-    <Card key="leaderboard" variant="leaderboard">
-      <h2 className="font-semibold text-3xl leading-tight">Leaderboard</h2>
+    <>
       <div className="flex gap-16 mt-3 mb-7">
         <Stat variant="leaderboard" label="Highest Score">
           420
@@ -32,6 +30,6 @@ export function Leaderboard() {
         </Stat> */}
       </div>
       <Table data={data.data} />
-    </Card>
+    </>
   );
 }
diff --git a/dapps/frenemies/src/components/your-score/YourScore.tsx b/dapps/frenemies/src/components/your-score/YourScore.tsx
@@ -6,7 +6,6 @@ import { config } from "../../config";
 import { useLeaderboard } from "../../network/queries/leaderboard";
 import { useScorecard } from "../../network/queries/scorecard";
 import { useScorecardHistory } from "../../network/queries/scorecard-history";
-import { Card } from "../Card";
 import { Stat } from "../Stat";
 import { Table } from "./Table";
 
@@ -24,14 +23,15 @@ export function YourScore() {
     return null;
   }
 
-  const rank = leaderboard.data.topScores.findIndex((score) => score.name == scorecard.data.name);
+  const rank = leaderboard.data.topScores.findIndex(
+    (score) => score.name == scorecard.data.name
+  );
 
   return (
-    <Card key="your-score" variant="leaderboard">
-      <h2 className="font-semibold text-3xl leading-tight">Your Score</h2>
+    <>
       <div className="flex gap-16 mt-3 mb-7">
         <Stat variant="leaderboard" label="Rank">
-          {rank == -1 ? '1000+' : (rank + 1)}
+          {rank == -1 ? "1000+" : rank + 1}
         </Stat>
         <Stat variant="leaderboard" label="Score">
           {scorecard.data.score}
@@ -42,6 +42,6 @@ export function YourScore() {
         leaderboard={leaderboard.data}
         scorecard={scorecard.data}
       />
-    </Card>
+    </>
   );
 }
diff --git a/dapps/frenemies/src/routes/Home.tsx b/dapps/frenemies/src/routes/Home.tsx
@@ -12,6 +12,7 @@ import { formatAddress, formatGoal } from "../utils/format";
 import { useWalletKit } from "@mysten/wallet-kit";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
+import { Scoreboard } from "../components/Scoreboard";
 
 /**
  * The Home page.
@@ -43,8 +44,7 @@ export function Home() {
 
   return (
     <>
-      <Leaderboard />
-      <YourScore />
+      <Scoreboard />
       <Round />
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <Card spacing="sm">

diff --git a/dapps/frenemies/src/utils/useAutoconnect.ts b/dapps/frenemies/src/utils/useAutoconnect.ts
@@ -0,0 +1,30 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useWalletKit } from "@mysten/wallet-kit";
+import { useEffect, useRef } from "react";
+
+const AUTOCONNECT_KEY = "frenemies:wallet";
+
+export function useAutoconnect() {
+  const { wallets, currentWallet, connect } = useWalletKit();
+  const previousWallet = useRef(currentWallet);
+
+  useEffect(() => {
+    const storedWallet = localStorage.getItem(AUTOCONNECT_KEY);
+    // Initial load:
+    if (!currentWallet && !previousWallet.current && storedWallet) {
+      connect(storedWallet);
+    }
+    // Disconnect:
+    if (!currentWallet && previousWallet.current) {
+      localStorage.removeItem(AUTOCONNECT_KEY);
+    }
+    // Connect:
+    if (currentWallet) {
+      localStorage.setItem(AUTOCONNECT_KEY, currentWallet.name);
+    }
+
+    previousWallet.current = currentWallet;
+  }, [wallets, currentWallet]);
+}