import { Bank } from '@blockworks-foundation/mango-v4' import DepositWithdrawModal from '@components/modals/DepositWithdrawModal' import Button, { LinkButton } from '@components/shared/Button' import FormatNumericValue from '@components/shared/FormatNumericValue' import Modal from '@components/shared/Modal' import TableRatesDisplay from '@components/shared/TableRatesDisplay' import UnsettledTrades from '@components/trade/UnsettledTrades' import { ArrowDownTrayIcon, ArrowUpTrayIcon } from '@heroicons/react/20/solid' import mangoStore from '@store/mangoStore' import useAccountInterest from 'hooks/useAccountInterest' import useHealthContributions from 'hooks/useHealthContributions' import useMangoAccount from 'hooks/useMangoAccount' import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions' import { useTranslation } from 'next-i18next' import { useMemo, useState } from 'react' import { ModalProps } from 'types/modal' import { formatCurrencyValue } from 'utils/numbers' const ActionPanel = ({ bank }: { bank: Bank }) => { const { t } = useTranslation(['common', 'trade']) const { mangoAccount } = useMangoAccount() const { initContributions } = useHealthContributions() const [showDepositModal, setShowDepositModal] = useState< 'deposit' | 'withdraw' | '' >('') const [showSettleModal, setShowSettleModal] = useState(false) const { data: totalInterestData } = useAccountInterest() const [depositRate, borrowRate] = useMemo(() => { const depositRate = bank.getDepositRateUi() const borrowRate = bank.getBorrowRateUi() return [depositRate, borrowRate] }, [bank]) const collateralValue = initContributions.find((val) => val.asset === bank.name)?.contribution || 0 const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0 let unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0 const unsettledPerpPositions = useUnsettledPerpPositions() if (bank.name === 'USDC' && unsettledPerpPositions?.length) { const group = mangoStore.getState().group const unsettledPositionValues = [] for (const position of unsettledPerpPositions) { const market = group?.getPerpMarketByMarketIndex(position.marketIndex) if (market) { const posUnsettled = position.getUnsettledPnlUi(market) unsettledPositionValues.push(posUnsettled) } } unsettled = unsettled + unsettledPositionValues.reduce((a, c) => a + c, 0) } const symbol = bank.name === 'MSOL' ? 'mSOL' : bank.name const hasInterestEarned = totalInterestData?.find( (d) => d.symbol.toLowerCase() === symbol.toLowerCase() || (symbol === 'ETH (Portal)' && d.symbol === 'ETH'), ) const interestAmount = hasInterestEarned ? hasInterestEarned.borrow_interest * -1 + hasInterestEarned.deposit_interest : 0 const interestValue = hasInterestEarned ? hasInterestEarned.borrow_interest_usd * -1 + hasInterestEarned.deposit_interest_usd : 0 return ( <>
{t('balance')}
{mangoAccount ? (
{t('collateral-value')}
{mangoAccount ? formatCurrencyValue(collateralValue) : '$0.00'}
{t('trade:in-orders')}
{inOrders ? (
{t('trade:unsettled')}
{unsettled ? (
0
)}{t('interest-earned')}
{interestAmount ? (
$
{interestValue ? (
{t('rates')}