76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
// import { useEffect, useState, useMemo } from 'react'
|
|
// import { groupBy } from '../utils'
|
|
// import useTradeHistory from '../hooks/useTradeHistory'
|
|
import { I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
|
|
import useMangoStore, { mangoClient } from '../stores/useMangoStore'
|
|
import FloatingElement from './FloatingElement'
|
|
import Tooltip from './Tooltip'
|
|
// import Button from './Button'
|
|
// import AlertsModal from './AlertsModal'
|
|
|
|
export default function MarginInfo() {
|
|
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
|
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
|
|
const selectedMangoAccount = useMangoStore(
|
|
(s) => s.selectedMangoAccount.current
|
|
)
|
|
|
|
// TODO move out of component
|
|
let initHealth = I80F48.fromString('0')
|
|
let maintHealth = I80F48.fromString('0')
|
|
if (selectedMangoAccount) {
|
|
initHealth = selectedMangoAccount.getHealth(mangoGroup, mangoCache, 'Init')
|
|
maintHealth = selectedMangoAccount.getHealth(
|
|
mangoGroup,
|
|
mangoCache,
|
|
'Maint'
|
|
)
|
|
}
|
|
|
|
// const tradeHistory = useTradeHistory()
|
|
// const tradeHistoryLength = useMemo(() => tradeHistory.length, [tradeHistory])
|
|
|
|
return (
|
|
<FloatingElement>
|
|
<>
|
|
<div className={`flex justify-between pt-2 pb-2`}>
|
|
<Tooltip content="Account health">
|
|
<div
|
|
className={`cursor-help font-normal text-th-fgd-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
|
>
|
|
Init Health
|
|
</div>
|
|
</Tooltip>
|
|
<div className={`text-th-fgd-1`}>{initHealth.toFixed(3)}</div>
|
|
</div>
|
|
|
|
<div className={`flex justify-between pt-2 pb-2`}>
|
|
<Tooltip content="Account health">
|
|
<div
|
|
className={`cursor-help font-normal text-th-fgd-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
|
>
|
|
Maint Health
|
|
</div>
|
|
</Tooltip>
|
|
<div className={`text-th-fgd-1`}>{maintHealth.toFixed(3)}</div>
|
|
</div>
|
|
|
|
{/* <Button
|
|
className="mt-4 w-full"
|
|
disabled={!connected}
|
|
onClick={() => setOpenAlertModal(true)}
|
|
>
|
|
Create Liquidation Alert
|
|
</Button>
|
|
{openAlertModal ? (
|
|
<AlertsModal
|
|
isOpen={openAlertModal}
|
|
onClose={() => setOpenAlertModal(false)}
|
|
mangoAccount={selectedMangoAccount}
|
|
/>
|
|
) : null} */}
|
|
</>
|
|
</FloatingElement>
|
|
)
|
|
}
|