部分董事会

2022-04-28 23:58:30 +08:00 · 2022-04-28 23:58:30 +08:00 · 3841c754f2
parent eacfbf4406
commit 3841c754f2
14 changed files with 568 additions and 82 deletions
--- a/public/locales/zh-CN.json
+++ b/public/locales/zh-CN.json
@ -1119,5 +1119,8 @@
  "The commission": "的提成！",
  "market value": "市值",
  "Loaded all": "已加载全部",
-  "Insufficient Balance": "余额不足"
+  "Insufficient Balance": "余额不足",
+  "HCC Currency amount": "HCC币总量",
+  "Lock up time": "锁仓时间",
+  "possess LP": "持有LP"
 }
--- a/src/config/abi/boardPool.json
+++ b/src/config/abi/boardPool.json
@ -0,0 +1,198 @@
+[
+  {
+    "inputs": [
+      { "internalType": "contract IERC20", "name": "_HCC", "type": "address" },
+      { "internalType": "address", "name": "_HCCBODReawardPool", "type": "address" },
+      { "internalType": "uint256", "name": "_minStakeAmount", "type": "uint256" }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "value", "type": "uint256" }
+    ],
+    "name": "Deposit",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+    ],
+    "name": "EmergencyWithdraw",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+    ],
+    "name": "Harvest",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "previousOwner", "type": "address" },
+      { "indexed": true, "internalType": "address", "name": "newOwner", "type": "address" }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "internalType": "address", "name": "newHCCBODReawardPool", "type": "address" }],
+    "name": "SetHCCBODReawardPoolEvent",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "internalType": "uint256", "name": "newLockTime", "type": "uint256" }],
+    "name": "SetLockTimeEvent",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "internalType": "uint256", "name": "newMinStakeAmount", "type": "uint256" }],
+    "name": "SetMinStakeAmontEvent",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+    ],
+    "name": "Withdraw",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "HCC",
+    "outputs": [{ "internalType": "contract IERC20", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "HCCBODReawardPool",
+    "outputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "_poolInfo",
+    "outputs": [
+      { "internalType": "uint256", "name": "accHCCPerShare", "type": "uint256" },
+      { "internalType": "uint256", "name": "totalAmount", "type": "uint256" },
+      { "internalType": "uint256", "name": "num", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "_user", "type": "address" }],
+    "name": "_userInfo",
+    "outputs": [
+      { "internalType": "uint256", "name": "total", "type": "uint256" },
+      { "internalType": "uint256", "name": "reward", "type": "uint256" },
+      { "internalType": "uint256", "name": "lp", "type": "uint256" },
+      { "internalType": "uint256", "name": "lockTime", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "_amount", "type": "uint256" }],
+    "name": "deposit",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  { "inputs": [], "name": "emergencyWithdrawHCC", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  { "inputs": [], "name": "harvest", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [],
+    "name": "lockTime",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "minStakeAmount",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "paused",
+    "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "_user", "type": "address" }],
+    "name": "pendingHCC",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  { "inputs": [], "name": "renounceOwnership", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [{ "internalType": "address", "name": "_HCCBODReawardPool", "type": "address" }],
+    "name": "setHCCBODReawardPool",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "_lockTime", "type": "uint256" }],
+    "name": "setLockTime",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "_minStakeAmount", "type": "uint256" }],
+    "name": "setMinStakeAmount",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  { "inputs": [], "name": "setPause", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [{ "internalType": "address", "name": "newOwner", "type": "address" }],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  { "inputs": [], "name": "updatePool", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "name": "userInfo",
+    "outputs": [
+      { "internalType": "uint256", "name": "amount", "type": "uint256" },
+      { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" },
+      { "internalType": "uint256", "name": "unLockTime", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  { "inputs": [], "name": "withdrawHCC", "outputs": [], "stateMutability": "nonpayable", "type": "function" }
+]
--- a/src/config/abi/holderPool.json
+++ b/src/config/abi/holderPool.json
@ -0,0 +1,182 @@
+[
+  {
+    "inputs": [
+      { "internalType": "contract IERC20", "name": "_HCC", "type": "address" },
+      { "internalType": "address", "name": "_HCCStakeReawardPool", "type": "address" },
+      { "internalType": "uint256", "name": "_minStakeAmount", "type": "uint256" }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "value", "type": "uint256" }
+    ],
+    "name": "Deposit",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+    ],
+    "name": "EmergencyWithdraw",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+    ],
+    "name": "Harvest",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "previousOwner", "type": "address" },
+      { "indexed": true, "internalType": "address", "name": "newOwner", "type": "address" }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "internalType": "address", "name": "newHCCStakeReawardPool", "type": "address" }],
+    "name": "SetHCCStakeReawardPoolEvent",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "internalType": "uint256", "name": "newLockTime", "type": "uint256" }],
+    "name": "SetLockTimeEvent",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "internalType": "uint256", "name": "newMinStakeAmount", "type": "uint256" }],
+    "name": "SetMinStakeAmontEvent",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
+      { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+    ],
+    "name": "Withdraw",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "HCC",
+    "outputs": [{ "internalType": "contract IERC20", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "HCCStakeReawardPool",
+    "outputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "_poolInfo",
+    "outputs": [
+      { "internalType": "uint256", "name": "accHCCPerShare", "type": "uint256" },
+      { "internalType": "uint256", "name": "totalAmount", "type": "uint256" },
+      { "internalType": "uint256", "name": "num", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "_user", "type": "address" }],
+    "name": "_userInfo",
+    "outputs": [
+      { "internalType": "uint256", "name": "total", "type": "uint256" },
+      { "internalType": "uint256", "name": "reward", "type": "uint256" },
+      { "internalType": "uint256", "name": "lp", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "_amount", "type": "uint256" }],
+    "name": "deposit",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  { "inputs": [], "name": "emergencyWithdrawHCC", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  { "inputs": [], "name": "harvest", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [],
+    "name": "minStakeAmount",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "paused",
+    "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "_user", "type": "address" }],
+    "name": "pendingHCC",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  { "inputs": [], "name": "renounceOwnership", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [{ "internalType": "address", "name": "_HCCStakeReawardPool", "type": "address" }],
+    "name": "setHCCStakeReawardPool",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "_minStakeAmount", "type": "uint256" }],
+    "name": "setMinStakeAmount",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  { "inputs": [], "name": "setPause", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [{ "internalType": "address", "name": "newOwner", "type": "address" }],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  { "inputs": [], "name": "updatePool", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+  {
+    "inputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "name": "userInfo",
+    "outputs": [
+      { "internalType": "uint256", "name": "amount", "type": "uint256" },
+      { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  { "inputs": [], "name": "withdrawHCC", "outputs": [], "stateMutability": "nonpayable", "type": "function" }
+]
--- a/src/config/constants/boards.ts
+++ b/src/config/constants/boards.ts
@ -1,6 +1,8 @@
 import addresses from 'config/constants/contracts'
 import boardAbi from 'config/abi/board.json'
+import boardPoolAbi from 'config/abi/boardPool.json'
 import holderAbi from 'config/abi/holder.json'
+import holderPoolAbis from 'config/abi/holderPool.json'
 import tokens from './tokens'
 import { BoardConfig } from './types'

@ -15,6 +17,7 @@ const boardsList: BoardConfig[] = [
    contractAddress: addresses.boardChef,
    contractRewardAddress: addresses.boardRewardChef,
    abi: boardAbi,
+    poolAbi: boardPoolAbi,
  },
  {
    pid: 2,
@ -26,6 +29,7 @@ const boardsList: BoardConfig[] = [
    contractAddress: addresses.holderChef,
    contractRewardAddress: addresses.holderRewardChef,
    abi: holderAbi,
+    poolAbi: holderPoolAbis,
  },
 ]

--- a/src/config/constants/contracts.ts
+++ b/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: {
--- a/src/config/constants/types.ts
+++ b/src/config/constants/types.ts
@ -188,5 +188,6 @@ export interface BoardConfig {
  contractAddress: Address
  contractRewardAddress: Address
  abi: any
+  poolAbi: any
  // rewardAbi: any
 }
--- a/src/config/localization/translations.json
+++ b/src/config/localization/translations.json
@ -1247,5 +1247,8 @@
  "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"
 }
--- a/src/utils/formatBalance.ts
+++ b/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()
+}
--- a/src/views/Board/components/BoardCard/BoardCard.tsx
+++ b/src/views/Board/components/BoardCard/BoardCard.tsx
@ -9,6 +9,7 @@ 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% {
@ -79,9 +80,10 @@ interface NodeCardProps {
  removed: boolean
  provider?: ProviderType
  account?: string
+  list?: any
 }

-const NodeCard: React.FC<NodeCardProps> = ({ board, account }) => {
+const NodeCard: React.FC<NodeCardProps> = ({ board, account, list }) => {
  const { t } = useTranslation()

  const [showExpandableSection, setShowExpandableSection] = useState(false)
@ -89,6 +91,23 @@ const NodeCard: React.FC<NodeCardProps> = ({ board, account }) => {
  return (
    <FCard>
      <CardHeading name={t(board.name)} img={board.img} tokenSymbol={board.tokenSymbol} />
+      <div>
+        {list.map((item) => {
+          return (
+            <div key={item.name}>
+              {board.name === item.name ? (
+                <>
+                  <FlexText name={t('HCC Currency amount')} value={item.amount} />
+                  {item.name === 'Board' ? <FlexText name={t('Lock up time')} value={item.unLockTime} /> : ''}
+                  <FlexText name={t('possess LP')} value={item.rewardDebt} />
+                </>
+              ) : (
+                <></>
+              )}
+            </div>
+          )
+        })}
+      </div>
      <CardActionsContainer board={board} account={account} />
      {/* <Divider />
      <ExpandableSectionButton
--- a/src/views/Board/components/BoardCard/FlexText.tsx
+++ b/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
--- a/src/views/Board/index.tsx
+++ b/src/views/Board/index.tsx
@ -51,6 +51,13 @@ const Boards: React.FC = () => {
  const [totalAmount, setTotalAmount] = useState(0)
  // 分红总额
  const [shareOutBonus, setShareOutBonus] = useState(0)
+
+  const [boardNum, setBoardNum] = useState(0)
+  const [holderNum, setHolder] = useState(0)
+
+  const [withdrawAmount, setWithdrawAmount] = useState(0)
+
+  const [boardsDataList, setBoardsDataList] = useState([])
  // // 获取资金池总额
  // const getCapital = async () => {
  //   const calls = boardsConfig.map((board) => {
@ -85,6 +92,7 @@ const Boards: React.FC = () => {
          },
        ])
        return {
+          name: boardConfig.name,
          totalAmount: getBalanceAmount(new BigNumber(boardPoolInfo.totalAmount._hex)).toNumber(),
          num: new BigNumber(boardPoolInfo?.num?._hex).toNumber(),
          waitWithdrawAmount: getBalanceAmount(new BigNumber(waitWithdrawAmount.balance._hex)).toNumber(),
@ -92,14 +100,47 @@ const Boards: React.FC = () => {
      }),
    )
    console.log(boardsData)
+    let total = 0
+    let waitWithdrawAmountValue = 0
+    boardsData.forEach((item) => {
+      total += item.totalAmount
+      waitWithdrawAmountValue += item.waitWithdrawAmount
+      if (item.name === 'Board') {
+        setBoardNum(item.num)
+      } else if (item.name === 'Holder') {
+        setHolder(item.waitWithdrawAmount)
+      }
+    })
+    setTotalAmount(total)
+    setShareOutBonus(waitWithdrawAmountValue)
+  }
+  // 获取信息
+  const fetchInfo = async () => {
+    const boardsData = await Promise.all(
+      boardsConfig.map(async (boardConfig) => {
+        const [boardUserInfo] = await multicall(boardConfig.poolAbi, [
+          {
+            address: getAddress(boardConfig.contractAddress),
+            name: 'userInfo',
+            params: [account],
+          },
+        ])
+        return {
+          name: boardConfig.name,
+          amount: getBalanceAmount(new BigNumber(boardUserInfo.amount?._hex)).toNumber(),
+          rewardDebt: getBalanceAmount(new BigNumber(boardUserInfo.rewardDebt?._hex)).toNumber(),
+          unLockTime: new BigNumber(boardUserInfo?.unLockTime?._hex).toNumber(),
+        }
+      }),
+    )
+    setBoardsDataList(boardsData)
  }
-
  useEffect(() => {
    dispatch(fetchBoardsPublicDataAsync())
    fetchBoardShares()
    if (account) {
+      fetchInfo()
      dispatch(fetchBoardUserDataAsync(account))
-      // getCapital()
    }
  }, [account, dispatch, fastRefresh])

@ -108,7 +149,7 @@ const Boards: React.FC = () => {
      <div>
        <FlexLayout>
          {boardsList.map((board) => (
-            <BoardCard key={board.pid} board={board} account={account} removed />
+            <BoardCard list={boardsDataList} key={board.pid} board={board} account={account} removed />
          ))}
        </FlexLayout>
      </div>
@ -125,8 +166,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 holders')} price={1.0} />
+          <HeaderItem title={t('Number of boards')} price={boardNum} />
+          <HeaderItem title={t('Number of holders')} price={holderNum} />
        </FlexLayoutMain>
      </Header>
      {renderContent()}
--- a/src/views/Referral/components/BuyNftModal.tsx
+++ b/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 name={t('Secondary split ratio')} value={`${referralRewardInfo.dividendSecond / 10000}%`} />
+          <FlexCom
+            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')} />
--- a/src/views/Referral/components/Connected.tsx
+++ b/src/views/Referral/components/Connected.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 { Button, useModal, Text } from '@pancakeswap/uikit'
 import { inviteReceive } from 'services/referral'
@ -55,7 +56,9 @@ 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()
@ -86,7 +89,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> */}
--- a/src/views/Referral/components/Regimental.tsx
+++ b/src/views/Referral/components/Regimental.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 { inviteReceive } from 'services/referral'
 import { useReferralCommanderConfigInfo, useReferralRewardInfo } from 'state/referral/hooks'
@ -95,17 +96,22 @@ const RegimentalCom: React.FC = () => {
        </LogoImage>

        <>
-          <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum}(人)`} />
-          <FlexCom name={t('total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
+          <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum as number}(人)`} />
+          <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%')}
@ -142,7 +148,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> */}