import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4'
import { Transition } from '@headlessui/react'
import {
ChevronDownIcon,
DotsHorizontalIcon,
QuestionMarkCircleIcon,
} from '@heroicons/react/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import { useTranslation } from 'next-i18next'
import { useTheme } from 'next-themes'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
import { useViewport } from '../hooks/useViewport'
import mangoStore from '../store/state'
import { COLORS } from '../styles/colors'
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 { UpTriangle } from './shared/DirectionTriangles'
import IconDropMenu from './shared/IconDropMenu'
import SimpleAreaChart from './shared/SimpleAreaChart'
import { FadeInList } from './shared/Transitions'
const TokenList = () => {
const { t } = useTranslation('common')
const { connected } = useWallet()
const [showTokenDetails, setShowTokenDetails] = useState('')
const [showZeroBalances, setShowZeroBalances] = useState(true)
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const coingeckoPrices = mangoStore((s) => s.coingeckoPrices.data)
const loadingCoingeckoPrices = mangoStore((s) => s.coingeckoPrices.loading)
const actions = mangoStore((s) => s.actions)
const group = mangoStore((s) => s.group)
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
const totalInterestData = mangoStore(
(s) => s.mangoAccount.stats.interestTotals.data
)
const { theme } = useTheme()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
useEffect(() => {
if (coingeckoPrices.length === 0) {
actions.fetchCoingeckoPrices()
}
}, [coingeckoPrices, actions])
const banks = useMemo(() => {
if (group) {
const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
key,
value,
}))
return mangoAccount
? showZeroBalances
? 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
.filter((b) => mangoAccount?.getTokenBalanceUi(b.value[0]) !== 0)
.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 []
}, [showZeroBalances, group, mangoAccount])
useEffect(() => {
if (!connected) {
setShowZeroBalances(true)
}
}, [connected])
const handleShowTokenDetails = (name: string) => {
showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
}
return (
{bank.name} {formatFixedDecimals(oraclePrice, true)} {t('unavailable')} {formatFixedDecimals(bank.uiDeposits())} {formatFixedDecimals(bank.uiBorrows())}
{formatDecimal(bank.getDepositRateUi(), 2, {
fixed: true,
})}
%
{formatDecimal(bank.getBorrowRateUi(), 2, {
fixed: true,
})}
%
{formatDecimal(interestAmount)}
{formatFixedDecimals(interestValue, true)}
{mangoAccount
? formatDecimal(mangoAccount.getTokenBalanceUi(bank))
: 0}
{mangoAccount
? `${formatFixedDecimals(
mangoAccount.getTokenBalanceUi(bank) * oraclePrice,
true
)}`
: '$0.00'}
{bank.name}
{t('available')}:
{mangoAccount
? formatDecimal(mangoAccount.getTokenBalanceUi(bank))
: 0}
{t('price')}
${formatDecimal(oraclePrice, 2)}
{t('rolling-change')}
0% {t('rates')}
{formatDecimal(bank.getDepositRate().toNumber(), 2)}%
|
{formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
{t('liquidity')}
{formatDecimal(
bank.uiDeposits() - bank.uiBorrows(),
bank.mintDecimals
)}
) : (
{banks.map(({ key, value }, index) => {
const bank = value[0]
const oraclePrice = bank.uiPrice
const coingeckoData = coingeckoPrices.find(
(asset) => asset.symbol === key
)
const change = coingeckoData
? ((coingeckoData.prices[coingeckoData.prices.length - 1][1] -
coingeckoData.prices[0][1]) /
coingeckoData.prices[0][1]) *
100
: 0
const chartData = coingeckoData ? coingeckoData.prices : undefined
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
return (
{t('token')}
{t('price')}
Total Deposits
Total Borrows
{t('rates')}
{t('interest-earned')}
{t('available-balance')}
)
})}
{!loadingCoingeckoPrices ? (
chartData !== undefined ? (
{bank.name}