feat: 修改页面
This commit is contained in:
gary
parent
88dbbd0284
commit
42b382398e
|
|
@ -19,10 +19,10 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
label: t('Liquidity'),
|
||||
href: '/pool',
|
||||
},
|
||||
{
|
||||
label: t('LP Migration'),
|
||||
href: 'https://v1exchange.pancakeswap.finance/#/migrate',
|
||||
},
|
||||
// {
|
||||
// label: t('LP Migration'),
|
||||
// href: 'https://v1exchange.pancakeswap.finance/#/migrate',
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -35,88 +35,88 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
icon: 'PoolIcon',
|
||||
href: '/pools',
|
||||
},
|
||||
{
|
||||
label: t('Prediction (BETA)'),
|
||||
icon: 'PredictionsIcon',
|
||||
href: '/prediction',
|
||||
},
|
||||
{
|
||||
label: t('Lottery'),
|
||||
icon: 'TicketIcon',
|
||||
href: '/lottery',
|
||||
status: {
|
||||
text: t('Win').toLocaleUpperCase(),
|
||||
color: 'success',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('Collectibles'),
|
||||
icon: 'NftIcon',
|
||||
href: '/collectibles',
|
||||
},
|
||||
{
|
||||
label: t('Team Battle'),
|
||||
icon: 'TeamBattleIcon',
|
||||
href: '/competition',
|
||||
},
|
||||
{
|
||||
label: t('Teams & Profile'),
|
||||
icon: 'GroupsIcon',
|
||||
items: [
|
||||
{
|
||||
label: t('Leaderboard'),
|
||||
href: '/teams',
|
||||
},
|
||||
{
|
||||
label: t('Task Center'),
|
||||
href: '/profile/tasks',
|
||||
},
|
||||
{
|
||||
label: t('Your Profile'),
|
||||
href: '/profile',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: t('Info'),
|
||||
icon: 'InfoIcon',
|
||||
href: 'https://pancakeswap.info',
|
||||
},
|
||||
{
|
||||
label: t('IFO'),
|
||||
icon: 'IfoIcon',
|
||||
href: '/ifo',
|
||||
},
|
||||
{
|
||||
label: t('More'),
|
||||
icon: 'MoreIcon',
|
||||
items: [
|
||||
{
|
||||
label: t('Contact'),
|
||||
href: 'https://docs.pancakeswap.finance/contact-us',
|
||||
},
|
||||
{
|
||||
label: t('Voting'),
|
||||
href: '/voting',
|
||||
},
|
||||
{
|
||||
label: t('Github'),
|
||||
href: 'https://github.com/pancakeswap',
|
||||
},
|
||||
{
|
||||
label: t('Docs'),
|
||||
href: 'https://docs.pancakeswap.finance',
|
||||
},
|
||||
{
|
||||
label: t('Blog'),
|
||||
href: 'https://pancakeswap.medium.com',
|
||||
},
|
||||
{
|
||||
label: t('Merch'),
|
||||
href: 'https://pancakeswap.creator-spring.com/',
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// label: t('Prediction (BETA)'),
|
||||
// icon: 'PredictionsIcon',
|
||||
// href: '/prediction',
|
||||
// },
|
||||
// {
|
||||
// label: t('Lottery'),
|
||||
// icon: 'TicketIcon',
|
||||
// href: '/lottery',
|
||||
// status: {
|
||||
// text: t('Win').toLocaleUpperCase(),
|
||||
// color: 'success',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// label: t('Collectibles'),
|
||||
// icon: 'NftIcon',
|
||||
// href: '/collectibles',
|
||||
// },
|
||||
// {
|
||||
// label: t('Team Battle'),
|
||||
// icon: 'TeamBattleIcon',
|
||||
// href: '/competition',
|
||||
// },
|
||||
// {
|
||||
// label: t('Teams & Profile'),
|
||||
// icon: 'GroupsIcon',
|
||||
// items: [
|
||||
// {
|
||||
// label: t('Leaderboard'),
|
||||
// href: '/teams',
|
||||
// },
|
||||
// {
|
||||
// label: t('Task Center'),
|
||||
// href: '/profile/tasks',
|
||||
// },
|
||||
// {
|
||||
// label: t('Your Profile'),
|
||||
// href: '/profile',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: t('Info'),
|
||||
// icon: 'InfoIcon',
|
||||
// href: 'https://pancakeswap.info',
|
||||
// },
|
||||
// {
|
||||
// label: t('IFO'),
|
||||
// icon: 'IfoIcon',
|
||||
// href: '/ifo',
|
||||
// },
|
||||
// {
|
||||
// label: t('More'),
|
||||
// icon: 'MoreIcon',
|
||||
// items: [
|
||||
// {
|
||||
// label: t('Contact'),
|
||||
// href: 'https://docs.pancakeswap.finance/contact-us',
|
||||
// },
|
||||
// {
|
||||
// label: t('Voting'),
|
||||
// href: '/voting',
|
||||
// },
|
||||
// {
|
||||
// label: t('Github'),
|
||||
// href: 'https://github.com/pancakeswap',
|
||||
// },
|
||||
// {
|
||||
// label: t('Docs'),
|
||||
// href: 'https://docs.pancakeswap.finance',
|
||||
// },
|
||||
// {
|
||||
// label: t('Blog'),
|
||||
// href: 'https://pancakeswap.medium.com',
|
||||
// },
|
||||
// {
|
||||
// label: t('Merch'),
|
||||
// href: 'https://pancakeswap.creator-spring.com/',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
]
|
||||
|
||||
export default config
|
||||
|
|
|
|||
|
|
@ -93,11 +93,6 @@ const ViewControls = styled.div`
|
|||
}
|
||||
`
|
||||
|
||||
const StyledImage = styled(Image)`
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 58px;
|
||||
`
|
||||
const NUMBER_OF_FARMS_VISIBLE = 12
|
||||
|
||||
const getDisplayApr = (cakeRewardsApr?: number, lpRewardsApr?: number) => {
|
||||
|
|
@ -382,14 +377,6 @@ const Farms: React.FC = () => {
|
|||
<Heading scale="lg" color="text">
|
||||
{t('Stake LP tokens to earn.')}
|
||||
</Heading>
|
||||
<NavLink exact activeClassName="active" to="/farms/auction" id="lottery-pot-banner">
|
||||
<Button p="0" variant="text">
|
||||
<Text color="primary" bold fontSize="16px" mr="4px">
|
||||
{t('Community Auctions')}
|
||||
</Text>
|
||||
<ArrowForwardIcon color="primary" />
|
||||
</Button>
|
||||
</NavLink>
|
||||
</PageHeader>
|
||||
<Page>
|
||||
<ControlContainer>
|
||||
|
|
@ -438,7 +425,6 @@ const Farms: React.FC = () => {
|
|||
</ControlContainer>
|
||||
{renderContent()}
|
||||
<div ref={loadMoreRef} />
|
||||
<StyledImage src="/images/decorations/3dpan.png" alt="Pancake illustration" width={120} height={103} />
|
||||
</Page>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import EarnAPRCard from 'views/Home/components/EarnAPRCard'
|
|||
import EarnAssetCard from 'views/Home/components/EarnAssetCard'
|
||||
import PredictionPromotionCard from 'views/Home/components/PredictionPromotionCard'
|
||||
import LotteryPromotionCard from 'views/Home/components/LotteryPromotionCard'
|
||||
import LotteryBanner from 'views/Home/components/LotteryBanner'
|
||||
import useFetchLotteryForPromos from 'views/Home/hooks/useFetchLotteryForPromos'
|
||||
|
||||
const Hero = styled.div`
|
||||
|
|
@ -92,7 +91,6 @@ const Home: React.FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<LotteryBanner currentLotteryPrize={currentLotteryPrize} />
|
||||
<Page>
|
||||
<Hero>
|
||||
<Heading as="h1" scale="xl" mb="24px" color="secondary">
|
||||
|
|
@ -101,10 +99,10 @@ const Home: React.FC = () => {
|
|||
<Text>{t('The #1 AMM and yield farm on Binance Smart Chain.')}</Text>
|
||||
</Hero>
|
||||
<div>
|
||||
<Cards>
|
||||
<FarmStakingCard />
|
||||
<PredictionPromotionCard />
|
||||
</Cards>
|
||||
{/* <Cards> */}
|
||||
<FarmStakingCard />
|
||||
{/* <PredictionPromotionCard /> */}
|
||||
{/* </Cards> */}
|
||||
<CTACards>
|
||||
<EarnAPRCard />
|
||||
<EarnAssetCard />
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const StyledFarmStakingCard = styled(Card)`
|
|||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
min-height: 376px;
|
||||
margin-bottom: 24px;
|
||||
`
|
||||
|
||||
const Block = styled.div`
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Text, Flex, Button, ArrowForwardIcon, Skeleton } from '@pancakeswap/uikit'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import Container from 'components/Layout/Container'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import Balance from 'components/Balance'
|
||||
import { usePriceCakeBusd } from 'state/hooks'
|
||||
import { getBalanceNumber } from 'utils/formatBalance'
|
||||
|
||||
const NowLive = styled(Text)`
|
||||
background: -webkit-linear-gradient(#ffd800, #eb8c00);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
`
|
||||
|
||||
const Wrapper = styled.div`
|
||||
background-image: linear-gradient(#7645d9, #452a7a);
|
||||
max-height: max-content;
|
||||
overflow: hidden;
|
||||
${({ theme }) => theme.mediaQueries.md} {
|
||||
max-height: 256px;
|
||||
}
|
||||
`
|
||||
|
||||
const Inner = styled(Container)`
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
flex-direction: row;
|
||||
}
|
||||
`
|
||||
|
||||
const LeftWrapper = styled(Flex)`
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 24px;
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 40px;
|
||||
}
|
||||
`
|
||||
|
||||
const RightWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0.5;
|
||||
|
||||
& img {
|
||||
width: 80%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
& img {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.md} {
|
||||
flex: 0.8;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
& img {
|
||||
margin-top: -25px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const PrizeFlex = styled(Flex)`
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
max-width: 640px;
|
||||
}
|
||||
`
|
||||
|
||||
const Over = styled(Text)`
|
||||
:empty {
|
||||
margin-right: 0;
|
||||
}
|
||||
`
|
||||
|
||||
const LotteryBanner: React.FC<{ currentLotteryPrize: string }> = ({ currentLotteryPrize }) => {
|
||||
const { t } = useTranslation()
|
||||
const cakePriceBusd = usePriceCakeBusd()
|
||||
const prizeInBusd = cakePriceBusd.times(currentLotteryPrize)
|
||||
const prizeTotal = getBalanceNumber(prizeInBusd)
|
||||
|
||||
const prizeTotalText = prizeInBusd.isNaN() ? prizeTotal.toString() : '-'
|
||||
const prizeText = t('Over %amount% in Prizes!', { amount: prizeTotalText })
|
||||
const [over, inPrizes] = prizeText.split(prizeTotalText)
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Inner>
|
||||
<LeftWrapper>
|
||||
<NowLive>{t('Lottery Now Live')}</NowLive>
|
||||
<PrizeFlex>
|
||||
<Over fontSize="40px" color="#ffffff" bold mr="8px">
|
||||
{over}
|
||||
</Over>
|
||||
<>
|
||||
{prizeInBusd.isNaN() ? (
|
||||
<>
|
||||
<Skeleton height={40} width={120} mb="10px" mt="10px" mr="8px" />
|
||||
</>
|
||||
) : (
|
||||
<Balance fontSize="40px" color="#ffffff" bold prefix="$" mr="8px" decimals={0} value={prizeTotal} />
|
||||
)}
|
||||
</>
|
||||
<Text fontSize="40px" color="#ffffff" bold>
|
||||
{inPrizes}
|
||||
</Text>
|
||||
</PrizeFlex>
|
||||
<NavLink exact activeClassName="active" to="/lottery" id="lottery-pot-banner">
|
||||
<Button>
|
||||
<Text color="white" bold fontSize="16px" mr="4px">
|
||||
{t('Play Now')}
|
||||
</Text>
|
||||
<ArrowForwardIcon color="white" />
|
||||
</Button>
|
||||
</NavLink>
|
||||
</LeftWrapper>
|
||||
<RightWrapper>
|
||||
<img src="/images/lottery/tombola.png" alt="lottery bunny" />
|
||||
</RightWrapper>
|
||||
</Inner>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default LotteryBanner
|
||||
|
|
@ -280,14 +280,6 @@ const Pools: React.FC = () => {
|
|||
)}
|
||||
{viewMode === ViewMode.CARD ? cardLayout : tableLayout}
|
||||
<div ref={loadMoreRef} />
|
||||
<Image
|
||||
mx="auto"
|
||||
mt="12px"
|
||||
src="/images/decorations/3d-syrup-bunnies.png"
|
||||
alt="Pancake illustration"
|
||||
width={192}
|
||||
height={184.5}
|
||||
/>
|
||||
</Page>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue