2022-12-06 16:22:32 -08:00
|
|
|
import { Bank } from '@blockworks-foundation/mango-v4'
|
2022-12-18 04:30:49 -08:00
|
|
|
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
|
2022-12-17 04:37:00 -08:00
|
|
|
import DepositWithdrawModal from '@components/modals/DepositWithdrawModal'
|
2022-12-06 16:22:32 -08:00
|
|
|
import Button from '@components/shared/Button'
|
|
|
|
import mangoStore from '@store/mangoStore'
|
|
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { useRouter } from 'next/router'
|
|
|
|
import { useMemo, useState } from 'react'
|
|
|
|
import { formatDecimal } from 'utils/numbers'
|
|
|
|
|
|
|
|
const ActionPanel = ({ bank }: { bank: Bank }) => {
|
|
|
|
const { t } = useTranslation('common')
|
|
|
|
const { group } = useMangoGroup()
|
|
|
|
const { mangoAccount } = useMangoAccount()
|
|
|
|
const router = useRouter()
|
|
|
|
const [showDepositModal, setShowDepositModal] = useState(false)
|
|
|
|
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
|
|
|
|
|
|
|
const serumMarkets = useMemo(() => {
|
|
|
|
if (group) {
|
|
|
|
return Array.from(group.serum3MarketsMapByExternal.values())
|
|
|
|
}
|
|
|
|
return []
|
|
|
|
}, [group])
|
|
|
|
|
|
|
|
const handleTrade = () => {
|
|
|
|
const set = mangoStore.getState().set
|
|
|
|
const market = serumMarkets.find(
|
|
|
|
(m) => m.baseTokenIndex === bank?.tokenIndex
|
|
|
|
)
|
|
|
|
if (market) {
|
|
|
|
set((state) => {
|
|
|
|
state.selectedMarket.current = market
|
|
|
|
})
|
|
|
|
router.push('/trade')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="w-full rounded-md bg-th-bkg-2 p-4 md:w-[343px]">
|
|
|
|
<div className="mb-4 flex justify-between">
|
|
|
|
<p>
|
|
|
|
{bank.name} {t('balance')}:
|
|
|
|
</p>
|
|
|
|
<p className="font-mono text-th-fgd-2">
|
|
|
|
{mangoAccount
|
|
|
|
? formatDecimal(
|
|
|
|
mangoAccount.getTokenBalanceUi(bank),
|
|
|
|
bank.mintDecimals
|
|
|
|
)
|
|
|
|
: 0}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex space-x-2">
|
|
|
|
<Button
|
|
|
|
className="flex-1"
|
|
|
|
size="small"
|
|
|
|
disabled={!mangoAccount}
|
|
|
|
onClick={() => setShowDepositModal(true)}
|
|
|
|
>
|
|
|
|
{t('deposit')}
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
className="flex-1"
|
|
|
|
size="small"
|
|
|
|
secondary
|
|
|
|
disabled={!mangoAccount}
|
|
|
|
onClick={() => setShowBorrowModal(true)}
|
|
|
|
>
|
|
|
|
{t('borrow')}
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
className="flex-1"
|
|
|
|
size="small"
|
|
|
|
secondary
|
|
|
|
disabled={
|
|
|
|
!mangoAccount ||
|
|
|
|
!serumMarkets.find((m) => m.baseTokenIndex === bank?.tokenIndex)
|
|
|
|
}
|
|
|
|
onClick={handleTrade}
|
|
|
|
>
|
|
|
|
{t('trade')}
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{showDepositModal ? (
|
2022-12-17 04:37:00 -08:00
|
|
|
<DepositWithdrawModal
|
|
|
|
action="deposit"
|
2022-12-06 16:22:32 -08:00
|
|
|
isOpen={showDepositModal}
|
|
|
|
onClose={() => setShowDepositModal(false)}
|
|
|
|
token={bank!.name}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
{showBorrowModal ? (
|
2022-12-18 04:30:49 -08:00
|
|
|
<BorrowRepayModal
|
|
|
|
action="borrow"
|
2022-12-06 16:22:32 -08:00
|
|
|
isOpen={showBorrowModal}
|
|
|
|
onClose={() => setShowBorrowModal(false)}
|
|
|
|
token={bank!.name}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ActionPanel
|