feat: 军团长改为推荐
This commit is contained in:
gary
parent
f7ee36af2f
commit
36fb790a29
|
|
@ -49,7 +49,6 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
|
|||
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
|
||||
const Referral = lazy(() => import('./views/Referral'))
|
||||
const Nft = lazy(() => import('./views/Nft'))
|
||||
const Recommend = lazy(() => import('./views/Recommend'))
|
||||
|
||||
// This config is required for number formatting
|
||||
BigNumber.config({
|
||||
|
|
@ -94,9 +93,6 @@ const App: React.FC = () => {
|
|||
<Route path="/nft">
|
||||
<Nft />
|
||||
</Route>
|
||||
<Route path="/recommend">
|
||||
<Recommend />
|
||||
</Route>
|
||||
{/* <Route path="/lottery">
|
||||
<Lottery />
|
||||
</Route>
|
||||
|
|
@ -147,7 +143,6 @@ const App: React.FC = () => {
|
|||
<Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
|
||||
<Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
|
||||
<Route exact strict path="/nft" component={Nft} />
|
||||
<Route exact strict path="/recommend" component={Recommend} />
|
||||
|
||||
{/* Redirect */}
|
||||
{/* <Route path="/staking">
|
||||
|
|
|
|||
|
|
@ -43,12 +43,7 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
{
|
||||
label: 'NFT',
|
||||
icon: 'TicketIcon',
|
||||
href: '/nft'
|
||||
},
|
||||
{
|
||||
label: t('recommend'),
|
||||
icon: 'TicketIcon',
|
||||
href: '/recommend'
|
||||
href: '/nft',
|
||||
},
|
||||
// {
|
||||
// label: t('Prediction (BETA)'),
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export const getBalanceAmount = (amount: BigNumber, decimals = 18) => {
|
|||
*/
|
||||
export const getBalanceNumber = (balance: BigNumber, decimals = 18, decimalPlaces?: number) => {
|
||||
const displayBalance = getBalanceAmount(balance, decimals)
|
||||
return decimalPlaces ?displayBalance.decimalPlaces(decimalPlaces).toNumber():displayBalance.toNumber()
|
||||
return decimalPlaces ? displayBalance.decimalPlaces(decimalPlaces).toNumber() : displayBalance.toNumber()
|
||||
}
|
||||
|
||||
export const getFullDisplayBalance = (balance: BigNumber, decimals = 18, displayDecimals?: number) => {
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import UnunitedCom from './components/UnunitedCom'
|
||||
import ConnectedCom from './components/Connected'
|
||||
import RegimentalCom from './components/Regimental'
|
||||
|
||||
const MainDiv = styled.div`
|
||||
min-height: calc(100vh - 64px);
|
||||
background-image: url('/images/recommend/bg.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const ContentDiv = styled.div`
|
||||
width: 60%;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 60%;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 90%;
|
||||
}
|
||||
`
|
||||
|
||||
const Nft: React.FC = () => {
|
||||
// 邀请false普通邀请 true军团长邀请
|
||||
const [type, setType] = useState(false)
|
||||
// 是否连接钱包
|
||||
const [status, setStatus] = useState(true)
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
{type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
export default Nft
|
||||
|
|
@ -1,180 +1,47 @@
|
|||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable no-unneeded-ternary */
|
||||
import React, { useEffect, useCallback, useState, useRef, useMemo } from 'react'
|
||||
import { Button, Heading, CopyToClipboard, Text, Flex } from '@pancakeswap/uikit'
|
||||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { State } from 'state/types'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useWeb3React } from '@web3-react/core'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import PageHeader from 'components/PageHeader'
|
||||
import Page from 'components/Layout/Page'
|
||||
import { getAddressInviteList } from 'services/referral'
|
||||
// import { useInviteHarvest } from 'hooks/useHarvest'
|
||||
import { fetchReferralInfoAsync } from 'state/actions'
|
||||
import UnunitedCom from './components/UnunitedCom'
|
||||
import ConnectedCom from './components/Connected'
|
||||
import RegimentalCom from './components/Regimental'
|
||||
|
||||
const Header = styled.div`
|
||||
padding: 32px 0px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
text-align: center;
|
||||
const MainDiv = styled.div`
|
||||
min-height: calc(100vh - 64px);
|
||||
background-image: url('/images/recommend/bg.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const ContentDiv = styled.div`
|
||||
width: 60%;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: 60%;
|
||||
}
|
||||
`
|
||||
const PageContainer = styled(Page)`
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
`
|
||||
const LinkContainer = styled.div`
|
||||
border: 1px solid rgb(216, 222, 227);
|
||||
padding: 10px 0px;
|
||||
line-height: 46px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
`
|
||||
const AddressContainer = styled.div`
|
||||
border: 1px solid rgb(216, 222, 227);
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
`
|
||||
const AddressTitle = styled.div`
|
||||
border-bottom: 1px solid rgb(216, 222, 227);
|
||||
color: ${({ theme }) => theme.colors.primary};
|
||||
font-size: 18px;
|
||||
padding: 10px 20px;s
|
||||
line-height: 28px;
|
||||
background: rgb(244, 247, 250);
|
||||
font-weight: 600;
|
||||
`
|
||||
const AddressList = styled.div`
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
line-height: 24px;
|
||||
`
|
||||
const NoData = styled.div`
|
||||
color: rgb(153, 153, 153);
|
||||
`
|
||||
const RewardContainer = styled.div`
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
const SecondText = styled(Text)`
|
||||
white-space: break-spaces;
|
||||
`
|
||||
const Farms: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const { account } = useWeb3React()
|
||||
const [inviteList, setInviteList] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const inviteInfo = useSelector((state: State) => state.referral.data)
|
||||
const inviteAddress = useMemo(() => {
|
||||
return inviteInfo.InviteCode
|
||||
? `${window.location.origin}/#/farms?code=${inviteInfo.InviteCode}`
|
||||
: window.location.origin
|
||||
}, [inviteInfo])
|
||||
useEffect(() => {
|
||||
if (account) {
|
||||
getInviteList()
|
||||
} else {
|
||||
setInviteList([])
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 60%;
|
||||
}
|
||||
}, [account])
|
||||
// const { onReward } = useInviteHarvest()
|
||||
const handleWithdraw = async () => {
|
||||
// setLoading(true)
|
||||
// try {
|
||||
// await onReward()
|
||||
// dispatch(fetchReferralInfoAsync(account))
|
||||
// setLoading(false)
|
||||
// } catch (e) {
|
||||
// setLoading(false)
|
||||
// }
|
||||
}
|
||||
const getInviteList = async () => {
|
||||
const data: any = await getAddressInviteList({ address: account })
|
||||
setInviteList(data)
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 90%;
|
||||
}
|
||||
`
|
||||
|
||||
const Nft: React.FC = () => {
|
||||
// 邀请false普通邀请 true军团长邀请
|
||||
const [type, setType] = useState(false)
|
||||
// 是否连接钱包
|
||||
const [status, setStatus] = useState(true)
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
<Flex justifyContent="space-between" flexDirection={['column', null, null, 'row']}>
|
||||
<Flex flex="1" flexDirection="column" mr={['8px', 0]}>
|
||||
<Heading as="h1" scale="xxl" color="secondary" mb="24px">
|
||||
{t('Referral')}
|
||||
</Heading>
|
||||
<Heading scale="md" color="text">
|
||||
{t('Share referral link and get rewards daily.')}
|
||||
</Heading>
|
||||
<Heading scale="md" color="text">
|
||||
{t('Invite more friends, earn more rewards.')}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex flex="1" height="fit-content" justifyContent="center" alignItems="center" mt={['24px', null, '0']}>
|
||||
{/* <BountyCard /> */}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</PageHeader>
|
||||
{/* <Header>
|
||||
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
|
||||
{t('Referral')}
|
||||
</Heading>
|
||||
<Text fontSize="28px" color="text">
|
||||
{t('Share referral link and get rewards daily.')}
|
||||
<br />
|
||||
{t('Invite more friends, earn more rewards.')}
|
||||
</Text>
|
||||
</Header> */}
|
||||
<PageContainer>
|
||||
<RewardContainer>
|
||||
<Text> {t('Total Rewards')}</Text>
|
||||
<Text color="primary" bold fontSize="30px">
|
||||
{inviteInfo.totalReward ? Number(inviteInfo.totalReward).toFixed(5) : '0.00000'}
|
||||
</Text>
|
||||
</RewardContainer>
|
||||
<RewardContainer>
|
||||
<Text> {t('Unclaimed Rewards')}</Text>
|
||||
<Text color="primary" bold fontSize="30px">
|
||||
{inviteInfo.canWithdrawReward ? Number(inviteInfo.canWithdrawReward).toFixed(5) : '0.00000'}
|
||||
</Text>
|
||||
<Button
|
||||
scale="md"
|
||||
disabled={loading || !inviteInfo.canWithdrawReward ? true : false}
|
||||
onClick={handleWithdraw}
|
||||
>
|
||||
{t('Harvest')}
|
||||
</Button>
|
||||
</RewardContainer>
|
||||
<LinkContainer>
|
||||
<Text marginBottom={1} fontSize="20px">
|
||||
{inviteAddress}
|
||||
</Text>
|
||||
<CopyToClipboard toCopy={inviteAddress}> {t('Copy Link')}</CopyToClipboard>
|
||||
</LinkContainer>
|
||||
<AddressContainer>
|
||||
<AddressTitle>{t('Address')}</AddressTitle>
|
||||
<AddressList>
|
||||
{inviteList.length === 0 ? (
|
||||
<NoData>{t('No Data')}</NoData>
|
||||
) : (
|
||||
inviteList.map((item, index) => (
|
||||
<Text key={item.ID} color="text">
|
||||
{item.Address}
|
||||
</Text>
|
||||
))
|
||||
)}
|
||||
</AddressList>
|
||||
</AddressContainer>
|
||||
</PageContainer>
|
||||
</>
|
||||
<MainDiv>
|
||||
{type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default Farms
|
||||
export default Nft
|
||||
|
|
|
|||
Loading…
Reference in New Issue