import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4'
import { Transition } from '@headlessui/react'
import {
ChevronDownIcon,
EllipsisHorizontalIcon,
QuestionMarkCircleIcon,
} from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
// import useLocalStorageState from '../hooks/useLocalStorageState'
import { useViewport } from '../hooks/useViewport'
import mangoStore from '@store/mangoStore'
import { formatDecimal, formatFixedDecimals } from '../utils/numbers'
import { breakpoints } from '../utils/theme'
import Switch from './forms/Switch'
import BorrowModal from './modals/BorrowModal'
import DepositModal from './modals/DepositModal'
import WithdrawModal from './modals/WithdrawModal'
import { IconButton, LinkButton } from './shared/Button'
import ContentBox from './shared/ContentBox'
import IconDropMenu from './shared/IconDropMenu'
import Change from './shared/Change'
import Tooltip from './shared/Tooltip'
import { formatTokenSymbol } from 'utils/tokens'
const TokenList = () => {
const { t } = useTranslation(['common', 'trade'])
const { connected } = useWallet()
const [showZeroBalances, setShowZeroBalances] = useState(true)
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
const group = mangoStore((s) => s.group)
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
const totalInterestData = mangoStore(
(s) => s.mangoAccount.stats.interestTotals.data
)
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 && !showZeroBalances
? sortedBanks.filter(
(b) => mangoAccount?.getTokenBalanceUi(b.value[0]) !== 0
)
: sortedBanks
}
return []
}, [showZeroBalances, group, mangoAccount])
useEffect(() => {
if (!connected) {
setShowZeroBalances(true)
}
}, [connected])
return (
{bank.name}
{mangoAccount
? formatDecimal(
mangoAccount.getTokenBalanceUi(bank),
bank.mintDecimals
)
: 0}
{mangoAccount
? `${formatFixedDecimals(
mangoAccount.getTokenBalanceUi(bank) * oraclePrice!,
true
)}`
: '$0.00'}
{formatDecimal(inOrders)}
{formatFixedDecimals(inOrders * oraclePrice!, true)}
{formatDecimal(unsettled)}
{formatFixedDecimals(unsettled * oraclePrice!, true)}
{formatDecimal(interestAmount)}
{formatFixedDecimals(interestValue, true)}
{formatDecimal(bank.getDepositRateUi(), 2, {
fixed: true,
})}
%
{formatDecimal(bank.getBorrowRateUi(), 2, {
fixed: true,
})}
%
) : (
{banks.map(({ key, value }, i) => {
const bank = value[0]
const oraclePrice = bank.uiPrice
let logoURI
if (jupiterTokens.length) {
logoURI = jupiterTokens.find(
(t) => t.address === bank.mint.toString()
)!.logoURI
}
const hasInterestEarned = totalInterestData.find(
(d) => d.symbol === bank.name
)
const interestAmount = hasInterestEarned
? hasInterestEarned.borrow_interest +
hasInterestEarned.deposit_interest
: 0
const interestValue = hasInterestEarned
? hasInterestEarned.borrow_interest_usd +
hasInterestEarned.deposit_interest_usd
: 0.0
const inOrders =
spotBalances[bank.mint.toString()]?.inOrders || 0.0
const unsettled =
spotBalances[bank.mint.toString()]?.unsettled || 0.0
return (
{t('token')}
{t('trade:in-orders')}
{t('trade:unsettled')}
)
})}
{bank.name}
{t('balance')}: {mangoAccount ? formatDecimal(mangoAccount.getTokenBalanceUi(bank)) : 0}
{t('trade:in-orders')}
{formatDecimal(inOrders)}
({formatFixedDecimals(inOrders * oraclePrice!, true)})
{t('trade:unsettled')}
{formatDecimal(unsettled)}
({formatFixedDecimals(unsettled * oraclePrice!, true)})
{t('interest-earned-paid')}
{formatDecimal(interestAmount)}
({formatFixedDecimals(interestValue, true)})
{t('rates')}
{formatDecimal(bank.getDepositRate().toNumber(), 2)}% | {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
{formatTokenSymbol(bank.name)}