/* eslint-disable @typescript-eslint/no-explicit-any */ import { EXPLORERS } from '@components/settings/PreferredExplorerSettings' 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 { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements' import Tooltip from '@components/shared/Tooltip' import { Transition } from '@headlessui/react' import { ChevronDownIcon, ChevronRightIcon, NoSymbolIcon, } from '@heroicons/react/20/solid' import { useWallet } from '@solana/wallet-adapter-react' import mangoStore from '@store/mangoStore' import dayjs from 'dayjs' import useLocalStorageState from 'hooks/useLocalStorageState' import useMangoAccount from 'hooks/useMangoAccount' import { useViewport } from 'hooks/useViewport' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' import { Fragment, useCallback, useState } from 'react' import { ActivityFeed, isLiquidationFeedItem, LiquidationActivity } from 'types' import { PAGINATION_PAGE_LENGTH, PREFERRED_EXPLORER_KEY } from 'utils/constants' import { formatNumericValue } from 'utils/numbers' import { breakpoints } from 'utils/theme' const formatFee = (value: number) => { return value.toLocaleString(undefined, { minimumSignificantDigits: 1, maximumSignificantDigits: 1, }) } const getFee = (activity: any, mangoAccountAddress: string) => { const { activity_type } = activity let fee = { value: '0', symbol: '' } if (activity_type === 'swap') { const { loan_origination_fee, swap_in_symbol } = activity.activity_details fee = loan_origination_fee ? { value: formatFee(loan_origination_fee), symbol: swap_in_symbol } : { value: '0', symbol: '' } } if (activity_type === 'perp_trade') { const { maker_fee, taker_fee, maker } = activity.activity_details fee = { value: formatFee(mangoAccountAddress === maker ? maker_fee : taker_fee), symbol: 'USDC', } } if (activity_type === 'openbook_trade') { const { fee_cost, quote_symbol } = activity.activity_details fee = { value: fee_cost, symbol: quote_symbol } } return fee } const getCreditAndDebit = (activity: any) => { const { activity_type } = activity let credit = { value: '0', symbol: '' } let debit = { value: '0', symbol: '' } if (activity_type === 'liquidate_token_with_token') { const { side, liab_amount, liab_symbol, asset_amount, asset_symbol } = activity.activity_details if (side === 'liqee') { credit = { value: formatNumericValue(liab_amount), symbol: liab_symbol } debit = { value: formatNumericValue(asset_amount), symbol: asset_symbol, } } else { credit = { value: formatNumericValue(asset_amount), symbol: asset_symbol, } debit = { value: formatNumericValue(liab_amount), symbol: liab_symbol } } } if (activity_type === 'liquidate_perp_base_position_or_positive_pnl') { const { base_transfer, pnl_settle_limit_transfer, pnl_transfer, price, quote_transfer, side, } = activity.activity_details const rawCredit = pnl_settle_limit_transfer + pnl_transfer + quote_transfer const rawDebit = base_transfer * price if (side === 'liqee') { credit = { value: formatNumericValue(rawCredit), symbol: '' } debit = { value: formatNumericValue(rawDebit), symbol: '', } } else { credit = { value: formatNumericValue(rawDebit), symbol: '', } debit = { value: formatNumericValue(rawCredit), symbol: '' } } } if (activity_type === 'deposit') { const { symbol, quantity } = activity.activity_details credit = { value: formatNumericValue(quantity), symbol } debit = { value: '0', symbol: '' } } if (activity_type === 'withdraw') { const { symbol, quantity } = activity.activity_details credit = { value: '0', symbol: '' } debit = { value: formatNumericValue(quantity * -1), symbol } } if (activity_type === 'swap') { const { swap_in_amount, swap_in_symbol, swap_out_amount, swap_out_symbol } = activity.activity_details credit = { value: formatNumericValue(swap_out_amount), symbol: swap_out_symbol, } debit = { value: formatNumericValue(swap_in_amount * -1), symbol: swap_in_symbol, } } if (activity_type === 'perp_trade') { const { perp_market_name, price, quantity } = activity.activity_details credit = { value: quantity, symbol: perp_market_name } debit = { value: formatNumericValue(quantity * price * -1), symbol: 'USDC', } } if (activity_type === 'openbook_trade') { const { side, price, size, base_symbol, quote_symbol } = activity.activity_details credit = side === 'buy' ? { value: formatNumericValue(size), symbol: base_symbol } : { value: formatNumericValue(size * price), symbol: quote_symbol } debit = side === 'buy' ? { value: formatNumericValue(size * price * -1), symbol: quote_symbol, } : { value: formatNumericValue(size * -1), symbol: base_symbol } } return { credit, debit } } const getValue = (activity: any) => { const { activity_type } = activity let value = 0 if (activity_type === 'liquidate_token_with_token') { const { side, liab_amount, liab_price, asset_amount, asset_price } = activity.activity_details if (side === 'liqee') { value = Math.abs(liab_amount) * liab_price - Math.abs(asset_amount) * asset_price } else { value = Math.abs(asset_amount) * asset_price - Math.abs(liab_amount) * liab_price } } if (activity_type === 'liquidate_perp_base_position_or_positive_pnl') { const { base_transfer, pnl_settle_limit_transfer, pnl_transfer, price, quote_transfer, side, } = activity.activity_details const rawCredit = pnl_settle_limit_transfer + pnl_transfer + quote_transfer const rawDebit = base_transfer * price if (side === 'liqee') { value = Math.abs(rawCredit) - Math.abs(rawDebit) } else { value = Math.abs(rawDebit) - Math.abs(rawCredit) } } if (activity_type === 'deposit' || activity_type === 'withdraw') { const { usd_equivalent } = activity.activity_details value = activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent } if (activity_type === 'swap') { const { swap_out_amount, swap_out_price_usd } = activity.activity_details value = swap_out_amount * swap_out_price_usd } if (activity_type === 'perp_trade') { const { price, quantity } = activity.activity_details value = quantity * price } if (activity_type === 'openbook_trade') { const { price, size } = activity.activity_details value = price * size } return value } const ActivityFeedTable = ({ activityFeed, handleShowActivityDetails, }: { activityFeed: ActivityFeed[] handleShowActivityDetails: (x: LiquidationActivity) => void }) => { const { t } = useTranslation(['common', 'activity']) const { mangoAccountAddress } = useMangoAccount() const actions = mangoStore((s) => s.actions) const loadActivityFeed = mangoStore((s) => s.activityFeed.loading) const queryParams = mangoStore((s) => s.activityFeed.queryParams) const [offset, setOffset] = useState(0) const { connected } = useWallet() const [preferredExplorer] = useLocalStorageState( PREFERRED_EXPLORER_KEY, EXPLORERS[0] ) const { width } = useViewport() const showTableView = width ? width > breakpoints.md : false const handleShowMore = useCallback(() => { const set = mangoStore.getState().set set((s) => { s.activityFeed.loading = true }) if (!mangoAccountAddress) return setOffset(offset + PAGINATION_PAGE_LENGTH) actions.fetchActivityFeed( mangoAccountAddress, offset + PAGINATION_PAGE_LENGTH, queryParams ) }, [actions, offset, queryParams, mangoAccountAddress]) return mangoAccountAddress && (activityFeed.length || loadActivityFeed) ? ( <> {showTableView ? (
{t('date')} | {t('activity:activity')} | {t('activity:credit')} | {t('activity:debit')} |
|
{t('value')} | {t('explorer')} |
{dayjs(block_datetime).format('ddd D MMM')} {dayjs(block_datetime).format('h:mma')} |
{t(`activity:${activity_type}`)} | {amounts.credit.value}{' '} {amounts.credit.symbol} | {amounts.debit.value}{' '} {amounts.debit.symbol} | {activity_type === 'perp' ? (Number(fee.value) * value).toFixed(5) : fee.value}{' '} {fee.symbol} | = 0
? 'text-th-up'
: 'text-th-down'
}`}
>
{value > 0 &&
activity_type !== 'swap' &&
activity_type !== 'perp_trade' &&
!isOpenbook
? '+'
: ''}
|
{!isLiquidationFeedItem(activity) ? (
) : (
|
---|
{t('activity:no-activity')}
{dayjs(block_datetime).format('ddd D MMM')}
{dayjs(block_datetime).format('h:mma')}
{t(`activity:${activity_type}`)}
{isLiquidationFeedItem(activity) ? (
{t('activity:asset-liquidated')}
{t('activity:asset-returned')}