diff --git a/src/pages/TrueSightV2/components/chart/index.tsx b/src/pages/TrueSightV2/components/chart/index.tsx index cf5121a579..2f009580a8 100644 --- a/src/pages/TrueSightV2/components/chart/index.tsx +++ b/src/pages/TrueSightV2/components/chart/index.tsx @@ -3,6 +3,7 @@ import dayjs from 'dayjs' import { rgba } from 'polished' import React, { ReactNode, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import { isMobile } from 'react-device-detect' +import { Info } from 'react-feather' import { useParams } from 'react-router-dom' import { useMedia } from 'react-use' import { Text } from 'rebass' @@ -265,23 +266,26 @@ const LoadingHandleWrapper = ({ children: ReactNode }) => { return ( - + <> {!hasData ? ( <> {isLoading ? ( ) : ( - - We couldn't find any information for this token - + + + + We couldn't find any information for this token + + )} ) : ( <>{children} )} - + ) } @@ -385,33 +389,7 @@ export const NumberofTradesChart = ({ noAnimation }: { noAnimation?: boolean }) const above768 = useMedia(`(min-width: ${MEDIA_WIDTHS.upToSmall}px)`) const textFontSize = above768 ? '12px' : '10px' return ( - 0}> - - - Timeframe - - {totalStats.timeframe} - - - - Total Trades - - {totalStats.totalTrades} - - - - Total Buys - - {totalStats.totalBuys} - - - - Total Sells - - {totalStats.totalSells} - - - + {above768 && ( <> @@ -450,156 +428,187 @@ export const NumberofTradesChart = ({ noAnimation }: { noAnimation?: boolean }) ]} /> - - - - - - - - - - - - dayjs(value * 1000).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD') + 0}> + + + Timeframe + + {totalStats.timeframe} + + + + Total Trades + + {totalStats.totalTrades} + + + + Total Buys + + {totalStats.totalBuys} + + + + Total Sells + + {totalStats.totalSells} + + + + + + - `${formatShortNum(value)}`} - domain={dataRange} - /> - `${formatShortNum(value)}`} - /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && - dayjs(payload.timestamp * 1000).format( - timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD, YYYY', - )} - - - Total Trades: {formatShortNum(payload.totalTrade, 2)} - - - Buys: {formatShortNum(payload.buy, 2)} - - - Sells: {formatShortNum(-payload.sell, 2)} - - - ) - }} - /> - {showSell && ( - + - )} - {showBuy && ( - + + + + + + + + dayjs(value * 1000).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD') + } + minTickGap={12} /> - )} - {showTotalTrade && ( - `${formatShortNum(value)}`} + domain={dataRange} + /> + , + fontSize={textFontSize} + tickLine={false} + axisLine={false} + tick={{ fill: theme.subText, fontWeight: 400 }} + width={20} + orientation="right" + tickFormatter={value => `${formatShortNum(value)}`} + /> + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && + dayjs(payload.timestamp * 1000).format( + timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD, YYYY', + )} + + + Total Trades: {formatShortNum(payload.totalTrade, 2)} + + + Buys: {formatShortNum(payload.buy, 2)} + + + Sells: {formatShortNum(-payload.sell, 2)} + + + ) }} - isAnimationActive={false} /> - )} - - - {!above768 && ( - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showBuy' } })} - /> - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showSell' } })} - /> - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showTotalTrade' } }) - } - /> - - )} - + {showSell && ( + + )} + {showBuy && ( + + )} + {showTotalTrade && ( + , + }} + isAnimationActive={false} + /> + )} + + + {!above768 && ( + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showBuy' } })} + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showSell' } }) + } + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showTotalTrade' } }) + } + /> + + )} + + ) } @@ -698,33 +707,7 @@ export const TradingVolumeChart = ({ noAnimation }: { noAnimation?: boolean }) = const above768 = useMedia(`(min-width: ${MEDIA_WIDTHS.upToSmall}px)`) const textFontSize = above768 ? '12px' : '10px' return ( - 0}> - - - Timeframe - - {totalStats.timeframe} - - - - Total Volume - - {totalStats.totalVolume} - - - - Total Buys - - {totalStats.totalBuys} - - - - Total Sells - - {totalStats.totalSells} - - - + {above768 && ( <> @@ -763,161 +746,192 @@ export const TradingVolumeChart = ({ noAnimation }: { noAnimation?: boolean }) = ]} /> - - - - - - - - - - - - dayjs(value * 1000).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD') + 0}> + + + Timeframe + + {totalStats.timeframe} + + + + Total Volume + + {totalStats.totalVolume} + + + + Total Buys + + {totalStats.totalBuys} + + + + Total Sells + + {totalStats.totalSells} + + + + + + - (value > 0 ? `$${formatShortNum(value)}` : `-$${formatShortNum(-value)}`)} - domain={dataRange} - /> - `$${formatShortNum(value)}`} - /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && - dayjs(payload.timestamp * 1000).format( - timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm A, MMM DD' : 'MMM DD, YYYY', - )} - - - Total Volume: ${formatShortNum(payload.totalVolume, 2)} - - - Buys: ${formatShortNum(payload.buyVolume, 2)} - - - Sells: ${formatShortNum(-payload.sellVolume, 2)} - - - ) - }} - /> - {showSell && ( - + - )} - {showBuy && ( - + + + + + + + + dayjs(value * 1000).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD') + } + minTickGap={12} /> - )} - {showTotalVolume && ( - (value > 0 ? `$${formatShortNum(value)}` : `-$${formatShortNum(-value)}`)} + domain={dataRange} + /> + , + fontSize={textFontSize} + tickLine={false} + axisLine={false} + tick={{ fill: theme.subText, fontWeight: 400 }} + width={40} + orientation="right" + tickFormatter={value => `$${formatShortNum(value)}`} + /> + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && + dayjs(payload.timestamp * 1000).format( + timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm A, MMM DD' : 'MMM DD, YYYY', + )} + + + Total Volume: ${formatShortNum(payload.totalVolume, 2)} + + + Buys: ${formatShortNum(payload.buyVolume, 2)} + + + Sells: ${formatShortNum(-payload.sellVolume, 2)} + + + ) }} /> - )} - - - {!above768 && ( - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showBuy' } })} - /> - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showSell' } })} - /> - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showTotalVolume' } }) - } - /> - - )} - + {showSell && ( + + )} + {showBuy && ( + + )} + {showTotalVolume && ( + , + }} + /> + )} + + + {!above768 && ( + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showBuy' } })} + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showSell' } }) + } + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showTotalVolume' } }) + } + /> + + )} + + ) } @@ -1101,259 +1115,260 @@ export const NetflowToWhaleWallets = ({ tab, noAnimation }: { tab?: ChartTab; no const textFontSize = above768 ? '12px' : '10px' return ( - 0}> - {account ? ( - <> - - - Timeframe - - {totalStats.timeframe} - - - - Total Netflow - - {totalStats.totalNetflow} - - - - Total Inflow - - {totalStats.totalInflow} - - - - Total Outflow - - {totalStats.totalOutflow} - - - - - {above768 && ( - <> - {tab !== ChartTab.Third && ( - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showInflow' } }) - } - /> - )} - {tab !== ChartTab.Second && ( - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showOutflow' } }) - } - /> - )} - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showNetflow' } }) - } - /> - - )} - - dispatch({ type: CHART_STATES_ACTION_TYPE.TIMEFRAME_CHANGE, payload: { timeframe } }) - } - timeframes={[ - KyberAITimeframe.ONE_DAY, - KyberAITimeframe.THREE_DAY, - KyberAITimeframe.ONE_WEEK, - KyberAITimeframe.ONE_MONTH, - KyberAITimeframe.THREE_MONTHS, - ]} - /> - - - - - - - dayjs(value).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD') + + + {above768 && ( + <> + {tab !== ChartTab.Third && ( + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showInflow' } }) } - minTickGap={12} - /> - `$${formatShortNum(value)}`} - domain={dataRange} - /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && - dayjs(payload.timestamp).format( - timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm ,MMM DD' : 'MMM DD, YYYY', - )} - - - Netflow: ${formatShortNum(payload.netflow)} - - - - - Wallet - - - General Whales - - - Token Whales - - - - - Inflow - - - ${formatShortNum(payload.generalInflow)} - - - ${formatShortNum(payload.tokenInflow)} - - - - - Outflow - - - ${formatShortNum(payload.generalOutflow)} - - - ${formatShortNum(payload.tokenOutflow)} - - - - - ) - }} /> - - - - - - - - - + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showOutflow' } }) + } /> - - {showNetflow && ( - , + )} + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showNetflow' } }) + } + /> + + )} + dispatch({ type: CHART_STATES_ACTION_TYPE.TIMEFRAME_CHANGE, payload: { timeframe } })} + timeframes={[ + KyberAITimeframe.ONE_DAY, + KyberAITimeframe.THREE_DAY, + KyberAITimeframe.ONE_WEEK, + KyberAITimeframe.ONE_MONTH, + KyberAITimeframe.THREE_MONTHS, + ]} + /> + + 0}> + {account ? ( + <> + + + Timeframe + + {totalStats.timeframe} + + + + Total Netflow + + {totalStats.totalNetflow} + + + + Total Inflow + + {totalStats.totalInflow} + + + + Total Outflow + + {totalStats.totalOutflow} + + + + + + + + + + dayjs(value).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD') + } + minTickGap={12} + /> + `$${formatShortNum(value)}`} + domain={dataRange} + /> + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && + dayjs(payload.timestamp).format( + timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm ,MMM DD' : 'MMM DD, YYYY', + )} + + + Netflow: ${formatShortNum(payload.netflow)} + + + + + Wallet + + + General Whales + + + Token Whales + + + + + Inflow + + + ${formatShortNum(payload.generalInflow)} + + + ${formatShortNum(payload.tokenInflow)} + + + + + Outflow + + + ${formatShortNum(payload.generalOutflow)} + + + ${formatShortNum(payload.tokenOutflow)} + + + + + ) }} /> - )} - - - - ) : ( - <> - )} - {!above768 && ( - - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showInflow' } }) - } - /> - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showOutflow' } }) - } - /> - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showNetflow' } }) - } - /> - - )} - + + + + + + + + + + + {showNetflow && ( + , + }} + /> + )} + + + + ) : ( + <> + )} + {!above768 && ( + + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showInflow' } }) + } + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showOutflow' } }) + } + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showNetflow' } }) + } + /> + + )} + + ) } @@ -1503,33 +1518,7 @@ export const NetflowToCentralizedExchanges = ({ tab, noAnimation }: { tab?: Char const above768 = useMedia(`(min-width: ${MEDIA_WIDTHS.upToSmall}px)`) const textFontSize = above768 ? '12px' : '10px' return ( - 0}> - - - Timeframe - - {totalStats.timeframe} - - - - Total Netflow - - {totalStats.totalNetflow} - - - - Total Inflow - - {totalStats.totalInflow} - - - - Total Outflow - - {totalStats.totalOutflow} - - - + {above768 && ( <> @@ -1576,165 +1565,194 @@ export const NetflowToCentralizedExchanges = ({ tab, noAnimation }: { tab?: Char ]} /> - - - - - dayjs(value).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD')} - minTickGap={12} - /> - (value > 0 ? `$${formatShortNum(value)}` : `-$${formatShortNum(-value)}`)} - domain={dataRange} - /> + 0}> + + + Timeframe + + {totalStats.timeframe} + + + + Total Netflow + + {totalStats.totalNetflow} + + + + Total Inflow + + {totalStats.totalInflow} + + + + Total Outflow + + {totalStats.totalOutflow} + + + + + + + + + dayjs(value).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm' : 'MMM DD')} + minTickGap={12} + /> + (value > 0 ? `$${formatShortNum(value)}` : `-$${formatShortNum(-value)}`)} + domain={dataRange} + /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && - dayjs(payload.timestamp).format( - timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm, MMM DD' : 'MMM DD, YYYY', - )} - - - Netflow: ${formatShortNum(payload.totalNetflow)} - - - - - Wallet - - {payload.cexes.map((item: INetflowToCEX, index: number) => ( - - {item.cex} + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && + dayjs(payload.timestamp).format( + timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm, MMM DD' : 'MMM DD, YYYY', + )} + + + Netflow: ${formatShortNum(payload.totalNetflow)} + + + + + Wallet - ))} - - - - Inflow - - {payload.cexes.map((item: INetflowToCEX, index: number) => ( - - ${formatShortNum(item.inflow)} + {payload.cexes.map((item: INetflowToCEX, index: number) => ( + + {item.cex} + + ))} + + + + Inflow - ))} - - - - Outflow - - {payload.cexes.map((item: INetflowToCEX, index: number) => ( - - ${formatShortNum(item.outflow)} + {payload.cexes.map((item: INetflowToCEX, index: number) => ( + + ${formatShortNum(item.inflow)} + + ))} + + + + Outflow - ))} - - - - ) - }} - /> - - - - - - - - - - - {showNetflow && ( - , + {payload.cexes.map((item: INetflowToCEX, index: number) => ( + + ${formatShortNum(item.outflow)} + + ))} + + + + ) }} /> - )} - - - {!above768 && ( - - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showInflow' } }) - } - /> - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showOutflow' } }) - } - /> - - dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showNetflow' } }) - } - /> - - )} - + + + + + + + + + + + {showNetflow && ( + , + }} + /> + )} + + + {!above768 && ( + + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showInflow' } }) + } + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showOutflow' } }) + } + /> + + dispatch({ type: CHART_STATES_ACTION_TYPE.TOGGLE_OPTION, payload: { option: 'showNetflow' } }) + } + /> + + )} + + ) } @@ -1815,21 +1833,7 @@ export const NumberofTransfers = ({ tab }: { tab: ChartTab }) => { const textFontSize = above768 ? '12px' : '10px' return ( - 0}> - - - Timeframe - - {totalStats.timeframe} - - - - {tab === ChartTab.First ? 'Total Transfers' : 'Total Volume'} - - {tab === ChartTab.First ? totalStats.totalTranfers : totalStats.totalVolume} - - - + { ]} /> - - - - - - - - - - - dayjs(value).format('MMM DD')} - allowDataOverflow - minTickGap={12} - /> - `${tab === ChartTab.Second ? '$' : ''}${formatShortNum(value)}`} - allowDataOverflow - /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && dayjs(payload.timestamp).format('MMM DD, YYYY')} - - - {tab === ChartTab.First ? 'Total Transfers' : 'Total Volume'}:{' '} - - {formatShortNum(tab === ChartTab.First ? payload.numberOfTransfer : payload.volume)} - - - - ) - }} - /> - , - }} - /> - - - + + 0}> + + + Timeframe + + {totalStats.timeframe} + + + + {tab === ChartTab.First ? 'Total Transfers' : 'Total Volume'} + + {tab === ChartTab.First ? totalStats.totalTranfers : totalStats.totalVolume} + + + + + + + + + + + + + + + dayjs(value).format('MMM DD')} + allowDataOverflow + minTickGap={12} + /> + `${tab === ChartTab.Second ? '$' : ''}${formatShortNum(value)}`} + allowDataOverflow + /> + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && dayjs(payload.timestamp).format('MMM DD, YYYY')} + + + {tab === ChartTab.First ? 'Total Transfers' : 'Total Volume'}:{' '} + + {formatShortNum(tab === ChartTab.First ? payload.numberOfTransfer : payload.volume)} + + + + ) + }} + /> + , + }} + /> + + + + ) } @@ -1995,15 +2017,7 @@ export const NumberofHolders = () => { const above768 = useMedia(`(min-width: ${MEDIA_WIDTHS.upToSmall}px)`) const textFontSize = above768 ? '12px' : '10px' return ( - 0}> - - - Timeframe - - {totalStats.timeframe} - - - + { ]} /> - - - - - - - - - - - dayjs(value).format('MMM DD')} - minTickGap={12} - allowDataOverflow - /> - formatShortNum(value)} - allowDataOverflow - /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && dayjs(payload.timestamp).format('MMM DD, YYYY')} - - - Holders: {formatShortNum(payload.count)} - - - ) - }} - /> - , - }} - /> - - - + + 0}> + + + Timeframe + + {totalStats.timeframe} + + + + + + + + + + + + + + + dayjs(value).format('MMM DD')} + minTickGap={12} + allowDataOverflow + /> + formatShortNum(value)} + allowDataOverflow + /> + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && dayjs(payload.timestamp).format('MMM DD, YYYY')} + + + Holders: {formatShortNum(payload.count)} + + + ) + }} + /> + , + }} + /> + + + + ) } @@ -2329,237 +2355,238 @@ export const LiquidOnCentralizedExchanges = ({ noAnimation }: { noAnimation?: bo const above768 = useMedia(`(min-width: ${MEDIA_WIDTHS.upToSmall}px)`) return ( - 0}> - <> - {account ? ( + + + {above768 && ( <> - - - Timeframe - - {totalStats.timeframe} - - - - Total Longs - - ${totalStats.totalSells} - - - - Total Shorts - - ${totalStats.totalBuys} - - - - - {above768 && ( - <> - setShowLong(prev => !prev)} + setShowLong(prev => !prev)} + /> + setShowShort(prev => !prev)} + /> + setShowPrice(prev => !prev)} + /> + + )} + dispatch({ type: CHART_STATES_ACTION_TYPE.TIMEFRAME_CHANGE, payload: { timeframe } })} + timeframes={[ + KyberAITimeframe.ONE_DAY, + KyberAITimeframe.ONE_WEEK, + KyberAITimeframe.ONE_MONTH, + KyberAITimeframe.THREE_MONTHS, + ]} + /> + + 0}> + <> + {account ? ( + <> + + + Timeframe + + {totalStats.timeframe} + + + + Total Longs + + ${totalStats.totalSells} + + + + Total Shorts + + ${totalStats.totalBuys} + + + + + + + - setShowShort(prev => !prev)} + + + dayjs(value).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm A, MMM DD' : 'MMM DD') + } + minTickGap={12} /> - setShowPrice(prev => !prev)} + '$' + formatShortNum(value)} + domain={dataRange} /> - - )} - - dispatch({ type: CHART_STATES_ACTION_TYPE.TIMEFRAME_CHANGE, payload: { timeframe } }) - } - timeframes={[ - KyberAITimeframe.ONE_DAY, - KyberAITimeframe.ONE_WEEK, - KyberAITimeframe.ONE_MONTH, - KyberAITimeframe.THREE_MONTHS, - ]} - /> - - - - - - - dayjs(value).format(timeframe === KyberAITimeframe.ONE_DAY ? 'HH:mm A, MMM DD' : 'MMM DD') - } - minTickGap={12} - /> - '$' + formatShortNum(value)} - domain={dataRange} - /> - '$' + formatShortNum(value)} - domain={[(dataMin: any) => dataMin * 0.98, (dataMax: any) => dataMax * 1.01]} - /> - { - const payload = props.payload?.[0]?.payload - if (!payload) return <> - return ( - - - {payload.timestamp && dayjs(payload.timestamp).format('MMM DD, YYYY')} - - - {tokenOverview?.symbol?.toUpperCase()} Price:{' '} - - ${formatTokenPrice(payload.price)} - - - - - - CEX - - {payload.exchanges.map((i: any) => ( - - {i.exchangeName}: + '$' + formatShortNum(value)} + domain={[(dataMin: any) => dataMin * 0.98, (dataMax: any) => dataMax * 1.01]} + /> + { + const payload = props.payload?.[0]?.payload + if (!payload) return <> + return ( + + + {payload.timestamp && dayjs(payload.timestamp).format('MMM DD, YYYY')} + + + {tokenOverview?.symbol?.toUpperCase()} Price:{' '} + + ${formatTokenPrice(payload.price)} + + + + + + CEX - ))} - - - - Longs - - {payload.exchanges.map((i: any) => ( - - ${formatShortNum(i.sellVolUsd)} + {payload.exchanges.map((i: any) => ( + + {i.exchangeName}: + + ))} + + + + Longs - ))} - - - - Shorts - - {payload.exchanges.map((i: any) => ( - - ${formatShortNum(i.buyVolUsd)} + {payload.exchanges.map((i: any) => ( + + ${formatShortNum(i.sellVolUsd)} + + ))} + + + + Shorts - ))} - - - - - - Total: - - - ${formatShortNum(payload.sellVolUsd)} - - - ${formatShortNum(-payload.buyVolUsd)} - - - - ) - }} - /> - {showLong && ( - - )} - {showShort && ( - - )} - {showPrice && ( - , + {payload.exchanges.map((i: any) => ( + + ${formatShortNum(i.buyVolUsd)} + + ))} + + + + + + Total: + + + ${formatShortNum(payload.sellVolUsd)} + + + ${formatShortNum(-payload.buyVolUsd)} + + + + ) }} /> - )} - - - - ) : ( - <> - )} - - + {showLong && ( + + )} + {showShort && ( + + )} + {showPrice && ( + , + }} + /> + )} + + + + ) : ( + <> + )} + + + ) } diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx index d788ccab0e..9d29e57eb8 100644 --- a/src/pages/TrueSightV2/components/table/index.tsx +++ b/src/pages/TrueSightV2/components/table/index.tsx @@ -4,6 +4,7 @@ import { BigNumber } from 'ethers' import { formatUnits } from 'ethers/lib/utils' import { ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react' import { isMobile } from 'react-device-detect' +import { Info } from 'react-feather' import Skeleton, { SkeletonTheme } from 'react-loading-skeleton' import { useNavigate, useParams } from 'react-router-dom' import { Text } from 'rebass' @@ -151,9 +152,12 @@ const LoadingHandleWrapper = ({ {isLoading ? ( ) : ( - - We couldn't find any information for this token - + + + + We couldn't find any information for this token + + )}