7439bea0d8
* ✨Add basic modal for HLS staking * ✨UI components for Manage * ✨All Manage actions (except change lev) * 🐛hls intro icons + checkbox, hide repay when no debt, clickable dropdown * fix build
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import React, { useCallback, useMemo } from 'react'
|
|
|
|
import DropDownButton from 'components/Button/DropDownButton'
|
|
import { ArrowDownLine, Cross, HandCoins, Plus, Scale } from 'components/Icons'
|
|
import useCloseHlsStakingPosition from 'hooks/HLS/useClosePositionActions'
|
|
import useStore from 'store'
|
|
|
|
export const MANAGE_META = { id: 'manage' }
|
|
|
|
interface Props {
|
|
account: HLSAccountWithStrategy
|
|
}
|
|
|
|
export default function Manage(props: Props) {
|
|
const openModal = useCallback(
|
|
(action: HlsStakingManageAction) =>
|
|
useStore.setState({
|
|
hlsManageModal: {
|
|
accountId: props.account.id,
|
|
staking: { strategy: props.account.strategy, action },
|
|
},
|
|
}),
|
|
[props.account.id, props.account.strategy],
|
|
)
|
|
|
|
const actions = useCloseHlsStakingPosition({ account: props.account })
|
|
|
|
const closeHlsStakingPosition = useStore((s) => s.closeHlsStakingPosition)
|
|
|
|
const hasNoDebt = useMemo(() => props.account.debts.length === 0, [props.account.debts.length])
|
|
|
|
const ITEMS: DropDownItem[] = useMemo(
|
|
() => [
|
|
{
|
|
icon: <Scale width={16} />,
|
|
text: 'Change leverage',
|
|
onClick: () => openModal('leverage'),
|
|
},
|
|
{
|
|
icon: <Plus width={16} />,
|
|
text: 'Deposit more',
|
|
onClick: () => openModal('deposit'),
|
|
},
|
|
...(hasNoDebt
|
|
? []
|
|
: [
|
|
{
|
|
icon: <HandCoins width={16} />,
|
|
text: 'Repay',
|
|
onClick: () => openModal('repay'),
|
|
},
|
|
]),
|
|
{
|
|
icon: <ArrowDownLine width={16} />,
|
|
text: 'Withdraw',
|
|
onClick: () => openModal('withdraw'),
|
|
},
|
|
{
|
|
icon: <Cross width={14} />,
|
|
text: 'Close Position',
|
|
onClick: () => closeHlsStakingPosition({ accountId: props.account.id, actions }),
|
|
},
|
|
],
|
|
[actions, closeHlsStakingPosition, openModal, props.account.id],
|
|
)
|
|
|
|
return <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
|
|
}
|