import { Serum3Market } from '@blockworks-foundation/mango-v4' import { ChevronDownIcon, NoSymbolIcon } from '@heroicons/react/20/solid' import mangoStore from '@store/mangoStore' import useMangoAccount from 'hooks/useMangoAccount' import { useViewport } from 'hooks/useViewport' import { useTranslation } from 'next-i18next' import { useRouter } from 'next/router' import { useCallback, useMemo } from 'react' import { floorToDecimal, getDecimalCount } from 'utils/numbers' import { breakpoints } from 'utils/theme' import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm' import { LinkButton } from './Button' import { SortableColumnHeader, Table, Td, Th, TrBody, TrHead, } from './TableElements' import useSelectedMarket from 'hooks/useSelectedMarket' import ConnectEmptyState from './ConnectEmptyState' import { useWallet } from '@solana/wallet-adapter-react' import FormatNumericValue from './FormatNumericValue' import BankAmountWithValue from './BankAmountWithValue' import useBanksWithBalances, { BankWithBalance, } from 'hooks/useBanksWithBalances' import useUnownedAccount from 'hooks/useUnownedAccount' import { Disclosure, Transition } from '@headlessui/react' import TokenLogo from './TokenLogo' import useHealthContributions from 'hooks/useHealthContributions' import Tooltip from './Tooltip' import { PublicKey } from '@solana/web3.js' import { USDC_MINT } from 'utils/constants' import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions' import { useSortableData } from 'hooks/useSortableData' const BalancesTable = () => { const { t } = useTranslation(['common', 'account', 'trade']) const { mangoAccount, mangoAccountAddress } = useMangoAccount() const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const { width } = useViewport() const { connected } = useWallet() const showTableView = width ? width > breakpoints.md : false const banks = useBanksWithBalances('balance') const { initContributions } = useHealthContributions() const filteredBanks = useMemo(() => { if (banks.length) { return banks.filter((b) => { return ( Math.abs(floorToDecimal(b.balance, b.bank.mintDecimals).toNumber()) > 0 || spotBalances[b.bank.mint.toString()]?.unsettled > 0 || spotBalances[b.bank.mint.toString()]?.inOrders > 0 ) }) } return [] }, [banks]) const formattedTableData = useCallback(() => { const formatted = [] for (const b of filteredBanks) { const bank = b.bank const balance = b.balance const balanceValue = balance * bank.uiPrice const symbol = bank.name === 'MSOL' ? 'mSOL' : bank.name const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0 const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0 const collateralValue = initContributions.find((val) => val.asset === bank.name) ?.contribution || 0 const assetWeight = bank.scaledInitAssetWeight(bank.price) const liabWeight = bank.scaledInitLiabWeight(bank.price) const data = { assetWeight, balance, balanceValue, bankWithBalance: b, collateralValue, inOrders, liabWeight, symbol, unsettled, } formatted.push(data) } return formatted }, [filteredBanks]) const { items: tableData, requestSort, sortConfig, } = useSortableData(formattedTableData()) return filteredBanks.length ? ( showTableView ? (
|
|
|
|
|
|
|
|
|
|
---|
{symbol}
{t('collateral-value')}
{t('trade:in-orders')}
{t('trade:unsettled')}
{t('trade:no-balances')}
0
return (
{!isUnownedAccount && !isMobile ? (
asPath.includes('/trade') && isBaseOrQuote ? (