!4 首页

Merge pull request !4 from 骚/myf

public/images/recommend/tip.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1fc7d4;
+      }
+    </style>
+  </defs>
+  <path id="疑问_1_" data-name="疑问 (1)" class="cls-1" d="M12.5,1.471A11.029,11.029,0,1,1,1.471,12.5,11.041,11.041,0,0,1,12.5,1.471ZM12.5,0A12.5,12.5,0,1,0,25,12.5,12.5,12.5,0,0,0,12.5,0ZM11.452,18.4A1.048,1.048,0,1,0,12.5,17.348,1.048,1.048,0,0,0,11.452,18.4Zm.895-2.359a.736.736,0,0,1-.734-.736,4.75,4.75,0,0,1,2.579-4.116A1.964,1.964,0,0,0,15.1,9.346a1.966,1.966,0,0,0-1.561-1.464,3.254,3.254,0,0,0-2.611.6,2.5,2.5,0,0,0-.773,1.655.737.737,0,0,1-.734.721H9.411a.734.734,0,0,1-.725-.738A3.969,3.969,0,0,1,9.938,7.393a4.511,4.511,0,0,1,4.05-.918c2.9.97,2.693,3.061,2.466,3.832a3.442,3.442,0,0,1-1.687,2.221l0,.009A3.126,3.126,0,0,0,13.084,15.3a.738.738,0,0,1-.738.737Z"/>
+</svg>

public/locales/en-US.json

@@ -1053,5 +1053,15 @@
   "Community Auctions": "Community Auctions",
   "FAQs": "FAQs",
   "Auction duration": "Auction duration",
-  "Terms & Conditions": "Terms & Conditions"
+  "Terms & Conditions": "Terms & Conditions",
+
+
+
+
+  "Hcc Info":"HighCityCoin",
+  "Hcc Nft":"其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。",
+  "Hcc BTC":"同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
+  "Bazaar":"NFT市场"
+
+
 }

public/locales/zh-CN.json

@@ -1053,5 +1053,50 @@
   "Community Auctions": "Community Auctions",
   "FAQs": "FAQs",
   "Auction duration": "Auction duration",
-  "Terms & Conditions": "Terms & Conditions"
+  "Terms & Conditions": "Terms & Conditions",
+
+
+
+  "Hcc Info":"HighCityCoin简称HCC，由HighCityTM铸造，",
+  "Hcc Nft":"其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。",
+  "Hcc BTC":"同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
+  "Bazaar":"NFT市场",
+  "HlighCitySwapInfo":"HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
+  "Stage one: Origin":"第一阶段：起源",
+  "Stage two: Action":"第二阶段：行动",
+  "Stage three: Creation":"第三阶段：创造",
+  "Stage four: Integration":"第四阶段：融合",
+  "Stage five: Closing the curtain":"第五阶段：落幕",
+  "The project concept was born in May 2021":"2021年5月项目概念的诞生；",
+  "Set up HighClty team in June 2021":"2021年6月搭建HighClty团队；",
+  "May 2021 -- January 2022 Team run-in":"2021年5月~2022年1月团队磨合；",
+  "In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online":"2022年4月社交建社，交媒体发布活动，HighCity铸币开始，分红机制上线；",
+  "In March 2022, project approval, web design, roadmap announcement, smart contract development":"2022年3月项目立项，网页设计，路线图公布，智能合约开发；",
+  "Launch of social software in December 2022":"2022年12月社交软件落地；",
+  "Created by NFT in May 2022":"2022年5月NFT创造；",
+  "June 2022 social software development":"2022年6月社交软件开发；",
+  "December 2022 NFT bonus binding social software":"2022年12月NFT分红绑定社交软件；",
+  "In December 2022, HighCity Ecology was preliminarily completed":"2022年12月HighCity生态初步建成；",
+  "HighCity Ecology completed in December 2022":"2022年12月HighCity生态建成;",
+  "Maintain dividend income growth in December 2022":"2022年12月保持分红收益增长；",
+  "Buy commander NFT":"购买军团长NFT",
+  "Upgrade recommendation rights, can enjoy the share of secondary recommendation":"升级推荐权益，可享有二级推荐的分成",
+  "Enjoy a higher percentage than ordinary users":"享有比普通用户更高的分成比例",
+  "Commander NFT can be traded in the NFT market":"军团长NFT可在NFT市场内进行交易",
+  "First stage sharing ratio":"一级分成比例",
+  "Secondary split ratio":"二级分成比例",
+  "Buy It Now":"立即购买",
+  "recommend":"推荐",
+  "The lower the number of":"下级数量",
+  "NFT total revenue":"NFT总收益",
+  "HCC total revenue":"HCC总收益",
+  "To get profit":"待领收益",
+  "No income is received temporarily":"暂无收益领取",
+  "Upgrade commander":"升级军团长",
+  "Regimental recommendation":"军团长推荐",
+  "Number of secondary subordinates":"二级下级人数",
+  "Number of first-level subordinates":"一级下级人数",
+  "Immediately to receive":"立即领取",
+  "buy again":"再次购买",
+  "Connect the purse":"连接钱包"
 }

src/App.tsx

@@ -48,6 +48,8 @@ const Pool = lazy(() => import('./views/Pool'))
 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({
@@ -89,6 +91,12 @@ const App: React.FC = () => {
             <Route path="/referral">
               <Referral />
             </Route>
+            <Route path="/nft">
+              <Nft />
+            </Route>
+            <Route path="/recommend">
+              <Recommend />
+            </Route>
             {/* <Route path="/lottery">
               <Lottery />
             </Route>
@@ -138,6 +146,8 @@ const App: React.FC = () => {
             <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
             <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">

src/components/Menu/config.ts

@@ -40,6 +40,16 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
     icon: 'PoolIcon',
     href: '/referral',
   },
+	{
+	  label: 'NFT',
+	  icon: 'TicketIcon',
+	  href: '/nft'
+	},
+	{
+	  label: t('recommend'),
+	  icon: 'TicketIcon',
+	  href: '/recommend'
+	},
   // {
   //   label: t('Prediction (BETA)'),
   //   icon: 'PredictionsIcon',

src/config/localization/translations.json

@@ -1182,5 +1182,48 @@
   "Recipient": "Recipient",
   "Waiting For Confirmation": "Waiting For Confirmation",
   "Confirm this transaction in your wallet": "Confirm this transaction in your wallet",
-  "Dismiss": "Dismiss"
+  "Dismiss": "Dismiss",
+
+  "Hcc Info":"HighCityCoin abbreviation HCC,cause HighCityTM cast,",
+  "Hcc Nft":"Its function is mainly in HighCitySwap On the purchase NFT、NFT Boxes and other tradeable products.",
+  "Hcc BTC":"meanwhile,HCC and BTC、ETH Have the same properties,They can trade freely.",
+  "Bazaar":"NFT Bazaar",
+  "HlighCitySwapInfo":"HIighCitySwap the birth of,From the founder Liu Bus Enthusiastic pursuit of blockchain technology,He has always believed that blockchain technology could be used more widely。for this purpose,He made a brave decision,Abandon investments in other areas,Focus on the practical application of blockchain technology,Put yourself in a familiar field -- social networking on the Internet,Integration with blockchain technology,HighCitySwap Thus was born.That's where we started,Thank you for your support,HighCity The team will always move forward.",
+  "Stage one: Origin":"Stage one: Origin",
+  "Stage two: Action":"Stage two: Action",
+  "Stage three: Creation":"Stage three: Creation",
+  "Stage four: Integration":"Stage four: Integration",
+  "Stage five: Closing the curtain":"Stage five: Closing the curtain",
+  "The project concept was born in May 2021":"The project concept was born in May 2021;",
+  "Set up HighClty team in June 2021":"Set up HighClty team in June 2021;",
+  "May 2021 -- January 2022 Team run-in":"May 2021 -- January 2022 Team run-in;",
+  "In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online":"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online;",
+  "In March 2022, project approval, web design, roadmap announcement, smart contract development":"In March 2022, project approval, web design, roadmap announcement, smart contract development;",
+  "Launch of social software in December 2022":"Launch of social software in December 2022;",
+  "Created by NFT in May 2022":"Created by NFT in May 2022;",
+  "June 2022 social software development":"June 2022 social software development;",
+  "December 2022 NFT bonus binding social software":"December 2022 NFT bonus binding social software;",
+  "In December 2022, HighCity Ecology was preliminarily completed":"In December 2022, HighCity Ecology was preliminarily completed;",
+  "HighCity Ecology completed in December 2022":"HighCity Ecology completed in December 2022",
+  "Maintain dividend income growth in December 2022":"Maintain dividend income growth in December 2022;",
+  "Buy commander NFT":"Buy commander NFT",
+  "Upgrade recommendation rights, can enjoy the share of secondary recommendation":"Upgrade recommendation rights, can enjoy the share of secondary recommendation",
+  "Enjoy a higher percentage than ordinary users":"Enjoy a higher percentage than ordinary users",
+  "Commander NFT can be traded in the NFT market":"Commander NFT can be traded in the NFT market",
+  "First stage sharing ratio":"First stage sharing ratio",
+  "Secondary split ratio":"Secondary split ratio",
+  "Buy It Now":"Buy It Now",
+  "recommend":"recommend",
+  "The lower the number of":"The lower the number of",
+  "NFT total revenue":"NFT total revenue",
+  "HCC total revenue":"HCC total revenue",
+  "To get profit":"To get profit",
+  "No income is received temporarily":"No income is received temporarily",
+  "Upgrade commander":"Upgrade commander",
+  "Regimental recommendation":"Regimental recommendation",
+  "Number of secondary subordinates":"Number of secondary subordinates",
+  "Number of first-level subordinates":"Number of first-level subordinates",
+  "Immediately to receive":"Immediately to receive",
+  "buy again":"buy again",
+  "Connect the purse":"Connect the purse"
 }

src/views/Home/HomeIndex.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useTranslation } from 'contexts/Localization'
+import FristCom from './components/FristCom'
+import IntroduceCom from './components/IntroduceCom'
+import CourseCom from './components/CourseCom'
+
+const Home: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <FristCom />
+      <IntroduceCom />
+      <CourseCom />
+    </>
+  )
+}
+
+export default Home

src/views/Home/components/CourseCom.tsx

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const FristPage = styled.div`
+  background-image: url('/images/home/three.svg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  padding: 8rem 0 0.8rem 0;
+`
+
+const StyledPage = styled(Box)`
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    width: 80%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    width: 80%;
+  }
+`
+
+const SortDiv = styled.div`
+  height: 190px;
+  position: relative;
+`
+
+const SortNum = styled.div`
+  position: absolute;
+  top: 0;
+  left: -43px;
+  width: 82px;
+  height: 82px;
+  background: #1fc7d4;
+  border-radius: 50%;
+  font-size: 46px;
+  color: #faf9fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+`
+
+const CardDiv = styled.div`
+  width: 372px;
+  box-sizing: border-box;
+  padding: 28px 40px 16px 26px;
+  border: 1px solid #e7e3eb;
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 25px;
+  position: absolute;
+  top: -25%;
+  background: #fff;
+  ${({ theme }) => theme.mediaQueries.sm} {
+    // left: 60px !important;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+  }
+`
+
+const CourseCom: React.FC = () => {
+  const { t } = useTranslation()
+
+  const [list, setListState] = useState([
+    {
+      title: t('Stage one: Origin'),
+      id: 1,
+      list: [
+        { text: t('The project concept was born in May 2021') },
+        { text: t('Set up HighClty team in June 2021') },
+        { text: t('May 2021 -- January 2022 Team run-in') },
+      ],
+    },
+    {
+      title: t('Stage two: Action'),
+      id: 2,
+      list: [
+        {
+          text: t(
+            'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
+          ),
+        },
+        { text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') },
+      ],
+    },
+    {
+      title: t('Stage three: Creation'),
+      id: 3,
+      list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }],
+    },
+    {
+      title: t('Stage four: Integration'),
+      id: 4,
+      list: [
+        { text: t('Launch of social software in December 2022') },
+        { text: t('December 2022 NFT bonus binding social software') },
+        { text: t('In December 2022, HighCity Ecology was preliminarily completed') },
+      ],
+    },
+    {
+      title: t('Stage five: Closing the curtain'),
+      id: 5,
+      list: [
+        { text: t('HighCity Ecology completed in December 2022') },
+        { text: t('Maintain dividend income growth in December 2022') },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <FristPage>
+        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+          <Flex justifyContent="center">
+            <div>
+              {list.map((item, index) => {
+                return (
+                  <SortDiv
+                    key={item.id}
+                    style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
+                  >
+                    <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
+                    <CardDiv style={{ left: index % 2 ? '-420px' : '60px' }}>
+                      <Heading>{item.title}</Heading>
+                      {item.list.map((childItem) => {
+                        return (
+                          <Text color="textSubtle" marginTop="15px" key={childItem.text}>
+                            {childItem.text}
+                          </Text>
+                        )
+                      })}
+                    </CardDiv>
+                  </SortDiv>
+                )
+              })}
+            </div>
+          </Flex>
+        </StyledPage>
+      </FristPage>
+    </>
+  )
+}
+
+export default CourseCom

src/views/Home/components/FlexItemCom.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text } from '@pancakeswap/uikit'
+
+const ScoreItem = styled.div`
+  width: 100%;
+  text-algin: center;
+`
+
+const ItemText = styled(Text)`
+  text-align: center;
+  font-size: 36px;
+`
+
+const ItemSubText = styled(Text)`
+  text-align: center;
+  font-size: 20px;
+`
+
+export default function FlexItemCom({ name, value }) {
+  return (
+    <ScoreItem>
+      <ItemText color="text">{value}</ItemText>
+      <ItemSubText color="textSubtle">{name}</ItemSubText>
+    </ScoreItem>
+  )
+}

src/views/Home/components/FristCom.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, Box, Button, Image } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+import FlexItemCom from './FlexItemCom'
+
+const FristPage = styled.div`
+  background-image: url('/images/home/bg.svg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  padding: 0.9rem 0 0.8rem 0;
+`
+
+const StyledPage = styled(Box)`
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    width: 80%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    width: 80%;
+  }
+`
+
+const RadiusBtn = styled(Button)`
+  border-radius: 50px;
+  width: 170px;
+  height: 60px;
+  font-size: 18px;
+  margin: 0px 20px 0 0;
+  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
+`
+const WhiteBtn = styled(Button)`
+  border-radius: 50px;
+  width: 170px;
+  height: 60px;
+  border: 1px solid #1fc7d4;
+  margin: 0px 35px 0 0;
+`
+
+const ScoreDiv = styled(Flex)`
+  margin-top: 127px;
+  background: #fff;
+  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+  opacity: 1;
+  border-radius: 15px;
+  padding: 59px 0;
+`
+const InfoDiv = styled.div``
+
+const FristCom: React.FC = () => {
+  const { t } = useTranslation()
+  const [burned, BurnedState] = useState([
+    { id: 1, name: 'Burned', value: '62.55%' },
+    { id: 2, name: 'Burned', value: '62.55%' },
+    { id: 3, name: 'Burned', value: '62.55%' },
+    { id: 4, name: 'Burned', value: '62.55%' },
+  ])
+  return (
+    <>
+      <FristPage>
+        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+          <Flex justifyContent="space-between" alignItems="center" flexDirection="row-reverse" flexWrap="wrap">
+            <Image src="/images/home/logo.svg" alt="" width={315} height={315} />
+            <InfoDiv>
+              <Heading as="h1" scale="xl" mb="24px" color="secondary">
+                High City Coin
+              </Heading>
+              <Text>
+                {t('Hcc Info')}
+                <br />
+                {t('Hcc Nft')}
+                <br />
+                {t('Hcc BTC')}
+              </Text>
+              <Flex alignItems="center" marginTop="60px">
+                <RadiusBtn variant="primary" scale="sm">
+                  {t('Exchange')}
+                </RadiusBtn>
+                <WhiteBtn variant="secondary" scale="sm">
+                  {t('Bazaar')}
+                </WhiteBtn>
+                <Image src="/images/home/fg.png" alt="" width={34} height={34} marginRight="12px" />
+                <Image src="/images/home/fg.png" alt="" width={34} height={34} marginRight="12px" />
+              </Flex>
+            </InfoDiv>
+          </Flex>
+          <ScoreDiv justifyContent="space-between">
+            {burned.map((item) => {
+              return <FlexItemCom key={item.id} name={item.name} value={item.value} />
+            })}
+          </ScoreDiv>
+        </StyledPage>
+      </FristPage>
+    </>
+  )
+}
+
+export default FristCom

src/views/Home/components/IntroduceCom.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, BaseLayout, Box, Button, Image } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const FristPage = styled.div`
+  background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
+  padding: 8rem 0 0.8rem 0;
+`
+
+const StyledPage = styled(Box)`
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    width: 80%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    width: 80%;
+  }
+`
+
+const BoxMain = styled(Box)`
+  background: #ffffff;
+  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+  opacity: 1;
+  border-radius: 20px;
+  padding: 94px 92px 37px 92px;
+  position: relative;
+`
+
+const MainDiv = styled.div`
+  position: absolute;
+  top: -76px;
+  left: 50%;
+  margin-left: -76px;
+  width: 152px;
+  height: 152px;
+  background: #ffffff;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
+  border-radius: 50%;
+  opacity: 1;
+  box-sizing: border-box;
+  padding: 13px;
+  & > div {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #e0ffff;
+    padding: 25px;
+  }
+`
+
+const HeadingDiv = styled(Heading)`
+  margin-top: 18px;
+  font-size: 36px;
+  color: #333333;
+`
+
+const TextCom = styled(Text)`
+  margin-top: 35px;
+  text-align: center;
+  line-height: 32px;
+`
+
+const IntroduceCom: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <FristPage>
+        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+          <BoxMain>
+            <MainDiv>
+              <div>
+                <Image src="/images/home/intor.svg" alt="" width={75} height={75} />
+              </div>
+            </MainDiv>
+            <HeadingDiv textAlign="center">HlighCitySwap</HeadingDiv>
+            <TextCom>{t('HlighCitySwapInfo')}</TextCom>
+          </BoxMain>
+        </StyledPage>
+      </FristPage>
+    </>
+  )
+}
+
+export default IntroduceCom

src/views/Home/index.ts

@@ -1 +1 @@
-export { default } from './Home'
+export { default } from './HomeIndex'

src/views/Nft/component/FlexText.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+// import SearchInput from 'components/SearchInput'
+import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
+
+export default function FlexText({ name, value }) {
+  return (
+    <Flex justifyContent="flex-end" alignItems="center" marginTop="12px" padding="0 21px">
+      <Text color="#6B6472" fontSize="14px">
+        {name}：
+      </Text>
+      <Text color="#1FC7D4" fontSize="14px">
+        {value}
+      </Text>
+    </Flex>
+  )
+}

src/views/Nft/component/StepCom.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Text, Flex, Image } from '@pancakeswap/uikit'
+
+export default function StepCom() {
+  const [valNumber, setInputState] = useState(1)
+
+  const onAdd = (type) => {
+    if (type === 'add') {
+      setInputState(valNumber + 1)
+    } else {
+      if (valNumber === 0) return
+      setInputState(valNumber - 1)
+    }
+  }
+
+  return (
+    <Flex justifyContent="space-between" alignItems="center" width={120}>
+      <Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} />
+      <Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
+        {valNumber}
+      </Text>
+      <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} />
+    </Flex>
+  )
+}

src/views/Nft/index.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+// import SearchInput from 'components/SearchInput'
+import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
+
+import FlexText from './component/FlexText'
+// import Step from './component/Step'
+
+import StepCom from './component/StepCom'
+
+import 'swiper/swiper.min.css'
+
+import 'swiper/components/pagination/pagination.min.css'
+
+SwiperCore.use([Keyboard, Mousewheel, Pagination])
+
+const MainDiv = styled.div`
+  width: 100%;
+  min-height: calc(100vh - 64px);
+  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+`
+
+const StyledPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  padding-bottom: 0;
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    background-size: auto;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding: 24px;
+    padding-bottom: 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    min-height: calc(100vh - 64px);
+  }
+`
+
+const BodyWrapper = styled(Card)`
+  border-radius: 24px;
+  max-width: 500px;
+  width: 100%;
+  overflow: visible;
+  position: relative;
+`
+
+const HindDiv = styled.div`
+  width: 32px;
+  position: absolute;
+  top: -40px;
+  left: 0;
+  z-index: 10;
+`
+const BlindboxImage = styled(Image)`
+  max-width: 377px;
+  max-height: 367px;
+  z-index: 9;
+`
+
+const Divs = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  padding-bottom: 0;
+  min-height: calc(100vh - 104px);
+  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+`
+
+const DetailInfo = styled(Flex)`
+  padding: 0 21px;
+  margin-top: 24px;
+`
+
+const SwiperDiv = styled(Swiper)`
+  height: 730px;
+  & > .swiper-wrapper > .swiper-slide > div > div {
+    background: transparent;
+  }
+
+  & > .swiper-pagination {
+    & > .swiper-pagination-bullet {
+      background: #fff;
+      width: 14px;
+      height: 9px;
+      opacity: 1;
+      border-radius: 3px;
+    }
+    & > .swiper-pagination-bullet-active {
+      background: #000;
+    }
+  }
+`
+
+const Nft: React.FC = () => {
+  const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
+
+  return (
+    <MainDiv>
+      <SwiperDiv
+        loop
+        pagination={{ clickable: true }}
+        spaceBetween={16}
+        freeModeMomentumRatio={0.25}
+        freeModeMomentumVelocityRatio={0.5}
+      >
+        {blindboxList.map((item) => {
+          return (
+            <SwiperSlide key={item.id}>
+              <StyledPage>
+                <Divs>
+                  <BodyWrapper>
+                    <HindDiv>
+                      <Image src="/images/nft/hint.png" alt="" width={32} height={32} />
+                    </HindDiv>
+                    <Flex justifyContent="center" marginTop="-40px">
+                      <BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
+                    </Flex>
+                    <DetailInfo justifyContent="space-between" alignItems="center">
+                      <Text color="textSubtle">系列</Text>
+                      <Text color="text">法式盛宴</Text>
+                    </DetailInfo>
+                    <DetailInfo justifyContent="space-between" alignItems="center">
+                      <Text color="textSubtle">价格</Text>
+                      <Flex alignItems="center" justifyContent="flex-end">
+                        <Text color="#1FC7D4" fontSize="24px">
+                          500
+                        </Text>
+                        <Text color="text">黄油</Text>
+                      </Flex>
+                    </DetailInfo>
+                    <DetailInfo justifyContent="space-between" alignItems="center">
+                      <Text color="textSubtle">数量</Text>
+                      <StepCom />
+                    </DetailInfo>
+                    <FlexText name="钱包中的 BUTTER" value="0" />
+                    <FlexText name="回收点数抵扣" value="0" />
+                    <FlexText name="实际黄油成本" value="0" />
+                  </BodyWrapper>
+                </Divs>
+              </StyledPage>
+            </SwiperSlide>
+          )
+        })}
+      </SwiperDiv>
+    </MainDiv>
+  )
+}
+export default Nft

src/views/recommend/components/BuyNftModal.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
+import TextFlex from './TextFlex'
+import FlexCom from './FlexCom'
+
+const ModalDiv = styled(Modal)`
+  & > .jCXCIB {
+    border-bottom: none;
+    text-align: center;
+    & > .hMvvbb {
+      justify-content: center;
+    }
+  }
+`
+
+const InfoDiv = styled.div`
+  box-sizing: border-box;
+  padding: 30px 26px;
+  /* width: calc(100% - 280px); */
+  margin-left: 2rem;
+  box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
+`
+const UpBtn = styled(Button)`
+  width: 40%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+export default function BuyNftModal() {
+  const { t } = useTranslation()
+
+  const onDismiss = () => {
+    console.log('aaa')
+  }
+  return (
+    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
+      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+        <Image src="/images/recommend/logo.svg" width={300} height={300} 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="10％" />
+          <FlexCom name={t('Secondary split ratio')} value="5％" />
+        </InfoDiv>
+      </Flex>
+
+      <Flex>
+        <UpBtn>{t('Buy It Now')}</UpBtn>
+      </Flex>
+    </ModalDiv>
+  )
+}

src/views/recommend/components/ConnectedComponent.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading, Image, useModal } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import BuyNftModal from './BuyNftModal'
+import HeaderMian from './HeaderMain'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
+
+const TipDiv = styled(Image)`
+  position: absolute;
+  cursor: pointer;
+  top: 24px;
+  left: 30px;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
+  color: ${({ theme }) => theme.colors.textDisabled};
+`
+
+const UpBtn = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 30px 20px 30px;
+`
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+
+export default function ConnectedCom() {
+  const { t } = useTranslation()
+  const [onBuyModal] = useModal(<BuyNftModal />)
+
+  return (
+    <MainDiv>
+      <HeaderMian title={t('recommend')} />
+      <>
+        <FlexCom name={t('The lower the number of')} value="100000(人)" />
+        <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
+        <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+        <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+      </>
+
+      <FooterBtn>
+        <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
+        <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
+      </FooterBtn>
+    </MainDiv>
+  )
+}

src/views/recommend/components/FlexCom.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Text } from '@pancakeswap/uikit'
+
+const FlexDiv = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+`
+
+export default function FlexCom({
+  name,
+  value,
+  paddings = '0',
+  leftColor = 'text',
+  RightColor = 'textSubtle',
+  color = '#1FC7D4',
+}) {
+  return (
+    <FlexDiv style={{ padding: paddings }}>
+      <Text color={leftColor}>{name}</Text>
+      <Text color={RightColor}>{value}</Text>
+    </FlexDiv>
+  )
+}

src/views/recommend/components/HeaderMain.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
+
+const TipDiv = styled(Image)`
+  position: absolute;
+  cursor: pointer;
+  top: 24px;
+  left: 0;
+`
+export default function HeaderMian({ title }) {
+  return (
+    <HeadingDiv scale="xl" mb="24px" textAlign="center">
+      <TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
+      {title}
+    </HeadingDiv>
+  )
+}

src/views/recommend/components/RegimentalComponent.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import HeaderMian from './HeaderMain'
+
+const MainDiv = styled.div`
+  width: 60%;
+`
+const HeaderFlex = styled(Flex)`
+  padding-left: 20px;
+`
+
+const BuyButton = styled(Button)`
+  width: 150px;
+  border-radius: 50px;
+  margin-left: 20px;
+  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+`
+
+const ContentFlex = styled(Flex)`
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+`
+
+const InfoDiv = styled.div`
+  width: calc(50% - 40px);
+  margin: 0 20px;
+  /* width: 400px; */
+  min-width: 315px;
+  background: #ffffff;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 40px;
+  box-sizing: border-box;
+  margin-top: 50px;
+  padding: 0 30px 35px 30px;
+`
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.primaryDark};
+  color: ${({ theme }) => theme.colors.primaryDark};
+`
+export default function RegimentalCom() {
+  const { t } = useTranslation()
+  return (
+    <MainDiv>
+      <HeaderFlex>
+        <Image src="/images/recommend/logo.svg" width={60} height={60} />
+        <BuyButton>{t('buy again')}</BuyButton>
+      </HeaderFlex>
+      <ContentFlex>
+        <InfoDiv>
+          <HeaderMian title={t('recommend')} />
+          <FlexCom name={t('The lower the number of')} value="100000(人)" />
+          <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
+          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
+        </InfoDiv>
+        <InfoDiv>
+          <HeaderMian title={t('Regimental recommendation')} />
+          <FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
+          <FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
+          <FlexCom name={t('Number of secondary subordinates')} value="" />
+          <FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
+          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
+          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
+        </InfoDiv>
+      </ContentFlex>
+    </MainDiv>
+  )
+}

src/views/recommend/components/TextFlex.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex } from '@pancakeswap/uikit'
+
+const MainDiv = styled(Flex)`
+  box-sizing: border-box;
+  padding: 14px 36px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  color: #2f2e41;
+  font-size: 14px;
+  justify-content: center;
+`
+
+export default function TextFlex({ color, text = '' }) {
+  return <MainDiv style={{ background: color }}>{text}</MainDiv>
+}

src/views/recommend/components/UnunitedCom.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 5rem;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 80%;
+  margin: 5rem auto 3rem auto;
+  margin-left: 10%;
+`
+export default function UnunitedCom() {
+  const { t } = useTranslation()
+  return (
+    <>
+      <HeadingDiv scale="xl" mb="24px" textAlign="center">
+        {t('recommend')}
+      </HeadingDiv>
+      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
+    </>
+  )
+}

src/views/recommend/index.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Card, Button, Text, Flex, Image, Heading } from '@pancakeswap/uikit'
+
+import UnunitedCom from './components/UnunitedCom'
+import ConnectedCom from './components/ConnectedComponent'
+import RegimentalCom from './components/RegimentalComponent'
+
+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 ContengDiv = 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;
+`
+
+const Nft: React.FC = () => {
+  //  邀请false普通邀请 true军团长邀请
+  const [type, typeState] = useState(false)
+  //  是否连接钱包
+  const [status, statusState] = useState(true)
+
+  return (
+    <MainDiv>
+      {type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
+    </MainDiv>
+  )
+}
+export default Nft