import { useCallback, useState } from 'react' import Link from 'next/link' import { Menu } from '@headlessui/react' import { DotsHorizontalIcon } from '@heroicons/react/outline' import FloatingElement from './FloatingElement' import { ElementTitle } from './styles' import useMangoStore from '../stores/useMangoStore' import useMarketList from '../hooks/useMarketList' import { abbreviateAddress, floorToDecimal, tokenPrecision, } from '../utils/index' import DepositModal from './DepositModal' import WithdrawModal from './WithdrawModal' import BorrowModal from './BorrowModal' import Button from './Button' import Tooltip from './Tooltip' import AccountsModal from './AccountsModal' export default function MarginBalances() { const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const selectedMarginAccount = useMangoStore( (s) => s.selectedMarginAccount.current ) const loadingMarginAccount = useMangoStore( (s) => s.selectedMarginAccount.initialLoad ) const connected = useMangoStore((s) => s.wallet.connected) const { symbols } = useMarketList() const [showDepositModal, setShowDepositModal] = useState(false) const [showWithdrawModal, setShowWithdrawModal] = useState(false) const [showBorrowModal, setShowBorrowModal] = useState(false) const [showAccountsModal, setShowAccountsModal] = useState(false) const handleCloseDeposit = useCallback(() => { setShowDepositModal(false) }, []) const handleCloseWithdraw = useCallback(() => { setShowWithdrawModal(false) }, []) const handleCloseBorrow = useCallback(() => { setShowBorrowModal(false) }, []) const handleCloseAccounts = useCallback(() => { setShowAccountsModal(false) }, []) return ( <>
Margin Account {selectedMarginAccount ? ( {abbreviateAddress(selectedMarginAccount?.publicKey)} ) : null}
{selectedMangoGroup ? ( {Object.entries(symbols).map(([name], i) => ( ))}
Assets Deposits Borrows
Deposits / Borrows
{name} {selectedMarginAccount ? floorToDecimal( selectedMarginAccount.getUiDeposit( selectedMangoGroup, i ), tokenPrecision[name] ).toFixed(tokenPrecision[name]) : (0).toFixed(tokenPrecision[name])} {selectedMarginAccount ? selectedMarginAccount .getUiBorrow(selectedMangoGroup, i) .toFixed(tokenPrecision[name]) : (0).toFixed(tokenPrecision[name])} {(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}% {' / '} {(selectedMangoGroup.getBorrowRate(i) * 100).toFixed(2)}%
) : null}
{showDepositModal && ( )} {showWithdrawModal && ( )} {showBorrowModal && ( )} {showAccountsModal ? ( ) : null} ) }