ultimate-dominion · ECWireless · Sep 4, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,4 +1,5 @@
 import { Grid, useBreakpointValue } from '@chakra-ui/react';
+import { garnet } from '@latticexyz/common/chains';
 import { useEffect } from 'react';
 import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 
@@ -9,6 +10,7 @@ import { BattleProvider } from './contexts/BattleContext';
 import { MapProvider } from './contexts/MapContext';
 import { MovementProvider } from './contexts/MovementContext';
 import { useMUD } from './contexts/MUDContext';
+import { DEFAULT_CHAIN_ID } from './lib/web3';
 import AppRoutes, { HOME_PATH } from './Routes';
 
 export const App = (): JSX.Element => {
@@ -42,7 +44,12 @@ const AppInner = (): JSX.Element => {
   useEffect(() => {
     if (pathname === HOME_PATH) return;
 
-    if (burnerBalanceFetched && burnerBalance === '0' && isSynced) {
+    if (
+      burnerBalanceFetched &&
+      burnerBalance === '0' &&
+      isSynced &&
+      DEFAULT_CHAIN_ID !== garnet.id
+    ) {
       onOpenWalletDetailsModal();
     }
   }, [

diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
@@ -156,6 +156,20 @@ export const ActionsPanel = (): JSX.Element => {
 
   return (
     <Box maxH="100%" overflowY="auto" pb={4} ref={parentDivRef}>
+      {currentBattle && equippedSpellsAndWeapons.length === 0 && (
+        <Text color="red" fontWeight={700} p={{ base: 2, lg: 4 }}>
+          You have no equipped items. In order to attack, you must go to your{' '}
+          <Text
+            as={Link}
+            color="blue"
+            to={`/characters/${character?.id}`}
+            _hover={{ textDecoration: 'underline' }}
+          >
+            character page
+          </Text>{' '}
+          and equip at least 1 item.
+        </Text>
+      )}
       {!battleOver &&
         currentBattle &&
         equippedSpellsAndWeapons.length !== 0 &&
@@ -200,21 +214,6 @@ export const ActionsPanel = (): JSX.Element => {
                     </Text>
                   </Text>
                 )}
-                {equippedSpellsAndWeapons.length === 0 && (
-                  <Text color="red" fontWeight={700} p={{ base: 2, lg: 4 }}>
-                    You have no equipped items. In order to attack, you must go
-                    to your{' '}
-                    <Text
-                      as={Link}
-                      color="blue"
-                      to={`/characters/${character?.id}`}
-                      _hover={{ textDecoration: 'underline' }}
-                    >
-                      character page
-                    </Text>{' '}
-                    and equip at least 1 item.
-                  </Text>
-                )}
               </>
             )}
             <HStack position="relative" spacing={0} w="100%">

diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
@@ -1,6 +1,15 @@
-import { Box, Button, Heading, Stack } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Heading,
+  HStack,
+  Stack,
+  Text,
+  Tooltip,
+} from '@chakra-ui/react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useMUD } from '../contexts/MUDContext';
 import { CHARACTER_CREATION_PATH, GAME_BOARD_PATH, HOME_PATH } from '../Routes';
 
 const PAGES_WITHOUT_HEADER = [HOME_PATH];
@@ -13,6 +22,8 @@ export const Header = ({
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
+  const { burnerBalance } = useMUD();
+
   if (PAGES_WITHOUT_HEADER.includes(pathname)) {
     return <Box />;
   }
@@ -26,15 +37,20 @@ export const Header = ({
       mt={8}
       padding={{ base: 1, lg: 2 }}
     >
-      <Button
-        alignSelf={{ base: 'start', lg: 'center' }}
-        bgColor="white"
-        onClick={onOpenWalletDetailsModal}
-        size="xs"
-        variant="outline"
-      >
-        Wallet Details
-      </Button>
+      <HStack>
+        <Button
+          alignSelf={{ base: 'start', lg: 'center' }}
+          bgColor="white"
+          onClick={onOpenWalletDetailsModal}
+          size="xs"
+          variant="outline"
+        >
+          Wallet Details
+        </Button>
+        <Tooltip label="Your session wallet balance">
+          <Text size="2xs">Balance: {Number(burnerBalance).toFixed(5)}</Text>
+        </Tooltip>
+      </HStack>
       <Heading
         as="button"
         onClick={() =>

diff --git a/packages/client/src/components/LevelingPanel.tsx b/packages/client/src/components/LevelingPanel.tsx
@@ -244,6 +244,7 @@ export const LevelingPanel = ({
             {canLevel && (
               <Button
                 borderWidth="1.5px"
+                isDisabled={abilityPoints <= 0}
                 onClick={() => onIncrementStat('str')}
                 size="xs"
                 variant="outline"
@@ -276,6 +277,7 @@ export const LevelingPanel = ({
             {canLevel && (
               <Button
                 borderWidth="1.5px"
+                isDisabled={abilityPoints <= 0}
                 onClick={() => onIncrementStat('agi')}
                 size="xs"
                 variant="outline"
@@ -308,6 +310,7 @@ export const LevelingPanel = ({
             {canLevel && (
               <Button
                 borderWidth="1.5px"
+                isDisabled={abilityPoints <= 0}
                 onClick={() => onIncrementStat('int')}
                 size="xs"
                 variant="outline"

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -1,5 +1,6 @@
 import {
   Avatar,
+  Box,
   Button,
   Grid,
   GridItem,
@@ -8,14 +9,15 @@ import {
   Spacer,
   Spinner,
   Text,
+  Tooltip,
   useBreakpointValue,
   VStack,
 } from '@chakra-ui/react';
 import { useComponentValue } from '@latticexyz/react';
 import { encodeEntity } from '@latticexyz/store-sync/recs';
 import { useMemo } from 'react';
+import { BsBackpack4Fill } from 'react-icons/bs';
 import { IoIosArrowForward } from 'react-icons/io';
-import { MdBackpack } from 'react-icons/md';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 
 import { useCharacter } from '../contexts/CharacterContext';
@@ -186,6 +188,20 @@ export const StatsPanel = (): JSX.Element => {
       <VStack align="stretch" alignItems="start" mt={4} spacing={2} w="100%">
         <HStack fontWeight="bold" w="100%">
           <Text>Equipped Items</Text>
+          <Tooltip
+            hasArrow
+            label="Visit the character page to equip items"
+            placement="top"
+          >
+            <Button
+              onClick={() => navigate(`/characters/${character.id}`)}
+              p="0 2px"
+              size="sm"
+              variant="ghost"
+            >
+              <BsBackpack4Fill size={12} />
+            </Button>
+          </Tooltip>
           <Spacer />
           <Text>
             {allItems.length}/{MAX_EQUIPPED_ITEMS}
@@ -200,14 +216,7 @@ export const StatsPanel = (): JSX.Element => {
             w="100%"
           >
             <Text>{item.name}</Text>
-            <Button
-              onClick={() => navigate(`/characters/${character.id}`)}
-              p="0 2px"
-              size="sm"
-              variant="ghost"
-            >
-              <MdBackpack size={12} />
-            </Button>
+            <Box h={6} />
           </HStack>
         ))}
         {Array.from({
@@ -222,6 +231,7 @@ export const StatsPanel = (): JSX.Element => {
           >
             <Text>Empty Slot</Text>
             <Button
+              h={6}
               onClick={() => navigate(`/characters/${character.id}`)}
               p="0 2px"
               size="sm"