调整代码

src/state/boards/fetchBoardsUser.ts

@@ -58,7 +58,6 @@ 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,
         receiveReward: userInfo.receiveReward ? new BigNumber(userInfo.receiveReward._hex).toNumber() : 0,
         amount: getBalanceAmount(new BigNumber(userInfo.amount?._hex)).toNumber(),
         rewardDebt: getBalanceAmount(new BigNumber(userInfo.rewardDebt?._hex)).toNumber(),

src/state/boards/index.ts

@@ -49,7 +49,6 @@ 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,
       receiveReward: userInfo[index].receiveReward,

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

@@ -100,9 +100,6 @@ interface NodeCardProps {
 const BoardCard: React.FC<NodeCardProps> = ({ board, account, boardsData }) => {
   const { t } = useTranslation()
   const [countDown, setCountDown] = useState('')
-  const [boardsDataCurAmount] = boardsData.filter((item) => {
-    return item.pid === board.pid
-  })
   useEffect(() => {
     const interval = setInterval(() => {
       if (board.userData?.unlockTime) {
@@ -137,10 +134,10 @@ const BoardCard: React.FC<NodeCardProps> = ({ board, account, boardsData }) => {
       <ContentDiv>
         {account && (
           <div>
-            <FlexText name={t('HCC Currency amount')} value={board.userData?.amount} />
+            <FlexText name={t('HCC Currency amount')} value={board.userData?.amount as number} />
             {board.pid === 1 ? <FlexText name={t('Lock up time')} value={countDown} /> : ''}
             {/* <FlexText name={t('possess LP')} value={board.userData?.amount} /> */}
-            <FlexText name={t('possess LP')} value={board.userData?.amount / boardsDataCurAmount?.curAmount || 0} />
+            <FlexText name={t('possess LP')} value={board.userData?.amount / boardsData?.curAmount || 0} />
           </div>
         )}
         <CardActionsContainer board={board} account={account} />

src/views/Board/index.tsx

@@ -114,8 +114,8 @@ const Boards: React.FC = () => {
     return (
       <div>
         <FlexLayout>
-          {boardsList.map((board) => (
+          {boardsList.map((board, index) => (
-            <BoardCard boardsData={boardsDataList} key={board.pid} board={board} account={account} removed />
+            <BoardCard boardsData={boardsDataList[index]} key={board.pid} board={board} account={account} removed />
           ))}
         </FlexLayout>
       </div>

src/views/Referral/components/BuyActions.tsx

@@ -20,6 +20,13 @@ const Btn = styled(Button)`
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
+const AuthorizationBtn = styled(Button)`
+  width: 40%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
 const BuyActions: React.FC = () => {
   const { t } = useTranslation()
   const account = useAccount()
@@ -95,25 +102,25 @@ const BuyActions: React.FC = () => {
   return (
     <Flex>
       {!allowanceList.usdt && (
-        <Btn
+        <AuthorizationBtn
           disabled={loading}
           onClick={() => {
             handleApprove(onUsdtApprove)
           }}
         >
           {t('Approve %coin% Contract', { coin: 'USDT' })}
-        </Btn>
+        </AuthorizationBtn>
       )}
 
       {!allowanceList.hcc && (
-        <Btn
+        <AuthorizationBtn
           disabled={loading}
           onClick={() => {
             handleApprove(onHccApprove)
           }}
         >
           {t('Approve %coin% Contract', { coin: 'HCC' })}
-        </Btn>
+        </AuthorizationBtn>
       )}
       {allowanceList?.usdt && allowanceList.hcc ? (
         <Btn disabled={loading} onClick={handleBuy}>

src/views/Referral/components/BuyNftModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState, useMemo } from 'react'
 import styled from 'styled-components'
 import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
@@ -9,7 +9,7 @@ import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
-  width: 60%;
+  width: 50%;
 
   ${({ theme }) => theme.mediaQueries.xs} {
   }
@@ -66,7 +66,7 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
   const referralRewardInfo = useReferralNormalConfigInfo()
   const [price, setPrice] = useState('')
 
-  useEffect(() => {
+  useMemo(() => {
     const priceList = []
     referralCommanderConfigInfo?.properties?.price &&
       Object.keys(referralCommanderConfigInfo?.properties?.price).forEach((item) => {
@@ -76,7 +76,7 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
   }, [referralCommanderConfigInfo])
 
   return (
-    <ModalDiv title={`${t('purchase')}${referralRewardInfo.properties?.name}`} onDismiss={onDismiss}>
+    <ModalDiv title={`${t('purchase')}${referralRewardInfo.properties?.name as string}`} onDismiss={onDismiss}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
         <Flex flexDirection="column" justifyContent="center">
           <ImageDiv
@@ -95,8 +95,14 @@ 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={`${referralCommanderConfigInfo.dividendFirst}%`} />
+          <FlexCom
-          <FlexCom name={t('Secondary split ratio')} value={`${referralCommanderConfigInfo.dividendSecond}%`} />
+            name={t('First stage sharing ratio')}
+            value={`${referralCommanderConfigInfo.dividendFirst as number}%`}
+          />
+          <FlexCom
+            name={t('Secondary split ratio')}
+            value={`${referralCommanderConfigInfo.dividendSecond as number}%`}
+          />
           <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/index.tsx

@@ -19,7 +19,7 @@ const MainDiv = styled.div`
 `
 
 const ContentDiv = styled.div`
-  width: 60%;
+  width: 50%;
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;