[ECO-2169] Fix animations by updating the component keys for the emoji grid items

src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx

@@ -161,7 +161,7 @@ export const LiveClientGrid = ({
       {ordered.map((v) => {
         return (
           <TableCard
-            key={`live-${v.marketID}-${v.index}`}
+            key={`live-${v.marketID}-${v.searchEmojisKey}`}
             index={v.index}
             pageOffset={0} // We don't paginate the live grid.
             marketID={v.marketID}

src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx

@@ -9,6 +9,7 @@ import MemoizedGridRowLines from "./components/grid-row-lines";
 import { type MarketDataSortByHomePage } from "lib/queries/sorting/types";
 import { useEffect, useMemo, useRef } from "react";
 import "./module.css";
+import { useEmojiPicker } from "context/emoji-picker-context";
 
 export const ClientGrid = ({
   data,
@@ -20,10 +21,11 @@ export const ClientGrid = ({
   sortBy: MarketDataSortByHomePage;
 }) => {
   const rowLength = useGridRowLength();
+  const searchEmojis = useEmojiPicker((s) => s.emojis);
 
   const ordered = useMemo(() => {
-    return marketDataToProps(data);
-  }, [data]);
+    return marketDataToProps(data, searchEmojis);
+  }, [data, searchEmojis]);
 
   const initialRender = useRef(true);
 
@@ -45,7 +47,7 @@ export const ClientGrid = ({
       {ordered.map((v, i) => {
         return (
           <TableCard
-            key={`${sortBy}-${v.marketID}-${i}`}
+            key={`live-${v.marketID}-${v.searchEmojisKey}`}
             index={i}
             pageOffset={(page - 1) * MARKETS_PER_PAGE}
             marketID={v.marketID}

src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts

@@ -8,27 +8,36 @@ import { type EmojiPickerStore } from "@store/emoji-picker-store";
 
 export type PropsWithTime = Omit<TableCardProps, "index" | "rowLength"> & {
   time: number;
+  searchEmojisKey: string;
 };
 export type PropsWithTimeAndIndex = TableCardProps & {
   time: number;
+  searchEmojisKey: string;
 };
 export type WithTimeIndexAndPrev = PropsWithTimeAndIndex & {
   prevIndex?: number;
 };
 
-export const marketDataToProps = (data: FetchSortedMarketDataReturn["markets"]): PropsWithTime[] =>
+const toSearchEmojisKey = (searchEmojis: string[]) => `{${searchEmojis.join("")}}`;
+
+export const marketDataToProps = (
+  data: FetchSortedMarketDataReturn["markets"],
+  searchEmojis: string[]
+): PropsWithTime[] =>
   data.map((market) => ({
     time: market.bumpTime,
     symbol: market.symbol,
     marketID: market.marketID,
     emojis: market.emojis,
     staticMarketCap: market.marketCap.toString(),
     staticVolume24H: market.dailyVolume.toString(),
+    searchEmojisKey: toSearchEmojisKey(searchEmojis),
   }));
 
 export const stateEventsToProps = (
   firehose: EventStore["firehose"],
-  getMarket: EventStore["getMarket"]
+  getMarket: EventStore["getMarket"],
+  searchEmojis: string[]
 ): PropsWithTime[] => {
   // State events are emitted with every single event related to bump order.
   // We can strictly only use state events to get the information we need to construct the bump
@@ -48,6 +57,7 @@ export const stateEventsToProps = (
       staticMarketCap: (marketCap ?? 0).toString(),
       staticVolume24H: (volume24H ?? 0).toString(),
       trigger: e.stateMetadata.trigger,
+      searchEmojisKey: toSearchEmojisKey(searchEmojis),
     };
   });
 };
@@ -95,10 +105,10 @@ export const constructOrdered = ({
   // We don't need to filter the fetched data because it's already filtered and sorted by the
   // server. We only need to filter event store state events.
   const searchEmojis = getSearchEmojis();
-  const initial = marketDataToProps(data);
+  const initial = marketDataToProps(data, searchEmojis);
 
   // If we're sorting by bump order, deduplicate and sort the events by bump order.
-  const bumps = stateEventsToProps(stateFirehose, getMarket);
+  const bumps = stateEventsToProps(stateFirehose, getMarket, searchEmojis);
   // Filter only if there are search emojis.
   const filteredBumps = !searchEmojis.length
     ? bumps