调整代码规范，增加兑换页面

public/locales/zh-CN.json

@@ -1145,5 +1145,12 @@
   "person": "人",
   "Earnings will be cleared after forced cancellation. Confirm cancellation": "强制取消后收益将清空，是否确认取消",
   "HighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
-  "After pledge, income will lock warehouse%times%": "质押后，收益将锁仓%times%"
+  "After pledge, income will lock warehouse%times%": "质押后，收益将锁仓%times%",
+  "IDO exchange in the first phase": "第一期IDO兑换",
+  "Opening time of next exchange period:": "下期兑换开启时间：",
+  "Please enter the amount": "请输入金额",
+  "Exchange rate": "兑换比率",
+  "gross": "总量",
+  "remaining quantity": "剩余数量",
+  "Immediately change": "立即兑换"
 }

src/App.tsx

@@ -54,6 +54,7 @@ const Referral = lazy(() => import('./views/Referral'))
 const Board = lazy(() => import('./views/Board'))
 const Nft = lazy(() => import('./views/Nft'))
 const Announcement = lazy(() => import('./views/Announcement'))
+const Exchange = lazy(() => import('./views/Exchange'))
 
 // This config is required for number formatting
 BigNumber.config({
@@ -99,6 +100,9 @@ const App: React.FC = () => {
             <Route path="/pools">
               <Pools />
             </Route>
+            <Route path="/exchange">
+              <Exchange />
+            </Route>
             <Route path="/referral">
               <Referral />
             </Route>

src/components/Menu/config.ts

@@ -28,8 +28,13 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
   {
     label: t('Exchange'),
     icon: 'FarmIcon',
-    href: 'https://pancake.kiemtienonline360.com/#/swap',
+    href: '/exchange',
   },
+  // {
+  //   label: t('Exchange'),
+  //   icon: 'FarmIcon',
+  //   href: 'https://pancake.kiemtienonline360.com/#/swap',
+  // },
   {
     label: t('Liquidity'),
     icon: 'FarmIcon',

src/config/constants/contracts.ts

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

src/config/localization/translations.json

@@ -1272,5 +1272,12 @@
   "person": "person",
   "Earnings will be cleared after forced cancellation. Confirm cancellation": "Earnings will be cleared after forced cancellation. Confirm cancellation",
   "HighCitySwapInfo": "HIighCitySwap was born from the fanatical pursuit of blockchain technology by its founder Liu Bus, who always believes that blockchain technology can be applied more widely. For this reason, he made a brave decision to give up investment in other fields and focus on the practice and application of blockchain technology. He fused his familiar field -- Internet social interaction with blockchain technology and thus HighCitySwap was born. This is our beginning, thank you for your support, the HighCity team will always move forward.",
-  "After pledge, income will lock warehouse%times%": "After pledge, income will lock warehouse%times%"
+  "After pledge, income will lock warehouse%times%": "After pledge, income will lock warehouse%times%",
+  "IDO exchange in the first phase": "第一期IDO兑换",
+  "Opening time of next exchange period:": "Opening time of next exchange period:",
+  "Please enter the amount": "Please enter the amount",
+  "Exchange rate": "Exchange rate",
+  "gross": "gross",
+  "remaining quantity": "remaining quantity",
+  "Immediately change": "Immediately change"
 }

src/views/Announcement/components/ListItem.tsx

@@ -90,7 +90,7 @@ const ListItem: React.FC<InfoProps> = ({ title, content, publishTime, top = fals
         <TableInfo>
           <FlexTitle>
             <TextTitle>{title}</TextTitle>
-            {top ? <TextTop>{t('top')}</TextTop> : ''}
+            {top && <TextTop>{t('top')}</TextTop>}
           </FlexTitle>
           <TextInfo>{content}</TextInfo>
         </TableInfo>

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

@@ -98,24 +98,20 @@ interface NodeCardProps {
   board: any
   removed: boolean
   provider?: ProviderType
-  accountData?: string
+  account?: string
   boardsData?: any
 }
 
-const BoardCard: React.FC<NodeCardProps> = ({ board, accountData, boardsData }) => {
+const BoardCard: React.FC<NodeCardProps> = ({ board, account, boardsData }) => {
   const { t } = useTranslation()
   const [countDown, setCountDown] = useState('')
   useEffect(() => {
-    const interval = setInterval(() => {
+    setTimeout(() => {
       if (board.userData?.unlockTime) {
-        if (countDown === t('End of the lock up')) {
-          clearInterval(interval)
-        }
         const time = board.userData?.unlockTime * 1000
         countDownFun(time - 1)
       }
     }, 1000)
-    return () => clearInterval(interval)
   }, [countDown, board])
 
   const countDownFun = (date) => {
@@ -142,14 +138,14 @@ const BoardCard: React.FC<NodeCardProps> = ({ board, accountData, boardsData })
         amount={board.userData?.amount}
       />
       <ContentDiv>
-        {accountData && (
+        {account && (
           <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 / boardsData?.curAmount || 0} />
           </InfoDiv>
         )}
-        <CardActionsContainer board={board} accountData={accountData} />
+        <CardActionsContainer board={board} account={account} />
       </ContentDiv>
       {/* <Divider />
       <ExpandableSectionButton

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

@@ -10,6 +10,7 @@ import { useBoardUser, usePriceCakeBusd, usePriceHccUsdt } from 'state/hooks'
 import { TOKEN_SYMBOL } from 'config/index'
 
 import { useWeb3React } from '@web3-react/core'
+import { useAccount } from 'state/userInfo/hooks'
 import { BIG_ZERO } from 'utils/bigNumber'
 
 import { getBalanceNumber, getBalanceAmount } from 'utils/formatBalance'
@@ -32,20 +33,19 @@ const PriceCoin = styled.div`
 interface NodeCardActionsProps {
   board: Boards
   provider?: ProviderType
-  accountData?: string
+  account?: string
 }
 
-const CardActions: React.FC<NodeCardActionsProps> = ({ board, accountData }) => {
+const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
   const { t } = useTranslation()
   const [requestedApproval, setRequestedApproval] = useState(false)
   const pid = board.pid
   const { allowance, tokenBalance, stakedBalance, estimatedProfit } = useBoardUser(pid)
-  const isApproved = accountData && allowance && allowance.isGreaterThan(0)
+  const isApproved = account && 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()
@@ -59,11 +59,10 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, accountData }) =>
       console.error(e)
     }
   }, [onApprove])
-  const [totalPrice, setTotalPrice] = useState(0)
+  // const [totalPrice, setTotalPrice] = useState(0)
-  useMemo(() => {
+  const totalPrice = useMemo(() => {
-    setTotalPrice(getBalanceAmount(new BigNumber(board?.userData?.receiveReward)).toNumber() + Number(displayBalance))
+    return getBalanceAmount(new BigNumber(board?.userData?.receiveReward)).toNumber() + Number(displayBalance)
   }, [board])
-
   const renderApprovalOrStakeButton = () => {
     return isApproved ? (
       <>
@@ -106,7 +105,7 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, accountData }) =>
     )
   }
 
-  return <Action>{!accountData ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}</Action>
+  return <Action>{!account ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}</Action>
 }
 
 export default CardActions

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

@@ -49,13 +49,12 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
   }, [userData, minStakeAmount, tokenDecimals])
   const [unlockTimeTxt, setUnlockTimeTxt] = useState('')
 
-  const onBaseConfig = async () => {
+  const getLockUpTime = async () => {
     const times = await getBaseConfig()
     formatSeconds(Number(times))
   }
 
   const formatSeconds = (value: number) => {
-    console.log('value:', value)
     const second = value
     //  分
     let minute: any = 0
@@ -63,7 +62,6 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
     if (second > 60) {
       // 获取分钟，除以60取整数，得到整数分钟
       minute = second / 60
-      console.log(parseInt(minute))
       // 获取秒数，秒数取佘，得到整数秒数
       const ss = second % 60
       // 如果分钟大于60，将分钟转换成小时
@@ -79,7 +77,7 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
     }
   }
   useEffect(() => {
-    onBaseConfig()
+    getLockUpTime()
   }, [])
   const [onPresentDeposit] = useModal(
     <DepositModal

src/views/Board/index.tsx

@@ -83,7 +83,6 @@ const Boards: React.FC = () => {
         return {
           pid: boardConfig.pid,
           curAmount: getBalanceAmount(new BigNumber(boardPoolInfo.curAmount._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(),
@@ -92,12 +91,10 @@ const Boards: React.FC = () => {
     )
 
     let total = 0
-    let waitWithdrawAmountValue = 0
     let totalReward = 0
     boardsData.forEach((item) => {
       total += item.curAmount
       totalReward += item.totalReward
-      waitWithdrawAmountValue += item.waitWithdrawAmount
       if (item.pid === 1) {
         setBoardNum(item.holderNum)
       } else if (item.pid === 2) {
@@ -121,7 +118,7 @@ const Boards: React.FC = () => {
       <div>
         <FlexLayout>
           {boardsList.map((board, index) => (
-            <BoardCard boardsData={boardsDataList[index]} key={board.pid} board={board} accountData={account} removed />
+            <BoardCard boardsData={boardsDataList[index]} key={board.pid} board={board} account={account} removed />
           ))}
         </FlexLayout>
       </div>

src/views/Exchange/components/ExchangeCard.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import styled, { keyframes } from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Text, Button } from '@pancakeswap/uikit'
+
+import { useAccount } from 'state/userInfo/hooks'
+import UnlockButton from 'components/UnlockButton'
+import ExchangeInput from './ExchangeInput'
+
+const FCard = styled.div`
+  width: 650px;
+  background: ${(props) => props.theme.card.background};
+  border-radius: 32px;
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: center;
+  padding: 50px 70px;
+`
+const HeaderText = styled(Text)`
+  font-size: 48px;
+  color: #280d5f;
+`
+const TimeText = styled(Text)`
+  color: #7a6eaa;
+  font-size: 22px;
+`
+
+const RateText = styled(Text)`
+  font-size: 30px;
+  color: #280d5f;
+`
+const RateNumber = styled(Text)`
+  font-size: 30px;
+  color: #1fc7d4;
+`
+const FooterButton = styled(Button)`
+  margin-top: 50px;
+`
+
+const ExchangeCard: React.FC = () => {
+  const { t } = useTranslation()
+
+  const account = useAccount()
+
+  return (
+    <FCard>
+      <HeaderText>{t('IDO exchange in the first phase')}</HeaderText>
+      <TimeText>{t('Opening time of next exchange period:')}2022.5.16 00:00</TimeText>
+      <ExchangeInput name="USDT" />
+      <Flex alignItems="center" justifyContent="center" marginTop={20}>
+        <RateText>{t('Exchange rate')}：</RateText>
+        <RateNumber>1USDT=100HCC</RateNumber>
+      </Flex>
+      <Flex alignItems="center" justifyContent="center">
+        <Text color="textSubtle">{t('gross')}：100000HCC</Text>
+        <Text color="textSubtle" marginLeft={20}>
+          {t('remaining quantity')}：100000HCC
+        </Text>
+      </Flex>
+      <ExchangeInput name="HCC" />
+      <FooterButton>{account ? <Button>{t('Immediately change')}</Button> : <UnlockButton />}</FooterButton>
+    </FCard>
+  )
+}
+
+export default ExchangeCard

src/views/Exchange/components/ExchangeInput.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text, Input } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const PriceContent = styled.div`
+  height: 148px;
+  background: rgba(238, 234, 244, 0.39);
+  border: 1px solid #d7caec;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
+  border-radius: 18px;
+  padding: 23px 20px;
+  margin-top: 20px;
+`
+const CoinText = styled(Text)`
+  font-size: 26px;
+  color: #333333;
+  text-align: left;
+  margin-bottom: 20px;
+`
+
+interface InputProps {
+  name: string
+  value?: number | string
+}
+
+const ExchangeInput: React.FC<InputProps> = ({ name, value }) => {
+  const { t } = useTranslation()
+
+  return (
+    <PriceContent>
+      <CoinText>{name}</CoinText>
+      <Input value={value} placeholder={t('Please enter the amount')} />
+    </PriceContent>
+  )
+}
+
+export default ExchangeInput

src/views/Exchange/index.tsx

@@ -0,0 +1,22 @@
+import React, { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import ExchangeCard from './components/ExchangeCard'
+
+const PageContent = styled.div`
+  min-height: calc(100vh - 64px);
+  background-image: url('/images/recommend/bg.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const Exchange: React.FC = () => {
+  return (
+    <PageContent>
+      <ExchangeCard />
+    </PageContent>
+  )
+}
+export default Exchange

src/views/Referral/components/BuyNftModal.tsx

@@ -66,12 +66,12 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
   const [price, setPrice] = useState('')
   const [link, setLink] = useState('')
 
-  const onContract = async () => {
+  const getLinkAddress = async () => {
     const data = await getContract()
     setLink(data)
   }
   useEffect(() => {
-    onContract()
+    getLinkAddress()
   }, [])
   useMemo(() => {
     const priceList = []