!22 修改bug

Merge pull request !22 from 骚/myf-dev
2022-05-17 01:49:06 +00:00 · 2022-05-17 01:49:06 +00:00 · 2d40956577
parent c319211a3a a74ef1eff1
commit 2d40956577
39 changed files with 913 additions and 288 deletions
--- a/public/images/home/logo.svg
+++ b/public/images/home/logo.svg
--- a/public/locales/zh-CN.json
+++ b/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": "此回合的中奖号码",
@ -217,7 +217,7 @@
  "Prize Pot": "奖金池",
  "Winners": "获胜者",
  "No. Matched": "中的号码数",
-  "Approve Contract": "批准合约",
+  "Approve %coin% Contract": "批准 %coin% 合约",
  "%asset% staked": "%asset% 已质押",
  "Total Value Locked": "锁定的总价值",
  "Across all LPs and Syrup Pools": "在所有 LP 和 Syrup 资金池中",
@ -1117,6 +1117,7 @@
  "Enter a keyword search": "输入关键字搜索",
  "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": "的提成！",
+  "footer %number% text": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得 %number% 的提成！",
  "market value": "市值",
  "Loaded all": "已加载全部",
  "Insufficient Balance": "余额不足",
@ -1126,5 +1127,31 @@
  "capital pool": "资金池",
  "Unclaimed income": "待领取收益",
  "pledge": "质押",
-  "Invite": "邀请"
+  "Invite": "邀请",
+  "top": "置顶",
+  "Cancel the pledge": "取消质押",
+  "Forced to cancel": "强制取消质押",
+  "End of the lock up": "锁仓结束",
+  "Get the benefits": "领取收益",
+  "license agreement": "授权合约",
+  "Minimum amount pledged": "最小质押金额",
+  "Holder": "持币人",
+  "Board": "董事会",
+  "Whether to cancel": "是否取消",
+  "Please enter a number": "请输入数字",
+  "my wallet": "我的钱包",
+  "Copy the address": "复制地址",
+  "How to use": "如何使用",
+  "person": "人",
+  "Earnings will be cleared after forced cancellation. Confirm cancellation": "强制取消后收益将清空，是否确认取消",
+  "HighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
+  "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": "立即兑换",
+  "IDO Exchange": "IDO 兑换"
 }
--- a/src/App.tsx
+++ b/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>
--- a/src/components/Menu/config.ts
+++ b/src/components/Menu/config.ts
@ -25,6 +25,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
  //     // },
  //   ],
  // },
+  {
+    label: t('IDO Exchange'),
+    icon: 'FarmIcon',
+    href: '/exchange',
+  },
  {
    label: t('Exchange'),
    icon: 'FarmIcon',
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@ -46,7 +46,7 @@ const Menu = (props) => {
      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 }
+      return { icon: item.iconResource.url, list: links, key: index + item.name, name: item.name }
    })
    setSocialLink(list)
  }
--- a/src/config/abi/board.json
+++ b/src/config/abi/board.json
@ -91,7 +91,9 @@
    "outputs": [
      { "internalType": "uint256", "name": "accHCCPerShare", "type": "uint256" },
      { "internalType": "uint256", "name": "totalAmount", "type": "uint256" },
-      { "internalType": "uint256", "name": "num", "type": "uint256" }
+      { "internalType": "uint256", "name": "totalReward", "type": "uint256" },
+      { "internalType": "uint256", "name": "curAmount", "type": "uint256" },
+      { "internalType": "uint256", "name": "holderNum", "type": "uint256" }
    ],
    "stateMutability": "view",
    "type": "function"
@ -177,7 +179,8 @@
    "outputs": [
      { "internalType": "uint256", "name": "amount", "type": "uint256" },
      { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" },
-      { "internalType": "uint256", "name": "unLockTime", "type": "uint256" }
+      { "internalType": "uint256", "name": "unLockTime", "type": "uint256" },
+      { "internalType": "uint256", "name": "receiveReward", "type": "uint256" }
    ],
    "stateMutability": "view",
    "type": "function"
--- a/src/config/abi/holder.json
+++ b/src/config/abi/holder.json
@ -91,7 +91,9 @@
    "outputs": [
      { "internalType": "uint256", "name": "accHCCPerShare", "type": "uint256" },
      { "internalType": "uint256", "name": "totalAmount", "type": "uint256" },
-      { "internalType": "uint256", "name": "num", "type": "uint256" }
+      { "internalType": "uint256", "name": "totalReward", "type": "uint256" },
+      { "internalType": "uint256", "name": "curAmount", "type": "uint256" },
+      { "internalType": "uint256", "name": "holderNum", "type": "uint256" }
    ],
    "stateMutability": "view",
    "type": "function"
@ -162,7 +164,8 @@
    "name": "userInfo",
    "outputs": [
      { "internalType": "uint256", "name": "amount", "type": "uint256" },
-      { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" }
+      { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" },
+      { "internalType": "uint256", "name": "receiveReward", "type": "uint256" }
    ],
    "stateMutability": "view",
    "type": "function"
--- a/src/config/constants/contracts.ts
+++ b/src/config/constants/contracts.ts
@ -8,7 +8,7 @@ export default {
    56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
  },
  boardChef: {
-    97: '0x0e28f80e6560f0ebbba4bbdf155a946053e5056a',
+    97: '0x126935cae1988efbf8e310abe6be1f9046eaf0ac',
    56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约
  },
  boardRewardChef: {
@ -16,7 +16,7 @@ export default {
    56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会分红合约
  },
  holderChef: {
-    97: '0xafa64f22a09fc197949c45281b2ad381a2b623a3',
+    97: '0x8faafb4ba8945917e7fe024dbbad0a5fb1da2181',
    56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 持币人
  },
  holderRewardChef: {
--- a/src/config/localization/languages.ts
+++ b/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,
-  // 'bn-BD': BN,
+  'ar-SA': AR,
+  'bn-BD': BN,
  'en-US': EN,
-  // 'de-DE': DE,
-  // 'el-GR': EL,
-  // 'es-ES': ESES,
-  // 'fi-FI': FI,
-  // 'fil-PH': FIL,
-  // 'fr-FR': FR,
-  // 'hi-IN': HI,
-  // 'hu-HU': HU,
-  // 'id-ID': ID,
-  // 'it-IT': IT,
-  // 'ja-JP': JA,
-  // 'ko-KR': KO,
-  // 'nl-NL': NL,
-  // 'pl-PL': PL,
-  // 'pt-BR': PTBR,
-  // 'pt-PT': PTPT,
-  // 'ro-RO': RO,
-  // 'ru-RU': RU,
-  // 'sv-SE': SVSE,
-  // 'ta-IN': TA,
-  // 'tr-TR': TR,
-  // 'uk-UA': UK,
-  // 'vi-VN': VI,
+  'de-DE': DE,
+  'el-GR': EL,
+  'es-ES': ESES,
+  'fi-FI': FI,
+  'fil-PH': FIL,
+  'fr-FR': FR,
+  'hi-IN': HI,
+  'hu-HU': HU,
+  'id-ID': ID,
+  'it-IT': IT,
+  'ja-JP': JA,
+  'ko-KR': KO,
+  'nl-NL': NL,
+  'pl-PL': PL,
+  'pt-BR': PTBR,
+  'pt-PT': PTPT,
+  'ro-RO': RO,
+  'ru-RU': RU,
+  'sv-SE': SVSE,
+  'ta-IN': TA,
+  'tr-TR': TR,
+  'uk-UA': UK,
+  'vi-VN': VI,
  'zh-CN': ZHCN,
-  // 'zh-TW': ZHTW,
+  'zh-TW': ZHTW,
 }

 export const languageList = Object.values(languages)
--- a/src/config/localization/translations.json
+++ b/src/config/localization/translations.json
@ -217,7 +217,7 @@
  "Prize Pot": "Prize Pot",
  "Winners": "Winners",
  "No. Matched": "No. Matched",
-  "Approve Contract": "Approve Contract",
+  "Approve %coin% Contract": "Approve %coin% Contract",
  "%asset% staked": "%asset% staked",
  "Total Value Locked": "Total Value Locked",
  "Across all LPs and Syrup Pools": "Across all LPs and Syrup Pools",
@ -1246,6 +1246,7 @@
  "Enter a keyword search": "Enter a keyword search",
  "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！",
+  "footer %number% text": "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins %number% The commission！",
  "market value": "market value",
  "Loaded all": "Loaded all",
  "HCC Currency amount": "HCC Currency amount",
@ -1253,5 +1254,31 @@
  "possess LP": "possess LP",
  "capital pool": "capital pool",
  "Unclaimed income": "Unclaimed income",
-  "pledge": "pledge"
+  "pledge": "pledge",
+  "top": "top",
+  "Cancel the pledge": "Cancel the pledge",
+  "Forced to cancel": "Forced to cancel",
+  "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",
+  "my wallet": "my wallet",
+  "Copy the address": "Copy the address",
+  "How to use": "How to use",
+  "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%",
+  "IDO exchange in the first phase": "IDO exchange in the first phase",
+  "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",
+  "IDO Exchange": "IDO Exchange"
 }
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@ -36,7 +36,7 @@ const useAuth = () => {
          } else {
            window.localStorage.removeItem(connectorLocalStorageKey)
            if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
-              toastError(t('Provider Error'), t('No provider was found'))
+              toastError(t('Provider Error'))
            } else if (
              error instanceof UserRejectedRequestErrorInjected ||
              error instanceof UserRejectedRequestErrorWalletConnect
--- a/src/services/board.ts
+++ b/src/services/board.ts
@ -0,0 +1,10 @@
+import request from 'utils/request'
+
+export const getBaseConfig = () => {
+  return request.request({
+    url: '/high_city/app/api/base/config',
+    method: 'get',
+  })
+}
+
+export default getBaseConfig
--- a/src/services/referral.ts
+++ b/src/services/referral.ts
@ -30,9 +30,15 @@ export const getWithdrawRewardParams = () => {
 export const checkBuyResult = (params) => {
  return request.request({
    url: '/high_city/app/api/invite/commander/tx',
-    method: 'post',
+    method: 'get',
    params,
  })
 }
+export const getContract = () => {
+  return request.request({
+    url: '/high_city/app/api/contract',
+    method: 'get',
+  })
+}

 export default getReferralRewardInfo
--- a/src/state/boards/fetchBoardsUser.ts
+++ b/src/state/boards/fetchBoardsUser.ts
@ -58,7 +58,7 @@ 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(),
      }
--- a/src/state/boards/index.ts
+++ b/src/state/boards/index.ts
@ -49,9 +49,9 @@ 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,
    }
  })
  dispatch(setBoardsUserData({ arrayOfUserDataObjects }))
--- a/src/state/types.ts
+++ b/src/state/types.ts
@ -503,6 +503,7 @@ export interface Boards extends BoardConfig {
    stakedBalance: number
    unlockTime: number
    estimatedProfit: number
+    receiveReward: number
  }
 }
 export interface BoardsState {
--- a/src/views/Announcement/components/ListItem.tsx
+++ b/src/views/Announcement/components/ListItem.tsx
@ -1,11 +1,12 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
 import { Text, Flex } from '@pancakeswap/uikit'

 interface InfoProps {
  title?: string
  content?: string
-  publishTime?: number
+  publishTime?: string
  top?: boolean
 }

@ -23,6 +24,24 @@ const FlexTitle = styled(Flex)`
  font-size: 18px;
  color: #333333;
  align-items: center;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    font-size: 14px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 18px;
+  }
+`
+const TextTitle = styled(Text)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #333333;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    max-width: 100px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    max-width: 747px;
+  }
 `
 const TextInfo = styled(Text)`
  overflow: hidden;
@ -33,10 +52,22 @@ const TextInfo = styled(Text)`
  font-size: 14px;
  color: #666666;
  margin-top: 10px;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    font-size: 12px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 14px;
+  }
 `
 const TextTime = styled(Text)`
  font-size: 18px;
  color: #999999;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    font-size: 14px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 18px;
+  }
 `
 const TextTop = styled(Flex)`
  margin-left: 10px;
@ -52,17 +83,18 @@ const TextTop = styled(Flex)`
 `

 const ListItem: React.FC<InfoProps> = ({ title, content, publishTime, top = false }) => {
+  const { t } = useTranslation()
  return (
    <>
      <FlexTable>
        <TableInfo>
          <FlexTitle>
-            {title}
-            {top ? <TextTop>置顶</TextTop> : ''}
+            <TextTitle>{title}</TextTitle>
+            {top && <TextTop>{t('top')}</TextTop>}
          </FlexTitle>
          <TextInfo>{content}</TextInfo>
        </TableInfo>
-        <TextTime color="textSubtle">{publishTime}</TextTime>
+        <TextTime color="textSubtle">{publishTime?.split(' ')[0]}</TextTime>
      </FlexTable>
    </>
  )
--- a/src/views/Announcement/index.tsx
+++ b/src/views/Announcement/index.tsx
@ -14,7 +14,6 @@ interface DetailProps {
 }
 const ContainerMain = styled.div`
  background: ${({ theme }) => theme.colors.gradients.bubblegum};
-  padding: 30px 0;
 `
 const MainDiv = styled.div`
  width: 100%;
--- a/src/views/Board/components/AffirmModal.tsx
+++ b/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
--- a/src/views/Board/components/BoardCard/BoardCard.tsx
+++ b/src/views/Board/components/BoardCard/BoardCard.tsx
@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
+import dayjs from 'dayjs'
 import BigNumber from 'bignumber.js'
 import styled, { keyframes } from 'styled-components'
 import { Flex, Text, Skeleton } from '@pancakeswap/uikit'
@ -58,8 +59,8 @@ const FCard = styled.div`
  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
-  justify-content: space-around;
-  padding: 24px;
+  /* justify-content: space-around; */
+  /* padding: 24px; */
  position: relative;
  text-align: center;
  min-height: 410px;
@ -77,32 +78,75 @@ const ExpandingWrapper = styled.div<{ expanded: boolean }>`
  overflow: hidden;
 `

+const CardDiv = styled.div`
+  min-height: calc(410px - 90px);
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+`
+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
+  boardsData?: any
 }

-const BoardCard: React.FC<NodeCardProps> = ({ board, account }) => {
+const BoardCard: React.FC<NodeCardProps> = ({ board, account, boardsData }) => {
  const { t } = useTranslation()
+  const [countDown, setCountDown] = useState('')
+  useEffect(() => {
+    setTimeout(() => {
+      if (board.userData?.unlockTime) {
+        const time = board.userData?.unlockTime * 1000
+        countDownFun(time - 1)
+      }
+    }, 1000)
+  }, [countDown, board])
+
+  const countDownFun = (date) => {
+    const date1 = dayjs()
+    const date2 = dayjs(date)
+    const time = date2.diff(date1)
+    if (time > 0) {
+      const hour = Math.floor((time / (1000 * 60 * 60)) % 24)
+      const minute = Math.floor((time / (1000 * 60)) % 60)
+      const second = Math.round((time / 1000) % 60)
+      setCountDown(`${hour}:${minute}:${second}`)
+    } else {
+      setCountDown(`${t('End of the lock up')}`)
+    }
+  }

  const [showExpandableSection, setShowExpandableSection] = useState(false)
  return (
    <FCard>
-      <CardHeading name={t(board.name)} img={board.img} tokenSymbol={board.tokenSymbol} />
+      <CardHeading
+        name={t(board.name)}
+        img={board.img}
+        tokenSymbol={board.tokenSymbol}
+        amount={board.userData?.amount}
+      />
+      <ContentDiv>
        {account && (
-        <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>
+          <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} account={account} />
+      </ContentDiv>
      {/* <Divider />
      <ExpandableSectionButton
        onClick={() => setShowExpandableSection(!showExpandableSection)}
--- a/src/views/Board/components/BoardCard/CardActionsContainer.tsx
+++ b/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,17 +6,28 @@ 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 { useAccount } from 'state/userInfo/hooks'
+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 {
@ -35,6 +46,10 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {

  const { onApprove } = useApproveBoard(tokenContract, pid)

+  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,29 +59,48 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
      console.error(e)
    }
  }, [onApprove])
-
+  // const [totalPrice, setTotalPrice] = useState(0)
+  const totalPrice = useMemo(() => {
+    return 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>
-        <StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} />
-        <Flex flexDirection="column" alignItems="flex-start" mt="10">
-          <Text color="textSubtle" fontSize="12px">
+        </Flex> */}
+        <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} board={board} />
+        <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>
+          </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>
    )
  }
--- a/src/views/Board/components/BoardCard/CardHeading.tsx
+++ b/src/views/Board/components/BoardCard/CardHeading.tsx
@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Tag, Flex, Heading, Image } from '@pancakeswap/uikit'
+import { useAccount } from 'state/userInfo/hooks'
 import Question from 'components/QuestionHelper'
 import { useTranslation } from 'contexts/Localization'

@ -9,23 +10,81 @@ export interface ExpandableSectionProps {
  isCommunityFarm?: boolean
  img?: string
  tokenSymbol?: string
+  amount?: number
 }

 const Wrapper = styled(Flex)`
+  height: 90px;
+  background: linear-gradient(90deg, #f1ecf2 0%, #e9f1f5 100%);
+  font-size: 30px;
+  color: #280d5f;
+  padding-left: 20px;
+  border-radius: 32px 32px 0 0;
+  position: relative;
  svg {
    margin-right: 4px;
  }
-`
+  .corner-mark {
+    width: 88px;
+    height: 89px;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }

-const CardHeading: React.FC<ExpandableSectionProps> = ({ name, img, tokenSymbol }) => {
+  .ribbon {
+    line-height: 12px;
+    text-align: center;
+    transform: rotate(50deg);
+    position: relative;
+    padding: 8px 0;
+    right: 15px;
+    top: 20px;
+    width: 150px;
+    background: linear-gradient(180deg, #b43ff9 0%, #7a44db 100%);
+    color: white;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+    letter-spacing: 1px;
+    font-size: 14px;
+  }
+
+  .ribbon1:before,
+  .ribbon1:after {
+    content: '';
+    border-top: 3px solid #4e7c7d;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    position: absolute;
+    bottom: -4px;
+  }
+
+  .ribbon1:before {
+    left: 0;
+  }
+
+  .ribbon1:after {
+    right: 0;
+  }
+`
+const HeaderFlex = styled(Flex)``
+
+const CardHeading: React.FC<ExpandableSectionProps> = ({ name, img, tokenSymbol, amount }) => {
  const { t } = useTranslation()
+  const account = useAccount()
+
  return (
    <Wrapper justifyContent="space-between" alignItems="center" mb="12px">
-      <Image src={`/images/nodes/${img}.png`} width={64} height={64} />
-      <Flex>
-        <Heading mb="4px">{name}</Heading>
+      {/* <Image src={`/images/nodes/${img}.png`} width={64} height={64} /> */}
+      <HeaderFlex>
+        <Heading mb="4px">{t(`${name}`)}</Heading>
        {/* <Question text={t('To join board, you need to stake at least 0.1% total supply of Token')} /> */}
-      </Flex>
+      </HeaderFlex>
+      {amount > 0 && account && (
+        <div className="corner-mark">
+          <div className="ribbon">{t('Staked')}</div>
+        </div>
+      )}
    </Wrapper>
  )
 }
--- a/src/views/Board/components/BoardCard/HarvestAction.tsx
+++ b/src/views/Board/components/BoardCard/HarvestAction.tsx
@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js'
 import { Button, Flex, Heading } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { useAppDispatch } from 'state'
+import { Boards } from 'state/types'
 import { fetchFarmUserDataAsync } from 'state/farms'
 import useToast from 'hooks/useToast'
 import { getBalanceAmount } from 'utils/formatBalance'
@ -16,9 +17,10 @@ import useHarvestBoard from '../../hooks/useHarvestBoard'
 interface FarmCardActionsProps {
  earnings?: BigNumber
  pid?: number
+  board?: Boards
 }

-const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid }) => {
+const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid, board }) => {
  const { account } = useWeb3React()
  const { toastSuccess, toastError } = useToast()
  const { t } = useTranslation()
@ -29,17 +31,19 @@ const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid }) => {
  const rawEarningsBalance = account ? getBalanceAmount(earnings) : BIG_ZERO
  const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN)
  const earningsBusd = rawEarningsBalance ? rawEarningsBalance.multipliedBy(cakePrice).toNumber() : 0
+  const unlockTime = board.userData.unlockTime * 1000

  return (
-    <Flex width="100%" justifyContent="space-between" alignItems="center">
-      <Flex flexDirection="column" alignItems="flex-start">
+    <Flex width="100%" marginTop={25} justifyContent="space-between" alignItems="center">
+      {/* <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
-        disabled={rawEarningsBalance.eq(0) || pendingTx}
+        width="100%"
+        disabled={rawEarningsBalance.eq(0) || pendingTx || (unlockTime > new Date().getTime() && board.pid === 1)}
        onClick={async () => {
          setPendingTx(true)
          try {
--- a/src/views/Board/components/BoardCard/StakeAction.tsx
+++ b/src/views/Board/components/BoardCard/StakeAction.tsx
@ -1,13 +1,17 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import styled from 'styled-components'
 import BigNumber from 'bignumber.js'
 import { Button, Flex, Heading, IconButton, AddIcon, MinusIcon, useModal } from '@pancakeswap/uikit'
 import { getBalanceNumber } from 'utils/formatBalance'
+import { Boards } from 'state/types'
 import { useBoardsFromPid } from 'state/hooks'
 import { useTranslation } from 'contexts/Localization'
+import { getBaseConfig } from 'services/board'
 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'
@ -17,16 +21,21 @@ interface NodeCardActionsProps {
  tokenBalance?: BigNumber
  tokenName?: string
  pid?: number
+  board?: Boards
 }

 const IconButtonWrapper = styled.div`
-  display: flex;
+  width: 100%;
  svg {
    width: 20px;
  }
 `
+const IconButtonDiv = styled(IconButton)`
+  width: 100%;
+  padding: 0 10px;
+`

-const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalance, tokenName, pid }) => {
+const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalance, tokenName, pid, board }) => {
  const { t } = useTranslation()
  const { toastWarning } = useToast()
  const { onStake } = useStakeBoard(pid)
@ -38,8 +47,42 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
    const minAmount = minStakeAmount - getBalanceNumber(userData.stakedBalance, tokenDecimals)
    return minAmount < 0 ? new BigNumber(0) : new BigNumber(minAmount)
  }, [userData, minStakeAmount, tokenDecimals])
+  const [unlockTimeTxt, setUnlockTimeTxt] = useState('')
+
+  const getLockUpTime = async () => {
+    const times = await getBaseConfig()
+    formatSeconds(Number(times))
+  }
+
+  const formatSeconds = (value: number) => {
+    const second = value
+    //  分
+    let minute = 0
+    //  如果秒数大于60，将秒数转换成整数
+    if (second > 60) {
+      // 获取分钟，除以60取整数，得到整数分钟
+      minute = second / 60
+      // 获取秒数，秒数取佘，得到整数秒数
+      const ss = second % 60
+      // 如果分钟大于60，将分钟转换成小时
+      if (minute > 60) {
+        // 获取小时，获取分钟除以60，得到整数小时
+        const hh = minute / 60
+        // 获取小时后取佘的分，获取分钟除以60取佘的分
+        const mm = minute % 60
+        setUnlockTimeTxt(`${parseInt(hh.toString())}:${parseInt(mm.toString())}:${parseInt(ss.toString())}`)
+      }
+    } else {
+      setUnlockTimeTxt(second.toString())
+    }
+  }
+  useEffect(() => {
+    getLockUpTime()
+  }, [])
  const [onPresentDeposit] = useModal(
    <DepositModal
+      board={board}
+      time={unlockTimeTxt}
      max={tokenBalance}
      tokenDecimals={tokenDecimals}
      min={minStakedAmount}
@ -47,9 +90,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()) {
@ -58,15 +103,42 @@ 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')
+      }
+      content={
+        board.pid === 1
+          ? board.userData?.unlockTime * 1000 <= new Date().getTime()
+            ? t('Cancel the pledge')
+            : t('Earnings will be cleared after forced cancellation. Confirm cancellation')
+          : 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 ? (
-          <IconButton variant="tertiary" onClick={handleUnstake}>
-            <MinusIcon color="primary" />
-          </IconButton>
+          // <IconButtonDiv variant="tertiary" onClick={handleUnstake}>
+          <IconButtonDiv variant="tertiary" onClick={onPresentAffirm}>
+            {board.pid === 1
+              ? board.userData?.unlockTime * 1000 <= new Date().getTime()
+                ? t('Cancel the pledge')
+                : t('Forced to cancel')
+              : t('Cancel the pledge')}
+          </IconButtonDiv>
        ) : (
          <IconButton variant="tertiary" onClick={onPresentDeposit} ml="6px">
            <AddIcon color="primary" />
@ -77,8 +149,8 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
  }

  return (
-    <Flex justifyContent="space-between" alignItems="center">
-      <Heading color={rawStakedBalance === 0 ? 'textDisabled' : 'text'}>{rawStakedBalance}</Heading>
+    <Flex justifyContent="space-between" alignItems="center" marginTop="20px">
+      {/* <Heading color={rawStakedBalance === 0 ? 'textDisabled' : 'text'}>{rawStakedBalance}</Heading> */}
      {renderStakingButtons()}
    </Flex>
  )
--- a/src/views/Board/components/DepositModal.tsx
+++ b/src/views/Board/components/DepositModal.tsx
@ -1,10 +1,11 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useMemo, useState } from 'react'
-import { Button, Modal, LinkExternal } from '@pancakeswap/uikit'
+import { Button, Modal, LinkExternal, 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'
+import { Boards } from 'state/types'

 interface DepositModalProps {
  min: BigNumber
@ -14,6 +15,8 @@ interface DepositModalProps {
  tokenName?: string
  tokenDecimals?: number
  addLiquidityUrl?: string
+  time?: string
+  board?: Boards
 }

 const DepositModal: React.FC<DepositModalProps> = ({
@ -24,7 +27,10 @@ const DepositModal: React.FC<DepositModalProps> = ({
  tokenDecimals = 18,
  tokenName = '',
  addLiquidityUrl,
+  time,
+  board,
 }) => {
+  const regNumber = /^\d+(\.\d+)?$/
  const { toastSuccess, toastError, toastWarning } = useToast()
  const [val, setVal] = useState('')
  const [pendingTx, setPendingTx] = useState(false)
@ -43,9 +49,11 @@ const DepositModal: React.FC<DepositModalProps> = ({
  const handleSelectMax = useCallback(() => {
    setVal(fullBalance)
  }, [fullBalance, setVal])
-
  return (
    <Modal title={t('pledge')} onDismiss={onDismiss}>
+      {time && board?.pid === 1 && (
+        <Text marginBottom={20}>{t('After pledge, income will lock warehouse%times%', { times: time })}</Text>
+      )}
      <ModalInput
        value={val}
        onSelectMax={handleSelectMax}
@ -63,14 +71,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 +102,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>
  )
 }
--- a/src/views/Board/index.tsx
+++ b/src/views/Board/index.tsx
@ -23,6 +23,12 @@ 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');
+  background-repeat: no-repeat;
+  background-size: cover;
+`
+
 const Header = styled.div`
  padding: 32px 0px;
  padding-left: 16px;
@ -55,6 +61,8 @@ const Boards: React.FC = () => {
  const [boardNum, setBoardNum] = useState(0)
  const [holderNum, setHolder] = useState(0)

+  const [boardsDataList, setBoardsDataList] = useState([])
+
  // 获取分红总额
  const fetchBoardShares = async () => {
    const boardsData = await Promise.all(
@ -74,25 +82,28 @@ const Boards: React.FC = () => {
        ])
        return {
          pid: boardConfig.pid,
-          totalAmount: getBalanceAmount(new BigNumber(boardPoolInfo.totalAmount._hex)).toNumber(),
-          num: new BigNumber(boardPoolInfo?.num?._hex).toNumber(),
+          curAmount: getBalanceAmount(new BigNumber(boardPoolInfo.curAmount._hex)).toNumber(),
+          holderNum: new BigNumber(boardPoolInfo?.holderNum?._hex).toNumber(),
          waitWithdrawAmount: getBalanceAmount(new BigNumber(waitWithdrawAmount.balance._hex)).toNumber(),
+          totalReward: getBalanceAmount(new BigNumber(boardPoolInfo?.totalReward?._hex)).toNumber(),
        }
      }),
    )
+
    let total = 0
-    let waitWithdrawAmountValue = 0
+    let totalReward = 0
    boardsData.forEach((item) => {
-      total += item.totalAmount
-      waitWithdrawAmountValue += item.waitWithdrawAmount
+      total += item.curAmount
+      totalReward += item.totalReward
      if (item.pid === 1) {
-        setBoardNum(item.num)
+        setBoardNum(item.holderNum)
      } else if (item.pid === 2) {
-        setHolder(item.waitWithdrawAmount)
+        setHolder(item.holderNum)
      }
    })
+    setBoardsDataList(boardsData)
    setTotalAmount(total)
-    setShareOutBonus(waitWithdrawAmountValue)
+    setShareOutBonus(totalReward)
  }
  useEffect(() => {
    dispatch(fetchBoardsPublicDataAsync())
@ -106,8 +117,8 @@ const Boards: React.FC = () => {
    return (
      <div>
        <FlexLayout>
-          {boardsList.map((board) => (
-            <BoardCard key={board.pid} board={board} account={account} removed />
+          {boardsList.map((board, index) => (
+            <BoardCard boardsData={boardsDataList[index]} key={board.pid} board={board} account={account} removed />
          ))}
        </FlexLayout>
      </div>
@ -115,6 +126,7 @@ const Boards: React.FC = () => {
  }

  return (
+    <PageContent>
      <Page>
        <Header>
          <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
@ -130,6 +142,7 @@ const Boards: React.FC = () => {
        </Header>
        {renderContent()}
      </Page>
+    </PageContent>
  )
 }

--- a/src/views/Exchange/components/ExchangeCard.tsx
+++ b/src/views/Exchange/components/ExchangeCard.tsx
@ -0,0 +1,74 @@
+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.div`
+  margin-top: 50px;
+  width: 100%;
+`
+const UnlockButtonDiv = styled(UnlockButton)`
+  width: 100%;
+`
+
+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 width="100%">{t('Immediately change')}</Button> : <UnlockButtonDiv />}
+      </FooterButton>
+    </FCard>
+  )
+}
+
+export default ExchangeCard
--- a/src/views/Exchange/components/ExchangeInput.tsx
+++ b/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
--- a/src/views/Exchange/index.tsx
+++ b/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
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
@ -39,13 +39,20 @@ const FlexMain = styled(Flex)`
 `

 const CardDiv = styled(Card)`
-  padding: 20px;
+  padding: 10px 20px;
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `

 const CourseCom: React.FC = () => {
  const { t } = useTranslation()

-  const [list, setListState] = useState([
+  const [list, setListState] = useState([])
+
+  useEffect(() => {
+    setListState([
      {
        title: t('Stage one: Origin'),
        id: 1,
@ -90,17 +97,17 @@ const CourseCom: React.FC = () => {
        ],
      },
    ])
+  }, [t])

  return (
    <>
      <FirstPage>
        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
          <FlexMain>
-            <div>
            <Stepper>
              {list.map((item, index) => (
                <Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
-                    <CardDiv>
+                  <CardDiv style={{ height: '290px' }}>
                    <Heading>{item.title}</Heading>
                    {item.list.map((childItem) => {
                      return (
@ -113,7 +120,6 @@ const CourseCom: React.FC = () => {
                </Step>
              ))}
            </Stepper>
-            </div>
          </FlexMain>
        </StyledPage>
      </FirstPage>
--- a/src/views/Home/components/FristCom.tsx
+++ b/src/views/Home/components/FristCom.tsx
@ -4,6 +4,7 @@ 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 { usePriceHccUsdt } from 'state/hooks'
 import { OutLink } from 'types/user'

 import FlexItemCom from './FlexItemCom'
@ -137,7 +138,9 @@ const FristCom: React.FC = () => {
    externalLinkList: [],
    userCount: '',
    volume: '',
+    market: 0,
  })
+  const hccPriceUsdt = usePriceHccUsdt()
  const [linkList, setLinkList] = useState([])

  const getDetail = async () => {
@ -198,7 +201,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 * Number(hccPriceUsdt) || 0} />
            {/* {burned.map((item) => {
              return <FlexItemCom key={item.id} name={item.name} value={item.value} />
            })} */}
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@ -96,7 +96,7 @@ const IntroduceCom: React.FC = () => {
  return (
    <>
      <FirstPage>
-        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+        <StyledPage px={['16px', '24px']} mx="auto">
          <BoxMain>
            <MainDiv>
              <div>
--- a/src/views/Referral/components/BuyActions.tsx
+++ b/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>
+          {t('Approve %coin% Contract', { coin: 'USDT' })}
+        </AuthorizationBtn>
      )}

      {!allowanceList.hcc && (
-        <Btn
+        <AuthorizationBtn
          disabled={loading}
          onClick={() => {
            handleApprove(onHccApprove)
          }}
        >
-          {t('Approve %coin% Contract', { coin: 'hcc' })}
-        </Btn>
+          {t('Approve %coin% Contract', { coin: 'HCC' })}
+        </AuthorizationBtn>
      )}
      {allowanceList?.usdt && allowanceList.hcc ? (
        <Btn disabled={loading} onClick={handleBuy}>
--- a/src/views/Referral/components/BuyNftModal.tsx
+++ b/src/views/Referral/components/BuyNftModal.tsx
@ -1,15 +1,16 @@
-import React from 'react'
+import React, { useState, useMemo, useEffect } 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'
+import { Flex, Button, Modal, Image, Text } from '@pancakeswap/uikit'
+import { getContract } from 'services/referral'
 import BuyActions from './BuyActions'
 import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'

 const ModalDiv = styled(Modal)`
-  width: 80%;
+  width: 50%;

  ${({ theme }) => theme.mediaQueries.xs} {
  }
@ -43,6 +44,18 @@ const ImageDiv = styled(Image)`
    height: 300px;
  }
 `
+const TextDiv = styled(Text)`
+  text-align: center;
+  height: 45px;
+  opacity: 0.5;
+  border-radius: 23px;
+  font-size: 26px;
+  color: #280d5f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 interface BuyNftModalProps {
  onDismiss?: () => void
 }
@ -50,15 +63,37 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
  const { t } = useTranslation()
  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
  const referralRewardInfo = useReferralNormalConfigInfo()
+  const [price, setPrice] = useState('')
+  const [link, setLink] = useState('')
+
+  const getLinkAddress = async () => {
+    const data = await getContract()
+    setLink(data)
+  }
+  useEffect(() => {
+    getLinkAddress()
+  }, [])
+  useMemo(() => {
+    const priceList = []
+    referralCommanderConfigInfo?.properties?.price &&
+      Object.keys(referralCommanderConfigInfo?.properties?.price).forEach((item) => {
+        priceList.push(`${item}:${referralCommanderConfigInfo?.properties?.price[item]}`)
+      })
+    setPrice(priceList.join(' - '))
+  }, [referralCommanderConfigInfo])
+
  return (
-    <ModalDiv title={`${t('purchase')}${referralCommanderConfigInfo.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
-          src={referralCommanderConfigInfo.properties.cover as string}
+            src={referralCommanderConfigInfo.properties?.cover as string}
            width={250}
            height={250}
            marginBottom="20px"
          />
+          <TextDiv textAlign="center">{price}</TextDiv>
+        </Flex>
        {/* <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" /> */}
        <InfoDiv>
          <TextFlex
@ -69,12 +104,19 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
          <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
          <FlexCom
            name={t('First stage sharing ratio')}
-            value={`${formatDivNumber(referralRewardInfo.dividendFirst)}%`}
+            value={`${referralCommanderConfigInfo.dividendFirst as number}%`}
          />
-          <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')} />
+          <FlexCom
+            name={t('Secondary split ratio')}
+            value={`${referralCommanderConfigInfo.dividendSecond as number}%`}
+          />
+          <FlexCom
+            name={t('Contract address')}
+            typeLink={`https://bscscan.com/token/${link}`}
+            value={`${link && link.substring(0, 6)}...${link && link.substring(link.length - 4, link.length)}`}
+          />
+          <FlexCom name={t('Assets agreement')} value="ERC721" />
+          <FlexCom name={t('Assets and chain')} value="BSC" />
        </InfoDiv>
      </Flex>
      <BuyActions />
--- a/src/views/Referral/components/Connected.tsx
+++ b/src/views/Referral/components/Connected.tsx
@ -1,5 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
+import { useDispatch } from 'react-redux'
+import { fetchReferralInfoAsync } from 'state/actions'
+import { useAccount } from 'state/userInfo/hooks'
 import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
 import useToast from 'hooks/useToast'
@ -54,20 +57,25 @@ const TextDiv = styled(Text)`
 `

 const ConnectedCom: React.FC = () => {
+  const dispatch = useDispatch()
+  const account = useAccount()
  const { t } = useTranslation()
  const [onBuyModal] = useModal(<BuyNftModal />)
+  const [gain, getGain] = useState(true)
  const referralNormalConfigInfo = useReferralNormalConfigInfo()
  const referralRewardInfo = useReferralRewardInfo()
-  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
+
  const [loading, setLoading] = useState(false)
  const withdraw = useWithdraw()
  const { toastSuccess } = useToast()
  const handleWithdraw = async () => {
    setLoading(true)
    try {
+      dispatch(fetchReferralInfoAsync(account))
      await withdraw()
      setLoading(false)
      toastSuccess(t('Successfully claimed!'))
+      getGain(false)
    } catch (error) {
      setLoading(false)
    }
@ -76,16 +84,16 @@ const ConnectedCom: React.FC = () => {
    <MainDiv>
      <HeaderMain title={t('recommend')} />
      <>
-        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum}(人)`} />
-        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward}(HCC)`} />
+        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum || 0}(${t('person')})`} />
+        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward || 0}(HCC)`} />
        <FlexCom
          name={t('To get profit')}
-          value={`${referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive}(HCC)`}
+          value={`${gain ? referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive || 0 : 0}(HCC)`}
        />
      </>
      <FooterBtn>
        {referralNormalConfigInfo?.receiveLimit <=
-        referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
+          referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? (
          <ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
            {t('Claim now')}
          </ButtonGet>
@ -96,9 +104,7 @@ const ConnectedCom: React.FC = () => {
        <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
      </FooterBtn>
      <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',
-        )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${t('The commission')}`}</TextDiv>
+        <TextDiv>{t('footer %number% text', { number: `${referralNormalConfigInfo?.dividendFirst || 0}%` })}</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/FlexCom.tsx
+++ b/src/views/Referral/components/FlexCom.tsx
@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Flex, Text } from '@pancakeswap/uikit'
+import { Flex, Text, Link } from '@pancakeswap/uikit'

 interface FlexProps {
  name: string
@ -8,6 +8,7 @@ interface FlexProps {
  paddings?: string
  leftColor?: string
  rightColor?: string
+  typeLink?: string
 }

 const FlexDiv = styled(Flex)`
@ -15,17 +16,34 @@ const FlexDiv = styled(Flex)`
  align-items: center;
  margin-top: 20px;
 `
+const TextLink = styled(Text)`
+  border-bottom: 1px solid #7a6eaa;
+  cursor: pointer;
+`
+
 const FlexCom: React.FC<FlexProps> = ({
  name,
  value,
  paddings = '0px',
  leftColor = 'text',
  rightColor = 'textSubtle',
+  typeLink,
 }) => {
+  const openPage = () => {
+    console.log(typeLink)
+    window.open(typeLink)
+  }
+
  return (
    <FlexDiv style={{ padding: paddings }}>
      <Text color={leftColor}>{name}</Text>
+      {typeLink ? (
+        <TextLink color={rightColor} onClick={openPage}>
+          {value}
+        </TextLink>
+      ) : (
        <Text color={rightColor}>{value}</Text>
+      )}
    </FlexDiv>
  )
 }
--- a/src/views/Referral/components/Regimental.tsx
+++ b/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%;
-  }
-  ${({ theme }) => theme.mediaQueries.xs} {
-    width: 90%;
-    height: 80vh;
-    overflow-y: auto;
+    width: 50%;
  }
 `

@ -84,12 +84,14 @@ const RegimentalCom: React.FC = () => {
  const [loading, setLoading] = useState(false)
  const withdraw = useWithdraw()
  const { toastSuccess } = useToast()
+  const [gain, getGain] = useState(true)
  const handleWithdraw = async () => {
    setLoading(true)
    try {
      await withdraw()
      setLoading(false)
      toastSuccess(t('Successfully claimed!'))
+      getGain(false)
    } catch (error) {
      setLoading(false)
    }
@ -106,46 +108,28 @@ const RegimentalCom: React.FC = () => {
        </LogoImage>

        <>
-          <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('The lower the number of')}
+            value={`${(referralRewardInfo.inviteNum as number) || 0}(${t('person')})`}
+          />
+          <FlexCom name={t('total revenue')} value={`${(referralRewardInfo.inviteReward as number) || 0}(HCC)`} />
          <FlexCom
            name={t('revenue')}
-            value={`${
-              ((referralRewardInfo.inviteReward as number) - referralRewardInfo.inviteRewardReceive) as number
-            }(HCC)`}
+            value={`${gain ? referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive || 0 : 0}(HCC)`}
          />
          <FlexCom
            name={t('First stage sharing ratio')}
-            value={`${formatDivNumber(referralCommanderConfigInfo.dividendFirst as number)}%`}
+            value={`${referralCommanderConfigInfo.dividendFirst as number}%`}
          />
          <FlexCom
            name={t('Secondary split ratio')}
-            value={`${formatDivNumber(referralCommanderConfigInfo.dividendSecond as number)}%`}
+            value={`${referralCommanderConfigInfo.dividendSecond as number}%`}
          />
-          {/* <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
-          <FlexCom
-            name={t('HCC total revenue percentage :10%')}
-            paddings="0 10px"
-            leftColor="textSubtle"
-            value={`${referralCommanderConfigInfo.dividendFirst}%`}
-          />
-          <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
-          <FlexCom
-            name={t('HCC total revenue percentage :10%')}
-            paddings="0 10px"
-            leftColor="textSubtle"
-            value="100000.00(HCC)"
-          />
-          <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
-          <FlexCom
-            name={t('To get profit')}
-            value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
-          /> */}
        </>

        <FooterBtn>
          {referralCommanderConfigInfo?.receiveLimit <=
-          referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
+            referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? (
            <ButtonGet variant="secondary" disabled={loading} onClick={handleWithdraw}>
              {t('Claim now')}
            </ButtonGet>
@ -156,9 +140,11 @@ const RegimentalCom: React.FC = () => {
          {/* <UpBtn>{t('Upgrade commander')}</UpBtn> */}
        </FooterBtn>
        <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',
-          )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${t('The commission')}`}</TextDiv>
+          <TextDiv>
+            {t('footer %number% text', {
+              number: `${referralCommanderConfigInfo?.dividendFirst || 0}%`,
+            })}
+          </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/UnunitedCom.tsx
+++ b/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()
--- a/src/views/Referral/index.tsx
+++ b/src/views/Referral/index.tsx
@ -19,20 +19,21 @@ 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;
+`
+const ContentUnunited = styled.div`
+  width: 30%;
  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%;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    width: 60%;
-  }
  ${({ theme }) => theme.mediaQueries.xs} {
-    width: 90%;
+    width: 80%;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 30%;
  }
 `

@ -43,23 +44,46 @@ const Nft: React.FC = () => {
  const referralIsCommander = useReferralIsCommander()
  useEffect(() => {
    dispatch(fetchReferralInfoAsync(account))
-  }, [account])
+  }, [account, referralIsCommander])

  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>
  )
 }