updates

client/src/hooks/helpers/use-resource-arrivals.tsx

@@ -39,14 +39,11 @@ const usePlayerArrivals = () => {
     HasValue(Owner, { address: ContractAddress(account.address) }),
   ]);
 
-  const [playerStructurePositions, setPlayerStructurePositions] = useState<(Position & { entityId: ID })[]>([]);
-
-  useEffect(() => {
-    const positions = playerStructures.map((entityId) => {
+  const playerStructurePositions = useMemo(() => {
+    return playerStructures.map((entityId) => {
       const position = getComponentValue(Position, entityId);
       return { x: position?.x ?? 0, y: position?.y ?? 0, entityId: position?.entity_id || 0 };
     });
-    setPlayerStructurePositions(positions);
   }, [playerStructures, Position]);
 
   const [entitiesWithInventory, setEntitiesWithInventory] = useState<ArrivalInfo[]>([]);
@@ -62,8 +59,6 @@ const usePlayerArrivals = () => {
     const arrivals = positions.flatMap((position) => {
       return Array.from(runQuery([HasValue(Position, { x: position.x, y: position.y }), ...queryFragments]));
     });
-
-    console.log("arrivals", arrivals);
     return arrivals;
   }, []);
 

client/src/ui/components/trading/ResourceArrivals.tsx

@@ -3,14 +3,28 @@ import { useDojo } from "@/hooks/context/DojoContext";
 import { ArrivalInfo } from "@/hooks/helpers/use-resource-arrivals";
 import { Headline } from "@/ui/elements/Headline";
 import { HintModalButton } from "@/ui/elements/HintModalButton";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect } from "react";
+import { create } from "zustand";
 import { EntityArrival } from "../entities/Entity";
 import { HintSection } from "../hints/HintModal";
 
+interface SubscribedIdsStore {
+  subscribedIds: Set<string>;
+  addSubscribedIds: (ids: string[]) => void;
+}
+
+const useSubscribedIdsStore = create<SubscribedIdsStore>((set) => ({
+  subscribedIds: new Set<string>(),
+  addSubscribedIds: (ids) =>
+    set((state) => ({
+      subscribedIds: new Set([...state.subscribedIds, ...ids]),
+    })),
+}));
+
 export const AllResourceArrivals = memo(
   ({ arrivals, className = "" }: { arrivals: ArrivalInfo[]; className?: string }) => {
     const dojo = useDojo();
-    const [subscribedIds, setSubscribedIds] = useState<Set<string>>(new Set());
+    const { subscribedIds, addSubscribedIds } = useSubscribedIdsStore();
 
     useEffect(() => {
       // Create a single Set from newIds for O(1) lookup
@@ -21,19 +35,15 @@ export const AllResourceArrivals = memo(
 
       if (unsubscribedIds.length === 0) return;
 
-      // Batch the state update with the API call
-      setSubscribedIds((prev) => {
-        // If nothing changed, return the previous state to prevent re-render
-        if (unsubscribedIds.every((id) => prev.has(id))) return prev;
-        return new Set([...prev, ...unsubscribedIds]);
-      });
+      // Update zustand store
+      addSubscribedIds(unsubscribedIds);
 
       // Move API call outside of state updates
       addToSubscription(dojo.network.toriiClient, dojo.network.contractComponents as any, unsubscribedIds).catch(
         (error) => console.error("Fetch failed", error),
       );
       console.log("AddToSubscriptionStart - 5");
-    }, [arrivals, subscribedIds]);
+    }, [arrivals, subscribedIds, addSubscribedIds]);
 
     return (
       <div className={`p-2 flex flex-col space-y-1 overflow-y-auto gap-2 ${className}`}>

client/src/ui/containers/BaseContainer.tsx

@@ -1,7 +1,7 @@
 import { ReactComponent as Collapse } from "@/assets/icons/common/collapse.svg";
 import { ReactComponent as Expand } from "@/assets/icons/common/expand.svg";
 import clsx from "clsx";
-import { forwardRef, ReactNode, useState } from "react";
+import { forwardRef, memo, ReactNode, useState } from "react";
 
 interface BaseContainerProps {
   children?: ReactNode;
@@ -11,38 +11,40 @@ interface BaseContainerProps {
   collapsedClassName?: string;
   scrollbarSide?: "left" | "right";
 }
-export const BaseContainer = forwardRef<HTMLDivElement, BaseContainerProps>(
-  (
-    { children, className, expandable, expandedClassName, collapsedClassName, scrollbarSide }: BaseContainerProps,
-    ref,
-  ) => {
-    const [expanded, setExpanded] = useState(false);
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          "flex relative flex-col transition-all duration-400 bg-brown/90 bg-hex-bg animatedBackground",
-          {
-            "[direction:rtl]": scrollbarSide === "left",
-          },
-          className,
-          expanded ? expandedClassName : collapsedClassName,
-        )}
-      >
-        {children}
-        {expandable &&
-          (expanded ? (
-            <Collapse
-              onClick={() => setExpanded(false)}
-              className="absolute w-4 h-4 transition-colors duration-200 cursor-pointer top-4 right-4 fill-gold hover:fill-white"
-            />
-          ) : (
-            <Expand
-              onClick={() => setExpanded(true)}
-              className="absolute w-4 h-4 transition-colors duration-200 cursor-pointer top-4 right-4 fill-gold hover:fill-white"
-            />
-          ))}
-      </div>
-    );
-  },
+export const BaseContainer = memo(
+  forwardRef<HTMLDivElement, BaseContainerProps>(
+    (
+      { children, className, expandable, expandedClassName, collapsedClassName, scrollbarSide }: BaseContainerProps,
+      ref,
+    ) => {
+      const [expanded, setExpanded] = useState(false);
+      return (
+        <div
+          ref={ref}
+          className={clsx(
+            "flex relative flex-col transition-all duration-400 bg-brown/90 bg-hex-bg animatedBackground",
+            {
+              "[direction:rtl]": scrollbarSide === "left",
+            },
+            className,
+            expanded ? expandedClassName : collapsedClassName,
+          )}
+        >
+          {children}
+          {expandable &&
+            (expanded ? (
+              <Collapse
+                onClick={() => setExpanded(false)}
+                className="absolute w-4 h-4 transition-colors duration-200 cursor-pointer top-4 right-4 fill-gold hover:fill-white"
+              />
+            ) : (
+              <Expand
+                onClick={() => setExpanded(true)}
+                className="absolute w-4 h-4 transition-colors duration-200 cursor-pointer top-4 right-4 fill-gold hover:fill-white"
+              />
+            ))}
+        </div>
+      );
+    },
+  ),
 );

client/src/ui/containers/BattleContainer.tsx

@@ -1,7 +1,7 @@
 import useUIStore from "@/hooks/store/useUIStore";
-import { useEffect } from "react";
+import { memo, useEffect } from "react";
 
-export const BattleContainer = ({ children }: { children: React.ReactNode }) => {
+export const BattleContainer = memo(({ children }: { children: React.ReactNode }) => {
   const setBattleView = useUIStore((state) => state.setBattleView);
 
   const battleView = useUIStore((state) => state.battleView);
@@ -26,4 +26,4 @@ export const BattleContainer = ({ children }: { children: React.ReactNode }) =>
       {children}
     </div>
   );
-};
+});

client/src/ui/containers/BlankOverlayContainer.tsx

@@ -1,12 +1,12 @@
 import { Transition } from "@headlessui/react";
-import React, { Fragment } from "react";
+import { Fragment, memo } from "react";
 
 type BlurOverlayContainerProps = {
   children?: React.ReactNode;
   open: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export const BlankOverlayContainer = ({ children, open }: BlurOverlayContainerProps) => {
+export const BlankOverlayContainer = memo(({ children, open }: BlurOverlayContainerProps) => {
   return (
     <Transition
       show={open}
@@ -23,4 +23,4 @@ export const BlankOverlayContainer = ({ children, open }: BlurOverlayContainerPr
       </div>
     </Transition>
   );
-};
+});

client/src/ui/containers/BottomMiddleContainer.tsx

@@ -1,7 +1,9 @@
-export const BottomMiddleContainer = ({ children }: { children: React.ReactNode }) => {
+import { memo } from "react";
+
+export const BottomMiddleContainer = memo(({ children }: { children: React.ReactNode }) => {
   return (
     <div className="absolute w-screen bottom-0 left-1/2 transform -translate-x-1/2 flex justify-center pointer-events-none z-20">
       {children}
     </div>
   );
-};
+});

client/src/ui/containers/BottomRightContainer.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
+import { ReactNode, memo } from "react";
 
 interface BottomRightContainerProps {
   children?: ReactNode;
 }
 
-export const BottomRightContainer = ({ children }: BottomRightContainerProps) => {
+export const BottomRightContainer = memo(({ children }: BottomRightContainerProps) => {
   return <div className="absolute flex flex-col bottom-0 right-0 root-container z-30 w-full md:w-auto">{children}</div>;
-};
+});

client/src/ui/containers/LeftMiddleContainer.tsx

@@ -1,7 +1,9 @@
-const LeftMiddleContainer = ({ children }: { children: React.ReactNode }) => {
+import { memo } from "react";
+
+const LeftMiddleContainer = memo(({ children }: { children: React.ReactNode }) => {
   return (
     <div className="absolute z-20 w-auto top-14 md:top-0 h-screen left-0 flex pointer-events-none">{children}</div>
   );
-};
+});
 
 export default LeftMiddleContainer;

client/src/ui/containers/RightMiddleContainer.tsx

@@ -1,5 +1,7 @@
-const RightMiddleContainer = ({ children }: { children: React.ReactNode }) => {
+import { memo } from "react";
+
+const RightMiddleContainer = memo(({ children }: { children: React.ReactNode }) => {
   return <div className="absolute z-20 w-auto right-0 flex h-screen top-0 pointer-events-none">{children}</div>;
-};
+});
 
 export default RightMiddleContainer;

client/src/ui/containers/TopCenterContainer.tsx

@@ -1,5 +1,7 @@
-const TopCenterContainer = ({ children }: { children: React.ReactNode }) => {
+import { memo } from "react";
+
+const TopCenterContainer = memo(({ children }: { children: React.ReactNode }) => {
   return <div className="absolute w-screen top-10 flex pointer-events-none z-20">{children}</div>;
-};
+});
 
 export default TopCenterContainer;

client/src/ui/containers/TopLeftContainer.tsx

@@ -1,5 +1,7 @@
-const TopLeftContainer = ({ children }: { children: React.ReactNode }) => {
+import { memo } from "react";
+
+const TopLeftContainer = memo(({ children }: { children: React.ReactNode }) => {
   return <div className="absolute top-0 left-0 pointer-events-auto z-20">{children}</div>;
-};
+});
 
 export default TopLeftContainer;

client/src/ui/layouts/World.tsx

@@ -93,10 +93,8 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => {
   const [subscriptions, setSubscriptions] = useState<{ [entity: string]: boolean }>({});
   const showBlankOverlay = useUIStore((state) => state.showBlankOverlay);
   const isLoadingScreenEnabled = useUIStore((state) => state.isLoadingScreenEnabled);
-
   const showModal = useUIStore((state) => state.showModal);
   const modalContent = useUIStore((state) => state.modalContent);
-
   const battleView = useUIStore((state) => state.battleView);
 
   // Setup hooks
@@ -199,6 +197,21 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => {
     }
   }, []);
 
+  const battleViewContent = useMemo(
+    () => (
+      <div>
+        <Suspense fallback={<LoadingOroborus loading={true} />}>
+          {battleView && (
+            <BattleContainer>
+              <BattleView />
+            </BattleContainer>
+          )}
+        </Suspense>
+      </div>
+    ),
+    [battleView],
+  );
+
   return (
     <div
       onClick={(e) => {
@@ -232,9 +245,7 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => {
           </>
         )}
 
-        <BattleContainer>
-          <BattleView />
-        </BattleContainer>
+        {battleViewContent}
 
         <div className={`${battleView ? "opacity-0 pointer-events-none" : ""}`}>
           <LeftMiddleContainer>
@@ -261,7 +272,7 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => {
           )}
 
           <TopLeftContainer>
-            <TopLeftNavigation />
+            <TopLeftNavigation structures={structures} />
           </TopLeftContainer>
         </div>
 

client/src/ui/modules/military/battle-view/BattleView.tsx

@@ -6,10 +6,10 @@ import { Structure, useStructureByEntityId, useStructureByPosition } from "@/hoo
 import useUIStore from "@/hooks/store/useUIStore";
 import useNextBlockTimestamp from "@/hooks/useNextBlockTimestamp";
 import { BattleSide } from "@bibliothecadao/eternum";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { Battle } from "./Battle";
 
-export const BattleView = () => {
+export const BattleView = memo(() => {
   const dojo = useDojo();
   const getStructure = useStructureByPosition();
   const armiesByBattleId = getArmiesByBattleId();
@@ -148,4 +148,4 @@ export const BattleView = () => {
       structure={structure as Structure}
     />
   );
-};
+});

client/src/ui/modules/navigation/TopLeftNavigation.tsx

@@ -1,6 +1,6 @@
 import { configManager } from "@/dojo/setup";
 import { useDojo } from "@/hooks/context/DojoContext";
-import { useEntities, useEntitiesUtils } from "@/hooks/helpers/useEntities";
+import { PlayerStructure, useEntitiesUtils } from "@/hooks/helpers/useEntities";
 import { useQuery } from "@/hooks/helpers/useQuery";
 import useUIStore from "@/hooks/store/useUIStore";
 import useNextBlockTimestamp from "@/hooks/useNextBlockTimestamp";
@@ -92,13 +92,11 @@ const WorkersHutTooltipContent = () => {
   );
 };
 
-export const TopLeftNavigation = memo(() => {
+export const TopLeftNavigation = memo(({ structures }: { structures: PlayerStructure[] }) => {
   const { setup } = useDojo();
 
   const { isMapView, handleUrlChange, hexPosition } = useQuery();
-  const { playerStructures } = useEntities();
   const { getEntityInfo } = useEntitiesUtils();
-  const structures = playerStructures();
 
   const isSpectatorMode = useUIStore((state) => state.isSpectatorMode);
   const structureEntityId = useUIStore((state) => state.structureEntityId);