import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4'
import { Disclosure, Transition } from '@headlessui/react'
import {
ChevronDownIcon,
EllipsisHorizontalIcon,
QuestionMarkCircleIcon,
} from '@heroicons/react/20/solid'
import { useTranslation } from 'next-i18next'
import Image from 'next/legacy/image'
import { useRouter } from 'next/router'
import { useCallback, useMemo, useState } from 'react'
import { useViewport } from '../hooks/useViewport'
import mangoStore from '@store/mangoStore'
import { breakpoints } from '../utils/theme'
import Switch from './forms/Switch'
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 DepositWithdrawModal from './modals/DepositWithdrawModal'
import BorrowRepayModal from './modals/BorrowRepayModal'
import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions'
import { SHOW_ZERO_BALANCES_KEY, USDC_MINT } from 'utils/constants'
import { PublicKey } from '@solana/web3.js'
import ActionsLinkButton from './account/ActionsLinkButton'
import FormatNumericValue from './shared/FormatNumericValue'
import BankAmountWithValue from './shared/BankAmountWithValue'
import useBanksWithBalances, {
BankWithBalance,
} from 'hooks/useBanksWithBalances'
import useUnownedAccount from 'hooks/useUnownedAccount'
import useLocalStorageState from 'hooks/useLocalStorageState'
const TokenList = () => {
const { t } = useTranslation(['common', 'token', 'trade'])
const [showZeroBalances, setShowZeroBalances] = useLocalStorageState(
SHOW_ZERO_BALANCES_KEY,
true
)
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
const { mangoTokens } = useJupiterMints()
const totalInterestData = mangoStore(
(s) => s.mangoAccount.interestTotals.data
)
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const banks = useBanksWithBalances('balance')
const filteredBanks = useMemo(() => {
if (banks.length) {
return showZeroBalances || !mangoAccountAddress
? banks
: banks.filter((b) => Math.abs(b.balance) > 0)
}
return []
}, [banks, mangoAccountAddress, showZeroBalances])
return (
{mangoAccountAddress ? (
setShowZeroBalances(!showZeroBalances)}
>
{t('show-zero-balances')}
) : null}
{showTableView ? (
{t('token')} |
{t('balance')}
|
{t('trade:in-orders')} |
{t('trade:unsettled')} |
{t('interest-earned-paid')}
|
{t('rates')}
|
{t('actions')}
|
{filteredBanks.map((b) => {
const bank = b.bank
let logoURI
if (mangoTokens?.length) {
logoURI = mangoTokens.find(
(t) => t.address === bank.mint.toString()
)?.logoURI
}
const tokenBalance = b.balance
const hasInterestEarned = totalInterestData.find(
(d) => d.symbol === bank.name
)
const interestAmount = hasInterestEarned
? hasInterestEarned.borrow_interest * -1 +
hasInterestEarned.deposit_interest
: 0
const interestValue = hasInterestEarned
? hasInterestEarned.borrow_interest_usd * -1 +
hasInterestEarned.deposit_interest_usd
: 0.0
const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
const unsettled =
spotBalances[bank.mint.toString()]?.unsettled || 0
return (
{logoURI ? (
) : (
)}
{bank.name}
|
|
|
|
|
|
|
)
})}
) : (
{filteredBanks.map((b) => {
return
})}
)}
)
}
export default TokenList
const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
const { t } = useTranslation(['common', 'token'])
const { mangoTokens } = useJupiterMints()
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
const { mangoAccount } = useMangoAccount()
const totalInterestData = mangoStore(
(s) => s.mangoAccount.interestTotals.data
)
const tokenBank = bank.bank
const mint = tokenBank.mint
const symbol = tokenBank.name
let logoURI: string | undefined
if (mangoTokens?.length) {
logoURI = mangoTokens.find(
(t) => t.address === tokenBank.mint.toString()
)!.logoURI
}
const hasInterestEarned = totalInterestData.find((d) => d.symbol === symbol)
const interestAmount = hasInterestEarned
? hasInterestEarned.borrow_interest * -1 +
hasInterestEarned.deposit_interest
: 0
const interestValue = hasInterestEarned
? hasInterestEarned.borrow_interest_usd * -1 +
hasInterestEarned.deposit_interest_usd
: 0
const tokenBalance = bank.balance
const inOrders = spotBalances[mint.toString()]?.inOrders || 0
const unsettled = spotBalances[mint.toString()]?.unsettled || 0
return (
{({ open }) => (
<>
{t('interest-earned-paid')}
>
)}
)
}
const ActionsMenu = ({
bank,
mangoAccount,
}: {
bank: Bank
mangoAccount: MangoAccount | undefined
}) => {
const { t } = useTranslation('common')
const [showDepositModal, setShowDepositModal] = useState(false)
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
const [showBorrowModal, setShowBorrowModal] = useState(false)
const [showRepayModal, setShowRepayModal] = useState(false)
const [selectedToken, setSelectedToken] = useState('')
const set = mangoStore.getState().set
const router = useRouter()
const { mangoTokens } = useJupiterMints()
const spotMarkets = mangoStore((s) => s.serumMarkets)
const { isUnownedAccount } = useUnownedAccount()
const spotMarket = useMemo(() => {
return spotMarkets.find((m) => {
const base = m.name.split('/')[0]
return base.toUpperCase() === bank.name.toUpperCase()
})
}, [spotMarkets])
const handleShowActionModals = useCallback(
(token: string, action: 'borrow' | 'deposit' | 'withdraw' | 'repay') => {
setSelectedToken(token)
action === 'borrow'
? setShowBorrowModal(true)
: action === 'deposit'
? setShowDepositModal(true)
: action === 'withdraw'
? setShowWithdrawModal(true)
: setShowRepayModal(true)
},
[]
)
const balance = useMemo(() => {
if (!mangoAccount || !bank) return 0
return mangoAccount.getTokenBalanceUi(bank)
}, [bank, mangoAccount])
const handleSwap = useCallback(() => {
const tokenInfo = mangoTokens.find(
(t) => t.address === bank.mint.toString()
)
const group = mangoStore.getState().group
if (balance && balance > 0) {
if (tokenInfo?.symbol === 'SOL') {
const usdcTokenInfo = mangoTokens.find((t) => t.address === USDC_MINT)
const usdcBank = group?.getFirstBankByMint(new PublicKey(USDC_MINT))
set((s) => {
s.swap.inputBank = usdcBank
s.swap.inputTokenInfo = usdcTokenInfo
})
}
set((s) => {
s.swap.inputBank = bank
s.swap.inputTokenInfo = tokenInfo
})
} else {
if (tokenInfo?.symbol === 'USDC') {
const solTokenInfo = mangoTokens.find(
(t) => t.address === WRAPPED_SOL_MINT.toString()
)
const solBank = group?.getFirstBankByMint(WRAPPED_SOL_MINT)
set((s) => {
s.swap.inputBank = solBank
s.swap.inputTokenInfo = solTokenInfo
})
}
set((s) => {
s.swap.outputBank = bank
s.swap.outputTokenInfo = tokenInfo
})
}
router.push('/swap', undefined, { shallow: true })
}, [bank, router, set, mangoTokens, mangoAccount])
const handleTrade = useCallback(() => {
router.push(`/trade?name=${spotMarket?.name}`, undefined, { shallow: true })
}, [spotMarket, router])
const logoURI = useMemo(() => {
if (!bank || !mangoTokens?.length) return ''
return mangoTokens.find((t) => t.address === bank.mint.toString())?.logoURI
}, [bank, mangoTokens])
return (
<>
{isUnownedAccount ? null : (
}
panelClassName="w-40 shadow-md"
postion="leftBottom"
>
{formatTokenSymbol(bank.name)}
handleShowActionModals(bank.name, 'deposit')}
>
{t('deposit')}
{balance < 0 ? (
handleShowActionModals(bank.name, 'repay')}
>
{t('repay')}
) : null}
{balance && balance > 0 ? (
handleShowActionModals(bank.name, 'withdraw')}
>
{t('withdraw')}
) : null}
handleShowActionModals(bank.name, 'borrow')}
>
{t('borrow')}
{t('swap')}
{spotMarket ? (
{t('trade')}
) : null}
)}
{showDepositModal ? (
setShowDepositModal(false)}
token={selectedToken}
/>
) : null}
{showWithdrawModal ? (
setShowWithdrawModal(false)}
token={selectedToken}
/>
) : null}
{showBorrowModal ? (
setShowBorrowModal(false)}
token={selectedToken}
/>
) : null}
{showRepayModal ? (
setShowRepayModal(false)}
token={selectedToken}
/>
) : null}
>
)
}