87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import dayjs from 'dayjs'
|
|
import styled from 'styled-components'
|
|
import BigNumber from 'bignumber.js'
|
|
import { Button, Flex, Heading, IconButton, AddIcon, MinusIcon, useModal } from '@pancakeswap/uikit'
|
|
import { getBalanceNumber } from 'utils/formatBalance'
|
|
import { useBoardsFromPid } from 'state/hooks'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import useToast from 'hooks/useToast'
|
|
import DepositModal from '../DepositModal'
|
|
import useStakeBoard from '../../hooks/useStakeBoard'
|
|
import useUnstakeBoard from '../../hooks/useUnstakeBoard'
|
|
import WithdrawModal from '../WithdrawModal'
|
|
|
|
interface NodeCardActionsProps {
|
|
stakedBalance?: BigNumber
|
|
tokenBalance?: BigNumber
|
|
tokenName?: string
|
|
pid?: number
|
|
}
|
|
|
|
const IconButtonWrapper = styled.div`
|
|
display: flex;
|
|
svg {
|
|
width: 20px;
|
|
}
|
|
`
|
|
|
|
const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalance, tokenName, pid }) => {
|
|
const { t } = useTranslation()
|
|
const { toastWarning } = useToast()
|
|
const { onStake } = useStakeBoard(pid)
|
|
const { onUnstake } = useUnstakeBoard(pid)
|
|
const { tokenDecimals = 18, minStakeAmount, userData } = useBoardsFromPid(pid)
|
|
const rawStakedBalance = getBalanceNumber(stakedBalance, tokenDecimals, 8)
|
|
const minStakedAmount = useMemo(() => {
|
|
const minAmount = minStakeAmount - getBalanceNumber(userData.stakedBalance, tokenDecimals)
|
|
return minAmount < 0 ? new BigNumber(0) : new BigNumber(minAmount)
|
|
}, [userData, minStakeAmount, tokenDecimals])
|
|
const [onPresentDeposit] = useModal(
|
|
<DepositModal
|
|
max={tokenBalance}
|
|
tokenDecimals={tokenDecimals}
|
|
min={minStakedAmount}
|
|
onConfirm={onStake}
|
|
tokenName={tokenName}
|
|
/>,
|
|
)
|
|
const [onPresentWithdraw] = useModal(
|
|
<WithdrawModal max={stakedBalance} tokenDecimals={tokenDecimals} onConfirm={onUnstake} tokenName={tokenName} />,
|
|
)
|
|
const handleUnstake = () => {
|
|
const unlockTime = userData.unlockTime * 1000
|
|
if (unlockTime > new Date().getTime()) {
|
|
toastWarning(t('Unlock time %unlockTime%', { unlockTime: dayjs(unlockTime).format('YYYY-MM-DD HH:mm') }))
|
|
return
|
|
}
|
|
onUnstake()
|
|
}
|
|
const renderStakingButtons = () => {
|
|
return rawStakedBalance === 0 ? (
|
|
<Button onClick={onPresentDeposit}>{t(`pledge`)}</Button>
|
|
) : (
|
|
<IconButtonWrapper>
|
|
{userData.stakedBalance > 0 ? (
|
|
<IconButton variant="tertiary" onClick={handleUnstake}>
|
|
<MinusIcon color="primary" />
|
|
</IconButton>
|
|
) : (
|
|
<IconButton variant="tertiary" onClick={onPresentDeposit} ml="6px">
|
|
<AddIcon color="primary" />
|
|
</IconButton>
|
|
)}
|
|
</IconButtonWrapper>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Flex justifyContent="space-between" alignItems="center">
|
|
<Heading color={rawStakedBalance === 0 ? 'textDisabled' : 'text'}>{rawStakedBalance}</Heading>
|
|
{renderStakingButtons()}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default StakeAction
|