import { Fragment, useEffect, useState } from 'react' import { ArrowRightIcon, ChevronDownIcon, NoSymbolIcon, } from '@heroicons/react/20/solid' import dayjs from 'dayjs' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' import { breakpoints } from '../../utils/theme' import { useViewport } from '../../hooks/useViewport' import { IconButton } from '../shared/Button' import { Transition } from '@headlessui/react' import SheenLoader from '../shared/SheenLoader' import mangoStore from '@store/mangoStore' import { countLeadingZeros, formatDecimal, formatFixedDecimals, trimDecimals, } from '../../utils/numbers' import useLocalStorageState from 'hooks/useLocalStorageState' import { PREFERRED_EXPLORER_KEY } from 'utils/constants' import Tooltip from '@components/shared/Tooltip' import { formatTokenSymbol } from 'utils/tokens' import useJupiterMints from 'hooks/useJupiterMints' import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements' import { EXPLORERS } from '@components/settings/PreferredExplorerSettings' import useMangoAccount from 'hooks/useMangoAccount' import { useWallet } from '@solana/wallet-adapter-react' const SwapHistoryTable = () => { const { t } = useTranslation(['common', 'settings', 'swap']) const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data) const initialLoad = mangoStore( (s) => s.mangoAccount.stats.swapHistory.initialLoad ) const { connected } = useWallet() const { mangoTokens } = useJupiterMints() const [showSwapDetails, setSwapDetails] = useState('') const actions = mangoStore.getState().actions const { mangoAccountAddress } = useMangoAccount() const { width } = useViewport() const showTableView = width ? width > breakpoints.md : false const [preferredExplorer] = useLocalStorageState( PREFERRED_EXPLORER_KEY, EXPLORERS[0] ) useEffect(() => { if (mangoAccountAddress) { actions.fetchSwapHistory(mangoAccountAddress) } }, [actions, mangoAccountAddress]) const handleShowSwapDetails = (signature: string) => { showSwapDetails ? setSwapDetails('') : setSwapDetails(signature) } return mangoAccountAddress && swapHistory.length ? ( showTableView ? (
{t('date')} | {t('swap')} | {t('value')} | {t('borrow')} | {t('borrow-fee')} |
{dayjs(block_datetime).format('ddd D MMM')} {dayjs(block_datetime).format('h:mma')} |
{`${formatDecimal(swap_in_amount, inDecimals)}`} {inSymbol} {t('price')}: {' '} {formatFixedDecimals(swap_in_price_usd, true)} {`${formatDecimal(swap_out_amount, outDecimals)}`} {outSymbol} {t('price')}:{' '} {formatFixedDecimals(swap_out_price_usd, true)} |
{formatFixedDecimals( swap_out_price_usd * swap_out_amount, false, true )} |
{borrowAmount} {inSymbol} |
{borrowFee} {inSymbol} |
---|
{swap_in_amount.toFixed(2)}{' '} {inSymbol}
{t('price')}: {' '} {formatFixedDecimals(swap_in_price_usd, true)}
{swap_out_amount.toFixed(2)}{' '} {outSymbol}
{t('price')}: {' '} {formatFixedDecimals(swap_out_price_usd, true)}
{t('date')}
{dayjs(block_datetime).format('ddd D MMM')}
{dayjs(block_datetime).format('h:mma')}
{t('borrow')}
{borrowAmount}{' '} {inSymbol}
{t('borrow-fee')}
${borrowFee}
{t('transaction')}
{t('swap:no-history')}