import { Bank, Serum3Market } from '@blockworks-foundation/mango-v4' import useJupiterMints from 'hooks/useJupiterMints' import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid' import mangoStore from '@store/mangoStore' import Decimal from 'decimal.js' import useMangoAccount from 'hooks/useMangoAccount' import { useViewport } from 'hooks/useViewport' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' import { useRouter } from 'next/router' import { useMemo } from 'react' import { formatDecimal, formatFixedDecimals } from 'utils/numbers' import { breakpoints } from 'utils/theme' import { calculateMarketPrice } from 'utils/tradeForm' import { LinkButton } from './Button' import { Table, Td, Th, TrBody, TrHead } from './TableElements' import useSelectedMarket from 'hooks/useSelectedMarket' const BalancesTable = () => { const { t } = useTranslation(['common', 'trade']) const { mangoAccount } = useMangoAccount() const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const group = mangoStore((s) => s.group) const { mangoTokens } = useJupiterMints() const { width } = useViewport() const showTableView = width ? width > breakpoints.md : false const banks = useMemo(() => { if (group) { const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({ key, value, })) const sortedBanks = mangoAccount ? rawBanks.sort( (a, b) => Math.abs( mangoAccount?.getTokenBalanceUi(b.value[0]) * b.value[0].uiPrice! ) - Math.abs( mangoAccount?.getTokenBalanceUi(a.value[0]) * a.value[0].uiPrice! ) ) : rawBanks return mangoAccount ? sortedBanks.filter( (b) => mangoAccount?.getTokenBalanceUi(b.value[0]) !== 0 ) : sortedBanks } return [] }, [group, mangoAccount]) return banks?.length ? ( showTableView ? (
{t('token')} | {t('balance')} | {t('trade:in-orders')} | {t('trade:unsettled')} |
{logoURI ? (
{bank.name}
|
{mangoAccount ? `${formatFixedDecimals( mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice!, true )}` : '$0.00'} |
{formatDecimal(inOrders)} {formatFixedDecimals(inOrders * bank.uiPrice!, true)} |
{formatDecimal(unsettled)} {formatFixedDecimals(unsettled * bank.uiPrice!, true)} |
---|
{mangoAccount ? formatDecimal( mangoAccount.getTokenBalanceUi(bank), bank.mintDecimals ) : 0}{' '} ( {mangoAccount ? `${formatFixedDecimals( mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice!, true )}` : '$0.00'} )
{t('trade:in-orders')}:{' '} {formatDecimal(inOrders)}
{t('trade:unsettled')}:{' '} {formatDecimal(unsettled)}
{t('trade:no-balances')}
{balance ? (
isBaseOrQuote ? (