121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import styled from 'styled-components'
|
|
import { useDispatch } from 'react-redux'
|
|
import { fetchReferralInfoAsync } from 'state/actions'
|
|
import { useAccount } from 'state/userInfo/hooks'
|
|
import { formatDivNumber } from 'utils/formatBalance'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import useToast from 'hooks/useToast'
|
|
import { Button, useModal, Text } from '@pancakeswap/uikit'
|
|
import {
|
|
useReferralNormalConfigInfo,
|
|
useReferralCommanderConfigInfo,
|
|
useReferralRewardInfo,
|
|
} from 'state/referral/hooks'
|
|
import FlexCom from './FlexCom'
|
|
import BuyNftModal from './BuyNftModal'
|
|
import HeaderMain from './HeaderMain'
|
|
import { useWithdraw } from '../hooks'
|
|
|
|
const ButtonDiv = styled(Button)`
|
|
width: 100%;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
font-size: 16px;
|
|
border: 1px solid #dcdcdc;
|
|
color: #dcdcdc;
|
|
`
|
|
const ButtonGet = styled(Button)`
|
|
width: 100%;
|
|
font-size: 16px;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
border: 1px solid #1fc7d4;
|
|
color: #1fc7d4;
|
|
`
|
|
|
|
const UpBtn = styled(Button)`
|
|
width: 100%;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
|
border: none;
|
|
`
|
|
|
|
const FooterBtn = styled.div`
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20px;
|
|
`
|
|
const MainDiv = styled.div`
|
|
padding: 0 50px;
|
|
`
|
|
const FooterDiv = styled.div`
|
|
margin: 0 auto 30px auto;
|
|
`
|
|
const TextDiv = styled(Text)`
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
`
|
|
|
|
const ConnectedCom: React.FC = () => {
|
|
const dispatch = useDispatch()
|
|
const account = useAccount()
|
|
const { t } = useTranslation()
|
|
const [onBuyModal] = useModal(<BuyNftModal />)
|
|
const [gain, getGain] = useState(true)
|
|
const referralNormalConfigInfo = useReferralNormalConfigInfo()
|
|
const referralRewardInfo = useReferralRewardInfo()
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
const withdraw = useWithdraw()
|
|
const { toastSuccess } = useToast()
|
|
const handleWithdraw = async () => {
|
|
setLoading(true)
|
|
try {
|
|
dispatch(fetchReferralInfoAsync(account))
|
|
await withdraw()
|
|
setLoading(false)
|
|
toastSuccess(t('Successfully claimed!'))
|
|
getGain(false)
|
|
} catch (error) {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
return (
|
|
<MainDiv>
|
|
<HeaderMain title={t('recommend')} />
|
|
<>
|
|
<FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum || 0}(${t('person')})`} />
|
|
<FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward || 0}(HCC)`} />
|
|
<FlexCom
|
|
name={t('To get profit')}
|
|
value={`${gain ? referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive || 0 : 0}(HCC)`}
|
|
/>
|
|
</>
|
|
<FooterBtn>
|
|
{referralNormalConfigInfo?.receiveLimit <=
|
|
referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? (
|
|
<ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
|
|
{t('Claim now')}
|
|
</ButtonGet>
|
|
) : (
|
|
<ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
|
|
)}
|
|
|
|
<UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
|
|
</FooterBtn>
|
|
<FooterDiv>
|
|
<TextDiv>{t('footer %number% text', { number: `${referralNormalConfigInfo?.dividendFirst || 0}%` })}</TextDiv>
|
|
{/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
|
|
<TextDiv color="textSubtle">{t('last bid')}</TextDiv>
|
|
<TextDiv color="textSubtle">{t('commission fee')}</TextDiv> */}
|
|
</FooterDiv>
|
|
</MainDiv>
|
|
)
|
|
}
|
|
export default ConnectedCom
|