import { PerpMarket } from '@blockworks-foundation/mango-v4' import { IconButton, LinkButton } from '@components/shared/Button' import ConnectEmptyState from '@components/shared/ConnectEmptyState' import FormatNumericValue from '@components/shared/FormatNumericValue' import SheenLoader from '@components/shared/SheenLoader' import SideBadge from '@components/shared/SideBadge' import { SortableColumnHeader, Table, TableDateDisplay, Td, Th, TrBody, TrHead, } from '@components/shared/TableElements' import Tooltip from '@components/shared/Tooltip' import { EyeSlashIcon, NoSymbolIcon, UsersIcon, } from '@heroicons/react/20/solid' import { useWallet } from '@solana/wallet-adapter-react' import { PublicKey } from '@solana/web3.js' import mangoStore from '@store/mangoStore' import dayjs from 'dayjs' import useMangoAccount from 'hooks/useMangoAccount' import useSelectedMarket from 'hooks/useSelectedMarket' import useTradeHistory from 'hooks/useTradeHistory' import { useViewport } from 'hooks/useViewport' import { useTranslation } from 'next-i18next' import { PAGINATION_PAGE_LENGTH } from 'utils/constants' import { abbreviateAddress } from 'utils/formatting' import { breakpoints } from 'utils/theme' import MarketLogos from './MarketLogos' import PerpSideBadge from './PerpSideBadge' import TableMarketName from './TableMarketName' import { useSortableData } from 'hooks/useSortableData' import { useCallback } from 'react' import { useHiddenMangoAccounts } from 'hooks/useHiddenMangoAccounts' const TradeHistory = () => { const { t } = useTranslation(['common', 'trade']) const group = mangoStore.getState().group const { selectedMarket } = useSelectedMarket() const { mangoAccountAddress } = useMangoAccount() const { data: combinedTradeHistory, isLoading: loadingTradeHistory, fetchNextPage, } = useTradeHistory() const { width } = useViewport() const { connected } = useWallet() const { hiddenAccounts } = useHiddenMangoAccounts() const showTableView = width ? width > breakpoints.md : false const formattedTableData = useCallback(() => { const formatted = [] for (const trade of combinedTradeHistory) { const marketName = trade.market.name const value = trade.price * trade.size const sortTime = trade?.time ? trade.time : dayjs().format('YYYY-MM-DDTHH:mm:ss') const data = { ...trade, marketName, value, sortTime } formatted.push(data) } return formatted }, [combinedTradeHistory]) const { items: tableData, requestSort, sortConfig, } = useSortableData(formattedTableData()) if (!selectedMarket || !group) return null return mangoAccountAddress && (combinedTradeHistory.length || loadingTradeHistory) ? ( <> {showTableView ? (
|
|
|
|
|
|
|
{size} |
{price} |
|
{liquidity} |
{trade?.time ? (
|
{'taker' in trade ? ( ) : null} |
---|
No trade history