From 83a141467a407ec2280965187564fe1bd13e7751 Mon Sep 17 00:00:00 2001 From: Matt <90358481+xbtmatt@users.noreply.github.com> Date: Fri, 28 Jun 2024 21:43:36 -0700 Subject: [PATCH] [ECO-1831] Trade history updates (#132) Co-authored-by: matt --- .../components/main-info/MainInfo.tsx | 4 +- .../trade-history/components/index.ts | 1 - .../components/table-row-desktop/index.tsx | 100 ---------------- .../components/table-row-desktop/styled.tsx | 10 -- .../components/trade-history/index.tsx | 98 +++++++++------- .../components/trade-history/misc.ts | 48 -------- .../components/trade-history/styled.tsx | 11 -- .../trade-history/table-row/index.tsx | 108 ++++++++++++++++++ .../trade-history/table-row/table-row.css | 6 + .../table-row-desktop => table-row}/types.ts | 2 + .../trade-history/trade-history.css | 9 ++ .../emoji-table/components/FilterOptions.tsx | 1 - .../frontend/src/lib/utils/get-user-rank.ts | 13 ++- src/typescript/sdk/src/queries/candlestick.ts | 5 +- 14 files changed, 196 insertions(+), 220 deletions(-) delete mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/index.ts delete mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/index.tsx delete mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/styled.tsx delete mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/misc.ts delete mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/styled.tsx create mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx create mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/table-row.css rename src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/{components/table-row-desktop => table-row}/types.ts (82%) create mode 100644 src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/trade-history.css diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx index f4c361fc3..9a97f8f1d 100644 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx +++ b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx @@ -69,13 +69,13 @@ const MainInfo = (props: MainInfoProps) => {
{emojisToName(props.data.emojis)}
{tooltipEmojiName} -
{props.data.symbol}
+
{props.data.symbol}
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/index.ts b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/index.ts deleted file mode 100644 index 3bb6f3164..000000000 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TableRowDesktop } from "./table-row-desktop"; diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/index.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/index.tsx deleted file mode 100644 index 45bcad14d..000000000 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -"use client"; - -import React from "react"; - -import { useTooltip } from "hooks"; - -import { Flex } from "@containers"; -import { Text, Tr, Td } from "components"; - -import { type TableRowDesktopProps } from "./types"; -import { toCoinDecimalString } from "lib/utils/decimals"; -import { ExplorerLinkCustom } from "./styled"; -import { toNominalPrice } from "@sdk/utils/nominal-price"; - -const TableRowDesktop: React.FC = ({ item }) => { - const { targetRef, tooltip } = useTooltip( - - {item.emoji} - , - { - placement: "top", - } - ); - - return ( - - - - - {item.rankIcon} - - {tooltip} - - - - - - - {toCoinDecimalString(item.apt, 3)} - - - - - - - - {toCoinDecimalString(item.emoji, 3)} - - - - - - - - {item.type} - - - - - - - - {item.date.toLocaleString()} - - - - - - - {toNominalPrice(item.price).toFixed(7)} - - - - - - - - {item.version} - - - - - - ); -}; - -export default TableRowDesktop; diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/styled.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/styled.tsx deleted file mode 100644 index 052a07490..000000000 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/styled.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { ExplorerLink } from "components/link/component"; -import styled from "styled-components"; -import { darkColors } from "theme/colors"; - -export const ExplorerLinkCustom = styled(ExplorerLink)` - &:hover > * { - color: ${darkColors.blue}; - text-decoration: underline; - } -`; diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx index e20924fde..c656e5688 100644 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx +++ b/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) => ( + {children} +); + 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 ( - - - - - {getHeaders(props.data.symbol).map((th, index) => ( - - ))} - - - - {swaps.map((item, index) => ( - - ))} - {getEmptyListTr(tradeHistoryTableBodyHeight, swaps.length, EmptyTr)} - -
- - - {t(th.text)} - - -
- + + + + + Rank + + + + APT + + + + {symbolBytesToEmojis(props.data.emojiBytes).symbol} + + + + Time + + + Price + + + Sender + + + + + {swaps.map((item, index) => ( + + ))} + {Array.from({ length: 10 - swaps.length }).map((_, index) => ( + + ))} + +
); }; diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/misc.ts b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/misc.ts deleted file mode 100644 index 9168a0ace..000000000 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/misc.ts +++ /dev/null @@ -1,48 +0,0 @@ -export const HEADERS = [ - { - width: "12.5%", - text: "Rank", - }, - { - width: "12.5%", - text: "Apt", - }, - { - width: "12.5%", - text: "🖤", - }, - { - width: "12.5%", - text: "Type", - }, - { - width: "17.5%", - text: "Date", - }, - { - width: "12.5%", - text: "Price", - }, - { - width: "20.5%", - text: "Transaction", - }, -]; - -export const getHeaders = (emoji: string) => { - const headers = HEADERS; - headers[2].text = emoji; - return headers; -}; - -export enum RankIcon { - based = "🐳", - n00b = "🐡", - lfg = "🐬", -} - -export enum RankName { - based = "based", - n00b = "n00b", - lfg = "lfg", -} diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/styled.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/styled.tsx deleted file mode 100644 index d823943c2..000000000 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/styled.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from "styled-components"; - -export const StyledTradeHistory = styled.div` - width: 100%; - height: 100%; - overflow-x: auto; - - &::-webkit-scrollbar-track { - border-top: 1px solid ${({ theme }) => theme.colors.darkGray}; - } -`; 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 new file mode 100644 index 000000000..74a5169a5 --- /dev/null +++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx @@ -0,0 +1,108 @@ +"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"; +import { ExplorerLink } from "components/link/component"; +import { darkColors } from "theme"; +import { truncateAddress } from "@sdk/utils"; +import "./table-row.css"; + +type TableRowTextItemProps = { + className: string; + outerClass?: string; + color?: (typeof darkColors)[keyof typeof darkColors]; +}; + +const TableRowTextItem = ({ + children, + className, + outerClass = "", + color = darkColors.lightGray, +}: TableRowTextItemProps & PropsWithChildren) => ( + +
+ + {children} + +
+ +); + +const TableRowStyles = + "flex relative w-full font-forma body-sm transition-all duration-[50ms] group"; +const TableCellStyles = "h-[33px]"; + +const TableRow = ({ item, showBorder }: TableRowDesktopProps) => { + const { targetRef, tooltip } = useTooltip( +
{item.emoji}
, + { + placement: "top", + } + ); + + return ( + +
+ +
+ + {item.rankIcon} + + {tooltip} +
+ + + +
{toCoinDecimalString(item.apt, 3)}
+ + +
{toCoinDecimalString(item.emoji, 3)}
+ + + + {item.date.toLocaleString(undefined, { + month: "2-digit" as const, + day: "2-digit" as const, + hour: "2-digit" as const, + minute: "2-digit" as const, + second: "2-digit" as const, + })} + + + {toNominalPrice(item.price).toFixed(9)} + + + + + {"0x" + truncateAddress(item.swapper).substring(2).toUpperCase()} + + + + + ); +}; + +export default TableRow; diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/table-row.css b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/table-row.css new file mode 100644 index 000000000..e87f7fcb7 --- /dev/null +++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/table-row.css @@ -0,0 +1,6 @@ +#grid-hover { + &:hover { + filter: brightness(1.05) saturate(1.1); + box-shadow: 0 0 9px 7px rgba(8, 108, 217, 0.1); + } +} diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/types.ts b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts similarity index 82% rename from src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/types.ts rename to src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts index f0b49c69e..69035aa3e 100644 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/components/table-row-desktop/types.ts +++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts @@ -8,5 +8,7 @@ export type TableRowDesktopProps = { price: string; date: Date; version: number; + swapper: string; }; + showBorder: boolean; }; diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/trade-history.css b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/trade-history.css new file mode 100644 index 000000000..5691f192f --- /dev/null +++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/trade-history.css @@ -0,0 +1,9 @@ +.scrollbar-track::-webkit-scrollbar-thumb { + background: #086cd9; + border-radius: 2px; + height: 39px; +} + +.scrollbar-track::-webkit-scrollbar { + width: 9px; +} diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/FilterOptions.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/FilterOptions.tsx index aecdfff3d..0527db1f8 100644 --- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/FilterOptions.tsx +++ b/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/FilterOptions.tsx @@ -56,7 +56,6 @@ export const FilterOptionsComponent = () => { const { isLaptopL } = useMatchBreakpoints(); const handler = () => { - console.log("handler called") setIsChecked((v) => !v); }; diff --git a/src/typescript/frontend/src/lib/utils/get-user-rank.ts b/src/typescript/frontend/src/lib/utils/get-user-rank.ts index a09d9d38f..817d8e246 100644 --- a/src/typescript/frontend/src/lib/utils/get-user-rank.ts +++ b/src/typescript/frontend/src/lib/utils/get-user-rank.ts @@ -1,6 +1,17 @@ import { type Types } from "@sdk-types"; import { q64ToBig } from "@sdk/utils/nominal-price"; -import { RankIcon, RankName } from "components/pages/emojicoin/components/trade-history/misc"; + +export enum RankIcon { + based = "🐳", + n00b = "🐡", + lfg = "🐬", +} + +export enum RankName { + based = "based", + n00b = "n00b", + lfg = "lfg", +} export const getRankFromSwapEvent = ( amount: number | bigint diff --git a/src/typescript/sdk/src/queries/candlestick.ts b/src/typescript/sdk/src/queries/candlestick.ts index c7c00a604..504743293 100644 --- a/src/typescript/sdk/src/queries/candlestick.ts +++ b/src/typescript/sdk/src/queries/candlestick.ts @@ -4,10 +4,7 @@ import { type CandlestickResolution } from "../const"; import { INBOX_EVENTS_TABLE, LIMIT, ORDER_BY } from "./const"; import { wrap } from "./utils"; import { type JSONTypes } from "../types"; -import { - type AggregateQueryResultsArgs, - aggregateQueryResults, -} from "./query-helper"; +import { type AggregateQueryResultsArgs, aggregateQueryResults } from "./query-helper"; import { postgrest } from "./inbox-url"; export type CandlestickQueryArgs = {