[ECO-1831] Trade history updates (#132)

Co-authored-by: matt <[email protected]>

src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx

@@ -69,13 +69,13 @@ const MainInfo = (props: MainInfoProps) => {
         <div className={headerWrapper}>
           <div
             ref={targetRefEmojiName}
-            className=" text-white uppercase ellipses md:display-2 display-4"
+            className=" text-white uppercase ellipses display-4 font-forma-bold md:display-2"
           >
             {emojisToName(props.data.emojis)}
           </div>
           {tooltipEmojiName}
 
-          <div className="text-[24px] md:display-2">{props.data.symbol}</div>
+          <div className="text-[24px] md:display-2 my-auto">{props.data.symbol}</div>
         </div>
 
         <div className={statsWrapper}>

src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx

@@ -1,20 +1,14 @@
-import React, { useEffect } from "react";
+import React, { type PropsWithChildren, useEffect } from "react";
 
-import { translationFunction } from "context/language-context";
-import { useElementDimensions } from "hooks";
-import { getEmptyListTr } from "utils";
-
-import { TableRowDesktop } from "./components";
-import { Table, Text, Th, ThInner, HeaderTr, TBody, EmptyTr } from "components";
-import { StyledTradeHistory } from "./styled";
-
-import { getHeaders } from "./misc";
 import { type TradeHistoryProps } from "../../types";
 import { toCoinDecimalString } from "lib/utils/decimals";
 import { getRankFromSwapEvent } from "lib/utils/get-user-rank";
 import { useEventStore, useWebSocketClient } from "context/websockets-context";
-import { type TableRowDesktopProps } from "./components/table-row-desktop/types";
 import { type Types } from "@sdk/types/types";
+import { symbolBytesToEmojis } from "@sdk/emoji_data";
+import TableRow from "./table-row";
+import { type TableRowDesktopProps } from "./table-row/types";
+import "./trade-history.css";
 
 const toTableItem = (value: Types.SwapEvent): TableRowDesktopProps["item"] => ({
   ...getRankFromSwapEvent(Number(toCoinDecimalString(value.quoteVolume, 3))),
@@ -23,13 +17,19 @@ const toTableItem = (value: Types.SwapEvent): TableRowDesktopProps["item"] => ({
   date: new Date(Number(value.time / 1000n)),
   type: value.isSell ? "sell" : "buy",
   price: value.avgExecutionPrice.toString(),
+  swapper: value.swapper,
   version: value.version,
 });
 
+const TableHeader =
+  "font-forma body-lg font-normal text-ec-blue position-sticky bg-black z-1 uppercase " +
+  "text-center mt-[2px]";
+
+const ThWrapper = ({ className, children }: { className: string } & PropsWithChildren) => (
+  <th className={className + " " + TableHeader}>{children}</th>
+);
+
 const TradeHistory = (props: TradeHistoryProps) => {
-  const { t } = translationFunction();
-  const { offsetHeight: tradeHistoryTableBodyHeight } =
-    useElementDimensions("tradeHistoryTableBody");
   const marketID = props.data.marketID;
 
   const swaps = useEventStore((s) => {
@@ -46,34 +46,48 @@ const TradeHistory = (props: TradeHistoryProps) => {
   /* eslint-enable react-hooks/exhaustive-deps */
 
   return (
-    <StyledTradeHistory>
-      <Table minWidth="700px">
-        <thead>
-          <HeaderTr>
-            {getHeaders(props.data.symbol).map((th, index) => (
-              <Th width={th.width} minWidth="100px" key={index}>
-                <ThInner>
-                  <Text
-                    textScale="bodyLarge"
-                    textTransform="uppercase"
-                    color="econiaBlue"
-                    $fontWeight="regular"
-                  >
-                    {t(th.text)}
-                  </Text>
-                </ThInner>
-              </Th>
-            ))}
-          </HeaderTr>
-        </thead>
-        <TBody height={{ _: "272px", tablet: "340px" }} id="tradeHistoryTableBody">
-          {swaps.map((item, index) => (
-            <TableRowDesktop key={index} item={toTableItem(item)} />
-          ))}
-          {getEmptyListTr(tradeHistoryTableBodyHeight, swaps.length, EmptyTr)}
-        </TBody>
-      </Table>
-    </StyledTradeHistory>
+    <table className="flex flex-col table-fixed w-full">
+      <thead className="relative w-full border-solid border-b-[1px] border-b-dark-gray">
+        <tr className={"flex w-full h-[33px]" + (swaps.length < 11 ? "" : " pr-[9px] ")}>
+          <ThWrapper className="flex min-w-[50px] ml-[10px] xl:ml-[21px]">
+            <span className="flex my-auto">Rank</span>
+          </ThWrapper>
+          <ThWrapper className="flex w-[5%]" />
+          <ThWrapper className="flex w-[22%] md:w-[18%]">
+            <span className="flex my-auto">APT</span>
+          </ThWrapper>
+          <ThWrapper className="flex w-[22%] md:w-[18%]">
+            <span className="flex my-auto">
+              {symbolBytesToEmojis(props.data.emojiBytes).symbol}
+            </span>
+          </ThWrapper>
+          <ThWrapper className="hidden md:flex md:w-[24%]">
+            <span className="flex my-auto">Time</span>
+          </ThWrapper>
+          <ThWrapper className="flex w-[22%] md:w-[18%]">
+            <span className="flex my-auto">Price</span>
+          </ThWrapper>
+          <ThWrapper className="flex w-[22%] md:w-[18%]">
+            <span className="ml-auto my-auto mr-[20px]">Sender</span>
+          </ThWrapper>
+        </tr>
+      </thead>
+      <tbody className="flex flex-col overflow-auto scrollbar-track w-full h-[340px]">
+        {swaps.map((item, index) => (
+          <TableRow
+            key={index}
+            item={toTableItem(item)}
+            showBorder={index !== swaps.length - 1 || swaps.length < 11}
+          ></TableRow>
+        ))}
+        {Array.from({ length: 10 - swaps.length }).map((_, index) => (
+          <tr
+            key={`EMPTY_ROW::${index}`}
+            className="flex min-h-[33px] border-b-dark-gray border-solid border-[1px]"
+          />
+        ))}
+      </tbody>
+    </table>
   );
 };