From acc2283b0967ee128c0f934858560123c0658a4d Mon Sep 17 00:00:00 2001 From: Tyler Date: Tue, 7 Jan 2025 17:35:24 -0500 Subject: [PATCH 1/2] migrate-live-trades --- src/views/tables/LiveTrades.tsx | 49 +++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/views/tables/LiveTrades.tsx b/src/views/tables/LiveTrades.tsx index 9ad61835b..23b757ddb 100644 --- a/src/views/tables/LiveTrades.tsx +++ b/src/views/tables/LiveTrades.tsx @@ -1,12 +1,15 @@ import { useMemo } from 'react'; +import { BonsaiHelpers } from '@/abacus-ts/ontology'; +import { LiveTrade } from '@/abacus-ts/summaryTypes'; +import { useCurrentMarketTradesValue } from '@/abacus-ts/websocket/trades'; +import { IndexerOrderSide } from '@/types/indexer/indexerApiGen'; import { OrderSide } from '@dydxprotocol/v4-client-js'; -import { shallowEqual } from 'react-redux'; import styled, { css, keyframes } from 'styled-components'; -import { MarketTrade } from '@/constants/abacus'; import { STRING_KEYS } from '@/constants/localization'; import { TOKEN_DECIMALS } from '@/constants/numbers'; +import { EMPTY_ARR } from '@/constants/objects'; import { useBreakpoints } from '@/hooks/useBreakpoints'; import { useLocaleSeparators } from '@/hooks/useLocaleSeparators'; @@ -18,14 +21,12 @@ import { LoadingSpace } from '@/components/Loading/LoadingSpinner'; import { Output, OutputType } from '@/components/Output'; import { useAppSelector } from '@/state/appTypes'; -import { getCurrentMarketAssetData } from '@/state/assetsSelectors'; import { getSelectedLocale } from '@/state/localizationSelectors'; -import { getCurrentMarketConfig, getCurrentMarketLiveTrades } from '@/state/perpetualsSelectors'; import { getConsistentAssetSizeString } from '@/lib/consistentAssetSize'; import { getSimpleStyledOutputType } from '@/lib/genericFunctionalComponentUtils'; import { isTruthy } from '@/lib/isTruthy'; -import { getSelectedOrderSide } from '@/lib/tradeData'; +import { MaybeBigNumber, MustBigNumber } from '@/lib/numbers'; import { OrderbookTradesOutput, OrderbookTradesTable } from './OrderbookTradesTable'; @@ -39,7 +40,7 @@ type StyleProps = { // Current fix for styled-component not preserving generic row type RowData = { - key: number; + key: string; createdAtMilliseconds: number; price: number; side: OrderSide; @@ -49,23 +50,31 @@ type RowData = { export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => { const stringGetter = useStringGetter(); const { isTablet } = useBreakpoints(); - const currentMarketAssetData = useAppSelector(getCurrentMarketAssetData, shallowEqual); - const currentMarketConfig = useAppSelector(getCurrentMarketConfig, shallowEqual); - const currentMarketLiveTrades = useAppSelector(getCurrentMarketLiveTrades, shallowEqual); + const currentMarketConfig = useAppSelector(BonsaiHelpers.currentMarket.marketInfo); + const currentMarketLiveTrades = useCurrentMarketTradesValue().data?.trades ?? EMPTY_ARR; - const { displayableAssetId } = currentMarketAssetData ?? {}; - const { stepSizeDecimals, tickSizeDecimals, stepSize } = currentMarketConfig ?? {}; + const { + stepSizeDecimals, + tickSizeDecimals, + stepSize, + displayableAsset: displayableAssetId, + } = currentMarketConfig ?? {}; const { decimal: decimalSeparator, group: groupSeparator } = useLocaleSeparators(); const selectedLocale = useAppSelector(getSelectedLocale); - const rows = currentMarketLiveTrades.map( - ({ createdAtMilliseconds, price, size, side }: MarketTrade, idx) => ({ - key: idx, - createdAtMilliseconds, - price, - side: getSelectedOrderSide(side), - size, - }) + const rows = useMemo( + () => + currentMarketLiveTrades.map( + ({ createdAt, price, size, side, id }: LiveTrade): RowData => ({ + key: id, + createdAtMilliseconds: new Date(createdAt).valueOf(), + price: MustBigNumber(price).toNumber(), + // todo use same helper as the horizontal panel files + side: side === IndexerOrderSide.BUY ? OrderSide.BUY : OrderSide.SELL, + size: MustBigNumber(size).toNumber(), + }) + ), + [currentMarketLiveTrades] ); const columns = useMemo(() => { @@ -109,7 +118,7 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => decimalSeparator, groupSeparator, selectedLocale, - stepSize: stepSize ?? 10 ** (-1 * TOKEN_DECIMALS), + stepSize: MaybeBigNumber(stepSize)?.toNumber() ?? 10 ** (-1 * TOKEN_DECIMALS), stepSizeDecimals: stepSizeDecimals ?? TOKEN_DECIMALS, })} tw="text-[color:--accent-color] tablet:text-color-text-1" From bdd9ebffe53469cc4fb9298522a0ce8d932d2d10 Mon Sep 17 00:00:00 2001 From: Tyler Date: Tue, 7 Jan 2025 17:42:23 -0500 Subject: [PATCH 2/2] fix --- src/views/tables/LiveTrades.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/tables/LiveTrades.tsx b/src/views/tables/LiveTrades.tsx index 23b757ddb..18c8ba844 100644 --- a/src/views/tables/LiveTrades.tsx +++ b/src/views/tables/LiveTrades.tsx @@ -1,8 +1,7 @@ import { useMemo } from 'react'; -import { BonsaiHelpers } from '@/abacus-ts/ontology'; +import { BonsaiHelpers, BonsaiHooks } from '@/abacus-ts/ontology'; import { LiveTrade } from '@/abacus-ts/summaryTypes'; -import { useCurrentMarketTradesValue } from '@/abacus-ts/websocket/trades'; import { IndexerOrderSide } from '@/types/indexer/indexerApiGen'; import { OrderSide } from '@dydxprotocol/v4-client-js'; import styled, { css, keyframes } from 'styled-components'; @@ -51,7 +50,8 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => const stringGetter = useStringGetter(); const { isTablet } = useBreakpoints(); const currentMarketConfig = useAppSelector(BonsaiHelpers.currentMarket.marketInfo); - const currentMarketLiveTrades = useCurrentMarketTradesValue().data?.trades ?? EMPTY_ARR; + const currentMarketLiveTrades = + BonsaiHooks.useCurrentMarketLiveTrades().data?.trades ?? EMPTY_ARR; const { stepSizeDecimals,