import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4'
import { Transition } from '@headlessui/react'
import {
ChevronDownIcon,
ChevronRightIcon,
EllipsisHorizontalIcon,
QuestionMarkCircleIcon,
} from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import { useTranslation } from 'next-i18next'
import Image from 'next/legacy/image'
import { useRouter } from 'next/router'
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
import { useViewport } from '../hooks/useViewport'
import mangoStore from '@store/mangoStore'
import {
floorToDecimal,
formatDecimal,
formatFixedDecimals,
} from '../utils/numbers'
import { breakpoints } from '../utils/theme'
import Switch from './forms/Switch'
import { IconButton, LinkButton } from './shared/Button'
import ContentBox from './shared/ContentBox'
import IconDropMenu from './shared/IconDropMenu'
import Tooltip from './shared/Tooltip'
import { formatTokenSymbol } from 'utils/tokens'
import useMangoAccount from 'hooks/useMangoAccount'
import useJupiterMints from '../hooks/useJupiterMints'
import { Table, Td, Th, TrBody, TrHead } from './shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import DepositWithdrawModal from './modals/DepositWithdrawModal'
import BorrowRepayModal from './modals/BorrowRepayModal'
import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions'
import { USDC_MINT } from 'utils/constants'
import { PublicKey } from '@solana/web3.js'
const TokenList = () => {
const { t } = useTranslation(['common', 'token', 'trade'])
const { connected } = useWallet()
const [showZeroBalances, setShowZeroBalances] = useState(true)
const { mangoAccount } = useMangoAccount()
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
const { group } = useMangoGroup()
const { mangoTokens } = useJupiterMints()
const totalInterestData = mangoStore(
(s) => s.mangoAccount.stats.interestTotals.data
)
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const router = useRouter()
const banks = useMemo(() => {
if (group) {
const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
key,
value,
}))
const sortedBanks = mangoAccount
? rawBanks.sort((a, b) => {
const aBalance = Math.abs(
mangoAccount.getTokenBalanceUi(a.value[0]) * a.value[0].uiPrice
)
const bBalance = Math.abs(
mangoAccount.getTokenBalanceUi(b.value[0]) * b.value[0].uiPrice
)
if (aBalance > bBalance) return -1
if (aBalance < bBalance) return 1
const aName = a.value[0].name
const bName = b.value[0].name
if (aName > bName) return 1
if (aName < bName) return -1
return 1
})
: rawBanks.sort((a, b) => a.key.localeCompare(b.key))
return mangoAccount && !showZeroBalances
? sortedBanks.filter(
(b) => mangoAccount?.getTokenBalanceUi(b.value[0]) !== 0
)
: sortedBanks
}
return []
}, [showZeroBalances, group, mangoAccount])
useEffect(() => {
if (!connected) {
setShowZeroBalances(true)
}
}, [connected])
const goToTokenPage = (bank: Bank) => {
router.push(`/token/${bank.name}`, undefined, { shallow: true })
}
return (
{t('show-zero-balances')} {bank.name} {tokenBalance}
{tokenBalance
? `${formatFixedDecimals(
tokenBalance * oraclePrice!,
true
)}`
: '$0.00'}
{inOrders}
{formatFixedDecimals(inOrders * oraclePrice!, true)}
{unsettled ? unsettled.toFixed(bank.mintDecimals) : 0}
{formatFixedDecimals(unsettled * oraclePrice!, true)}
{interestAmount
? interestAmount.toFixed(bank.mintDecimals)
: 0}
{formatFixedDecimals(interestValue, true)}
{formatDecimal(bank.getDepositRateUi(), 2, {
fixed: true,
})}
%
{formatDecimal(bank.getBorrowRateUi(), 2, {
fixed: true,
})}
%
) : (
{t('token')}
{t('trade:in-orders')}
{t('trade:unsettled')}
{bank.name}
{t('balance')}: {tokenBalance}
{t('trade:in-orders')}
{inOrders}
({formatFixedDecimals(inOrders * oraclePrice!, true)})
{t('trade:unsettled')}
{unsettled ? unsettled.toFixed(bank.mintDecimals) : 0}
({formatFixedDecimals(unsettled * oraclePrice!, true)})
{t('interest-earned-paid')}
{floorToDecimal(interestAmount, bank.mintDecimals).toNumber()}
({formatFixedDecimals(interestValue, true)})
{t('rates')}
{formatDecimal(bank.getDepositRate().toNumber(), 2)}% | {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
{formatTokenSymbol(bank.name)}