From 362d2c54f7f37c95150e674bcd07c3bb4dfd8d16 Mon Sep 17 00:00:00 2001
From: Matt <90358481+xbtmatt@users.noreply.github.com>
Date: Mon, 1 Jul 2024 10:46:18 -0700
Subject: [PATCH] [ECO-1920] Fix `div` child of `td` hydration error warning
 (#138)

Co-authored-by: matt <xbtmatt@gmail.com>
---
 .../trade-history/table-row/index.tsx         |  19 +--
 .../home/components/main-card/MainCard.tsx    |  92 ++++++-----
 .../home/components/main-card/module.css      | 143 ++++++++++++++++++
 .../home/components/main-card/styled.tsx      | 123 ---------------
 4 files changed, 190 insertions(+), 187 deletions(-)

diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
index 74a5169a5..e738d9e61 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React, { type PropsWithChildren } from "react";
-import { useTooltip } from "hooks";
 import { type TableRowDesktopProps } from "./types";
 import { toCoinDecimalString } from "lib/utils/decimals";
 import { toNominalPrice } from "@sdk/utils/nominal-price";
@@ -36,16 +35,9 @@ const TableRowStyles =
 const TableCellStyles = "h-[33px]";
 
 const TableRow = ({ item, showBorder }: TableRowDesktopProps) => {
-  const { targetRef, tooltip } = useTooltip(
-    <div className="text-black pixel-heading-4 uppercase">{item.emoji}</div>,
-    {
-      placement: "top",
-    }
-  );
-
   return (
     <tr className={TableRowStyles} id="grid-hover">
-      <div
+      <td
         className={
           "absolute w-full h-full bg-transparent group-hover:inline-flex border-r-[1px] " +
           "border-b-[1px] border-solid group-hover:border-[1px] group-hover:border-ec-blue z-[1] border-dark-gray" +
@@ -56,18 +48,15 @@ const TableRow = ({ item, showBorder }: TableRowDesktopProps) => {
         className={`min-w-[60px] xl:min-w-[71px] xl:ml-[0.5ch] xl:mr-[-0.5ch] ${TableCellStyles}`}
       >
         <div className="flex h-full">
-          <span className="text-light-gray m-auto" ref={targetRef}>
-            {item.rankIcon}
-          </span>
-          {tooltip}
+          <span className="text-light-gray m-auto">{item.rankIcon}</span>
         </div>
       </td>
       <td className={`w-[5%] md:w-[4.7%] ${TableCellStyles}`}></td>
       <TableRowTextItem className={`w-[22%] md:w-[18%] ${TableCellStyles}`}>
-        <div className="ellipses">{toCoinDecimalString(item.apt, 3)}</div>
+        <span className="ellipses">{toCoinDecimalString(item.apt, 3)}</span>
       </TableRowTextItem>
       <TableRowTextItem className={`w-[22%] md:w-[18%] ${TableCellStyles}`}>
-        <div className="ellipses">{toCoinDecimalString(item.emoji, 3)}</div>
+        <span className="ellipses">{toCoinDecimalString(item.emoji, 3)}</span>
       </TableRowTextItem>
       <td className={`w-[0%] md:w-[0.3%] ${TableCellStyles}`}></td>
       <TableRowTextItem
diff --git a/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx b/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
index 3459456ef..9c335544d 100644
--- a/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
@@ -5,13 +5,7 @@ import React, { useEffect, useState } from "react";
 import { translationFunction } from "context/language-context";
 import useTooltip from "hooks/use-tooltip";
 import { Column, Flex, FlexGap } from "@containers";
-import {
-  StyledEmoji,
-  StyledPixelHeadingText,
-  StyledDisplayFontText,
-  SubheaderText,
-  StyledImage,
-} from "./styled";
+import { StyledImage } from "./styled";
 import { toCoinDecimalString } from "lib/utils/decimals";
 import AptosIconBlack from "components/svg/icons/AptosBlack";
 import "./module.css";
@@ -111,65 +105,65 @@ const MainCard = ({ featured, totalNumberOfMarkets }: MainCardProps) => {
             alt="Planet"
           />
 
-          <StyledEmoji>{featured?.symbol ?? "🖤"}</StyledEmoji>
+          <div id="styled-emoji">{featured?.symbol ?? "🖤"}</div>
         </Link>
 
         <Column maxWidth="100%" ellipsis>
-          <StyledPixelHeadingText textScale="pixelHeading1" color="darkGray">
-            {"01"}
-          </StyledPixelHeadingText>
-          <StyledDisplayFontText ref={targetRefEmojiName} ellipsis>
+          <div className="pixel-heading-1 text-dark-gray pixel-heading-text">01</div>
+          <div className="display-font-text ellipses font-forma-bold" ref={targetRefEmojiName}>
             {(featured ? emojisToName(featured.emojis) : "BLACK HEART").toUpperCase()}
-          </StyledDisplayFontText>
+          </div>
 
           <FlexGap gap="8px">
             {typeof featured !== "undefined" && (
-              <div className="flex flex-row items-center justify-center">
-                <SubheaderText color="darkGray" textTransform="uppercase">
-                  {t("Mkt. Cap:")}&nbsp;
-                </SubheaderText>
-                <SubheaderText ref={marketCapRef}>
-                  {toCoinDecimalString(marketCap, 2)}
-                </SubheaderText>
-                <SubheaderText>
-                  &nbsp;
-                  <AptosIconBlack className={"icon-inline m-auto"} />
-                </SubheaderText>
-              </div>
+              <>
+                <div className="font-forma text-dark-gray market-data-text uppercase">
+                  {t("Mkt. Cap:")}
+                </div>
+                <div className="font-forma text-white market-data-text uppercase">
+                  <div className="flex flex-row items-center justify-center">
+                    <div ref={marketCapRef}>{toCoinDecimalString(marketCap, 2)}</div>
+                    &nbsp;
+                    <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
+                  </div>
+                </div>
+              </>
             )}
           </FlexGap>
 
           <FlexGap gap="8px">
             {typeof featured !== "undefined" && (
-              <div className="flex flex-row items-center justify-center">
-                <SubheaderText color="darkGray" textTransform="uppercase">
-                  {t("24 hour vol:")}&nbsp;
-                </SubheaderText>
-                <SubheaderText ref={dailyVolumeRef}>
-                  {toCoinDecimalString(roughDailyVolume, 2)}
-                </SubheaderText>
-                <SubheaderText>
-                  &nbsp;
-                  <AptosIconBlack className={"icon-inline m-auto"} />
-                </SubheaderText>
-              </div>
+              <>
+                <div className="text-dark-gray uppercase">
+                  <div className="font-forma text-dark-gray market-data-text uppercase">
+                    {t("24 hour vol:")}
+                  </div>
+                </div>
+                <div className="font-forma text-white market-data-text uppercase">
+                  <div className="flex flex-row items-center justify-center">
+                    <div ref={dailyVolumeRef}>{toCoinDecimalString(roughDailyVolume, 2)}</div>
+                    &nbsp;
+                    <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
+                  </div>
+                </div>
+              </>
             )}
           </FlexGap>
 
           <FlexGap gap="8px">
             {typeof featured !== "undefined" && (
-              <div className="flex flex-row items-center justify-center">
-                <SubheaderText color="darkGray" textTransform="uppercase">
-                  {t("All-time vol:")}&nbsp;
-                </SubheaderText>
-                <SubheaderText ref={allTimeVolumeRef}>
-                  {toCoinDecimalString(roughAllTimeVolume, 2)}
-                </SubheaderText>
-                <SubheaderText>
-                  &nbsp;
-                  <AptosIconBlack className={"icon-inline m-auto"} />
-                </SubheaderText>
-              </div>
+              <>
+                <div className="font-forma text-dark-gray market-data-text uppercase">
+                  {t("All-time vol:")}
+                </div>
+                <div className="font-forma text-white market-data-text uppercase">
+                  <div className="flex flex-row items-center justify-center">
+                    <div ref={allTimeVolumeRef}>{toCoinDecimalString(roughAllTimeVolume, 2)}</div>
+                    &nbsp;
+                    <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
+                  </div>
+                </div>
+              </>
             )}
           </FlexGap>
         </Column>
diff --git a/src/typescript/frontend/src/components/pages/home/components/main-card/module.css b/src/typescript/frontend/src/components/pages/home/components/main-card/module.css
index 7cc7e4a55..609c71873 100644
--- a/src/typescript/frontend/src/components/pages/home/components/main-card/module.css
+++ b/src/typescript/frontend/src/components/pages/home/components/main-card/module.css
@@ -12,4 +12,147 @@
 
 #hero-image {
   animation: image-pulse 4s infinite ease-in-out;
+  width: 289px;
+
+  @media screen and (min-width: 578px) {
+    width: 417px;
+  }
+
+  @media screen and (min-width: 1096px) {
+    width: 545px;
+  }
+
+  @media screen and (min-width: 1355px) {
+    width: 675px;
+  }
+
+  @media screen and (min-width: 1614px) {
+    width: 803px;
+  }
+
+  @media screen and (min-width: 1873px) {
+    width: 932px;
+  }
+}
+
+div#styled-emoji {
+  position: absolute;
+  left: 61%;
+  transform: translateX(-50%);
+  font-size: 51px;
+  line-height: unset;
+  padding-top: 8px;
+
+  @media screen and (min-width: 578px) {
+    font-size: 74px;
+    padding-top: 14px;
+  }
+
+  @media screen and (min-width: 1096px) {
+    font-size: 97px;
+    padding-top: 18px;
+  }
+
+  @media screen and (min-width: 1355px) {
+    font-size: 120px;
+    padding-top: 32px;
+  }
+
+  @media screen and (min-width: 1614px) {
+    font-size: 143px;
+  }
+
+  @media screen and (min-width: 1873px) {
+    font-size: 166px;
+  }
+}
+
+div.pixel-heading-text {
+  font-size: 26px;
+
+  @media screen and (min-width: 578px) {
+    font-size: 37px;
+  }
+
+  @media screen and (min-width: 1096px) {
+    font-size: 49px;
+  }
+
+  @media screen and (min-width: 1355px) {
+    font-size: 60px;
+  }
+
+  @media screen and (min-width: 1614px) {
+    font-size: 72px;
+  }
+
+  @media screen and (min-width: 1873px) {
+    font-size: 83px;
+  }
+}
+
+div.market-data-text {
+  font-size: 11px;
+  line-height: unset;
+  margin-bottom: 7px;
+
+  @media screen and (min-width: 578px) {
+    font-size: 16px;
+    margin-bottom: 9px;
+  }
+
+  @media screen and (min-width: 1096px) {
+    font-size: 21px;
+    margin-bottom: 9px;
+  }
+
+  @media screen and (min-width: 1355px) {
+    font-size: 26px;
+    margin-bottom: 14px;
+  }
+
+  @media screen and (min-width: 1614px) {
+    font-size: 31px;
+    margin-bottom: 10px;
+  }
+
+  @media screen and (min-width: 1873px) {
+    font-size: 37px;
+    margin-bottom: 8px;
+  }
+}
+
+div.display-font-text {
+  font-size: 38px;
+  line-height: unset;
+  margin-top: -12px;
+  margin-bottom: 7px;
+  color: white;
+
+  @media screen and (min-width: 578px) {
+    font-size: 55px;
+    margin-bottom: 5px;
+    margin-top: -4px;
+  }
+
+  @media screen and (min-width: 1096px) {
+    font-size: 72px;
+    margin-bottom: 16px;
+  }
+
+  @media screen and (min-width: 1355px) {
+    font-size: 89px;
+    margin-top: 12px;
+    margin-bottom: 24px;
+  }
+
+  @media screen and (min-width: 1614px) {
+    font-size: 106px;
+    margin-bottom: 10px;
+  }
+
+  @media screen and (min-width: 1873px) {
+    font-size: 124px;
+    margin-bottom: 8px;
+  }
 }
diff --git a/src/typescript/frontend/src/components/pages/home/components/main-card/styled.tsx b/src/typescript/frontend/src/components/pages/home/components/main-card/styled.tsx
index 33bd8d94d..13e5d9e1f 100644
--- a/src/typescript/frontend/src/components/pages/home/components/main-card/styled.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/main-card/styled.tsx
@@ -1,129 +1,6 @@
 import styled from "styled-components";
-import { Text } from "components/text";
 import Image from "components/image";
 
-export const StyledEmoji = styled.div`
-  position: absolute;
-  left: 61%;
-  transform: translateX(-50%);
-  font-size: 51px;
-  line-height: unset;
-  padding-top: 8px;
-
-  @media screen and (min-width: 578px) {
-    font-size: 74px;
-    padding-top: 14px;
-  }
-
-  @media screen and (min-width: 1096px) {
-    font-size: 97px;
-    padding-top: 18px;
-  }
-
-  @media screen and (min-width: 1355px) {
-    font-size: 120px;
-    padding-top: 32px;
-  }
-
-  @media screen and (min-width: 1614px) {
-    font-size: 143px;
-  }
-
-  @media screen and (min-width: 1873px) {
-    font-size: 166px;
-  }
-`;
-
-export const StyledPixelHeadingText = styled(Text)`
-  font-size: 26px;
-
-  @media screen and (min-width: 578px) {
-    font-size: 37px;
-  }
-
-  @media screen and (min-width: 1096px) {
-    font-size: 49px;
-  }
-
-  @media screen and (min-width: 1355px) {
-    font-size: 60px;
-  }
-
-  @media screen and (min-width: 1614px) {
-    font-size: 72px;
-  }
-
-  @media screen and (min-width: 1873px) {
-    font-size: 83px;
-  }
-`;
-
-export const StyledDisplayFontText = styled(Text)`
-  font-size: 38px;
-  line-height: unset;
-  font-family: ${({ theme }) => theme.fonts.formaM};
-  margin-top: -12px;
-  margin-bottom: 7px;
-
-  @media screen and (min-width: 578px) {
-    font-size: 55px;
-    margin-bottom: 5px;
-    margin-top: -4px;
-  }
-
-  @media screen and (min-width: 1096px) {
-    font-size: 72px;
-    margin-bottom: 16px;
-  }
-
-  @media screen and (min-width: 1355px) {
-    font-size: 89px;
-    margin-top: 12px;
-    margin-bottom: 24px;
-  }
-
-  @media screen and (min-width: 1614px) {
-    font-size: 106px;
-    margin-bottom: 10px;
-  }
-
-  @media screen and (min-width: 1873px) {
-    font-size: 124px;
-    margin-bottom: 8px;
-  }
-`;
-
-export const SubheaderText = styled(Text)`
-  font-size: 11px;
-  line-height: unset;
-  margin-bottom: 7px;
-
-  @media screen and (min-width: 578px) {
-    font-size: 16px;
-    margin-bottom: 9px;
-  }
-
-  @media screen and (min-width: 1096px) {
-    font-size: 21px;
-    margin-bottom: 9px;
-  }
-
-  @media screen and (min-width: 1355px) {
-    font-size: 26px;
-    margin-bottom: 14px;
-  }
-
-  @media screen and (min-width: 1614px) {
-    font-size: 31px;
-    margin-bottom: 10px;
-  }
-
-  @media screen and (min-width: 1873px) {
-    font-size: 37px;
-    margin-bottom: 8px;
-  }
-`;
-
 export const StyledImage = styled(Image)`
   width: 289px;