130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react'
|
|
import styled from 'styled-components'
|
|
import { formatDivNumber } from 'utils/formatBalance'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks'
|
|
import { Flex, Button, Modal, Image, Text } from '@pancakeswap/uikit'
|
|
import { getContract } from 'services/referral'
|
|
import BuyActions from './BuyActions'
|
|
import TextFlex from './TextFlex'
|
|
import FlexCom from './FlexCom'
|
|
|
|
const ModalDiv = styled(Modal)`
|
|
width: 50%;
|
|
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
}
|
|
`
|
|
|
|
const InfoDiv = styled.div`
|
|
box-sizing: border-box;
|
|
padding: 30px 26px;
|
|
margin-left: 60px;
|
|
box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
padding: 20px 10px;
|
|
margin-left: 0;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
padding: 30px 26px;
|
|
margin-left: 60px;
|
|
}
|
|
`
|
|
|
|
const ImageDiv = styled(Image)`
|
|
width: 300px;
|
|
height: 300px;
|
|
margin-bottom: 20px;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
`
|
|
const TextDiv = styled(Text)`
|
|
text-align: center;
|
|
height: 45px;
|
|
opacity: 0.5;
|
|
border-radius: 23px;
|
|
font-size: 26px;
|
|
color: #280d5f;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`
|
|
|
|
interface BuyNftModalProps {
|
|
onDismiss?: () => void
|
|
}
|
|
const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
|
|
const { t } = useTranslation()
|
|
const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
|
|
const referralRewardInfo = useReferralNormalConfigInfo()
|
|
const [price, setPrice] = useState('')
|
|
const [link, setLink] = useState('')
|
|
|
|
const getLinkAddress = async () => {
|
|
const data = await getContract()
|
|
setLink(data)
|
|
}
|
|
useEffect(() => {
|
|
getLinkAddress()
|
|
}, [])
|
|
useMemo(() => {
|
|
const priceList = []
|
|
referralCommanderConfigInfo?.properties?.price &&
|
|
Object.keys(referralCommanderConfigInfo?.properties?.price).forEach((item) => {
|
|
priceList.push(`${item}:${referralCommanderConfigInfo?.properties?.price[item]}`)
|
|
})
|
|
setPrice(priceList.join(' - '))
|
|
}, [referralCommanderConfigInfo])
|
|
|
|
return (
|
|
<ModalDiv title={`${t('purchase')}${referralRewardInfo.properties?.name as string}`} onDismiss={onDismiss}>
|
|
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
|
|
<Flex flexDirection="column" justifyContent="center">
|
|
<ImageDiv
|
|
src={referralCommanderConfigInfo.properties?.cover as string}
|
|
width={250}
|
|
height={250}
|
|
marginBottom="20px"
|
|
/>
|
|
<TextDiv textAlign="center">{price}</TextDiv>
|
|
</Flex>
|
|
{/* <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" /> */}
|
|
<InfoDiv>
|
|
<TextFlex
|
|
text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
|
|
color="#FEFDF1"
|
|
/>
|
|
<TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
|
|
<TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
|
|
<FlexCom
|
|
name={t('First stage sharing ratio')}
|
|
value={`${referralCommanderConfigInfo.dividendFirst as number}%`}
|
|
/>
|
|
<FlexCom
|
|
name={t('Secondary split ratio')}
|
|
value={`${referralCommanderConfigInfo.dividendSecond as number}%`}
|
|
/>
|
|
<FlexCom
|
|
name={t('Contract address')}
|
|
typeLink={`https://bscscan.com/token/${link}`}
|
|
value={`${link && link.substring(0, 6)}...${link && link.substring(link.length - 4, link.length)}`}
|
|
/>
|
|
<FlexCom name={t('Assets agreement')} value="ERC721" />
|
|
<FlexCom name={t('Assets and chain')} value="BSC" />
|
|
</InfoDiv>
|
|
</Flex>
|
|
<BuyActions />
|
|
{/* <Flex>
|
|
<UpBtn>{t('Buy It Now')}</UpBtn>
|
|
</Flex> */}
|
|
</ModalDiv>
|
|
)
|
|
}
|
|
export default BuyNftModal
|