zhangshu
/
hiCity-nft
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 修改页面

This commit is contained in:
gary 2022-04-12 15:58:58 +08:00
parent 88dbbd0284
commit 42b382398e
6 changed files with 91 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/Menu/config.ts
View File

@ -19,10 +19,10 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
label: t('Liquidity'), label: t('Liquidity'),
href: '/pool', href: '/pool',
}, },
{ // {
label: t('LP Migration'), // label: t('LP Migration'),
href: 'https://v1exchange.pancakeswap.finance/#/migrate', // href: 'https://v1exchange.pancakeswap.finance/#/migrate',
}, // },
], ],
}, },
{ {
@ -35,88 +35,88 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
icon: 'PoolIcon', icon: 'PoolIcon',
href: '/pools', href: '/pools',
}, },
{ // {
label: t('Prediction (BETA)'), // label: t('Prediction (BETA)'),
icon: 'PredictionsIcon', // icon: 'PredictionsIcon',
href: '/prediction', // href: '/prediction',
}, // },
{ // {
label: t('Lottery'), // label: t('Lottery'),
icon: 'TicketIcon', // icon: 'TicketIcon',
href: '/lottery', // href: '/lottery',
status: { // status: {
text: t('Win').toLocaleUpperCase(), // text: t('Win').toLocaleUpperCase(),
color: 'success', // color: 'success',
}, // },
}, // },
{ // {
label: t('Collectibles'), // label: t('Collectibles'),
icon: 'NftIcon', // icon: 'NftIcon',
href: '/collectibles', // href: '/collectibles',
}, // },
{ // {
label: t('Team Battle'), // label: t('Team Battle'),
icon: 'TeamBattleIcon', // icon: 'TeamBattleIcon',
href: '/competition', // href: '/competition',
}, // },
{ // {
label: t('Teams & Profile'), // label: t('Teams & Profile'),
icon: 'GroupsIcon', // icon: 'GroupsIcon',
items: [ // items: [
{ // {
label: t('Leaderboard'), // label: t('Leaderboard'),
href: '/teams', // href: '/teams',
}, // },
{ // {
label: t('Task Center'), // label: t('Task Center'),
href: '/profile/tasks', // href: '/profile/tasks',
}, // },
{ // {
label: t('Your Profile'), // label: t('Your Profile'),
href: '/profile', // href: '/profile',
}, // },
], // ],
}, // },
{ // {
label: t('Info'), // label: t('Info'),
icon: 'InfoIcon', // icon: 'InfoIcon',
href: 'https://pancakeswap.info', // href: 'https://pancakeswap.info',
}, // },
{ // {
label: t('IFO'), // label: t('IFO'),
icon: 'IfoIcon', // icon: 'IfoIcon',
href: '/ifo', // href: '/ifo',
}, // },
{ // {
label: t('More'), // label: t('More'),
icon: 'MoreIcon', // icon: 'MoreIcon',
items: [ // items: [
{ // {
label: t('Contact'), // label: t('Contact'),
href: 'https://docs.pancakeswap.finance/contact-us', // href: 'https://docs.pancakeswap.finance/contact-us',
}, // },
{ // {
label: t('Voting'), // label: t('Voting'),
href: '/voting', // href: '/voting',
}, // },
{ // {
label: t('Github'), // label: t('Github'),
href: 'https://github.com/pancakeswap', // href: 'https://github.com/pancakeswap',
}, // },
{ // {
label: t('Docs'), // label: t('Docs'),
href: 'https://docs.pancakeswap.finance', // href: 'https://docs.pancakeswap.finance',
}, // },
{ // {
label: t('Blog'), // label: t('Blog'),
href: 'https://pancakeswap.medium.com', // href: 'https://pancakeswap.medium.com',
}, // },
{ // {
label: t('Merch'), // label: t('Merch'),
href: 'https://pancakeswap.creator-spring.com/', // href: 'https://pancakeswap.creator-spring.com/',
}, // },
], // ],
}, // },
] ]
export default config export default config

14
src/views/Farms/Farms.tsx
View File

@ -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 NUMBER_OF_FARMS_VISIBLE = 12
const getDisplayApr = (cakeRewardsApr?: number, lpRewardsApr?: number) => { const getDisplayApr = (cakeRewardsApr?: number, lpRewardsApr?: number) => {
@ -382,14 +377,6 @@ const Farms: React.FC = () => {
<Heading scale="lg" color="text"> <Heading scale="lg" color="text">
{t('Stake LP tokens to earn.')} {t('Stake LP tokens to earn.')}
</Heading> </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> </PageHeader>
<Page> <Page>
<ControlContainer> <ControlContainer>
@ -438,7 +425,6 @@ const Farms: React.FC = () => {
</ControlContainer> </ControlContainer>
{renderContent()} {renderContent()}
<div ref={loadMoreRef} /> <div ref={loadMoreRef} />
<StyledImage src="/images/decorations/3dpan.png" alt="Pancake illustration" width={120} height={103} />
</Page> </Page>
</> </>
) )

10
src/views/Home/Home.tsx
View File

@ -10,7 +10,6 @@ import EarnAPRCard from 'views/Home/components/EarnAPRCard'
import EarnAssetCard from 'views/Home/components/EarnAssetCard' import EarnAssetCard from 'views/Home/components/EarnAssetCard'
import PredictionPromotionCard from 'views/Home/components/PredictionPromotionCard' import PredictionPromotionCard from 'views/Home/components/PredictionPromotionCard'
import LotteryPromotionCard from 'views/Home/components/LotteryPromotionCard' import LotteryPromotionCard from 'views/Home/components/LotteryPromotionCard'
import LotteryBanner from 'views/Home/components/LotteryBanner'
import useFetchLotteryForPromos from 'views/Home/hooks/useFetchLotteryForPromos' import useFetchLotteryForPromos from 'views/Home/hooks/useFetchLotteryForPromos'
const Hero = styled.div` const Hero = styled.div`
@ -92,7 +91,6 @@ const Home: React.FC = () => {
return ( return (
<> <>
<LotteryBanner currentLotteryPrize={currentLotteryPrize} />
<Page> <Page>
<Hero> <Hero>
<Heading as="h1" scale="xl" mb="24px" color="secondary"> <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> <Text>{t('The #1 AMM and yield farm on Binance Smart Chain.')}</Text>
</Hero> </Hero>
<div> <div>
<Cards> {/* <Cards> */}
<FarmStakingCard /> <FarmStakingCard />
<PredictionPromotionCard /> {/* <PredictionPromotionCard /> */}
</Cards> {/* </Cards> */}
<CTACards> <CTACards>
<EarnAPRCard /> <EarnAPRCard />
<EarnAssetCard /> <EarnAssetCard />

1
src/views/Home/components/FarmStakingCard.tsx
View File

@ -16,6 +16,7 @@ const StyledFarmStakingCard = styled(Card)`
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right; background-position: top right;
min-height: 376px; min-height: 376px;
margin-bottom: 24px;
` `
const Block = styled.div` const Block = styled.div`

140
src/views/Home/components/LotteryBanner.tsx
View File

@ -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

8
src/views/Pools/index.tsx
View File

@ -280,14 +280,6 @@ const Pools: React.FC = () => {
)} )}
{viewMode === ViewMode.CARD ? cardLayout : tableLayout} {viewMode === ViewMode.CARD ? cardLayout : tableLayout}
<div ref={loadMoreRef} /> <div ref={loadMoreRef} />
<Image
mx="auto"
mt="12px"
src="/images/decorations/3d-syrup-bunnies.png"
alt="Pancake illustration"
width={192}
height={184.5}
/>
</Page> </Page>
</> </>
) )