!18 调整

Merge pull request !18 from 骚/myf-dev

.env.development

@@ -20,4 +20,6 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
 
 
 REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
-# REACT_APP_REQUEST_URL = 'http://192.168.2.210:8080'
+# REACT_APP_REQUEST_URL = 'http://192.168.2.147:8080'
+# REACT_APP_REQUEST_URL = 'http://192.168.2.28:8080'
+# REACT_APP_REQUEST_URL = 'http://6o7g1fv83e.51xd.pub'

public/locales/zh-CN.json

@@ -1119,5 +1119,11 @@
   "The commission": "的提成！",
   "market value": "市值",
   "Loaded all": "已加载全部",
-  "Insufficient Balance": "余额不足"
+  "Insufficient Balance": "余额不足",
+  "HCC Currency amount": "HCC币总量",
+  "Lock up time": "锁仓时间",
+  "possess LP": "持有LP",
+  "capital pool": "资金池",
+  "Unclaimed income": "待领取收益",
+  "pledge": "质押"
 }

src/App.tsx

@@ -2,6 +2,7 @@ import React, { lazy, useEffect } from 'react'
 import { Router, Redirect, Route, Switch } from 'react-router-dom'
 import { ResetCSS } from '@pancakeswap/uikit'
 import { useDispatch } from 'react-redux'
+import { uccnDetail, indexInfo } from 'services/user'
 import BigNumber from 'bignumber.js'
 import useEagerConnect from 'hooks/useEagerConnect'
 import { usePollCoreFarmData, useFetchProfile, usePollBlockNumber } from 'state/hooks'

src/components/Menu/config.ts

@@ -26,27 +26,37 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
   //   ],
   // },
   {
-    label: t('Farms'),
+    label: t('Exchange'),
     icon: 'FarmIcon',
-    href: '/farms',
+    href: 'https://pancake.kiemtienonline360.com/#/swap',
   },
   {
-    label: t('Pools'),
+    label: t('Liquidity'),
-    icon: 'PoolIcon',
+    icon: 'FarmIcon',
-    href: '/pools',
+    href: 'https://pancake.kiemtienonline360.com/#/pool',
   },
+  // {
+  //   label: t('Farms'),
+  //   icon: 'FarmIcon',
+  //   href: '/farms',
+  // },
+  // {
+  //   label: t('Pools'),
+  //   icon: 'PoolIcon',
+  //   href: '/pools',
+  // },
   {
-    label: t('Referral'),
+    label: t('recommend'),
     icon: 'PoolIcon',
     href: '/referral',
   },
+  // {
+  //   label: 'NFT',
+  //   icon: 'TicketIcon',
+  //   href: '/nft',
+  // },
   {
-    label: 'NFT',
+    label: t('capital pool'),
-    icon: 'TicketIcon',
-    href: '/nft',
-  },
-  {
-    label: t('Board'),
     icon: 'TicketIcon',
     href: '/board',
   },

src/components/Menu/index.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
+import { useDispatch } from 'react-redux'
+import { uccnDetail, indexInfo } from 'services/user'
 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 { usePriceHccUsdt, useProfile } from 'state/hooks'
 import { useUnactiveAccount, useSignLogin, useAccount, useUserInfo } from 'state/userInfo/hooks'
 import useWeb3Provider from 'hooks/useActiveWeb3React'
@@ -36,6 +37,19 @@ const Menu = (props) => {
     dispatch(clearUserInfo())
     logout()
   }
+
+  const [socialLink, setSocialLink] = useState([])
+  const getDetails = async () => {
+    const result = await indexInfo()
+    const { data } = result.data
+    const list = data.externalLinkList.map((item, index) => {
+      const links = Object.keys(item.linkMap).map((key) => {
+        return { name: key, link: item.linkMap[key], icon: item.iconResource.url }
+      })
+      return { icon: item.iconResource.url, list: links, key: index + item.name }
+    })
+    setSocialLink(list)
+  }
   // 钱包登录后
   useEffect(() => {
     if (unActiveAccount && library.provider && hasWalletLogin) {
@@ -43,6 +57,10 @@ const Menu = (props) => {
       sign()
     }
   }, [unActiveAccount, hasWalletLogin, library])
+
+  useEffect(() => {
+    getDetails()
+  }, [])
   return (
     <UikitMenu
       account={account}
@@ -56,6 +74,7 @@ const Menu = (props) => {
       setLang={setLanguage}
       cakePriceUsd={hccPriceUsdt.toNumber()}
       links={config(t)}
+      socialLink={socialLink}
       {...props}
     />
   )

src/config/constants/contracts.ts

@@ -8,7 +8,7 @@ export default {
     56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
   },
   boardChef: {
-    97: '0xcf5411e9bd61bbd68ddf08e8a3f7680af8993cd0',
+    97: '0x0e28f80e6560f0ebbba4bbdf155a946053e5056a',
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约
   },
   boardRewardChef: {
@@ -16,7 +16,7 @@ export default {
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会分红合约
   },
   holderChef: {
-    97: '0x20b74dfb41172fdce43758c014959b5e2586d2cf',
+    97: '0xafa64f22a09fc197949c45281b2ad381a2b623a3',
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 持币人
   },
   holderRewardChef: {

src/config/constants/types.ts

@@ -188,5 +188,4 @@ export interface BoardConfig {
   contractAddress: Address
   contractRewardAddress: Address
   abi: any
-  // rewardAbi: any
 }

src/config/localization/languages.ts

@@ -30,34 +30,34 @@ export const ZHCN: Language = { locale: 'zh-CN', language: '简体中文', code:
 export const ZHTW: Language = { locale: 'zh-TW', language: '繁體中文', code: 'zh-tw' }
 
 export const languages = {
-  'ar-SA': AR,
+  // 'ar-SA': AR,
-  'bn-BD': BN,
+  // 'bn-BD': BN,
   'en-US': EN,
-  'de-DE': DE,
+  // 'de-DE': DE,
-  'el-GR': EL,
+  // 'el-GR': EL,
-  'es-ES': ESES,
+  // 'es-ES': ESES,
-  'fi-FI': FI,
+  // 'fi-FI': FI,
-  'fil-PH': FIL,
+  // 'fil-PH': FIL,
-  'fr-FR': FR,
+  // 'fr-FR': FR,
-  'hi-IN': HI,
+  // 'hi-IN': HI,
-  'hu-HU': HU,
+  // 'hu-HU': HU,
-  'id-ID': ID,
+  // 'id-ID': ID,
-  'it-IT': IT,
+  // 'it-IT': IT,
-  'ja-JP': JA,
+  // 'ja-JP': JA,
-  'ko-KR': KO,
+  // 'ko-KR': KO,
-  'nl-NL': NL,
+  // 'nl-NL': NL,
-  'pl-PL': PL,
+  // 'pl-PL': PL,
-  'pt-BR': PTBR,
+  // 'pt-BR': PTBR,
-  'pt-PT': PTPT,
+  // 'pt-PT': PTPT,
-  'ro-RO': RO,
+  // 'ro-RO': RO,
-  'ru-RU': RU,
+  // 'ru-RU': RU,
-  'sv-SE': SVSE,
+  // 'sv-SE': SVSE,
-  'ta-IN': TA,
+  // 'ta-IN': TA,
-  'tr-TR': TR,
+  // 'tr-TR': TR,
-  'uk-UA': UK,
+  // 'uk-UA': UK,
-  'vi-VN': VI,
+  // 'vi-VN': VI,
   'zh-CN': ZHCN,
-  'zh-TW': ZHTW,
+  // 'zh-TW': ZHTW,
 }
 
 export const languageList = Object.values(languages)

src/config/localization/translations.json

@@ -1247,5 +1247,11 @@
   "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！",
   "market value": "market value",
-  "Loaded all":"Loaded all"
+  "Loaded all": "Loaded all",
+  "HCC Currency amount": "HCC Currency amount",
+  "Lock up time": "Lock up time",
+  "possess LP": "possess LP",
+  "capital pool": "capital pool",
+  "Unclaimed income": "Unclaimed income",
+  "pledge": "pledge"
 }

src/services/user.ts

@@ -12,4 +12,11 @@ export const uccnDetail = () => {
     method: 'get',
   })
 }
+export const indexInfo = () => {
+  return request.request({
+    url: '/high_city/app/api/index/info',
+    method: 'get',
+  })
+}
+
 export default queryUserInfo

src/state/boards/fetchBoardsUser.ts

@@ -4,6 +4,7 @@ import boardABI from 'config/abi/board.json'
 import multicall from 'utils/multicall'
 import boardsConfig from 'config/constants/boards'
 import { getAddress, getBoardAddress } from 'utils/addressHelpers'
+import { getBalanceAmount } from 'utils/formatBalance'
 
 export const fetchBoardUserAllowances = async (account: string) => {
   const calls = boardsConfig.map((board) => {
@@ -57,9 +58,11 @@ export const fetchBoardUserInfo = async (account: string) => {
         stakedBalance: new BigNumber(userInfo.amount._hex).toJSON(),
         unLockTime: userInfo.unLockTime ? new BigNumber(userInfo.unLockTime._hex).toNumber() : 0,
         estimatedProfit: new BigNumber(estimatedProfit).toJSON(),
+        name: board.name,
+        amount: getBalanceAmount(new BigNumber(userInfo.amount?._hex)).toNumber(),
+        rewardDebt: getBalanceAmount(new BigNumber(userInfo.rewardDebt?._hex)).toNumber(),
       }
     }),
   )
-
   return data
 }

src/state/boards/index.ts

@@ -49,9 +49,11 @@ export const fetchBoardUserDataAsync = (account) => async (dispatch) => {
       stakedBalance: userInfo[index].stakedBalance,
       unlockTime: userInfo[index].unLockTime,
       estimatedProfit: userInfo[index].estimatedProfit,
+      name: userInfo[index].name,
+      amount: userInfo[index].amount,
+      rewardDebt: userInfo[index].rewardDebt,
     }
   })
-
   dispatch(setBoardsUserData({ arrayOfUserDataObjects }))
 }
 

src/state/types.ts

@@ -12,7 +12,7 @@ import {
   Team,
   BoardConfig,
 } from 'config/constants/types'
-import { UserInfo } from 'types/user'
+import { UserInfo, OutLink } from 'types/user'
 import { ReferralConfigInfo, ReferralRewardInfo } from 'types/referral'
 
 export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, State, unknown, AnyAction>
@@ -481,6 +481,11 @@ export interface UserInfoState {
   userInfo: UserInfo
   token?: string
   account?: string
+  outLink?: OutLink
+}
+
+export interface OutLinkState {
+  home: OutLink
 }
 
 export interface ReferralState {
@@ -519,4 +524,5 @@ export interface State {
   referral: ReferralState
   boards: BoardsState
   lottery: LotteryState
+  home?: OutLink
 }

src/types/user.ts

@@ -4,3 +4,26 @@ export interface UserInfo {
   name?: string
   address?: string
 }
+
+export interface OutLink {
+  externalLinkList?: OutLinkList[]
+  userCount?: string
+  volume?: string
+}
+
+export interface OutLinkList {
+  createdAt?: string
+  enabled?: boolean
+  iconResource?: IconResource
+  id?: string
+  englishName?: string
+  linkMap?: any
+  name?: string
+  orderNum?: string
+  remark?: string
+  updatedAt?: string
+}
+export interface IconResource {
+  path: string
+  url: string
+}

src/utils/formatBalance.ts

@@ -64,3 +64,7 @@ export const formatFixedNumber = (number: ethers.FixedNumber, displayDecimals =
   const [leftSide] = number.toString().split('.')
   return formatBigNumber(ethers.BigNumber.from(leftSide), displayDecimals, decimals)
 }
+
+export const formatDivNumber = (number: number, decimals = 4) => {
+  return new BigNumber(number).div(BIG_TEN.pow(decimals)).toNumber()
+}

src/views/Announcement/components/ListItem.tsx

@@ -6,6 +6,7 @@ interface InfoProps {
   title?: string
   content?: string
   publishTime?: number
+  top?: boolean
 }
 
 const FlexTable = styled(Flex)`
@@ -18,9 +19,10 @@ const FlexTable = styled(Flex)`
 const TableInfo = styled.div`
   width: 70%;
 `
-const TextTitle = styled(Text)`
+const FlexTitle = styled(Flex)`
   font-size: 18px;
   color: #333333;
+  align-items: center;
 `
 const TextInfo = styled(Text)`
   overflow: hidden;
@@ -36,13 +38,28 @@ const TextTime = styled(Text)`
   font-size: 18px;
   color: #999999;
 `
+const TextTop = styled(Flex)`
+  margin-left: 10px;
+  width: 50px;
+  height: 25px;
+  align-items: center;
+  justify-content: center;
+  background: #eff4f5;
+  opacity: 0.75;
+  border-radius: 15px;
+  font-size: 12px;
+  color: #1fc7d4;
+`
 
-const ListItem: React.FC<InfoProps> = ({ title, content, publishTime }) => {
+const ListItem: React.FC<InfoProps> = ({ title, content, publishTime, top = false }) => {
   return (
     <>
       <FlexTable>
         <TableInfo>
-          <TextTitle>{title}</TextTitle>
+          <FlexTitle>
+            {title}
+            {top ? <TextTop>置顶</TextTop> : ''}
+          </FlexTitle>
           <TextInfo>{content}</TextInfo>
         </TableInfo>
         <TextTime color="textSubtle">{publishTime}</TextTime>

src/views/Announcement/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import Container from 'components/Layout/Container'
+// import Container from 'components/Layout/Container'
 import { getAnnouncementPage, getAnnouncementDetail } from 'services/announcement'
 import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
 import ListItem from './components/ListItem'
@@ -12,14 +12,13 @@ interface DetailProps {
   content?: string
   publishTime?: number
 }
-const ContainerMain = styled(Container)`
+const ContainerMain = styled.div`
   background: ${({ theme }) => theme.colors.gradients.bubblegum};
   padding: 30px 0;
 `
 const MainDiv = styled.div`
   width: 100%;
   min-height: calc(100vh - 64px);
-  /* background: ${({ theme }) => theme.colors.gradients.bubblegum}; */
   box-sizing: border-box;
 `
 const TableDiv = styled.div`
@@ -130,10 +129,13 @@ const Announcement: React.FC = () => {
   const [list, setList] = useState([])
   const [totalVisible, setTotalVisible] = useState(false)
   const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
-  const getList = async (page: number, size: number, title?: string) => {
+  const getList = async (page: number, size: number, title?: string, type?: string) => {
     if (totalVisible) return
+    if (type) {
+      setList([])
+    }
     const data = await getAnnouncementPage({ page, size, title })
-    const dataList = [...list, ...data.content]
+    const dataList = type ? data.content : [...list, ...data.content]
     setList(dataList)
     if (data.content.length === 0 || !data.content) {
       setTotalVisible(true)
@@ -166,7 +168,8 @@ const Announcement: React.FC = () => {
   }
   const searchList = () => {
     setList([])
-    getList(1, 10, searchTitle)
+    setTotalVisible(false)
+    getList(1, 10, searchTitle, 'search')
   }
   const close = () => {
     setDetailVisible(false)
@@ -177,7 +180,7 @@ const Announcement: React.FC = () => {
       <div>
         {list.map((item) => (
           <Text key={item.id} onClick={() => lookDetail(item.id)}>
-            <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
+            <ListItem title={item.title} publishTime={item.publishTime} content={item.content} top={item.top} />
           </Text>
         ))}
       </div>
@@ -186,7 +189,6 @@ const Announcement: React.FC = () => {
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { value: inputValue } = evt.target
     setSearchTitle(inputValue)
-    console.log(searchTitle)
   }
   return (
     <ContainerMain>

src/views/Board/components/BoardCard/BoardCard.tsx

@@ -3,12 +3,14 @@ import BigNumber from 'bignumber.js'
 import styled, { keyframes } from 'styled-components'
 import { Flex, Text, Skeleton } from '@pancakeswap/uikit'
 import { provider as ProviderType } from 'web3-core'
+import { getDecimalAmountNumber } from 'utils/formatBalance'
 import { getBoardAddress } from 'utils/addressHelpers'
 import { useTranslation } from 'contexts/Localization'
 import ExpandableSectionButton from 'components/ExpandableSectionButton'
 import DetailsSection from './DetailsSection'
 import CardHeading from './CardHeading'
 import CardActionsContainer from './CardActionsContainer'
+import FlexText from './FlexText'
 
 const RainbowLight = keyframes`
 	0% {
@@ -60,6 +62,7 @@ const FCard = styled.div`
   padding: 24px;
   position: relative;
   text-align: center;
+  min-height: 410px;
 `
 
 const Divider = styled.div`
@@ -85,10 +88,18 @@ const NodeCard: React.FC<NodeCardProps> = ({ board, account }) => {
   const { t } = useTranslation()
 
   const [showExpandableSection, setShowExpandableSection] = useState(false)
-
   return (
     <FCard>
       <CardHeading name={t(board.name)} img={board.img} tokenSymbol={board.tokenSymbol} />
+      <div>
+        <FlexText name={t('HCC Currency amount')} value={board.userData?.amount} />
+        {board.userData?.name === 'Board' ? (
+          <FlexText name={t('Lock up time')} value={board.userData?.unlockTime} />
+        ) : (
+          ''
+        )}
+        <FlexText name={t('possess LP')} value={board.userData?.rewardDebt} />
+      </div>
       <CardActionsContainer board={board} account={account} />
       {/* <Divider />
       <ExpandableSectionButton

src/views/Board/components/BoardCard/CardActionsContainer.tsx

@@ -59,7 +59,7 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
         <StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} />
         <Flex flexDirection="column" alignItems="flex-start" mt="10">
           <Text color="textSubtle" fontSize="12px">
-            {t('TotalProfit')}
+            {t('Unclaimed income')}
           </Text>
           <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} />
         </Flex>

src/views/Board/components/BoardCard/FlexText.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, Text } from '@pancakeswap/uikit'
+
+interface FlexProp {
+  name?: string | number
+  value?: string | number
+}
+
+const FlexText: React.FC<FlexProp> = ({ name, value }) => {
+  return (
+    <Flex justifyContent="space-between">
+      <Text fontSize="12px">{name}</Text>
+      <Text fontSize="12px">{value}</Text>
+    </Flex>
+  )
+}
+export default FlexText

src/views/Board/components/BoardCard/StakeAction.tsx

@@ -59,7 +59,7 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
   }
   const renderStakingButtons = () => {
     return rawStakedBalance === 0 ? (
-      <Button onClick={onPresentDeposit}>{t(`Stake Token`)}</Button>
+      <Button onClick={onPresentDeposit}>{t(`pledge`)}</Button>
     ) : (
       <IconButtonWrapper>
         {userData.stakedBalance > 0 ? (

src/views/Board/components/DepositModal.tsx

@@ -45,7 +45,7 @@ const DepositModal: React.FC<DepositModalProps> = ({
   }, [fullBalance, setVal])
 
   return (
-    <Modal title={t('Stake tokens')} onDismiss={onDismiss}>
+    <Modal title={t('pledge')} onDismiss={onDismiss}>
       <ModalInput
         value={val}
         onSelectMax={handleSelectMax}

src/views/Board/index.tsx

@@ -18,6 +18,7 @@ import Page from 'components/Layout/Page'
 import { useBoards } from 'state/hooks'
 import useRefresh from 'hooks/useRefresh'
 import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
+import { fetchBoardUserInfo } from 'state/boards/fetchBoardsUser'
 import { useTranslation } from 'contexts/Localization'
 import BoardCard from './components/BoardCard/BoardCard'
 import HeaderItem from './components/HeaderItem'
@@ -51,22 +52,10 @@ const Boards: React.FC = () => {
   const [totalAmount, setTotalAmount] = useState(0)
   // 分红总额
   const [shareOutBonus, setShareOutBonus] = useState(0)
-  // // 获取资金池总额
+
-  // const getCapital = async () => {
+  const [boardNum, setBoardNum] = useState(0)
-  //   const calls = boardsConfig.map((board) => {
+  const [holderNum, setHolder] = useState(0)
-  //     const contractAddress = getAddress(board.contractAddress)
+
-  //     return {
-  //       address: contractAddress,
-  //       name: '_poolInfo',
-  //     }
-  //   })
-  //   let total = 0
-  //   const boardsPoolInfo = await multicall(boardABI, calls)
-  //   boardsPoolInfo.forEach((item) => {
-  //     total += new BigNumber(item.totalAmount._hex).toNumber()
-  //   })
-  //   setTotalAmount(total)
-  // }
   // 获取分红总额
   const fetchBoardShares = async () => {
     const boardsData = await Promise.all(
@@ -85,21 +74,32 @@ const Boards: React.FC = () => {
           },
         ])
         return {
+          pid: boardConfig.pid,
           totalAmount: getBalanceAmount(new BigNumber(boardPoolInfo.totalAmount._hex)).toNumber(),
           num: new BigNumber(boardPoolInfo?.num?._hex).toNumber(),
           waitWithdrawAmount: getBalanceAmount(new BigNumber(waitWithdrawAmount.balance._hex)).toNumber(),
         }
       }),
     )
-    console.log(boardsData)
+    let total = 0
+    let waitWithdrawAmountValue = 0
+    boardsData.forEach((item) => {
+      total += item.totalAmount
+      waitWithdrawAmountValue += item.waitWithdrawAmount
+      if (item.pid === 1) {
+        setBoardNum(item.num)
+      } else if (item.pid === 2) {
+        setHolder(item.waitWithdrawAmount)
+      }
+    })
+    setTotalAmount(total)
+    setShareOutBonus(waitWithdrawAmountValue)
   }
-
   useEffect(() => {
     dispatch(fetchBoardsPublicDataAsync())
     fetchBoardShares()
     if (account) {
       dispatch(fetchBoardUserDataAsync(account))
-      // getCapital()
     }
   }, [account, dispatch, fastRefresh])
 
@@ -125,8 +125,8 @@ const Boards: React.FC = () => {
         <FlexLayoutMain>
           <HeaderItem title={t('The total amount of dividends')} price={shareOutBonus} />
           {/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
-          <HeaderItem title={t('Number of boards')} price={1.0} />
+          <HeaderItem title={t('Number of boards')} price={boardNum} />
-          <HeaderItem title={t('Number of holders')} price={1.0} />
+          <HeaderItem title={t('Number of holders')} price={holderNum} />
         </FlexLayoutMain>
       </Header>
       {renderContent()}

src/views/Home/components/FristCom.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
-import { uccnDetail } from 'services/user'
+import { useDispatch } from 'react-redux'
+import { uccnDetail, indexInfo } from 'services/user'
 import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
+import { OutLink } from 'types/user'
 
 import FlexItemCom from './FlexItemCom'
 
@@ -128,20 +130,27 @@ const ScoreDiv = styled(Flex)`
   }
 `
 const InfoDiv = styled.div``
-
 const FristCom: React.FC = () => {
   const { t } = useTranslation()
-  // const [burned, BurnedState] = useState([
+  const dispatch = useDispatch()
-  //   { id: 'userNumb', name: '持有人数量', value: '0' },
+  const [detail, setDetail] = useState({
-  //   { id: 'tradingVolume', name: '交易量', value: '0' },
+    externalLinkList: [],
-  //   { id: 3, name: '市值', value: '62.55%' },
+    userCount: '',
-  // ])
+    volume: '',
-  const [detail, setDetail] = useState({ userNumb: 0, tradingVolume: 0, outsideChainVos: [] })
+  })
+  const [linkList, setLinkList] = useState([])
+
   const getDetail = async () => {
-    const data = await uccnDetail()
+    const data = await indexInfo()
+    const list = data.externalLinkList.map((item, index) => {
+      const links = Object.keys(item.linkMap).map((key) => {
+        return { name: key, link: item.linkMap[key], icon: item.iconResource.url }
+      })
+      return { icon: item.iconResource.url, name: item.name, list: links, key: index + item.name }
+    })
+    setLinkList(list)
     setDetail(data)
   }
-
   useEffect(() => {
     getDetail()
   }, [])
@@ -162,30 +171,33 @@ const FristCom: React.FC = () => {
               <Text> {t('Hcc Nft')}</Text>
               <Text>{t('Hcc BTC')}</Text>
               <BtnFlex>
-                <RadiusBtn variant="primary">{t('Exchange')}</RadiusBtn>
+                <RadiusBtn variant="primary" onClick={() => openLink('https://pancake.kiemtienonline360.com/#/swap')}>
-                <WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn>
+                  {t('Exchange')}
+                </RadiusBtn>
                 <Flex>
-                  {detail.outsideChainVos.map((item) => {
+                  {linkList?.map((item, index) => {
-                    return (
+                    return index < 6 ? (
                       <BtnImage
+                        key={item.key}
                         style={{ borderRadius: '50%' }}
-                        src={item.cover}
+                        src={item.icon}
+                        title={item.name}
                         alt={item.name}
                         width={34}
                         height={34}
-                        onClick={() => openLink(item.link)}
+                        onClick={() => openLink(item.list[0].link)}
                       />
+                    ) : (
+                      ''
                     )
                   })}
-                  {/* <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>
-            <FlexItemCom name={t('Number of holders')} valueNum={detail.userNumb} />
+            <FlexItemCom name={t('Number of holders')} valueNum={detail?.userCount} />
-            <FlexItemCom name={t('Your volume')} valueNum={detail.tradingVolume} />
+            <FlexItemCom name={t('Your volume')} valueNum={detail?.volume} />
             <FlexItemCom name={t('market value')} valueNum={0} />
             {/* {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />

src/views/Referral/components/BuyNftModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
 import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks'
 import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
@@ -66,8 +67,11 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
           />
           <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={`${referralRewardInfo.dividendFirst / 10000}%`} />
+          <FlexCom
-          <FlexCom name={t('Secondary split ratio')} value={`${referralRewardInfo.dividendSecond / 10000}%`} />
+            name={t('First stage sharing ratio')}
+            value={`${formatDivNumber(referralRewardInfo.dividendFirst)}%`}
+          />
+          <FlexCom name={t('Secondary split ratio')} value={`${formatDivNumber(referralRewardInfo.dividendSecond)}%`} />
           <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')} />

src/views/Referral/components/Connected.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
+import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
 import useToast from 'hooks/useToast'
 import { Button, useModal, Text } from '@pancakeswap/uikit'
@@ -75,16 +76,16 @@ const ConnectedCom: React.FC = () => {
     <MainDiv>
       <HeaderMain title={t('recommend')} />
       <>
-        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum}(人)`} />
+        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum}(人)`} />
-        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
+        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward}(HCC)`} />
         <FlexCom
           name={t('To get profit')}
-          value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+          value={`${referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive}(HCC)`}
         />
       </>
       <FooterBtn>
-        {referralNormalConfigInfo.receiveLimit <=
+        {referralNormalConfigInfo?.receiveLimit <=
-        referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+        referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
           <ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
             {t('Claim now')}
           </ButtonGet>
@@ -97,7 +98,7 @@ const ConnectedCom: React.FC = () => {
       <FooterDiv>
         <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>
+        )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${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> */}

src/views/Referral/components/Regimental.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
+import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
 import { useReferralCommanderConfigInfo, useReferralRewardInfo } from 'state/referral/hooks'
 import { Text, Image, Button, Heading } from '@pancakeswap/uikit'
@@ -105,17 +106,22 @@ const RegimentalCom: React.FC = () => {
         </LogoImage>
 
         <>
-          <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum}(人)`} />
+          <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum as number}(人)`} />
-          <FlexCom name={t('total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
+          <FlexCom name={t('total revenue')} value={`${referralRewardInfo.inviteReward as number}(HCC)`} />
           <FlexCom
             name={t('revenue')}
-            value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+            value={`${
+              ((referralRewardInfo.inviteReward as number) - referralRewardInfo.inviteRewardReceive) as number
+            }(HCC)`}
           />
           <FlexCom
             name={t('First stage sharing ratio')}
-            value={`${referralCommanderConfigInfo.dividendFirst / 10000}%`}
+            value={`${formatDivNumber(referralCommanderConfigInfo.dividendFirst as number)}%`}
+          />
+          <FlexCom
+            name={t('Secondary split ratio')}
+            value={`${formatDivNumber(referralCommanderConfigInfo.dividendSecond as number)}%`}
           />
-          <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%')}
@@ -138,8 +144,8 @@ const RegimentalCom: React.FC = () => {
         </>
 
         <FooterBtn>
-          {referralCommanderConfigInfo.receiveLimit <=
+          {referralCommanderConfigInfo?.receiveLimit <=
-          referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+          referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
             <ButtonGet variant="secondary" disabled={loading} onClick={handleWithdraw}>
               {t('Claim now')}
             </ButtonGet>
@@ -152,7 +158,7 @@ const RegimentalCom: React.FC = () => {
         <FooterDiv>
           <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>
+          )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${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> */}