调整军团长，董事会

public/locales/zh-CN.json

@@ -116,7 +116,7 @@
   "Total jackpot this round": "此回合的总累积奖池",
   "Collect Winnings": "收集奖金",
   "Buy Tickets": "购买彩票",
-  "Harvest": "收割",
+  "Harvest": "领取收益",
   "Approve": "批准",
   "Select": "选择",
   "Winning Numbers This Round": "此回合的中奖号码",
@@ -1131,5 +1131,12 @@
   "top": "置顶",
   "Cancel the pledge": "取消质押",
   "Forced to cancel": "强制取消质押",
-  "End of the lock up": "锁仓结束"
+  "End of the lock up": "锁仓结束",
+  "Get the benefits": "领取收益",
+  "license agreement": "授权合约",
+  "Minimum amount pledged": "最小质押金额",
+  "Holder": "持币人",
+  "Board": "董事会",
+  "Whether to cancel": "是否取消",
+  "Please enter a number": "请输入数字"
 }

src/config/constants/contracts.ts

@@ -8,7 +8,7 @@ export default {
     56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
   },
   boardChef: {
-    97: '0x733240108a3626f6f4871328f168281040655d08',
+    97: '0xe477990fc68d93472e2cc4b1aae21fe30f602c9a',
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约
   },
   boardRewardChef: {

src/config/localization/translations.json

@@ -1258,5 +1258,12 @@
   "top": "top",
   "Cancel the pledge": "Cancel the pledge",
   "Forced to cancel": "Forced to cancel",
-  "End of the lock up": "End of the lock up"
+  "End of the lock up": "End of the lock up",
+  "Get the benefits": "Get the benefits",
+  "license agreement": "license agreement",
+  "Minimum amount pledged": "Minimum amount pledged",
+  "Holder": "Holder",
+  "Board": "Board",
+  "Whether to cancel": "Whether to cancel",
+  "Please enter a number": "Please enter a number"
 }

src/state/types.ts

@@ -503,6 +503,7 @@ export interface Boards extends BoardConfig {
     stakedBalance: number
     unlockTime: number
     estimatedProfit: number
+    receiveReward: number
   }
 }
 export interface BoardsState {

src/views/Board/components/AffirmModal.tsx

@@ -0,0 +1,37 @@
+import BigNumber from 'bignumber.js'
+import React, { useCallback, useMemo, useState } from 'react'
+import { Button, Modal, Text } from '@pancakeswap/uikit'
+import { ModalActions, ModalInput } from 'components/Modal'
+import { useTranslation } from 'contexts/Localization'
+import useToast from 'hooks/useToast'
+import { getFullDisplayBalance } from 'utils/formatBalance'
+
+interface AffirmModalProps {
+  title?: string
+  content?: string
+  onDismiss?: () => void
+  handSubmit?: () => void
+}
+
+const DepositModal: React.FC<AffirmModalProps> = ({ title, content, onDismiss, handSubmit }) => {
+  const { t } = useTranslation()
+  const submit = async () => {
+    await handSubmit()
+    onDismiss()
+  }
+  return (
+    <Modal title={t(`${title}`)} onDismiss={onDismiss}>
+      <Text>{!content ? t('Whether to cancel') : content}</Text>
+      <ModalActions>
+        <Button variant="secondary" onClick={onDismiss} width="100%">
+          {t('Cancel')}
+        </Button>
+        <Button width="100%" onClick={submit}>
+          {t('Confirm')}
+        </Button>
+      </ModalActions>
+    </Modal>
+  )
+}
+
+export default DepositModal

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

@@ -88,16 +88,21 @@ const CardDiv = styled.div`
 const ContentDiv = styled.div`
   padding: 0 20px;
 `
+const InfoDiv = styled(Flex)`
+  flex-direction: column;
+  height: 60px;
+  justify-content: space-between;
+`
 
 interface NodeCardProps {
   board: any
   removed: boolean
   provider?: ProviderType
-  account?: string
+  accountData?: string
   boardsData?: any
 }
 
-const BoardCard: React.FC<NodeCardProps> = ({ board, account, boardsData }) => {
+const BoardCard: React.FC<NodeCardProps> = ({ board, accountData, boardsData }) => {
   const { t } = useTranslation()
   const [countDown, setCountDown] = useState('')
   useEffect(() => {
@@ -137,15 +142,14 @@ const BoardCard: React.FC<NodeCardProps> = ({ board, account, boardsData }) => {
         amount={board.userData?.amount}
       />
       <ContentDiv>
-        {account && (
+        {accountData && (
-          <div>
+          <InfoDiv>
             <FlexText name={t('HCC Currency amount')} value={board.userData?.amount as number} />
             {board.pid === 1 && board.userData?.amount ? <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 / boardsData?.curAmount || 0} />
-          </div>
+          </InfoDiv>
         )}
-        <CardActionsContainer board={board} account={account} />
+        <CardActionsContainer board={board} accountData={accountData} />
       </ContentDiv>
       {/* <Divider />
       <ExpandableSectionButton

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useMemo } from 'react'
 import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { provider as ProviderType } from 'web3-core'
@@ -6,35 +6,50 @@ import { getAddress } from 'utils/addressHelpers'
 import { Button, Flex, Text } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { Boards } from 'state/types'
-import { useBoardUser } from 'state/hooks'
+import { useBoardUser, usePriceCakeBusd, usePriceHccUsdt } from 'state/hooks'
 import { TOKEN_SYMBOL } from 'config/index'
-import { getBalanceNumber } from 'utils/formatBalance'
+
+import { useWeb3React } from '@web3-react/core'
+import { BIG_ZERO } from 'utils/bigNumber'
+
+import { getBalanceNumber, getBalanceAmount } from 'utils/formatBalance'
 import { useERC20 } from 'hooks/useContract'
 import UnlockButton from 'components/UnlockButton'
 import useApproveBoard from '../../hooks/useApproveBoard'
 import StakeAction from './StakeAction'
 import HarvestAction from './HarvestAction'
 
+import useHarvestBoard from '../../hooks/useHarvestBoard'
+import FlexText from './FlexText'
+
 const Action = styled.div`
-  padding-top: 16px;
+  padding-top: 4px;
+`
+const PriceCoin = styled.div`
+  text-align: right;
 `
 
 interface NodeCardActionsProps {
   board: Boards
   provider?: ProviderType
-  account?: string
+  accountData?: string
 }
 
-const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
+const CardActions: React.FC<NodeCardActionsProps> = ({ board, accountData }) => {
   const { t } = useTranslation()
   const [requestedApproval, setRequestedApproval] = useState(false)
   const pid = board.pid
   const { allowance, tokenBalance, stakedBalance, estimatedProfit } = useBoardUser(pid)
-  const isApproved = account && allowance && allowance.isGreaterThan(0)
+  const isApproved = accountData && allowance && allowance.isGreaterThan(0)
   const tokenContract = useERC20(getAddress(board.tokenAddresses))
 
   const { onApprove } = useApproveBoard(tokenContract, pid)
 
+  const { account } = useWeb3React()
+  const rawEarningsBalance = account ? getBalanceAmount(new BigNumber(estimatedProfit)).toNumber() : BIG_ZERO
+  const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN)
+  const hccPriceUsdt = usePriceHccUsdt()
+
   const handleApprove = useCallback(async () => {
     try {
       setRequestedApproval(true)
@@ -44,34 +59,54 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
       console.error(e)
     }
   }, [onApprove])
+  const [totalPrice, setTotalPrice] = useState(0)
+  useMemo(() => {
+    setTotalPrice(getBalanceAmount(new BigNumber(board?.userData?.receiveReward)).toNumber() + Number(displayBalance))
+  }, [board])
 
   const renderApprovalOrStakeButton = () => {
     return isApproved ? (
       <>
-        <Flex>
+        <FlexText name={t('The total amount of dividends')} value={totalPrice.toFixed(3)} />
+        <Flex justifyContent="space-between" alignItems="center">
+          <Text fontSize="12px" color="#1FC7D4">
+            {t('Unclaimed income')}
+          </Text>
+          <PriceCoin>
+            <Text fontSize="16px" color="#1FC7D4">
+              {displayBalance}
+            </Text>
+            <Text fontSize="12px" color="#9BE5EB">
+              {(Number(hccPriceUsdt.toNumber().toFixed(3)) * Number(displayBalance)).toFixed(3)} USDT
+            </Text>
+          </PriceCoin>
+        </Flex>
+        {/* <FlexText name={t('Unclaimed income')} value={displayBalance} /> */}
+        {/* <Flex>
           <Text bold textTransform="uppercase" color="secondary" fontSize="12px" pr="3px">
             {board.tokenSymbol}
           </Text>
           <Text bold textTransform="uppercase" color="textSubtle" fontSize="12px">
             {t('Staked')}
           </Text>
-        </Flex>
+        </Flex> */}
-        <StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} board={board} />
-        <Flex flexDirection="column" alignItems="flex-start" mt="10">
-          <Text color="textSubtle" fontSize="12px">
-            {t('Unclaimed income')}
-          </Text>
         <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} />
-        </Flex>
+        <StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} board={board} />
+        {/* <Flex flexDirection="column" alignItems="flex-start" mt="10"> */}
+        {/* <Text color="textSubtle" fontSize="12px">
+            {t('Unclaimed income')}
+          </Text> */}
+        {/* <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} /> */}
+        {/* </Flex> */}
       </>
     ) : (
       <Button mt="8px" width="100%" disabled={requestedApproval} onClick={handleApprove}>
-        {t('Approve Contract')}
+        {t('license agreement')}
       </Button>
     )
   }
 
-  return <Action>{!account ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}</Action>
+  return <Action>{!accountData ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}</Action>
 }
 
 export default CardActions

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

@@ -77,7 +77,7 @@ const CardHeading: React.FC<ExpandableSectionProps> = ({ name, img, tokenSymbol,
     <Wrapper justifyContent="space-between" alignItems="center" mb="12px">
       {/* <Image src={`/images/nodes/${img}.png`} width={64} height={64} /> */}
       <HeaderFlex>
-        <Heading mb="4px">{name}</Heading>
+        <Heading mb="4px">{t(`${name}`)}</Heading>
         {/* <Question text={t('To join board, you need to stake at least 0.1% total supply of Token')} /> */}
       </HeaderFlex>
       {amount > 0 && account && (

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

@@ -31,14 +31,15 @@ const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid }) => {
   const earningsBusd = rawEarningsBalance ? rawEarningsBalance.multipliedBy(cakePrice).toNumber() : 0
 
   return (
-    <Flex width="100%" justifyContent="space-between" alignItems="center">
+    <Flex width="100%" marginTop={25} justifyContent="space-between" alignItems="center">
-      <Flex flexDirection="column" alignItems="flex-start">
+      {/* <Flex flexDirection="column" alignItems="flex-start">
         <Heading color={rawEarningsBalance.eq(0) ? 'textDisabled' : 'text'}>{displayBalance}</Heading>
         {earningsBusd > 0 && (
           <Balance fontSize="12px" color="textSubtle" decimals={2} value={earningsBusd} unit=" USD" prefix="~" />
         )}
-      </Flex>
+      </Flex> */}
       <Button
+        width="100%"
         disabled={rawEarningsBalance.eq(0) || pendingTx}
         onClick={async () => {
           setPendingTx(true)

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

@@ -9,6 +9,8 @@ import { useBoardsFromPid } from 'state/hooks'
 import { useTranslation } from 'contexts/Localization'
 import useToast from 'hooks/useToast'
 import DepositModal from '../DepositModal'
+import AffirmModal from '../AffirmModal'
+
 import useStakeBoard from '../../hooks/useStakeBoard'
 import useUnstakeBoard, { useUnstakeForceBoard } from '../../hooks/useUnstakeBoard'
 import WithdrawModal from '../WithdrawModal'
@@ -22,13 +24,13 @@ interface NodeCardActionsProps {
 }
 
 const IconButtonWrapper = styled.div`
-  display: flex;
+  width: 100%;
   svg {
     width: 20px;
   }
 `
 const IconButtonDiv = styled(IconButton)`
-  width: auto;
+  width: 100%;
   padding: 0 10px;
 `
 
@@ -53,9 +55,11 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
       tokenName={tokenName}
     />,
   )
+
   const [onPresentWithdraw] = useModal(
     <WithdrawModal max={stakedBalance} tokenDecimals={tokenDecimals} onConfirm={onUnstake} tokenName={tokenName} />,
   )
+
   const handleUnstake = () => {
     const unlockTime = userData.unlockTime * 1000
     if (unlockTime > new Date().getTime()) {
@@ -64,13 +68,28 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
       onUnstake()
     }
   }
+  const [onPresentAffirm] = useModal(
+    <AffirmModal
+      title={
+        board.pid === 1
+          ? board.userData?.unlockTime * 1000 <= new Date().getTime()
+            ? t('Cancel the pledge')
+            : t('Forced to cancel')
+          : t('Cancel the pledge')
+      }
+      handSubmit={handleUnstake}
+    />,
+  )
   const renderStakingButtons = () => {
     return rawStakedBalance === 0 ? (
-      <Button onClick={onPresentDeposit}>{t(`pledge`)}</Button>
+      <Button width="100%" onClick={onPresentDeposit}>
+        {t(`pledge`)}
+      </Button>
     ) : (
       <IconButtonWrapper>
         {userData.stakedBalance > 0 ? (
-          <IconButtonDiv variant="tertiary" onClick={handleUnstake}>
+          // <IconButtonDiv variant="tertiary" onClick={handleUnstake}>
+          <IconButtonDiv variant="tertiary" onClick={onPresentAffirm}>
             {board.pid === 1
               ? board.userData?.unlockTime * 1000 <= new Date().getTime()
                 ? t('Cancel the pledge')
@@ -79,7 +98,7 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
           </IconButtonDiv>
         ) : (
           <IconButton variant="tertiary" onClick={onPresentDeposit} ml="6px">
-            <AddIcon color="primary" />2
+            <AddIcon color="primary" />
           </IconButton>
         )}
       </IconButtonWrapper>
@@ -87,8 +106,8 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
   }
 
   return (
-    <Flex justifyContent="space-between" alignItems="center">
+    <Flex justifyContent="space-between" alignItems="center" marginTop="20px">
-      <Heading color={rawStakedBalance === 0 ? 'textDisabled' : 'text'}>{rawStakedBalance}</Heading>
+      {/* <Heading color={rawStakedBalance === 0 ? 'textDisabled' : 'text'}>{rawStakedBalance}</Heading> */}
       {renderStakingButtons()}
     </Flex>
   )

src/views/Board/components/DepositModal.tsx

@@ -25,6 +25,7 @@ const DepositModal: React.FC<DepositModalProps> = ({
   tokenName = '',
   addLiquidityUrl,
 }) => {
+  const regNumber = /^\d+(\.\d+)?$/
   const { toastSuccess, toastError, toastWarning } = useToast()
   const [val, setVal] = useState('')
   const [pendingTx, setPendingTx] = useState(false)
@@ -63,14 +64,22 @@ const DepositModal: React.FC<DepositModalProps> = ({
           width="100%"
           disabled={pendingTx || fullBalance === '0' || val === '0'}
           onClick={async () => {
+            if (!regNumber.test(val)) {
+              toastWarning(t('Please enter a number'))
+              return
+            }
+            if (Number(val) > Number(fullBalance)) {
+              toastWarning(t('Insufficient Balance'))
+              return
+            }
             if (Number(val) < min.toNumber()) {
-              toastWarning(t('Hint'), `${t('At least stake ')}${min.toNumber()}`)
+              toastWarning(`${t('Minimum amount pledged')}${min.toNumber()}`)
               return
             }
             setPendingTx(true)
             try {
               await onConfirm(val)
-              toastSuccess(t('Staked!'), t('Your funds have been staked in the farm'))
+              toastSuccess(t('Staked!'))
               onDismiss()
             } catch (e) {
               toastError(
@@ -86,9 +95,9 @@ const DepositModal: React.FC<DepositModalProps> = ({
           {pendingTx ? t('Pending Confirmation') : t('Confirm')}
         </Button>
       </ModalActions>
-      <LinkExternal href={addLiquidityUrl} style={{ alignSelf: 'center' }}>
+      {/* <LinkExternal href={addLiquidityUrl} style={{ alignSelf: 'center' }}>
         {t('Get %symbol%', { symbol: tokenName })}
-      </LinkExternal>
+      </LinkExternal> */}
     </Modal>
   )
 }

src/views/Board/index.tsx

@@ -23,6 +23,10 @@ import { useTranslation } from 'contexts/Localization'
 import BoardCard from './components/BoardCard/BoardCard'
 import HeaderItem from './components/HeaderItem'
 
+const PageContent = styled.div`
+  background-image: url('/images/recommend/bg.svg');
+`
+
 const Header = styled.div`
   padding: 32px 0px;
   padding-left: 16px;
@@ -77,7 +81,7 @@ const Boards: React.FC = () => {
         return {
           pid: boardConfig.pid,
           curAmount: getBalanceAmount(new BigNumber(boardPoolInfo.curAmount._hex)).toNumber(),
-          // totalAmount: getBalanceAmount(new BigNumber(boardPoolInfo.totalAmount._hex)).toNumber(),
+          receiveReward: boardsList.filter((n) => boardConfig.pid === n.pid),
           holderNum: new BigNumber(boardPoolInfo?.holderNum?._hex).toNumber(),
           waitWithdrawAmount: getBalanceAmount(new BigNumber(waitWithdrawAmount.balance._hex)).toNumber(),
           totalReward: getBalanceAmount(new BigNumber(boardPoolInfo?.totalReward?._hex)).toNumber(),
@@ -89,6 +93,7 @@ const Boards: React.FC = () => {
     let waitWithdrawAmountValue = 0
     let totalReward = 0
     boardsData.forEach((item) => {
+      console.log(item)
       total += item.curAmount
       totalReward += item.totalReward
       waitWithdrawAmountValue += item.waitWithdrawAmount
@@ -115,7 +120,7 @@ const Boards: React.FC = () => {
       <div>
         <FlexLayout>
           {boardsList.map((board, index) => (
-            <BoardCard boardsData={boardsDataList[index]} key={board.pid} board={board} account={account} removed />
+            <BoardCard boardsData={boardsDataList[index]} key={board.pid} board={board} accountData={account} removed />
           ))}
         </FlexLayout>
       </div>
@@ -123,6 +128,7 @@ const Boards: React.FC = () => {
   }
 
   return (
+    <PageContent>
       <Page>
         <Header>
           <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
@@ -138,6 +144,7 @@ const Boards: React.FC = () => {
         </Header>
         {renderContent()}
       </Page>
+    </PageContent>
   )
 }
 

src/views/Home/components/FristCom.tsx

@@ -137,6 +137,7 @@ const FristCom: React.FC = () => {
     externalLinkList: [],
     userCount: '',
     volume: '',
+    market: 0,
   })
   const [linkList, setLinkList] = useState([])
 
@@ -198,7 +199,7 @@ const FristCom: React.FC = () => {
           <ScoreDiv>
             <FlexItemCom name={t('Number of holders')} valueNum={detail?.userCount} />
             <FlexItemCom name={t('Your volume')} valueNum={detail?.volume} />
-            <FlexItemCom name={t('market value')} valueNum={0} />
+            <FlexItemCom name={t('market value')} valueNum={detail?.market} />
             {/* {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />
             })} */}

src/views/Referral/components/Regimental.tsx

@@ -38,22 +38,22 @@ const FooterBtn = styled.div`
 `
 
 const ContentDiv = styled.div`
-  width: 60%;
+  width: 75%;
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;
 
   ${({ theme }) => theme.mediaQueries.sm} {
-    width: 60%;
+    width: 75%;
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 75%;
+    /* height: 80vh; */
+    overflow-y: auto;
   }
 
   ${({ theme }) => theme.mediaQueries.lg} {
-    width: 60%;
+    width: 50%;
-  }
-  ${({ theme }) => theme.mediaQueries.xs} {
-    width: 90%;
-    height: 80vh;
-    overflow-y: auto;
   }
 `
 

src/views/Referral/components/UnunitedCom.tsx

@@ -18,10 +18,6 @@ const FooterDiv = styled.div`
   margin: 0 auto 30px auto;
   margin-left: 10%;
 `
-const TextDiv = styled(Text)`
-  margin-top: 10px;
-  font-size: 14px;
-`
 
 const UnunitedCom: React.FC = () => {
   const { t } = useTranslation()

src/views/Referral/index.tsx

@@ -23,17 +23,12 @@ const ContentDiv = styled.div`
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;
-
+`
-  /* ${({ theme }) => theme.mediaQueries.sm} {
+const ContentUnunited = styled.div`
-    width: 60%;
+  width: 30%;
-  }
+  background: rgba(255, 255, 255, 0.39);
-
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
-  ${({ theme }) => theme.mediaQueries.lg} {
+  border-radius: 40px;
-    width: 60%;
-  }
-  ${({ theme }) => theme.mediaQueries.xs} {
-    width: 60%;
-  } */
 `
 
 const Nft: React.FC = () => {
@@ -47,19 +42,42 @@ const Nft: React.FC = () => {
 
   return (
     <MainDiv>
-      {referralIsCommander ? (
+      {account ? (
+        referralIsCommander ? (
+          <RegimentalCom />
+        ) : (
+          <ContentDiv>
+            <ConnectedCom />
+          </ContentDiv>
+        )
+      ) : (
+        <ContentUnunited>
+          <UnunitedCom />
+        </ContentUnunited>
+      )}
+      {/* {referralIsCommander ? (
         <>
           {account ? (
             <RegimentalCom />
           ) : (
-            <ContentDiv>
+            <ContentUnunited>
               <UnunitedCom />
-            </ContentDiv>
+            </ContentUnunited>
           )}
         </>
       ) : (
-        <ContentDiv>{account ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>
+        <>
+          {account ? (
+            <ContentDiv>
+              <ConnectedCom />
+            </ContentDiv>
+          ) : (
+            <ContentUnunited>
+              <UnunitedCom />
+            </ContentUnunited>
           )}
+        </>
+      )} */}
     </MainDiv>
   )
 }