fixes

web/src/components/icons/items/PlasticBag.tsx

@@ -3,15 +3,12 @@ import { Icon, IconProps } from "..";
 export const PlasticBag = (props: IconProps) => {
   return (
     <Icon viewBox="0 0 24 24" {...props}>
-      <>
-        <path d="M18.625 2.5H20.875V4.75H19.75V3.625H18.625V2.5Z" fill="currentColor" />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M8.28571 3.5V4.2619H7.52381V9.59524H6.7619V11.881H6V14.9286H6.7619V17.2143H7.52381V17.9762H8.28571V18.7381H9.80952V19.5H14.381V18.7381H15.9048V17.9762H16.6667V17.2143H17.4286V15.6905H18.1905V14.1667H18.9524V11.881H18.1905V10.3571H17.4286V8.07143H16.6667V3.5H15.1429V4.2619H14.381V6.54762H13.619V8.83333H12.8571V9.59524H12.0952V10.3571H11.3333V9.59524H10.5714V7.30952H9.80952V3.5H8.28571ZM14.381 6.54762H15.1429V5.02381H15.9048V10.3571H15.1429V9.59524H14.381V6.54762ZM8.28571 5.02381H9.04762V6.54762H8.28571V5.02381Z"
           fill="currentColor"
         />
-      </>
     </Icon>
   );
 };

web/src/components/layout/Header.tsx

@@ -1,13 +1,14 @@
 import { MediaPlayer, MobileMenu } from "@/components/layout";
-import { Connect } from "@/components/wallet";
+import { Connect, TokenBalance } from "@/components/wallet";
 import { useConfigStore, useGameStore, useRouterContext } from "@/dojo/hooks";
 import { initSoundStore } from "@/hooks/sound";
 import { headerStyles } from "@/theme/styles";
 import { IsMobile, formatCashHeader } from "@/utils/ui";
-import { Divider, Flex, HStack } from "@chakra-ui/react";
+import { Card, Divider, Flex, HStack } from "@chakra-ui/react";
 import { useAccount } from "@starknet-react/core";
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
+import { PaperIcon } from "../icons";
 import { ClaimReward } from "../pages/home";
 import { ProfileLink } from "../pages/profile/Profile";
 import { CashIndicator, DayIndicator, HealthIndicator } from "../player";
@@ -51,12 +52,12 @@ export const Header = observer(({ back }: HeaderProps) => {
         <Burners />
         <Predeployed />
         <ChainSelector canChange={!gameId} />
-        {/* {!game && (
-          <>
-            {config?.ryoAddress.paper && <TokenBalance address={account?.address} token={config?.ryoAddress.paper} />}
-            {account && <PaperFaucet />}
-          </>
-        )} */}
+        {!gameId && account && (
+          <Card h="48px" p={2} display="flex" justifyContent="center">
+            <TokenBalance address={account?.address} token={config?.ryoAddress.paper} icon={PaperIcon} />
+          </Card>
+        )}
+
 
         {!gameId && <ClaimReward />}
       </HStack>

web/src/components/pages/home/HallOfFame.tsx

@@ -1,4 +1,5 @@
 import { HustlerIcon } from "@/components/hustlers";
+import { PaperIcon } from "@/components/icons";
 import { Loader } from "@/components/layout/Loader";
 import { useConfigStore, useDojoContext, useRouterContext } from "@/dojo/hooks";
 import { useGameById } from "@/dojo/hooks/useGameById";
@@ -28,6 +29,7 @@ export const HallOfFame = observer(() => {
         <SimpleGrid columns={[1, 2]} w="full" gap={4}>
           {hallOfFame
             .filter((i) => i.version !== config?.ryo?.leaderboard_version)
+            .sort((a, b) => b.version - a.version)
             .map((i, index) => {
               return <HallOfFameEntry entry={i} key={index} account={account} />;
             })}
@@ -42,6 +44,7 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco
   const { game, isFetched } = useGameById(entry.game_id);
 
   const isSelf = useMemo(() => {
+    if(!account) return false
     return account?.address === game?.player_id;
   }, [account?.address, game?.player_id]);
 
@@ -57,15 +60,8 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco
 
   if (!isFetched) return null;
   return (
-    <Card position="relative" p={3}>
-      <VStack alignItems="flex-start" gap={0}>
-        <HStack w="full" justifyContent="space-between" borderBottom="solid 1px" borderColor="neon.700" pb={2} mb={2}>
-          <Text>SEASON {entry.version}</Text>
-          <Text color={claimable ? "yellow.400" : "neon.400"}>
-            {formatCash(entry.paper_balance).replace("$", "")} <small>PAPER</small>
-          </Text>
-        </HStack>
-
+    <Card position="relative" h="100px" p={2} color={color}>
+      <VStack h="100%" justifyContent="space-between" gap={0}>
         {game && (
           <HStack w="full" gap={3}>
             <HustlerIcon
@@ -78,13 +74,20 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco
             />
 
             <VStack w="full" alignItems="flex-start" gap={1}>
-              <Text>{shortString.decodeShortString(game?.player_name)}</Text>
+              <Text>{shortString.decodeShortString(game?.player_name)} {isSelf && ("(you)")}</Text>
               <Text>{formatCash(entry.high_score)}</Text>
             </VStack>
           </HStack>
         )}
 
         {!game && <Text>No winner!</Text>}
+
+        <HStack w="full" justifyContent="space-between" borderTop="solid 1px" borderColor="neon.700" pt={1} mt={1} opacity={0.7}>
+          <Text>SEASON {entry.version}</Text>
+          <Text color={color}>
+          <PaperIcon width="16px" height="16px" color={color} mr={1}/>{formatCash(entry.paper_balance).replace("$", "")}
+          </Text>
+        </HStack>
       </VStack>
     </Card>
   );

web/src/components/pages/home/Leaderboard.tsx

@@ -10,7 +10,7 @@ import { useAccount } from "@starknet-react/core";
 import { observer } from "mobx-react-lite";
 import { useEffect, useRef, useState } from "react";
 import Countdown from "react-countdown";
-import { Arrow, Skull } from "../../icons";
+import { Arrow, PaperIcon, Skull } from "../../icons";
 
 const renderer = ({
   days,
@@ -57,8 +57,15 @@ export const Leaderboard = observer(({ nameEntry, ...props }: { nameEntry?: bool
 
   //const { leaderboard, isFetchingLeaderboard } = useLeaderboardByVersion(selectedVersion);
   const { hallOfFame, isFetchingHallOfFame } = useHallOfFame();
-  const maxIndex = hallOfFame.length > 0 ? hallOfFame.length - 1 : 0;
-  const [selectedIndex, setSelectedIndex] = useState(maxIndex);
+
+  const [maxIndex, setMaxIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    const maxIndex = hallOfFame.length > 0 ? hallOfFame.length - 1 : 0;
+    setMaxIndex(maxIndex);
+    setSelectedIndex(maxIndex);
+  }, [hallOfFame]);
 
   const { leaderboardEntries, isFetchingLeaderboardEntries } = useLeaderboardEntries(
     hallOfFame[selectedIndex]?.version || 0,
@@ -97,7 +104,8 @@ export const Leaderboard = observer(({ nameEntry, ...props }: { nameEntry?: bool
           <HStack textStyle="subheading" fontSize="12px">
             <Text>SEASON {hallOfFame[selectedIndex]?.version} REWARDS</Text>
             <Text color="yellow.400">
-              {formatCash(hallOfFame[selectedIndex]?.paper_balance || 0).replace("$", "")} PAPER
+              <PaperIcon width="16px" height="16px" color="yellow.400" mr={1}/>
+              {formatCash(hallOfFame[selectedIndex]?.paper_balance || 0).replace("$", "")}
             </Text>
           </HStack>
           <Arrow

web/src/components/wallet/Connect.tsx

@@ -110,8 +110,6 @@ const AccountModal = ({
 
             <Link
               fontSize="18px"
-              fontWeight="bold"
-              fontFamily="monospace"
               textDecoration="none"
               textTransform="uppercase"
               isExternal

web/src/components/wallet/TokenBalance.tsx

@@ -2,14 +2,15 @@ import { PaperIcon } from "@/components/icons/Paper";
 import { useTokenBalance } from "@/dojo/hooks/useTokenBalance";
 import { formatCash, formatEther } from "@/utils/ui";
 import { HStack, Skeleton, Text } from "@chakra-ui/react";
+import React from "react";
 
 const iconsBySymbol = {
   fPAPER: PaperIcon,
   PAPER: PaperIcon,
 };
 type iconsBySymbolKeys = keyof typeof iconsBySymbol;
 
-export const TokenBalance = ({ address, token }: { address?: string; token?: string }) => {
+export const TokenBalance = ({ address, token, icon }: { address?: string; token?: string, icon?: React.FC }) => {
   // infinite loop with sn.js 6
   // const { data: balance } = useBalance({ address, token, /*watch: true, refetchInterval:5_000*/ });
   const { balance, isInitializing } = useTokenBalance({ address, token, refetchInterval: 5_000 });
@@ -20,7 +21,10 @@ export const TokenBalance = ({ address, token }: { address?: string; token?: str
       {isInitializing ? (
         <Skeleton startColor='neon.800' endColor='neon.700' height='20px' w="80px" />
       ) : (
+        <>
+        {icon && icon({width:"16px", height:"16px"})}
         <Text>{formatCash(formatEther(balance)).replace("$", "") || 0}</Text>
+        </>
       )}
       {/* {iconsBySymbol[balance?.symbol as iconsBySymbolKeys] && iconsBySymbol[balance?.symbol as iconsBySymbolKeys]({})} */}
       {/* <Text>{balance?.symbol || "?"}</Text> */}

web/src/pages/index.tsx

@@ -65,7 +65,7 @@ export default function Home() {
                 <Tab>HALL OF FAME</Tab>
               </TabList>
 
-              <TabPanels mt={0} maxH="600px" overflowY="scroll">
+              <TabPanels mt={0} maxH="calc(100vh - 400px)" overflowY="scroll">
                 <TabPanel p={0}>
                   <Leaderboard />
                 </TabPanel>

web/src/theme/components/tabs.tsx

@@ -18,7 +18,7 @@ const baseStyle = definePartsStyle({
       color: "neon.300",
       ...cardPixelatedStyle({ radius: 6, pixelSize: 1 }),
       bg: "transparent",
-      border: "2px solid",
+      border: "0",
       borderColor: "neon.700",
     },
   },