!8 军团长

Merge pull request !8 from 骚/myf-dev

public/images/announcement/goback-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1fc7d4;
+      }
+    </style>
+  </defs>
+  <path id="展开" class="cls-1" d="M10.556,11.819c-.027.014-.05.038-.075.048a1.213,1.213,0,0,1-1.442-.257L.342,2.167A1.308,1.308,0,0,1,.391.352,1.227,1.227,0,0,1,2.158.4l7.8,8.477L17.882.436a1.225,1.225,0,0,1,1.735,0,1.307,1.307,0,0,1,.064,1.78L10.9,11.569c-.017.015-.043.022-.06.043a.313.313,0,0,0-.035.043,1.085,1.085,0,0,1-.25.163Z" transform="translate(12) rotate(90)"/>
+</svg>

public/images/announcement/search-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.83" height="16.891" viewBox="0 0 16.83 16.891">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path id="搜索" class="cls-1" d="M17.963,16.871l4.644,4.7a.774.774,0,1,1-1.1,1.088l-4.637-4.7a6.705,6.705,0,1,1,1.1-1.095Zm-5.257.993a5.157,5.157,0,1,0-5.157-5.157A5.157,5.157,0,0,0,12.706,17.863Z" transform="translate(-6 -6)"/>
+</svg>

public/locales/zh-CN.json

@@ -1105,6 +1105,18 @@
   "Assets and chain":"资产公链",
   "each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
   "last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
-  "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
-
+  "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费",
+  "announcement":"公告",
+  "return":"返回",
+  "Total capital pool":"资金池总额",
+  "The total amount of dividends":"分红总额",
+  "Pending dividend":"待领取分红",
+  "Number of boards":"董事会数量",
+  "Number of holders":"持有人数量",
+  "total revenue":"总收益",
+  "revenue":"收益",
+  "purchase":"购买",
+  "Enter a keyword search":"输入关键字搜索",
+  "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins":"使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得",
+  "The commission":"的提成！"
 }

src/App.tsx

@@ -52,6 +52,7 @@ const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
 const Board = lazy(() => import('./views/Board'))
 const Nft = lazy(() => import('./views/Nft'))
+const Announcement = lazy(() => import('./views/Announcement'))
 
 // This config is required for number formatting
 BigNumber.config({
@@ -103,6 +104,9 @@ const App: React.FC = () => {
             <Route path="/nft">
               <Nft />
             </Route>
+            <Route path="/announcement">
+              <Announcement />
+            </Route>
             {/* <Route path="/lottery">
               <Lottery />
             </Route>
@@ -153,6 +157,7 @@ const App: React.FC = () => {
             <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
             <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
             <Route exact strict path="/nft" component={Nft} />
+            <Route exact strict path="/announcement" component={Announcement} />
 
             {/* Redirect */}
             {/* <Route path="/staking">

src/components/Menu/config.ts

@@ -50,6 +50,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
     icon: 'TicketIcon',
     href: '/board',
   },
+  {
+    label: t('announcement'),
+    icon: 'TicketIcon',
+    href: '/announcement',
+  },
   // {
   //   label: t('Prediction (BETA)'),
   //   icon: 'PredictionsIcon',

src/config/localization/translations.json

@@ -1232,5 +1232,18 @@
   "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"
+  "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
+  "announcement":"announcement",
+  "return":"return",
+  "Total capital pool":"Total capital pool",
+  "The total amount of dividends":"The total amount of dividends",
+  "Pending dividend":"Pending dividend",
+  "Number of boards":"Number of boards",
+  "Number of holders":"Number of holders",
+  "total revenue":"total revenue",
+  "revenue":"revenue",
+  "purchase":"purchase",
+  "Enter a keyword search":"Enter a keyword search",
+  "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins":"By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins",
+  "The commission":"The commission！"
 }

src/services/announcement.ts

@@ -0,0 +1,18 @@
+import request from 'utils/request'
+
+export const getAnnouncementPage = (params) => {
+  return request.request({
+    url: '/high_city/app/api/announcement/page',
+    method: 'get',
+    params,
+  })
+}
+
+export const getAnnouncementDetail = (id) => {
+  return request.request({
+    url: `/high_city/app/api/announcement/detail/${id}`,
+    method: 'get',
+  })
+}
+
+export default getAnnouncementPage

src/services/referral.ts

@@ -14,4 +14,11 @@ export const withdrawReward = () => {
   })
 }
 
+export const inviteReceive = () => {
+  return request.request({
+    url: '/high_city/app/api/invite/reward/receive',
+    method: 'get',
+  })
+}
+
 export default getReferralInfo

src/types/referral.ts

@@ -6,6 +6,7 @@ export enum ReferralConfigType {
 export interface ReferralConfigInfo {
   dividendFirst?: number
   dividendSecond?: number
+  receiveLimit?: number
   id?: number
   properties?: Record<string, unknown>
   type?: string

src/views/Announcement/components/Detail.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react'
+import dayjs from 'dayjs'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
+
+interface ListProps {
+  title?: string
+  publishTime?: number
+  content?: string
+  close: () => void
+}
+
+const DetailDiv = styled.div`
+  width: 80%;
+  background: rgba(255, 255, 255);
+  border-radius: 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 40px 30px;
+`
+const HeaderFlex = styled(Flex)`
+  align-items: center;
+  cursor: pointer;
+`
+const TextBack = styled(Text)`
+  font-size: 18px;
+  color: #1fc7d4;
+  margin-left: 10px;
+`
+const HeadingText = styled(Heading)`
+  margin-top: 17px;
+  color: #333333;
+  font-size: 32px;
+`
+const TextTime = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  padding: 30px 0 20px 0;
+  border-bottom: 1px solid #e3e3e3;
+`
+const TextInfo = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  margin-top: 30px;
+`
+
+const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
+  const { t } = useTranslation()
+  const closeDetail = () => {
+    close()
+  }
+  return (
+    <>
+      <DetailDiv>
+        <HeaderFlex onClick={closeDetail}>
+          <Image src="/images/announcement/goback-icon.svg" alt="" width={12} height={20} />
+          <TextBack>{t('return')}</TextBack>
+        </HeaderFlex>
+        <HeadingText scale="xl">{title}</HeadingText>
+        <TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
+        <TextInfo>{content}</TextInfo>
+      </DetailDiv>
+    </>
+  )
+}
+export default Detail

src/views/Announcement/components/ListItem.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Text, Flex } from '@pancakeswap/uikit'
+
+interface InfoProps {
+  title?: string
+  content?: string
+  publishTime?: number
+}
+
+const FlexTable = styled(Flex)`
+  padding: 25px 0 20px 0;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  border-bottom: 1px solid #e3e3e3;
+`
+const TableInfo = styled.div`
+  width: 70%;
+`
+const TextTitle = styled(Text)`
+  font-size: 18px;
+  color: #333333;
+`
+const TextInfo = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 14px;
+  color: #666666;
+  margin-top: 10px;
+`
+const TextTime = styled(Text)`
+  font-size: 18px;
+  color: #999999;
+`
+
+const ListItem: React.FC<InfoProps> = ({ title, content, publishTime }) => {
+  return (
+    <>
+      <FlexTable>
+        <TableInfo>
+          <TextTitle>{title}</TextTitle>
+          <TextInfo>{content}</TextInfo>
+        </TableInfo>
+        <TextTime color="textSubtle">{publishTime}</TextTime>
+      </FlexTable>
+    </>
+  )
+}
+export default ListItem

src/views/Announcement/index.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { getAnnouncementPage, getAnnouncementDetail } from 'services/announcement'
+import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
+import ListItem from './components/ListItem'
+import Detail from './components/Detail'
+
+interface DetailProps {
+  title?: string
+  content?: string
+  publishTime?: number
+}
+
+const MainDiv = styled.div`
+  width: 100%;
+  min-height: calc(100vh - 64px);
+  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+  box-sizing: border-box;
+  padding: 30px 0;
+`
+const TableDiv = styled.div`
+  width: 80%;
+  background: rgba(255, 255, 255);
+  border-radius: 20px;
+  margin: 0 auto;
+`
+
+const SearchDiv = styled(Flex)`
+  box-sizing: border-box;
+  border-bottom: 1px solid #e3e3e3;
+  width: 100%;
+  height: 105px;
+  align-items: center;
+  justify-content: center;
+`
+
+const InputMain = styled(Flex)`
+  width: 60%;
+  height: 45px;
+  border: 1px solid #1fc7d4;
+  border-radius: 30px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+`
+
+const SearchInput = styled(Input)`
+  background-color: transparent;
+  width: calc(100% - 80px);
+  :focus {
+  }
+`
+const SearchBtn = styled.div`
+  width: 50px;
+  height: 37px;
+  background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
+  border-radius: 19px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ListMain = styled.div`
+  box-sizing: border-box;
+  padding: 0 30px;
+`
+
+const FlexTable = styled(Flex)`
+  padding: 25px 0 20px 0;
+  align-items: center;
+  justify-content: space-between;
+`
+const TableInfo = styled.div`
+  width: 70%;
+`
+const TextTitle = styled(Text)`
+  font-size: 18px;
+  color: #333333;
+`
+const DetailDiv = styled.div`
+  width: 80%;
+  background: rgba(255, 255, 255);
+  border-radius: 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 40px 30px;
+`
+const HeaderFlex = styled(Flex)`
+  align-items: center;
+  cursor: pointer;
+`
+const TextBack = styled(Text)`
+  font-size: 18px;
+  color: #1fc7d4;
+  margin-left: 10px;
+`
+const HeadingText = styled(Heading)`
+  margin-top: 17px;
+  color: #333333;
+  font-size: 32px;
+`
+const TextTime = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  padding: 30px 0 20px 0;
+  border-bottom: 1px solid #e3e3e3;
+`
+const TextInfo = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  margin-top: 30px;
+`
+
+const Announcement: React.FC = () => {
+  const { t } = useTranslation()
+  const loadMoreRef = useRef<HTMLDivElement>(null)
+
+  const [detailVisible, setDetailVisible] = useState(false)
+  const [list, setList] = useState([])
+  const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
+  const getList = async (page: number, size: number) => {
+    const data = await getAnnouncementPage({ page, size })
+    console.log(data.content)
+    setList(data.content)
+  }
+  useEffect(() => {
+    getList(1, 10)
+  }, [])
+
+  const lookDetail = async (id) => {
+    const data = await getAnnouncementDetail(id)
+    setDetailData(data)
+    setDetailVisible(true)
+  }
+  const searchList = () => {
+    getList(1, 10)
+  }
+  const close = () => {
+    setDetailVisible(false)
+  }
+
+  const renderContent = (): JSX.Element => {
+    return (
+      <div>
+        {list.map((item) => (
+          <Text key={item.id} onClick={() => lookDetail(item.id)}>
+            <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
+          </Text>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <MainDiv>
+      {detailVisible ? (
+        <Detail
+          title={detailData.title}
+          publishTime={detailData.publishTime}
+          content={detailData.content}
+          close={close}
+        />
+      ) : (
+        <TableDiv>
+          <SearchDiv>
+            <InputMain>
+              <SearchInput placeholder={t('Enter a keyword search')} />
+              <SearchBtn onClick={searchList}>
+                <Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
+              </SearchBtn>
+            </InputMain>
+          </SearchDiv>
+          <ListMain>
+            {renderContent()}
+            <div ref={loadMoreRef} />
+            {/* {list.map((item) => (
+              <Text key={item.id} onClick={() => lookDetail(item.id)}>
+                <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
+              </Text>
+            ))} */}
+          </ListMain>
+        </TableDiv>
+      )}
+    </MainDiv>
+  )
+}
+export default Announcement

src/views/Board/components/HeaderItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text } from '@pancakeswap/uikit'
+import styled from 'styled-components'
+
+interface InfoProps {
+  title: string
+  price: number
+}
+
+const HeaderMain = styled.div`
+  height: 84px;
+  background: linear-gradient(180deg, #c2f9ff 0%, #b596f5 100%);
+  box-shadow: 0px 2px 1px #371588;
+  opacity: 0.5;
+  border-radius: 20px;
+  box-sizing: border-box;
+  padding: 16px 0 0 20px;
+  text-align: left;
+`
+
+const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
+  return (
+    <>
+      <HeaderMain>
+        <Text color="text" fontSize="24px">
+          {price}
+        </Text>
+        <Text color="textSubtle" fontSize="14px">
+          {title}
+        </Text>
+      </HeaderMain>
+    </>
+  )
+}
+
+export default HeaderItem

src/views/Board/index.tsx

@@ -12,6 +12,7 @@ import useRefresh from 'hooks/useRefresh'
 import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
 import { useTranslation } from 'contexts/Localization'
 import BoardCard from './components/BoardCard/BoardCard'
+import HeaderItem from './components/HeaderItem'
 
 const Header = styled.div`
   padding: 32px 0px;
@@ -27,6 +28,9 @@ const Header = styled.div`
 const SecondText = styled(Text)`
   white-space: break-spaces;
 `
+const FlexLayoutMain = styled(FlexLayout)`
+  margin-top: 20px;
+`
 const Boards: React.FC = () => {
   const { t } = useTranslation()
   const boardsList = useBoards()
@@ -58,13 +62,22 @@ const Boards: React.FC = () => {
     <>
       <Header>
         <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
-          {t('Boards')}
+          {t('Total capital pool')}
         </Heading>
-        <SecondText fontSize="28px" color="text">
+        {/* <SecondText fontSize="28px" color="text">
           {t(
             'Joining the board of directors will obtain the governance token xcandy \n participate in the governance of the project, vote, obtain additional pledge income, \n and have a higher invitation airdrop reward',
           )}
-        </SecondText>
+        </SecondText> */}
+        <Text fontSize="32px" color="text">
+          1.000.000.000.000
+        </Text>
+        <FlexLayoutMain>
+          <HeaderItem title={t('The total amount of dividends')} price={1.0} />
+          <HeaderItem title={t('Pending dividend')} price={1.0} />
+          <HeaderItem title={t('Number of boards')} price={1.0} />
+          <HeaderItem title={t('Number of holders')} price={1.0} />
+        </FlexLayoutMain>
       </Header>
       <Page>{renderContent()}</Page>
     </>

src/views/Referral/components/BuyNftModal.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
+import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks'
 import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
 import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
-import { useBuyTransaction } from '../hooks'
 
 const ModalDiv = styled(Modal)`
   width: 80%;
@@ -50,15 +50,19 @@ const ImageDiv = styled(Image)`
 
 const BuyNftModal: React.FC = () => {
   const { t } = useTranslation()
-  const sendBuyTransaction = useBuyTransaction()
+  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
+  const referralRewardInfo = useReferralNormalConfigInfo()
   // const onDismiss = () => {}
-  const handleBuy = () => {
-    sendBuyTransaction()
-  }
   return (
-    <ModalDiv title={t('Buy commander NFT')}>
+    <ModalDiv title={`${t('purchase')}${referralCommanderConfigInfo.properties.name}`}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
-        <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
+        <ImageDiv
+          src={referralCommanderConfigInfo.properties.cover as string}
+          width={250}
+          height={250}
+          marginBottom="20px"
+        />
+        {/* <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')}
@@ -66,8 +70,8 @@ const BuyNftModal: React.FC = () => {
           />
           <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('First stage sharing ratio')} value={`${referralRewardInfo.dividendFirst / 10000}%`} />
+          <FlexCom name={t('Secondary split ratio')} value={`${referralRewardInfo.dividendSecond / 10000}%`} />
           <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')} />
@@ -75,7 +79,7 @@ const BuyNftModal: React.FC = () => {
       </Flex>
 
       <Flex>
-        <UpBtn onClick={handleBuy}>{t('Buy It Now')}</UpBtn>
+        <UpBtn>{t('Buy It Now')}</UpBtn>
       </Flex>
     </ModalDiv>
   )

src/views/Referral/components/Connected.tsx

@@ -2,6 +2,12 @@ import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Button, useModal, Text } from '@pancakeswap/uikit'
+import { inviteReceive } from 'services/referral'
+import {
+  useReferralNormalConfigInfo,
+  useReferralCommanderConfigInfo,
+  useReferralRewardInfo,
+} from 'state/referral/hooks'
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
 import HeaderMain from './HeaderMain'
@@ -13,6 +19,13 @@ const ButtonDiv = styled(Button)`
   border: 1px solid ${({ theme }) => theme.colors.textDisabled};
   color: ${({ theme }) => theme.colors.textDisabled};
 `
+const ButtonGet = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid #1fc7d4;
+  color: #1fc7d4;
+`
 
 const UpBtn = styled(Button)`
   width: 100%;
@@ -41,23 +54,44 @@ const TextDiv = styled(Text)`
 const ConnectedCom: React.FC = () => {
   const { t } = useTranslation()
   const [onBuyModal] = useModal(<BuyNftModal />)
-
+  const referralNormalConfigInfo = useReferralNormalConfigInfo()
+  console.log('referralNormalConfigInfo:', referralNormalConfigInfo)
+  const referralRewardInfo = useReferralRewardInfo()
+  console.log('referralRewardInfo:', referralRewardInfo)
+  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
+  const getInviteReceive = async () => {
+    await inviteReceive()
+  }
   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)" />
+        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum}(人)`} />
+        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
+        <FlexCom
+          name={t('To get profit')}
+          value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+        />
       </>
       <FooterBtn>
+        {referralNormalConfigInfo.receiveLimit <=
+        referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+          <ButtonGet onClick={getInviteReceive} variant="secondary">
+            {t('Claim now')}
+          </ButtonGet>
+        ) : (
           <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>{`${t(
+          'By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins',
+        )}${referralCommanderConfigInfo.dividendFirst / 10000}%${t('The commission')}`}</TextDiv>
+        {/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
         <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
-        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv> */}
       </FooterDiv>
     </MainDiv>
   )

src/views/Referral/components/HeaderMain.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Image, Heading } from '@pancakeswap/uikit'
 
 interface HeaderProp {
-  title: string
+  title?: string
 }
 
 const HeadingDiv = styled(Heading)`
@@ -17,7 +17,7 @@ const TipDiv = styled(Image)`
   top: 24px;
   left: 0;
 `
-const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
+const HeaderMain: React.FC<HeaderProp> = ({ title = '' }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
       {title}

src/views/Referral/components/Regimental.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import { Text, Image, Button } from '@pancakeswap/uikit'
+import { inviteReceive } from 'services/referral'
+import { useReferralCommanderConfigInfo, useReferralRewardInfo } from 'state/referral/hooks'
+import { Text, Image, Button, Heading } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
-import HeaderMain from './HeaderMain'
 
 const ButtonDiv = styled(Button)`
   width: 100%;
@@ -12,6 +13,13 @@ const ButtonDiv = styled(Button)`
   border: 1px solid ${({ theme }) => theme.colors.textDisabled};
   color: ${({ theme }) => theme.colors.textDisabled};
 `
+const ButtonGet = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid #1fc7d4;
+  color: #1fc7d4;
+`
 
 const UpBtn = styled(Button)`
   width: 100%;
@@ -62,24 +70,48 @@ const LogoImage = styled.div`
   align-items: center;
   justify-content: center;
 `
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
 
 const RegimentalCom: React.FC = () => {
   const { t } = useTranslation()
+  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
+  console.log(referralCommanderConfigInfo)
+  const referralRewardInfo = useReferralRewardInfo()
+  const getInviteReceive = async () => {
+    await inviteReceive()
+  }
   return (
     <ContentDiv>
       <MainDiv>
-        <HeaderMain title={t('Regimental recommendation')} />
+        <HeadingDiv scale="xl" mb="24px" textAlign="center">
+          {referralCommanderConfigInfo.properties.name}
+        </HeadingDiv>
         <LogoImage>
-          <Image src="/images/recommend/logo.svg" width={249} height={249} />
+          <Image src={referralCommanderConfigInfo.properties.cover as string} width={249} height={249} />
+          {/* <Image src="/images/recommend/logo.svg" width={249} height={249} /> */}
         </LogoImage>
 
         <>
-          <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
+          <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum}(人)`} />
+          <FlexCom name={t('total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
+          <FlexCom
+            name={t('revenue')}
+            value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+          />
+          <FlexCom
+            name={t('First stage sharing ratio')}
+            value={`${referralCommanderConfigInfo.dividendFirst / 10000}%`}
+          />
+          <FlexCom name={t('Secondary split ratio')} value={`${referralCommanderConfigInfo.dividendSecond / 10000}%`} />
+          {/* <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)"
+            value={`${referralCommanderConfigInfo.dividendFirst}%`}
           />
           <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
           <FlexCom
@@ -88,18 +120,32 @@ const RegimentalCom: React.FC = () => {
             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)" />
+          <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
+          <FlexCom
+            name={t('To get profit')}
+            value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+          /> */}
         </>
 
         <FooterBtn>
+          {referralCommanderConfigInfo.receiveLimit <=
+          referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+            <ButtonGet variant="secondary" onClick={getInviteReceive}>
+              {t('Claim now')}
+            </ButtonGet>
+          ) : (
             <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
-          {/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
+          )}
+
+          {/* <UpBtn>{t('Upgrade commander')}</UpBtn> */}
         </FooterBtn>
         <FooterDiv>
-          <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+          <TextDiv>{`${t(
+            'By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins',
+          )}${referralCommanderConfigInfo.dividendFirst / 10000}%${t('The commission')}`}</TextDiv>
+          {/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
           <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
-          <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+          <TextDiv color="textSubtle">{t('commission fee')}</TextDiv> */}
         </FooterDiv>
       </MainDiv>
     </ContentDiv>

src/views/Referral/components/UnunitedCom.tsx

@@ -32,9 +32,9 @@ const UnunitedCom: React.FC = () => {
       </HeadingDiv>
       <UnlockButtonDiv />
       <FooterDiv>
-        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        {/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
         <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
-        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv> */}
       </FooterDiv>
     </>
   )

src/views/Referral/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { fetchReferralInfoAsync } from 'state/actions'
 import { useAccount } from 'state/userInfo/hooks'
-import { useReferralCommanderConfigInfo } from 'state/referral/hooks'
+import { useReferralIsCommander } from 'state/referral/hooks'
 import { useDispatch } from 'react-redux'
 import UnunitedCom from './components/UnunitedCom'
 import ConnectedCom from './components/Connected'
@@ -37,20 +37,31 @@ const ContentDiv = styled.div`
 `
 
 const Nft: React.FC = () => {
-  //  邀请false普通邀请 true军团长邀请
-  const [type, setType] = useState(false)
   const dispatch = useDispatch()
   const account = useAccount()
 
-  const referralConfigInfo = useReferralCommanderConfigInfo()
-  console.log(referralConfigInfo)
+  const referralIsCommander = useReferralIsCommander()
+  // const referralIsCommander = false
+  console.log('referralIsCommander:', referralIsCommander)
   useEffect(() => {
     dispatch(fetchReferralInfoAsync(account))
   }, [account])
 
   return (
     <MainDiv>
-      {type ? <RegimentalCom /> : <ContentDiv>{account ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
+      {referralIsCommander ? (
+        <>
+          {account ? (
+            <RegimentalCom />
+          ) : (
+            <ContentDiv>
+              <UnunitedCom />
+            </ContentDiv>
+          )}
+        </>
+      ) : (
+        <ContentDiv>{account ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>
+      )}
     </MainDiv>
   )
 }