112 lines
4.2 KiB
TypeScript
112 lines
4.2 KiB
TypeScript
import React, { useState, useCallback, useMemo, useEffect } from 'react'
|
|
import BigNumber from 'bignumber.js'
|
|
import styled from 'styled-components'
|
|
import { provider as ProviderType } from 'web3-core'
|
|
import { getAddress } from 'utils/addressHelpers'
|
|
import { Button, Flex, Text } from '@pancakeswap/uikit'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Boards } from 'state/types'
|
|
import { useBoardUser, usePriceCakeBusd, usePriceHccUsdt } from 'state/hooks'
|
|
import { TOKEN_SYMBOL } from 'config/index'
|
|
|
|
import { useWeb3React } from '@web3-react/core'
|
|
import { useAccount } from 'state/userInfo/hooks'
|
|
import { BIG_ZERO } from 'utils/bigNumber'
|
|
|
|
import { getBalanceNumber, getBalanceAmount } from 'utils/formatBalance'
|
|
import { useERC20 } from 'hooks/useContract'
|
|
import UnlockButton from 'components/UnlockButton'
|
|
import useApproveBoard from '../../hooks/useApproveBoard'
|
|
import StakeAction from './StakeAction'
|
|
import HarvestAction from './HarvestAction'
|
|
|
|
import useHarvestBoard from '../../hooks/useHarvestBoard'
|
|
import FlexText from './FlexText'
|
|
|
|
const Action = styled.div`
|
|
padding-top: 4px;
|
|
`
|
|
const PriceCoin = styled.div`
|
|
text-align: right;
|
|
`
|
|
|
|
interface NodeCardActionsProps {
|
|
board: Boards
|
|
provider?: ProviderType
|
|
account?: string
|
|
}
|
|
|
|
const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
|
|
const { t } = useTranslation()
|
|
const [requestedApproval, setRequestedApproval] = useState(false)
|
|
const pid = board.pid
|
|
const { allowance, tokenBalance, stakedBalance, estimatedProfit } = useBoardUser(pid)
|
|
const isApproved = account && allowance && allowance.isGreaterThan(0)
|
|
const tokenContract = useERC20(getAddress(board.tokenAddresses))
|
|
|
|
const { onApprove } = useApproveBoard(tokenContract, pid)
|
|
|
|
const rawEarningsBalance = account ? getBalanceAmount(new BigNumber(estimatedProfit)).toNumber() : BIG_ZERO
|
|
const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN)
|
|
const hccPriceUsdt = usePriceHccUsdt()
|
|
|
|
const handleApprove = useCallback(async () => {
|
|
try {
|
|
setRequestedApproval(true)
|
|
await onApprove()
|
|
setRequestedApproval(false)
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}, [onApprove])
|
|
// const [totalPrice, setTotalPrice] = useState(0)
|
|
const totalPrice = useMemo(() => {
|
|
return getBalanceAmount(new BigNumber(board?.userData?.receiveReward)).toNumber() + Number(displayBalance)
|
|
}, [board])
|
|
const renderApprovalOrStakeButton = () => {
|
|
return isApproved ? (
|
|
<>
|
|
<FlexText name={t('The total amount of dividends')} value={totalPrice.toFixed(3)} />
|
|
<Flex justifyContent="space-between" alignItems="center">
|
|
<Text fontSize="12px" color="#1FC7D4">
|
|
{t('Unclaimed income')}
|
|
</Text>
|
|
<PriceCoin>
|
|
<Text fontSize="16px" color="#1FC7D4">
|
|
{displayBalance}
|
|
</Text>
|
|
<Text fontSize="12px" color="#9BE5EB">
|
|
{hccPriceUsdt ? (hccPriceUsdt * Number(displayBalance)).toFixed(3) : 0} USDT
|
|
</Text>
|
|
</PriceCoin>
|
|
</Flex>
|
|
{/* <FlexText name={t('Unclaimed income')} value={displayBalance} /> */}
|
|
{/* <Flex>
|
|
<Text bold textTransform="uppercase" color="secondary" fontSize="12px" pr="3px">
|
|
{board.tokenSymbol}
|
|
</Text>
|
|
<Text bold textTransform="uppercase" color="textSubtle" fontSize="12px">
|
|
{t('Staked')}
|
|
</Text>
|
|
</Flex> */}
|
|
<HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} board={board} />
|
|
<StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} board={board} />
|
|
{/* <Flex flexDirection="column" alignItems="flex-start" mt="10"> */}
|
|
{/* <Text color="textSubtle" fontSize="12px">
|
|
{t('Unclaimed income')}
|
|
</Text> */}
|
|
{/* <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} /> */}
|
|
{/* </Flex> */}
|
|
</>
|
|
) : (
|
|
<Button mt="8px" width="100%" disabled={requestedApproval} onClick={handleApprove}>
|
|
{t('license agreement')}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return <Action>{!account ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}</Action>
|
|
}
|
|
|
|
export default CardActions
|