Merge branch 'dev' into board-test

* dev: feat: 用户登录 feat: 修改登录 feat: 军团长改为推荐 stepper 重命名 src/views/recommend 为 src/views/Recommend all 代码格式删除文件 src/views/recommend 代码规范军团长ui 首页调整 ui调整调整军团长ui 军团长语言切换 home nfts nft
2022-04-22 17:15:04 +08:00 · 2022-04-22 17:15:04 +08:00 · 196f9a8119
parent 14009878b3 ed81a9055e
commit 196f9a8119
43 changed files with 1340 additions and 233 deletions
--- a/.env.development
+++ b/.env.development
@ -16,3 +16,7 @@ REACT_APP_GRAPH_API_LOTTERY = "https://api.thegraph.com/subgraphs/name/pancakesw

 REACT_APP_SNAPSHOT_BASE_URL = "https://testnet.snapshot.org"
 REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.amazonaws.com/dev/api"
+
+
+
+REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
--- a/.eslintrc
+++ b/.eslintrc
@ -33,7 +33,8 @@
    "no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsFor": ["state", "memo"] }],
    "react/require-default-props": 0,
    "no-nested-ternary": 0,
-    "max-classes-per-file": 0
+    "max-classes-per-file": 0,
+    "react-hooks/exhaustive-deps":0
    // End temporary rules
  }
 }
--- a/public/images/home/12.svg
+++ b/public/images/home/12.svg
--- a/public/images/home/bg.svg
+++ b/public/images/home/bg.svg
--- a/public/images/home/fg.png
+++ b/public/images/home/fg.png
--- a/public/images/home/intor.svg
+++ b/public/images/home/intor.svg
--- a/public/images/home/logo.svg
+++ b/public/images/home/logo.svg
--- a/public/images/home/three.svg
+++ b/public/images/home/three.svg
--- a/public/images/nft/add-icon.png
+++ b/public/images/nft/add-icon.png
--- a/public/images/nft/blindbox.png
+++ b/public/images/nft/blindbox.png
--- a/public/images/nft/hint.png
+++ b/public/images/nft/hint.png
--- a/public/images/nft/sub-icon.png
+++ b/public/images/nft/sub-icon.png
--- a/public/images/recommend/bg.svg
+++ b/public/images/recommend/bg.svg
--- a/public/images/recommend/logo.svg
+++ b/public/images/recommend/logo.svg
--- a/public/images/recommend/tip.svg
+++ b/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>
--- a/public/locales/en-US.json
+++ b/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市场"
+
+
 }
--- a/public/locales/zh-CN.json
+++ b/public/locales/zh-CN.json
@ -1053,5 +1053,58 @@
  "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":"连接钱包",
+  "HCC total revenue percentage :10%":"HCC总收益(分成比例:10%)",
+  "Contract address":"合约地址",
+  "Assets agreement":"资产协议",
+  "Assets and chain":"资产公链",
+  "each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
+  "last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
+  "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
+
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -49,6 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
 const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
 const Board = lazy(() => import('./views/Board'))
+const Nft = lazy(() => import('./views/Nft'))

 // This config is required for number formatting
 BigNumber.config({
@ -92,6 +93,8 @@ const App: React.FC = () => {
            </Route>
            <Route path="/board">
              <Board />
+            <Route path="/nft">
+              <Nft />
            </Route>
            {/* <Route path="/lottery">
              <Lottery />
@ -142,6 +145,7 @@ 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} />

            {/* Redirect */}
            {/* <Route path="/staking">
--- a/src/components/Menu/config.ts
+++ b/src/components/Menu/config.ts
@ -40,6 +40,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
    icon: 'PoolIcon',
    href: '/referral',
  },
+  {
+    label: 'NFT',
+    icon: 'TicketIcon',
+    href: '/nft',
+  },
  // {
  //   label: t('Prediction (BETA)'),
  //   icon: 'PredictionsIcon',
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@ -1,26 +1,49 @@
-import React from 'react'
-import { Menu as UikitMenu } from '@pancakeswap/uikit'
+import React, { useEffect, useState } from 'react'
+import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
 import { useWeb3React } from '@web3-react/core'
 import { languageList } from 'config/localization/languages'
 import { useTranslation } from 'contexts/Localization'
 import useTheme from 'hooks/useTheme'
 import useAuth from 'hooks/useAuth'
+import { useDispatch } from 'react-redux'
 import { usePriceCakeBusd, useProfile } from 'state/hooks'
+import { useUnactiveAccount, useSignLogin, useAccount } from 'state/userInfo/hooks'
+import useWeb3Provider from 'hooks/useActiveWeb3React'
+import { clearUserInfo } from 'state/actions'
 import config from './config'

 const Menu = (props) => {
-  const { account } = useWeb3React()
+  const account = useAccount()
  const { login, logout } = useAuth()
+  const [hasWalletLogin, setHasWalletLogin] = useState(false)
  const { isDark, toggleTheme } = useTheme()
  const cakePriceUsd = usePriceCakeBusd()
+  const { library } = useWeb3Provider()
+  const unActiveAccount = useUnactiveAccount()
+  const dispatch = useDispatch()
  const { profile } = useProfile()
  const { currentLanguage, setLanguage, t } = useTranslation()
-
+  const sign = useSignLogin()
+  const handleLogin = async (connectorID: ConnectorNames) => {
+    await login(connectorID)
+    setHasWalletLogin(true)
+  }
+  const handleLogout = () => {
+    dispatch(clearUserInfo())
+    logout()
+  }
+  // 钱包登录后
+  useEffect(() => {
+    if (unActiveAccount && library.provider && hasWalletLogin) {
+      setHasWalletLogin(false)
+      sign()
+    }
+  }, [unActiveAccount, hasWalletLogin, library])
  return (
    <UikitMenu
      account={account}
-      login={login}
-      logout={logout}
+      login={handleLogin}
+      logout={handleLogout}
      isDark={isDark}
      toggleTheme={toggleTheme}
      currentLang={currentLanguage.code}
--- a/src/components/UnlockButton.tsx
+++ b/src/components/UnlockButton.tsx
@ -1,13 +1,31 @@
-import React from 'react'
-import { Button, useWalletModal } from '@pancakeswap/uikit'
+import React, { useEffect, useState } from 'react'
+import { Button, useWalletModal, ConnectorNames } from '@pancakeswap/uikit'
 import useAuth from 'hooks/useAuth'
 import { useTranslation } from 'contexts/Localization'
+import useToast from 'hooks/useToast'
+import { useUnactiveAccount, useSignLogin } from 'state/userInfo/hooks'
+import useWeb3Provider from 'hooks/useActiveWeb3React'

 const UnlockButton = (props) => {
  const { t } = useTranslation()
  const { login, logout } = useAuth()
-  const { onPresentConnectModal } = useWalletModal(login, logout)
-
+  const [hasWalletLogin, setHasWalletLogin] = useState(false)
+  const { library } = useWeb3Provider()
+  const unActiveAccount = useUnactiveAccount()
+  const { toastInfo } = useToast()
+  const sign = useSignLogin()
+  const handleLogin = async (connectorID: ConnectorNames) => {
+    await login(connectorID)
+    setHasWalletLogin(true)
+  }
+  const { onPresentConnectModal } = useWalletModal(handleLogin, logout)
+  // 钱包登录后
+  useEffect(() => {
+    if (unActiveAccount && library.provider && hasWalletLogin) {
+      setHasWalletLogin(false)
+      sign()
+    }
+  }, [unActiveAccount, hasWalletLogin, library])
  return (
    <Button onClick={onPresentConnectModal} {...props}>
      {t('Unlock Wallet')}
--- a/src/config/localization/translations.json
+++ b/src/config/localization/translations.json
@ -1182,5 +1182,55 @@
  "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",
+  "HCC total revenue percentage :10%":"HCC total revenue percentage :10%",
+  "Contract address":"ontract address",
+  "Assets agreement":"Assets agreement",
+  "Assets and chain":"Assets and chain",
+  "each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
+  "last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
+  "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee"
 }
--- a/src/services/login.ts
+++ b/src/services/login.ts
@ -1,17 +1,17 @@
 import request from 'utils/request'

-export const login = (params) => {
+export const login = (data) => {
  return request.request({
-    url: '/v1/login',
-    method: 'get',
-    params,
+    url: '/high_city/app/api/auth/login',
+    method: 'post',
+    data,
  })
 }

-export const queryLoginHash = (params) => {
+export const queryLoginHash = (data) => {
  return request.request({
-    url: '/v1/login/hash',
-    method: 'get',
-    params,
+    url: '/high_city/app/api/auth/msg',
+    method: 'post',
+    data,
  })
 }
--- a/src/services/user.ts
+++ b/src/services/user.ts
@ -2,36 +2,8 @@ import request from 'utils/request'

 export const queryUserInfo = () => {
  return request.request({
-    url: '/v1/user',
+    url: '/high_city/app/api/user/detail',
    method: 'get',
  })
 }
-
-export const queryUserAvatarList = () => {
-  return request.request({
-    url: '/v1/avatar/user/list',
-    method: 'get',
-  })
-}
-
-export const queryUserInviteList = () => {
-  return request.request({
-    url: '/v1/user/invite/top/list',
-    method: 'get',
-  })
-}
-
-export const updateUserAvater = (params) => {
-  return request.request({
-    url: '/v1/user/update/avatar',
-    method: 'get',
-    params,
-  })
-}
-export const updateUserInfo = (data) => {
-  return request.request({
-    url: '/v1/user/update',
-    method: 'post',
-    data,
-  })
-}
+export default queryUserInfo
--- a/src/state/userInfo/hooks.ts
+++ b/src/state/userInfo/hooks.ts
@ -7,6 +7,7 @@ import { setUserInfo } from 'state/actions'
 import { CACHE_INVITE_CODE } from 'config/constants/cacheKey'
 import useToast from 'hooks/useToast'
 import { State } from '../types'
+import { fetchUserInfo } from './index'

 export const useAccount = (ellipsis?: boolean) => {
  const account = useSelector((state: State) => state.userInfo.account)
@ -42,14 +43,14 @@ export const useSignLogin = () => {
  const signLogin = async () => {
    try {
      const data = await queryLoginHash({ address: unActiveAccount })
-      const signHash = await signMessage(library, unActiveAccount, data.hash)
+      const signHash = await signMessage(library, unActiveAccount, data.msg)
      const inviteCode = sessionStorage.getItem(CACHE_INVITE_CODE)
      const userInfo = await userLogin({
-        hash: data.hash,
-        signature: signHash,
-        invite_code: inviteCode,
+        msg: data.msg,
+        sign: signHash,
+        inviteCode,
      })
-      dispatch(setUserInfo({ ...userInfo.user_info, token: userInfo.token }))
+      dispatch(setUserInfo(userInfo))
    } catch (e) {
      console.log(e)
      // e.message&&toastError(e)
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@ -1,6 +1,7 @@
 import { Dispatch } from 'react'
 import axios from 'axios'
 // import { clearUserInfo } from 'state/actions'
+import { CACHE_TOKEN } from 'config/constants/cacheKey'

 // create an axios instance
 const request = axios.create({
@ -11,12 +12,9 @@ let hasInit = false
 export const initAxios = (dispatch: Dispatch<any>, toast) => {
  if (hasInit) return
  hasInit = true
-  // request interceptor
  request.interceptors.request.use(
    (memo: any) => {
-      // do something before request is sent
-
-      memo.headers.token = localStorage.getItem('token')
+      memo.headers.token = localStorage.getItem(CACHE_TOKEN)
      return memo
    },
    (error) => {
@ -33,8 +31,8 @@ export const initAxios = (dispatch: Dispatch<any>, toast) => {
          toast.toastError('Login expiration')
          return Promise.reject(new Error('Login expiration'))
        }
-        toast.toastError(res.msg)
-        return Promise.reject(res.msg || 'Error')
+        toast.toastError(res.message)
+        return Promise.reject(res.message || 'Error')
      }
      return res.data
    },
--- a/src/views/Home/HomeIndex.tsx
+++ b/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
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@ -0,0 +1,124 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const FirstPage = styled.div`
+  background-image: url('/images/home/three.svg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  padding: 100px 0 50px 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 FlexMain = styled(Flex)`
+  justify-content: center;
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    justify-content: start;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    justify-content: center;
+  }
+`
+
+const CardDiv = styled(Card)`
+  padding: 20px;
+`
+
+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 HighCity 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 (
+    <>
+      <FirstPage>
+        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+          <FlexMain>
+            <div>
+              <Stepper>
+                {list.map((item, index) => (
+                  <Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
+                    <CardDiv>
+                      <Heading>{item.title}</Heading>
+                      {item.list.map((childItem) => {
+                        return (
+                          <Text color="textSubtle" marginTop="15px" key={childItem.text}>
+                            {childItem.text}
+                          </Text>
+                        )
+                      })}
+                    </CardDiv>
+                  </Step>
+                ))}
+              </Stepper>
+            </div>
+          </FlexMain>
+        </StyledPage>
+      </FirstPage>
+    </>
+  )
+}
+
+export default CourseCom
--- a/src/views/Home/components/FlexItemCom.tsx
+++ b/src/views/Home/components/FlexItemCom.tsx
@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text } from '@pancakeswap/uikit'
+
+interface FlexProp {
+  name: string
+  value: string
+}
+
+const ScoreItem = styled.div`
+  width: 100%;
+`
+
+const ItemText = styled(Text)`
+  text-align: center;
+  font-size: 36px;
+`
+
+const ItemSubText = styled(Text)`
+  text-align: center;
+  font-size: 20px;
+`
+
+const FlexItemCom: React.FC<FlexProp> = ({ name, value }) => {
+  return (
+    <ScoreItem>
+      <ItemText color="text">{value}</ItemText>
+      <ItemSubText color="textSubtle">{name}</ItemSubText>
+    </ScoreItem>
+  )
+}
+export default FlexItemCom
--- a/src/views/Home/components/FristCom.tsx
+++ b/src/views/Home/components/FristCom.tsx
@ -0,0 +1,168 @@
+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 FirstPage = styled.div`
+  background-image: url('/images/home/bg.svg');
+  background-size: cover;
+  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 FlexDiv = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    justify-content: center;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+  }
+`
+const ImageDiv = styled.img`
+  ${({ theme }) => theme.mediaQueries.xs} {
+    justify-content: center;
+    width: 215px;
+    height: 215px;
+    margin-bottom: 20px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 315px;
+    height: 315px;
+    margin-bottom: 0px;
+  }
+`
+const BtnFlex = styled(Flex)`
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 60px;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 30px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 60px;
+  }
+`
+const RadiusBtn = styled(Button)`
+  border-radius: 50px;
+  width: 170px;
+  height: 60px;
+  font-size: 18px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 140px;
+    height: 50px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 170px;
+    height: 60px;
+  }
+`
+const WhiteBtn = styled(Button)`
+  border-radius: 50px;
+  width: 140px;
+  height: 30px;
+  border: 1px solid #1fc7d4;
+  margin: 0px 35px 10px 0;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 140px;
+    height: 50px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 170px;
+    height: 60px;
+  }
+`
+const BtnImage = styled(Image)`
+  width: 34px;
+  height: 34px;
+  margin-right: 12px;
+`
+
+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;
+  justify-content: space-between;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 50px;
+    padding: 30px 0;
+    flex-direction: column;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 127px;
+    padding: 59px 0;
+    flex-direction: unset;
+  }
+`
+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 (
+    <>
+      <FirstPage>
+        <StyledPage px={['16px', '24px']} mx="auto">
+          <FlexDiv>
+            <ImageDiv 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')}</Text>
+              <Text> {t('Hcc Nft')}</Text>
+              <Text>{t('Hcc BTC')}</Text>
+              <BtnFlex>
+                <RadiusBtn variant="primary">{t('Exchange')}</RadiusBtn>
+                <WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn>
+                <Flex>
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                </Flex>
+              </BtnFlex>
+            </InfoDiv>
+          </FlexDiv>
+          <ScoreDiv>
+            {burned.map((item) => {
+              return <FlexItemCom key={item.id} name={item.name} value={item.value} />
+            })}
+          </ScoreDiv>
+        </StyledPage>
+      </FirstPage>
+    </>
+  )
+}
+
+export default FristCom
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@ -0,0 +1,115 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Heading, Text, Box, Image } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const FirstPage = styled.div`
+  background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
+  padding: 100px 0 50px 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;
+  position: relative;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    padding: 94px 30px 37px 30px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 94px 92px 37px 92px;
+  }
+`
+
+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)`
+  width: 100%;
+  margin-top: 18px;
+  font-size: 36px;
+  color: #333333;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 10px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 18px;
+  }
+`
+
+const TextCom = styled(Text)`
+  margin-top: 35px;
+  text-align: center;
+  line-height: 32px;
+  width: 100%;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 35px;
+  }
+`
+
+const IntroduceCom: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <FirstPage>
+        <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">HighCitySwap</HeadingDiv>
+            <TextCom>{t('HighCitySwapInfo')}</TextCom>
+          </BoxMain>
+        </StyledPage>
+      </FirstPage>
+    </>
+  )
+}
+
+export default IntroduceCom
--- a/src/views/Home/index.ts
+++ b/src/views/Home/index.ts
@ -1 +1 @@
-export { default } from './Home'
+export { default } from './HomeIndex'
--- a/src/views/Nft/component/FlexText.tsx
+++ b/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>
+  )
+}
--- a/src/views/Nft/component/StepCom.tsx
+++ b/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>
+  )
+}
--- a/src/views/Nft/index.tsx
+++ b/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
--- a/src/views/Referral/components/BuyNftModal.tsx
+++ b/src/views/Referral/components/BuyNftModal.tsx
@ -0,0 +1,79 @@
+import React 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)`
+  width: 80%;
+
+  ${({ 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 UpBtn = styled(Button)`
+  width: 50%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+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 BuyNftModal: React.FC = () => {
+  const { t } = useTranslation()
+
+  // const onDismiss = () => {}
+  return (
+    <ModalDiv title={t('Buy commander NFT')}>
+      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+        <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="10％" />
+          <FlexCom name={t('Secondary split ratio')} value="5％" />
+          <FlexCom name={t('Contract address')} value={t('Contract address')} />
+          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
+          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
+        </InfoDiv>
+      </Flex>
+
+      <Flex>
+        <UpBtn>{t('Buy It Now')}</UpBtn>
+      </Flex>
+    </ModalDiv>
+  )
+}
+export default BuyNftModal
--- a/src/views/Referral/components/Connected.tsx
+++ b/src/views/Referral/components/Connected.tsx
@ -0,0 +1,65 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, useModal, Text } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import BuyNftModal from './BuyNftModal'
+import HeaderMain from './HeaderMain'
+
+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: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+`
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+const FooterDiv = styled.div`
+  margin: 0 auto 30px auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+
+const ConnectedCom: React.FC = () => {
+  const { t } = useTranslation()
+  const [onBuyModal] = useModal(<BuyNftModal />)
+
+  return (
+    <MainDiv>
+      <HeaderMain title={t('recommend')} />
+      <>
+        <FlexCom name={t('The lower the number of')} value="100000(人)" />
+        <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>
+      <FooterDiv>
+        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+      </FooterDiv>
+    </MainDiv>
+  )
+}
+export default ConnectedCom
--- a/src/views/Referral/components/FlexCom.tsx
+++ b/src/views/Referral/components/FlexCom.tsx
@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, Text } from '@pancakeswap/uikit'
+
+interface FlexProps {
+  name: string
+  value: string
+  paddings?: string
+  leftColor?: string
+  rightColor?: string
+}
+
+const FlexDiv = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+`
+const FlexCom: React.FC<FlexProps> = ({
+  name,
+  value,
+  paddings = '0px',
+  leftColor = 'text',
+  rightColor = 'textSubtle',
+}) => {
+  return (
+    <FlexDiv style={{ padding: paddings }}>
+      <Text color={leftColor}>{name}</Text>
+      <Text color={rightColor}>{value}</Text>
+    </FlexDiv>
+  )
+}
+export default FlexCom
--- a/src/views/Referral/components/HeaderMain.tsx
+++ b/src/views/Referral/components/HeaderMain.tsx
@ -0,0 +1,27 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Image, Heading } from '@pancakeswap/uikit'
+
+interface HeaderProp {
+  title: string
+}
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
+
+const TipDiv = styled(Image)`
+  position: absolute;
+  cursor: pointer;
+  top: 24px;
+  left: 0;
+`
+const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
+  return (
+    <HeadingDiv scale="xl" mb="24px" textAlign="center">
+      {title}
+    </HeadingDiv>
+  )
+}
+export default HeaderMain
--- a/src/views/Referral/components/Regimental.tsx
+++ b/src/views/Referral/components/Regimental.tsx
@ -0,0 +1,108 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text, Image, Button } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import HeaderMain from './HeaderMain'
+
+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: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+`
+
+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%;
+    height: 80vh;
+    overflow-y: auto;
+  }
+`
+
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+const FooterDiv = styled.div`
+  margin: 0 auto 30px auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+const LogoImage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const RegimentalCom: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <ContentDiv>
+      <MainDiv>
+        <HeaderMain title={t('Regimental recommendation')} />
+        <LogoImage>
+          <Image src="/images/recommend/logo.svg" width={249} height={249} />
+        </LogoImage>
+
+        <>
+          <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
+          <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            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>
+        <FooterDiv>
+          <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+          <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+          <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+        </FooterDiv>
+      </MainDiv>
+    </ContentDiv>
+  )
+}
+export default RegimentalCom
--- a/src/views/Referral/components/TextFlex.tsx
+++ b/src/views/Referral/components/TextFlex.tsx
@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex } from '@pancakeswap/uikit'
+
+interface TextProps {
+  color: string
+  text?: string
+}
+
+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;
+`
+
+const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
+  return <MainDiv style={{ background: color }}>{text}</MainDiv>
+}
+export default TextFlex
--- a/src/views/Referral/components/UnunitedCom.tsx
+++ b/src/views/Referral/components/UnunitedCom.tsx
@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading, Text } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 90px;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 80%;
+  margin: 80px auto 10px auto;
+  margin-left: 10%;
+  border-radius: 50px;
+`
+const FooterDiv = styled.div`
+  width: 80%;
+  margin: 0 auto 30px auto;
+  margin-left: 10%;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+
+const UnunitedCom: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <HeadingDiv scale="xl" mb="24px" textAlign="center">
+        {t('recommend')}
+      </HeadingDiv>
+      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
+      <FooterDiv>
+        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+      </FooterDiv>
+    </>
+  )
+}
+export default UnunitedCom
--- a/src/views/Referral/index.tsx
+++ b/src/views/Referral/index.tsx
@ -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