post-df ui tweaks

dapps/frenemies/src/components/leaderboard/Leaderboard.tsx

@@ -22,7 +22,7 @@ export function Leaderboard() {
     <>
       <div className="flex gap-16 mt-3 mb-7">
         <Stat variant="leaderboard" label="Highest Score">
-          {leaderboard.data.topScores[0].score || 0}
+          {leaderboard.data.topScores[0]?.score || '--'}
         </Stat>
         {/* <Stat variant="leaderboard" label="Total Score">
           420

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

@@ -1,10 +1,14 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { useWalletKit } from "@mysten/wallet-kit";
 import { ReactNode } from "react";
+import { useScorecard } from "../../network/queries/scorecard";
+import { useScorecardHistory } from "../../network/queries/scorecard-history";
 import { useSuiSystem } from "../../network/queries/sui-system";
 import { Leaderboard, ScorecardUpdatedEvent } from "../../network/types";
 import { formatGoal, formatAddress } from "../../utils/format";
+import { Logo } from "../Validators/Logo";
 
 interface Props {
   data: ScorecardUpdatedEvent[];
@@ -25,7 +29,10 @@ const Cell = ({
 );
 
 export function Table({ data, round, leaderboard }: Props) {
+  const { currentAccount } = useWalletKit();
   const { data: system } = useSuiSystem();
+  // const { data: scorecard } = useScorecard(currentAccount);
+  const { isLoading } = useScorecardHistory();
   const activeValidators = system?.validators.fields.active_validators || [];
   const getValidator = (addr: string) => activeValidators
     .find((v) => v.fields.metadata.fields.sui_address.replace('0x', '') == addr)?.fields;
@@ -50,28 +57,30 @@ export function Table({ data, round, leaderboard }: Props) {
             <Cell as="th">Role</Cell>
             <Cell as="th">Assigned Validator</Cell>
             <Cell as="th">Objective</Cell>
-            <Cell as="th">Score</Cell>
+            <Cell as="th">Points Scored</Cell>
           </tr>
         </thead>
         <tbody>
           {[...tableData].reverse().map((evt, round, arr) => {
             const currRound = firstRound + arr.length - round - 1;
-            let totalScore = 0;
-
             if (evt) {
               const { goal, validator } = evt.assignment;
-              totalScore = evt.totalScore;
+              const validatorMeta = getValidator(validator)?.metadata.fields;
               return (
                 <tr key={currRound.toString()} className="border-t border-white/20">
                   <Cell>{currRound.toString()}</Cell>
                   <Cell>{formatGoal(goal)}</Cell>
-                  <Cell>{getValidator(validator)?.metadata.fields.name || formatAddress(validator)}</Cell>
-                  <Cell>{evt.epochScore !== 0 ? "Achieved" : "Failed"}</Cell>
                   <Cell>
-                    {evt.epochScore !== 0
-                      ? `${evt.totalScore} (+${evt.epochScore})`
-                      : `${evt.totalScore}`}
+                    <Logo
+                      src={validatorMeta?.image_url as string}
+                      size="sm"
+                      label={validatorMeta?.name as string}
+                      circle
+                    />
+                    {validatorMeta?.name || formatAddress(validator)}
                   </Cell>
+                  <Cell>{evt.epochScore !== 0 ? "Achieved" : "Failed"}</Cell>
+                  <Cell>{(evt.epochScore !== 0 ? '+' : '') + evt.epochScore}</Cell>
                 </tr>
               );
             } else {
@@ -80,8 +89,8 @@ export function Table({ data, round, leaderboard }: Props) {
                   <Cell>{currRound.toString()}</Cell>
                   <Cell>--</Cell>
                   <Cell>--</Cell>
-                  <Cell>Skipped</Cell>
-                  <Cell>{totalScore}</Cell>
+                  <Cell>{isLoading ? '--' : 'Skipped'}</Cell>
+                  <Cell>--</Cell>
                 </tr>
               );
             }

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

@@ -46,7 +46,7 @@ export function YourScore() {
         <Stat variant="leaderboard" label="Rank">
           {rank === -1 ? "--" : rank + 1}
         </Stat>
-        <Stat variant="leaderboard" label="Score">
+        <Stat variant="leaderboard" label="Total Score">
           {scorecard.data.score}
         </Stat>
       </div>

dapps/frenemies/src/routes/Home.tsx

@@ -12,12 +12,10 @@ import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Scoreboard } from "../components/Scoreboard";
 import { useEpoch } from "../network/queries/epoch";
-import { Goal, LEADERBOARD, Leaderboard } from "../network/types";
+import { Goal } from "../network/types";
 import { Assignment } from "../components/Assignment";
 import { useSuiSystem } from "../network/queries/sui-system";
 import { Logo } from "../components/Validators/Logo";
-import { useRawObject } from "../network/queries/use-raw";
-import { config } from "../config";
 
 /**
  * The Home page.
@@ -26,7 +24,6 @@ export function Home() {
   const navigate = useNavigate();
   const { data: epoch } = useEpoch();
   const { currentAccount } = useWalletKit();
-  const { data: leaderboard } = useRawObject<Leaderboard>(config.VITE_LEADERBOARD, LEADERBOARD);
   const { data: scorecard, isSuccess } = useScorecard(currentAccount);
   const { data: system } = useSuiSystem();
 
@@ -63,10 +60,15 @@ export function Home() {
     return () => clearInterval(interval);
   }, [epoch]);
 
+  // Whether there's an assignment for the current round (either first one
+  // or requested for the round via "Play Round X" button).
   const hasAssignment = !!scorecard
     && !!epoch
     && scorecard.data.assignment.epoch == epoch.data.epoch;
 
+  // Metadata of the currently assigned validator.
+  const validatorMeta = assignedValidator?.fields.metadata.fields;
+
   return (
     <>
       <Scoreboard />
@@ -77,19 +79,15 @@ export function Home() {
         </Card>
         <Card spacing="sm">
           <Stat label="Assigned Validator">
-            {assignedValidator && hasAssignment ? (
+            {validatorMeta && hasAssignment ? (
               <div className="flex items-center gap-2">
                 <Logo
-                  src={
-                    assignedValidator.fields.metadata.fields.image_url as string
-                  }
+                  src={validatorMeta.image_url as string}
                   size="md"
-                  label={
-                    assignedValidator.fields.metadata.fields.name as string
-                  }
+                  label={validatorMeta.name as string}
                   circle
                 />
-                <div>{assignedValidator.fields.metadata.fields.name}</div>
+                <div>{validatorMeta.name}</div>
               </div>
             ) : (
               "--"

dapps/frenemies/src/routes/Setup.tsx

@@ -29,7 +29,7 @@ export function Setup() {
     ["create-scorecard"],
     async (username: string) => {
       if (!currentAccount) {
-        throw new Error("No Coins found, please request some from faucet");
+        throw new Error("No SUI coins found in your wallet. You need SUI to play the Frenemies game");
       }
 
       const gasPrice = epoch?.data.referenceGasPrice || 1n;