import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4'
import { Transition } from '@headlessui/react'
import { ChevronDownIcon, DotsHorizontalIcon } 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, 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 { 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?.banksMap) {
const rawBanks = Array.from(group?.banksMap, ([key, value]) => ({
key,
value,
}))
return mangoAccount
? showZeroBalances
? rawBanks.sort(
(a, b) =>
Math.abs(mangoAccount?.getUi(b.value) * Number(b.value.price)) -
Math.abs(mangoAccount?.getUi(a.value) * Number(a.value.price))
)
: rawBanks
.filter((b) => mangoAccount?.getUi(b.value) !== 0)
.sort(
(a, b) =>
Math.abs(
mangoAccount?.getUi(b.value) * Number(b.value.price)
) -
Math.abs(mangoAccount?.getUi(a.value) * Number(a.value.price))
)
: rawBanks
}
return []
}, [showZeroBalances, group, mangoAccount])
useEffect(() => {
if (!connected) {
setShowZeroBalances(true)
}
}, [connected])
const handleShowTokenDetails = (name: string) => {
showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
}
return (
{bank.value.name} ${formatFixedDecimals(oraclePrice.toNumber())} {t('unavailable')}
{formatDecimal(
bank.value.getDepositRate().toNumber(),
2
)}
%
{formatDecimal(
bank.value.getBorrowRate().toNumber(),
2
)}
%
{formatDecimal(
bank.value.uiDeposits() - bank.value.uiBorrows(),
bank.value.mintDecimals
)}
{mangoAccount
? formatDecimal(mangoAccount.getUi(bank.value))
: 0}
{mangoAccount
? `$${formatDecimal(
mangoAccount.getUi(bank.value) *
oraclePrice.toNumber(),
2
)}`
: '$0'}
{bank.value.name}
{t('available')}:
{mangoAccount
? formatDecimal(mangoAccount.getUi(bank.value))
: 0}
{t('price')}
${formatDecimal(oraclePrice.toNumber(), 2)}
{t('rolling-change')}
0% {t('rates')}
{formatDecimal(
bank.value.getDepositRate().toNumber(),
2
)}
%
|
{formatDecimal(
bank.value.getBorrowRate().toNumber(),
2
)}
%
{t('liquidity')}
{formatDecimal(
bank.value.uiDeposits() - bank.value.uiBorrows(),
bank.value.mintDecimals
)}
) : (
{banks.map((bank, index) => {
const oraclePrice = bank.value.price
const coingeckoData = coingeckoPrices.find(
(asset) => asset.symbol === bank.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.value.mint.toString()
)!.logoURI
}
return (
{t('token')}
{t('price')}
{t('rates')}
{t('liquidity')}
{t('available-balance')}
{!loadingCoingeckoPrices ? (
chartData !== undefined ? (
{bank.name}