110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { useAccount } from 'state/userInfo/hooks'
|
|
import { fetchReferralUserAllowances } from 'state/referral'
|
|
import { useERC20 } from 'hooks/useContract'
|
|
import { getAddress } from 'utils/addressHelpers'
|
|
import useToast from 'hooks/useToast'
|
|
import { checkBuyResult } from 'services/referral'
|
|
import useRefresh from 'hooks/useRefresh'
|
|
import tokens from 'config/constants/tokens'
|
|
import { useCheckTokenBalance, useApproveReferral, useBuyTransaction } from '../hooks'
|
|
|
|
// interface BuyActionsProps {
|
|
|
|
// }
|
|
|
|
const Btn = styled(Button)`
|
|
width: 50%;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
|
border: none;
|
|
`
|
|
const BuyActions: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
const account = useAccount()
|
|
const [allowanceList, setAllowanceList] = useState({ usdt: 0, hcc: 0 })
|
|
const usdtContract = useERC20(getAddress(tokens.usdt.address))
|
|
const [loading, setLoading] = useState(false)
|
|
const [txId, setTxId] = useState()
|
|
const { toastSuccess } = useToast()
|
|
const { fastRefresh } = useRefresh()
|
|
const hccContract = useERC20(getAddress(tokens.hcc.address))
|
|
const { onApprove: onUsdtApprove } = useApproveReferral(usdtContract)
|
|
const { onApprove: onHccApprove } = useApproveReferral(hccContract)
|
|
const buyTransaction = useBuyTransaction()
|
|
const handleApprove = async (approve) => {
|
|
try {
|
|
setLoading(true)
|
|
await approve()
|
|
setLoading(false)
|
|
getAllowances()
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}
|
|
const getAllowances = async () => {
|
|
const allowances = await fetchReferralUserAllowances(account)
|
|
setAllowanceList({
|
|
usdt: allowances.usdt,
|
|
hcc: allowances.hcc,
|
|
})
|
|
}
|
|
const handleBuy = async () => {
|
|
await buyTransaction()
|
|
}
|
|
const getTransactionResult = async () => {
|
|
const res = await checkBuyResult({ tx: txId })
|
|
if (res?.success) {
|
|
setLoading(false)
|
|
setTxId(undefined)
|
|
toastSuccess('Buy Success')
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
if (txId && loading) {
|
|
getTransactionResult()
|
|
}
|
|
}, [fastRefresh])
|
|
|
|
useEffect(() => {
|
|
if (account) {
|
|
getAllowances()
|
|
} else {
|
|
setAllowanceList({ usdt: 0, hcc: 0 })
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Flex>
|
|
{!allowanceList.usdt && (
|
|
<Btn
|
|
disabled={loading}
|
|
onClick={() => {
|
|
handleApprove(onUsdtApprove)
|
|
}}
|
|
>
|
|
{t('Approve %coin% Contract', { coin: 'usdt' })}
|
|
</Btn>
|
|
)}
|
|
|
|
{!allowanceList.hcc && (
|
|
<Btn
|
|
disabled={loading}
|
|
onClick={() => {
|
|
handleApprove(onHccApprove)
|
|
}}
|
|
>
|
|
{t('Approve %coin% Contract', { coin: 'hcc' })}
|
|
</Btn>
|
|
)}
|
|
{allowanceList?.usdt && allowanceList.hcc ? <Btn onClick={handleBuy}>{t('Buy It Now')}</Btn> : null}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default BuyActions
|