86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { useCallback, useMemo } from 'react'
|
||
|
||
import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
|
||
import DropDownButton from 'components/common/Button/DropDownButton'
|
||
import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/common/Icons'
|
||
import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
|
||
import useAlertDialog from 'hooks/useAlertDialog'
|
||
import useAutoLend from 'hooks/useAutoLend'
|
||
import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
|
||
import useStore from 'store'
|
||
|
||
export const MANAGE_META = {
|
||
accessorKey: 'manage',
|
||
enableSorting: false,
|
||
header: '',
|
||
meta: {
|
||
className: 'w-40',
|
||
},
|
||
}
|
||
|
||
interface Props {
|
||
data: LendingMarketTableData
|
||
}
|
||
export default function Manage(props: Props) {
|
||
const { openLend, openReclaim } = useLendAndReclaimModal()
|
||
const { isAutoLendEnabledForCurrentAccount } = useAutoLend()
|
||
const { open: showAlertDialog } = useAlertDialog()
|
||
const address = useStore((s) => s.address)
|
||
const account = useCurrentAccount()
|
||
|
||
const hasAssetInDeposits = useMemo(
|
||
() => !!account?.deposits?.find((deposit) => deposit.denom === props.data.asset.denom),
|
||
[account?.deposits, props.data.asset.denom],
|
||
)
|
||
|
||
const handleUnlend = useCallback(() => {
|
||
if (isAutoLendEnabledForCurrentAccount) {
|
||
showAlertDialog({
|
||
icon: <ExclamationMarkCircled width={18} />,
|
||
title: 'Disable Automatically Lend Assets',
|
||
content:
|
||
"Your auto-lend feature is currently enabled. To unlend your funds, please confirm if you'd like to disable this feature in order to continue.",
|
||
positiveButton: {
|
||
onClick: () => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click(),
|
||
text: 'Continue to Account Settings',
|
||
icon: <Enter />,
|
||
},
|
||
negativeButton: {
|
||
text: 'Cancel',
|
||
},
|
||
})
|
||
|
||
return
|
||
}
|
||
|
||
openReclaim(props.data)
|
||
}, [isAutoLendEnabledForCurrentAccount, openReclaim, props.data, showAlertDialog])
|
||
|
||
const ITEMS: DropDownItem[] = useMemo(
|
||
() => [
|
||
{
|
||
icon: <ArrowUpLine />,
|
||
text: 'Lend more',
|
||
onClick: () => openLend(props.data),
|
||
disabled: !hasAssetInDeposits,
|
||
disabledTooltip: `You don’t have any ${props.data.asset.symbol}.
|
||
Please first deposit ${props.data.asset.symbol} into your Credit Account before lending.`,
|
||
},
|
||
{
|
||
icon: <ArrowDownLine />,
|
||
text: 'Unlend',
|
||
onClick: handleUnlend,
|
||
},
|
||
],
|
||
[handleUnlend, hasAssetInDeposits, openLend, props.data],
|
||
)
|
||
|
||
if (!address) return null
|
||
|
||
return (
|
||
<div className='z-10 flex justify-end'>
|
||
<DropDownButton items={ITEMS} text='Manage' color='tertiary' />
|
||
</div>
|
||
)
|
||
}
|