ultimate-dominion · ECWireless · Jul 13, 2024 · Jul 12, 2024 · Jul 12, 2024 · Jul 13, 2024
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -6,7 +6,7 @@ import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { WalletDetailsModal } from './components/WalletDetailsModal';
 import { useMUD } from './contexts/MUDContext';
-import AppRoutes from './Routes';
+import AppRoutes, { HOME_PATH } from './Routes';
 
 export const App = (): JSX.Element => {
   return (
@@ -26,7 +26,7 @@ const AppInner = (): JSX.Element => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
-    if (pathname === '/') return;
+    if (pathname === HOME_PATH) return;
 
     if (burnerBalanceFetched && burnerBalance === '0' && isSynced) {
       onOpen();

diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -10,6 +10,10 @@ import { CharacterCreation } from './pages/CharacterCreation';
 import { GameBoard } from './pages/GameBoard';
 import { Welcome } from './pages/Welcome';
 
+export const HOME_PATH = '/';
+export const CHARACTER_CREATION_PATH = '/character-creation';
+export const GAME_BOARD_PATH = '/game-board';
+
 const AppRoutes: React.FC = () => {
   const { pathname } = useLocation();
   const {
@@ -18,7 +22,11 @@ const AppRoutes: React.FC = () => {
 
   const syncProgress = useComponentValue(SyncProgress, singletonEntity);
 
-  if (syncProgress && syncProgress.step !== SyncStep.LIVE && pathname !== '/') {
+  if (
+    syncProgress &&
+    syncProgress.step !== SyncStep.LIVE &&
+    pathname !== HOME_PATH
+  ) {
     return (
       <VStack justify="center" h="100%">
         <Text>
@@ -30,9 +38,9 @@ const AppRoutes: React.FC = () => {
 
   return (
     <Routes>
-      <Route path="/" element={<Welcome />} />
-      <Route path="/character-creation" element={<CharacterCreation />} />
-      <Route path="/game-board" element={<GameBoard />} />
+      <Route path={HOME_PATH} element={<Welcome />} />
+      <Route path={CHARACTER_CREATION_PATH} element={<CharacterCreation />} />
+      <Route path={GAME_BOARD_PATH} element={<GameBoard />} />
       <Route path="/characters/:characterId" element={<CharacterPage />} />
     </Routes>
   );

diff --git a/packages/client/src/components/DelegationButton.tsx b/packages/client/src/components/DelegationButton.tsx
@@ -8,6 +8,7 @@ import { useMUD } from '../contexts/MUDContext';
 import { useToast } from '../hooks/useToast';
 import { setupDelegation } from '../lib/mud/delegation';
 import { getChainNameFromId, isSupportedChain } from '../lib/web3';
+import { CHARACTER_CREATION_PATH } from '../Routes';
 
 export const DelegationButton = ({
   externalWalletClient,
@@ -44,7 +45,7 @@ export const DelegationButton = ({
       }
 
       getBurner();
-      navigate('/character-creation');
+      navigate(CHARACTER_CREATION_PATH);
     } catch (error) {
       renderError(error, 'Failed to delegate');
     } finally {

diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
@@ -1,7 +1,9 @@
 import { Box, Button, Heading, Stack } from '@chakra-ui/react';
 import { useLocation } from 'react-router-dom';
 
-const PAGES_WITHOUT_HEADER = ['/'];
+import { HOME_PATH } from '../Routes';
+
+const PAGES_WITHOUT_HEADER = [HOME_PATH];
 
 export const Header = ({
   onOpenWalletDetailsModal,

diff --git a/packages/client/src/contexts/CharacterContext.tsx b/packages/client/src/contexts/CharacterContext.tsx
@@ -1,11 +1,10 @@
-import { useComponentValue } from '@latticexyz/react';
 import {
   getComponentValue,
   getComponentValueStrict,
   HasValue,
   runQuery,
 } from '@latticexyz/recs';
-import { singletonEntity } from '@latticexyz/store-sync/recs';
+import { encodeEntity } from '@latticexyz/store-sync/recs';
 import {
   createContext,
   ReactNode,
@@ -17,25 +16,20 @@ import {
 import { formatEther, hexToString } from 'viem';
 
 import { useToast } from '../hooks/useToast';
-import { BALANCE_OF_ABI, TOKEN_URI_ABI } from '../utils/constants';
-import {
-  decodeCharacterId,
-  fetchMetadataFromUri,
-  uriToHttp,
-} from '../utils/helpers';
+import { fetchMetadataFromUri, uriToHttp } from '../utils/helpers';
 import type { Character, CharacterData, CharacterStats } from '../utils/types';
 import { useMUD } from './MUDContext';
 
 type CharacterContextType = {
   character: Character | null;
   isRefreshing: boolean;
-  refreshCharacter: () => void;
+  refreshCharacter: () => Promise<void>;
 };
 
 const CharacterContext = createContext<CharacterContextType>({
   character: null,
   isRefreshing: false,
-  refreshCharacter: () => {},
+  refreshCharacter: async () => {},
 });
 
 export type CharacterProviderProps = {
@@ -46,7 +40,7 @@ export const CharacterProvider = ({
   children,
 }: CharacterProviderProps): JSX.Element => {
   const {
-    components: { Characters, Stats, UltimateDominionConfig },
+    components: { Characters, CharactersTokenURI, GoldBalances, Stats },
     delegatorAddress,
     network: { publicClient, worldContract },
   } = useMUD();
@@ -55,25 +49,9 @@ export const CharacterProvider = ({
   const [userCharacter, setUserCharacter] = useState<Character | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  const ultimateDominionConfig = useComponentValue(
-    UltimateDominionConfig,
-    singletonEntity,
-  );
-
-  const refreshCharacterData = useCallback(async () => {
-    if (
-      !(
-        delegatorAddress &&
-        publicClient &&
-        ultimateDominionConfig &&
-        worldContract
-      )
-    )
-      return;
-    const partialCharacter: Omit<
-      CharacterData & CharacterStats,
-      'goldBalance'
-    > = Array.from(
+  const fetchCharacterData = useCallback(async () => {
+    if (!(delegatorAddress && publicClient && worldContract)) return;
+    const partialCharacter: CharacterData & CharacterStats = Array.from(
       runQuery([
         HasValue(Characters, {
           owner: delegatorAddress,
@@ -82,91 +60,78 @@ export const CharacterProvider = ({
     ).map(entity => {
       const characterData = getComponentValueStrict(Characters, entity);
       const characterStats = getComponentValue(Stats, entity);
+      const { tokenId } = characterData;
 
-      const { characterTokenId } = decodeCharacterId(
-        entity.toString() as `0x${string}`,
+      const ownerEntity = encodeEntity(
+        { address: 'address' },
+        { address: characterData.owner as `0x${string}` },
       );
+      const goldBalance =
+        getComponentValue(GoldBalances, ownerEntity)?.value ?? BigInt(0);
 
       return {
         agility: characterStats?.agility.toString() ?? '0',
         baseHitPoints: characterStats?.baseHitPoints.toString() ?? '0',
         characterClass: characterStats?.class ?? 0,
         characterId: entity,
         experience: characterStats?.experience.toString() ?? '0',
+        goldBalance: formatEther(goldBalance).toString(),
         intelligence: characterStats?.intelligence.toString() ?? '0',
         level: characterStats?.level.toString() ?? '0',
         locked: characterData.locked,
         name: hexToString(characterData.name as `0x${string}`, { size: 32 }),
         owner: characterData.owner,
         strength: characterStats?.strength.toString() ?? '0',
-        tokenId: characterTokenId,
+        tokenId: tokenId.toString(),
       };
     })[0];
 
     if (!partialCharacter) return;
+    const { tokenId } = partialCharacter;
+
+    const tokenIdEntity = encodeEntity(
+      { tokenId: 'uint256' },
+      { tokenId: BigInt(tokenId) },
+    );
 
-    const { characterToken, goldToken, multicall } = ultimateDominionConfig;
-
-    const characterContract = {
-      address: characterToken as `0x${string}`,
-      abi: TOKEN_URI_ABI,
-    };
-
-    const goldTokenContract = {
-      address: goldToken as `0x${string}`,
-      abi: BALANCE_OF_ABI,
-    };
-
-    const [{ result: metadataURI }, { result: goldBalance }] =
-      await publicClient.multicall({
-        contracts: [
-          {
-            ...characterContract,
-            functionName: 'tokenURI',
-            args: [BigInt(partialCharacter.tokenId)],
-          },
-          {
-            ...goldTokenContract,
-            functionName: 'balanceOf',
-            args: [delegatorAddress],
-          },
-        ],
-        multicallAddress: multicall as `0x${string}`,
-      });
+    const metadataURI = getComponentValueStrict(
+      CharactersTokenURI,
+      tokenIdEntity,
+    ).tokenURI;
 
     const fetachedMetadata = await fetchMetadataFromUri(
-      uriToHttp(metadataURI as string)[0],
+      uriToHttp(`ipfs://${metadataURI}`)[0],
     );
 
     setUserCharacter({
       ...partialCharacter,
       ...fetachedMetadata,
-      goldBalance: formatEther(BigInt(goldBalance as bigint)).toString(),
     });
   }, [
     Characters,
+    CharactersTokenURI,
     delegatorAddress,
+    GoldBalances,
     publicClient,
     Stats,
-    ultimateDominionConfig,
     worldContract,
   ]);
 
   const refreshCharacter = useCallback(async () => {
     setIsRefreshing(true);
     try {
-      await refreshCharacterData();
+      await fetchCharacterData();
     } catch (error) {
       renderError('Error refreshing character');
     } finally {
       setIsRefreshing(false);
     }
-  }, [refreshCharacterData, renderError]);
+  }, [fetchCharacterData, renderError]);
 
   useEffect(() => {
     if (!(delegatorAddress && publicClient && worldContract)) return;
-    refreshCharacterData();
-  }, [delegatorAddress, refreshCharacterData, publicClient, worldContract]);
+    fetchCharacterData();
+  }, [delegatorAddress, fetchCharacterData, publicClient, worldContract]);
 
   return (
     <CharacterContext.Provider