ultimate-dominion · ECWireless · Jul 9, 2024 · Jul 9, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git a/packages/client/.eslintrc b/packages/client/.eslintrc
@@ -28,6 +28,9 @@
     "no-console": "error",
   },
   "settings": {
+    "react": {
+      "version": "detect",
+    },
     "import/resolver": {
       "typescript": {
         "alwaysTryTypes": true,

diff --git a/packages/client/src/components/Character/Stats.tsx b/packages/client/src/components/Character/Stats.tsx
@@ -2,13 +2,13 @@ import { HStack, Text, VStack } from '@chakra-ui/react';
 
 export const Stats = ({
   agility,
-  hitPoints,
   intelligence,
+  maxHitPoints,
   strength,
 }: {
   agility: string;
-  hitPoints: string;
   intelligence: string;
+  maxHitPoints: string;
   strength: string;
 }): JSX.Element => {
   return (
@@ -27,7 +27,7 @@ export const Stats = ({
       <VStack w="100%">
         <HStack justify="space-between" w="100%">
           <Text size="lg">HP - Hit</Text>
-          <Text size="lg">{hitPoints}</Text>
+          <Text size="lg">{maxHitPoints}</Text>
         </HStack>
 
         <HStack justify="space-between" w="100%">

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -15,6 +15,7 @@ import { useComponentValue } from '@latticexyz/react';
 import { encodeEntity } from '@latticexyz/store-sync/recs';
 import { useMemo } from 'react';
 import { IoIosArrowForward } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
 
 import { useCharacter } from '../contexts/CharacterContext';
 import { useMUD } from '../contexts/MUDContext';
@@ -23,6 +24,7 @@ import { Level } from './Level';
 const CURRENT_LEVEL = 1;
 
 export const StatsPanel = (): JSX.Element => {
+  const navigate = useNavigate();
   const isDesktop = useBreakpointValue({ base: false, lg: true });
   const {
     components: { Levels },
@@ -56,6 +58,8 @@ export const StatsPanel = (): JSX.Element => {
   return (
     <VStack alignItems="start" h="100%" p={2} spacing={4}>
       <HStack
+        as="button"
+        onClick={() => navigate(`/characters/${character.characterId}`)}
         spacing={4}
         _hover={{ cursor: 'pointer', textDecoration: 'underline' }}
       >

diff --git a/...src/components/TileDetailsPanel/index.tsx → ...lient/src/components/TileDetailsPanel.tsx b/...src/components/TileDetailsPanel/index.tsx → ...lient/src/components/TileDetailsPanel.tsx
@@ -27,10 +27,10 @@ import {
   hexToString,
 } from 'viem';
 
-import { useCharacter } from '../../contexts/CharacterContext';
-import { useMUD } from '../../contexts/MUDContext';
-import { fetchMetadataFromUri, uriToHttp } from '../../utils/helpers';
-import { type Character, type Monster } from '../../utils/types';
+import { useCharacter } from '../contexts/CharacterContext';
+import { useMUD } from '../contexts/MUDContext';
+import { fetchMetadataFromUri, uriToHttp } from '../utils/helpers';
+import { type Character, type Monster } from '../utils/types';
 
 const ROW_HEIGHT = { base: 5, md: 8, lg: 10 };
 

diff --git a/packages/client/src/components/TileDetailsPanel/data.ts b/packages/client/src/components/TileDetailsPanel/data.ts
diff --git a/packages/client/src/contexts/CharacterContext.tsx b/packages/client/src/contexts/CharacterContext.tsx
@@ -9,16 +9,14 @@ import {
   useEffect,
   useState,
 } from 'react';
-import {
-  bytesToHex,
-  formatEther,
-  getContract,
-  hexToBytes,
-  hexToString,
-} from 'viem';
+import { formatEther, getContract, hexToString } from 'viem';
 
 import { useToast } from '../hooks/useToast';
-import { fetchMetadataFromUri, uriToHttp } from '../utils/helpers';
+import {
+  decodeCharacterId,
+  fetchMetadataFromUri,
+  uriToHttp,
+} from '../utils/helpers';
 import type { CharacterData, CharacterStats } from '../utils/types';
 import { useMUD } from './MUDContext';
 
@@ -35,6 +33,7 @@ const CharacterContext = createContext<CharacterContextType>({
     agility: '0',
     experience: '0',
     intelligence: '0',
+    level: '0',
     maxHitPoints: '0',
     strength: '0',
   },
@@ -82,17 +81,17 @@ export const CharacterProvider = ({
     ).map(entity => {
       const characterData = getComponentValueStrict(Characters, entity);
 
-      const entityBytes = hexToBytes(entity.toString() as `0x${string}`);
-      const tokenBytes = entityBytes.slice(20);
-      const tokenId = BigInt(bytesToHex(tokenBytes)).toString();
+      const { characterTokenId } = decodeCharacterId(
+        entity.toString() as `0x${string}`,
+      );
 
       return {
         characterClass: characterData.class,
         characterId: entity,
         locked: characterData.locked,
         name: hexToString(characterData.name as `0x${string}`, { size: 32 }),
         owner: characterData.owner,
-        tokenId,
+        tokenId: characterTokenId,
       };
     })[0];
 
@@ -196,6 +195,7 @@ export const CharacterProvider = ({
           agility: characterStats?.agility.toString() ?? '0',
           experience: characterStats?.experience.toString() ?? '0',
           intelligence: characterStats?.intelligence.toString() ?? '0',
+          level: characterStats?.level.toString() ?? '0',
           maxHitPoints: characterStats?.maxHitPoints.toString() ?? '0',
           strength: characterStats?.strength.toString() ?? '0',
         },

diff --git a/packages/client/src/hooks/useToast.ts b/packages/client/src/hooks/useToast.ts
@@ -1,4 +1,5 @@
 import { useToast as useChakraToast } from '@chakra-ui/react';
+import { useCallback } from 'react';
 
 import { getErrorMessage, USER_ERRORS } from '../utils/errors';
 
@@ -9,46 +10,55 @@ export const useToast = (): {
 } => {
   const toast = useChakraToast();
 
-  const renderError = (error: unknown, defaultError?: string) => {
-    const errorMsg = getErrorMessage(error);
-    // eslint-disable-next-line no-console
-    console.error(error);
-
-    if (USER_ERRORS.includes(errorMsg)) {
-      return;
-    }
-
-    toast({
-      description: getErrorMessage(error, defaultError),
-      position: 'top',
-      status: 'error',
-      containerStyle: {
-        bg: 'red',
-      },
-    });
-  };
-
-  const renderWarning = (msg: string) => {
-    toast({
-      description: msg,
-      position: 'top',
-      status: 'warning',
-      containerStyle: {
-        bg: 'yellow',
-      },
-    });
-  };
-
-  const renderSuccess = (msg: string) => {
-    toast({
-      description: msg,
-      position: 'top',
-      status: 'success',
-      containerStyle: {
-        bg: 'green',
-      },
-    });
-  };
+  const renderError = useCallback(
+    (error: unknown, defaultError?: string) => {
+      const errorMsg = getErrorMessage(error);
+      // eslint-disable-next-line no-console
+      console.error(error);
+
+      if (USER_ERRORS.includes(errorMsg)) {
+        return;
+      }
+
+      toast({
+        description: getErrorMessage(error, defaultError),
+        position: 'top',
+        status: 'error',
+        containerStyle: {
+          bg: 'red',
+        },
+      });
+    },
+    [toast],
+  );
+
+  const renderWarning = useCallback(
+    (msg: string) => {
+      toast({
+        description: msg,
+        position: 'top',
+        status: 'warning',
+        containerStyle: {
+          bg: 'yellow',
+        },
+      });
+    },
+    [toast],
+  );
+
+  const renderSuccess = useCallback(
+    (msg: string) => {
+      toast({
+        description: msg,
+        position: 'top',
+        status: 'success',
+        containerStyle: {
+          bg: 'green',
+        },
+      });
+    },
+    [toast],
+  );
 
   return { renderError, renderWarning, renderSuccess };
 };