Add use-latest-melee-id hook

src/typescript/frontend/src/components/pages/arena/ArenaClient.tsx

@@ -17,9 +17,8 @@ import { ROUTES } from "router/routes";
 import ChartContainer from "@/components/charts/ChartContainer";
 import { type ClassValue } from "clsx";
 import { useReliableSubscribe } from "@hooks/use-reliable-subscribe";
-import { useEventStore } from "context/event-store-context";
-import { compareBigInt } from "@sdk/utils";
 import { useRouter } from "next/navigation";
+import { useLatestMeleeID } from "@hooks/use-latest-melee-id";
 
 const RewardsRemainingBox = ({ rewardsRemaining }: { rewardsRemaining: bigint }) => {
   const { isMobile } = useMatchBreakpoints();
@@ -121,21 +120,10 @@ export const ArenaClient = (props: ArenaProps) => {
 
   useReliableSubscribe({ eventTypes: ["Swap"], arena: true });
 
-  const asdf = useEventStore((s) => s.meleeEvents);
-  useEffect(() => console.log(asdf));
-
-  // `meleeEvents` is really small, probably only 2 events at a time ever, never more than a dozen in local development.
-  const latestMeleeID = useEventStore(
-    (s) =>
-      s.meleeEvents
-        .map((v) => v.melee.meleeID)
-        .toSorted((m1, m2) => compareBigInt(m1, m2))
-        .pop() ?? -1n
-  );
+  const latestMeleeID = useLatestMeleeID();
 
   useEffect(() => {
     if (latestMeleeID > props.arenaInfo.meleeID) {
-      console.log("new melee?");
       router.refresh();
     }
   }, [latestMeleeID, props.arenaInfo.meleeID, router]);

src/typescript/frontend/src/hooks/use-latest-melee-id.ts

@@ -0,0 +1,17 @@
+import { useEventStore } from "context/event-store-context";
+import { useMemo } from "react";
+
+export const useLatestMeleeID = () => {
+  const melees = useEventStore((s) => s.meleeEvents);
+
+  const latest = useMemo(
+    () =>
+      melees
+        .map(({ melee }) => melee.meleeID)
+        .sort()
+        .at(-1) ?? -1n,
+    [melees]
+  );
+
+  return latest;
+};

src/typescript/frontend/src/lib/store/event/types.ts

@@ -9,7 +9,7 @@ import { type SubscribeBarsCallback } from "@static/charting_library/datafeed-ap
 import { type LatestBar } from "./candlestick-bars";
 import { type WritableDraft } from "immer";
 import { type ClientState, type ClientActions } from "../websocket/store";
-import { ArenaActions, type ArenaState } from "../arena/store";
+import { type ArenaActions, type ArenaState } from "../arena/store";
 import { type Flatten } from "@sdk-types";
 
 // Aliased to avoid repeating the type names over and over.