From ffc8323461e4f14fbe4b09ce5f597bd083000623 Mon Sep 17 00:00:00 2001
From: matt <xbtmatt@gmail.com>
Date: Thu, 5 Sep 2024 18:15:41 -0700
Subject: [PATCH 1/2] Fix animations by updating the component `keys` for the
 emoji grid items

---
 .../emoji-table/AnimatedClientGrid.tsx         |  2 +-
 .../home/components/emoji-table/ClientGrid.tsx |  8 +++++---
 .../pages/home/components/emoji-table/utils.ts | 18 ++++++++++++++----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx
index 861238d36..8072b135c 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx
+++ b/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}
diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx
index 031233a27..ce16ee28b 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx
+++ b/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}
diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts b/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts
index befc3ad48..eebb2cd3b 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts
+++ b/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts
@@ -8,15 +8,22 @@ 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,
@@ -24,11 +31,13 @@ export const marketDataToProps = (data: FetchSortedMarketDataReturn["markets"]):
     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

From 92438cbbae19f47fd85c4fc161f90ed3793d5bfe Mon Sep 17 00:00:00 2001
From: matt <xbtmatt@gmail.com>
Date: Thu, 5 Sep 2024 18:23:23 -0700
Subject: [PATCH 2/2] Add hyphen in between substring of component key

---
 .../pages/home/components/emoji-table/AnimatedClientGrid.tsx    | 2 +-
 .../components/pages/home/components/emoji-table/ClientGrid.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx
index 8072b135c..e3918e685 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/AnimatedClientGrid.tsx
+++ b/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.searchEmojisKey}`}
+            key={`live-${v.marketID}-${v.searchEmojisKey}`}
             index={v.index}
             pageOffset={0} // We don't paginate the live grid.
             marketID={v.marketID}
diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx
index ce16ee28b..e09201d24 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx
@@ -47,7 +47,7 @@ export const ClientGrid = ({
       {ordered.map((v, i) => {
         return (
           <TableCard
-            key={`live-${v.marketID}${v.searchEmojisKey}`}
+            key={`live-${v.marketID}-${v.searchEmojisKey}`}
             index={i}
             pageOffset={(page - 1) * MARKETS_PER_PAGE}
             marketID={v.marketID}