!10 董事会

Merge pull request !10 from 骚/myf-dev

src/services/user.ts

@@ -8,7 +8,7 @@ export const queryUserInfo = () => {
 }
 export const uccnDetail = () => {
   return request.request({
-    url: '/high_city/app/api/user/uccn/detail',
+    url: '/high_city/app/api/index/uccn/detail',
     method: 'get',
   })
 }

src/state/boards/fetchBoardsUser.ts

@@ -1,14 +1,15 @@
 import BigNumber from 'bignumber.js'
 import erc20ABI from 'config/abi/erc20.json'
+import boardABI from 'config/abi/board.json'
 import multicall from 'utils/multicall'
 import boardsConfig from 'config/constants/boards'
-import { getAddress } from 'utils/addressHelpers'
+import { getAddress, getBoardAddress } from 'utils/addressHelpers'
 
 export const fetchBoardUserAllowances = async (account: string) => {
   const calls = boardsConfig.map((board) => {
     const tokenAddresses = getAddress(board.tokenAddresses)
-    const boardChefAddress = getAddress(board.contractAddress)
+    const boardChefAdress = getAddress(board.contractAddress)
-    return { address: tokenAddresses, name: 'allowance', params: [account, boardChefAddress] }
+    return { address: tokenAddresses, name: 'allowance', params: [account, boardChefAdress] }
   })
 
   const rawLpAllowances = await multicall(erc20ABI, calls)
@@ -38,15 +39,15 @@ export const fetchBoardUserTokenBalances = async (account: string) => {
 export const fetchBoardUserInfo = async (account: string) => {
   const data = await Promise.all(
     boardsConfig.map(async (board) => {
-      const boardChefAddress = getAddress(board.contractAddress)
+      const boardChefAdress = getAddress(board.contractAddress)
       const calls = [
         {
-          address: boardChefAddress,
+          address: boardChefAdress,
           name: 'userInfo',
           params: [account],
         },
         {
-          address: boardChefAddress,
+          address: boardChefAdress,
           name: 'pendingHCC',
           params: [account],
         },

src/views/Announcement/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
+import Container from 'components/Layout/Container'
 import { getAnnouncementPage, getAnnouncementDetail } from 'services/announcement'
 import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
 import ListItem from './components/ListItem'
@@ -11,13 +12,15 @@ interface DetailProps {
   content?: string
   publishTime?: number
 }
-
+const ContainerMain = styled(Container)`
+  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+  padding: 30px 0;
+`
 const MainDiv = styled.div`
   width: 100%;
   min-height: calc(100vh - 64px);
-  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+  /* background: ${({ theme }) => theme.colors.gradients.bubblegum}; */
   box-sizing: border-box;
-  padding: 30px 0;
 `
 const TableDiv = styled.div`
   width: 80%;
@@ -186,38 +189,40 @@ const Announcement: React.FC = () => {
     console.log(searchTitle)
   }
   return (
-    <MainDiv ref={loadMoreRef as any} onScrollCapture={onScrollCapture}>
+    <ContainerMain>
-      {detailVisible ? (
+      <MainDiv ref={loadMoreRef as any} onScrollCapture={onScrollCapture}>
-        <Detail
+        {detailVisible ? (
-          title={detailData.title}
+          <Detail
-          publishTime={detailData.publishTime}
+            title={detailData.title}
-          content={detailData.content}
+            publishTime={detailData.publishTime}
-          close={close}
+            content={detailData.content}
-        />
+            close={close}
-      ) : (
+          />
-        <TableDiv>
+        ) : (
-          <SearchDiv>
+          <TableDiv>
-            <InputMain>
+            <SearchDiv>
-              <SearchInput placeholder={t('Enter a keyword search')} value={searchTitle} onChange={handleChange} />
+              <InputMain>
-              <SearchBtn onClick={searchList}>
+                <SearchInput placeholder={t('Enter a keyword search')} value={searchTitle} onChange={handleChange} />
-                <Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
+                <SearchBtn onClick={searchList}>
-              </SearchBtn>
+                  <Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
-            </InputMain>
+                </SearchBtn>
-          </SearchDiv>
+              </InputMain>
-          <ListMain>
+            </SearchDiv>
-            {renderContent()}
+            <ListMain>
-            {totalVisible ? <TextAll>{t('Loaded all')}</TextAll> : ''}
+              {renderContent()}
+              {totalVisible ? <TextAll>{t('Loaded all')}</TextAll> : ''}
 
-            {/* <div ref={loadMoreRef} /> */}
+              {/* <div ref={loadMoreRef} /> */}
-            {/* {list.map((item) => (
+              {/* {list.map((item) => (
               <Text key={item.id} onClick={() => lookDetail(item.id)}>
                 <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
               </Text>
             ))} */}
-          </ListMain>
+            </ListMain>
-        </TableDiv>
+          </TableDiv>
-      )}
+        )}
-    </MainDiv>
+      </MainDiv>
+    </ContainerMain>
   )
 }
 export default Announcement

src/views/Board/components/HeaderItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Text } from '@pancakeswap/uikit'
+import Balance from 'components/Balance'
 import styled from 'styled-components'
 
 interface InfoProps {
@@ -22,9 +23,10 @@ const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
   return (
     <>
       <HeaderMain>
-        <Text color="text" fontSize="24px">
+        {/* <Text color="text" fontSize="24px">
           {price}
-        </Text>
+        </Text> */}
+        <Balance lineHeight="1" fontSize="24px" decimals={0} value={Number(price)} />
         <Text color="textSubtle" fontSize="14px">
           {title}
         </Text>

src/views/Board/index.tsx

@@ -1,8 +1,16 @@
+import BigNumber from 'bignumber.js'
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'
 import { Route, useRouteMatch, useLocation } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
-import BigNumber from 'bignumber.js'
+import boardsConfig from 'config/constants/boards'
+import tokens from 'config/constants/tokens'
+import { getAddress, getBoardAddress } from 'utils/addressHelpers'
+import { getDecimalAmountNumber } from 'utils/formatBalance'
+import boardABI from 'config/abi/board.json'
+import erc20ABI from 'config/abi/erc20.json'
+import multicall from 'utils/multicall'
 import { useWeb3React } from '@web3-react/core'
+import Balance from 'components/Balance'
 import { Image, Heading, RowType, Toggle, Text } from '@pancakeswap/uikit'
 import styled from 'styled-components'
 import FlexLayout from 'components/Layout/Flex'
@@ -39,10 +47,51 @@ const Boards: React.FC = () => {
 
   const dispatch = useDispatch()
   const { fastRefresh } = useRefresh()
+  // 资金池总额
+  const [totalAmount, setTotalAmount] = useState(0)
+  // 分红总额
+  const [shareOutBonus, setShareOutBonus] = useState(0)
+  // 获取资金池总额
+  const getCapital = async () => {
+    console.log(boardsConfig)
+    const calls = boardsConfig.map((board) => {
+      const contractAddress = getAddress(board.contractAddress)
+      return {
+        address: contractAddress,
+        name: '_poolInfo',
+      }
+    })
+    let total = 0
+    const boardsPoolInfo = await multicall(boardABI, calls)
+    boardsPoolInfo.forEach((item) => {
+      total += new BigNumber(item.totalAmount._hex).toNumber()
+    })
+    setTotalAmount(total)
+  }
+  // 获取分红总额
+  const fetchBoardShares = async () => {
+    const calls = boardsConfig.map((board) => {
+      const contractAddress = getAddress(board.tokenAddresses)
+      return {
+        address: contractAddress,
+        name: 'balanceOf',
+        params: ['0x2937a050705009270c9b5bc096d57d519ab7c39b'],
+      }
+    })
+    let total = 0
+    const sharesRed = await multicall(erc20ABI, calls)
+    sharesRed.forEach((item) => {
+      total += new BigNumber(item.balance._hex).div(new BigNumber(10).pow(18)).toNumber()
+    })
+    setShareOutBonus(total)
+  }
+
   useEffect(() => {
     dispatch(fetchBoardsPublicDataAsync())
     if (account) {
       dispatch(fetchBoardUserDataAsync(account))
+      getCapital()
+      fetchBoardShares()
     }
   }, [account, dispatch, fastRefresh])
 
@@ -59,28 +108,21 @@ const Boards: React.FC = () => {
   }
 
   return (
-    <>
+    <Page>
       <Header>
         <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
           {t('Total capital pool')}
         </Heading>
-        {/* <SecondText fontSize="28px" color="text">
+        <Balance lineHeight="1" fontSize="32px" decimals={0} value={Number(totalAmount)} />
-          {t(
-            'Joining the board of directors will obtain the governance token xcandy \n participate in the governance of the project, vote, obtain additional pledge income, \n and have a higher invitation airdrop reward',
-          )}
-        </SecondText> */}
-        <Text fontSize="32px" color="text">
-          1.000.000.000.000
-        </Text>
         <FlexLayoutMain>
-          <HeaderItem title={t('The total amount of dividends')} price={1.0} />
+          <HeaderItem title={t('The total amount of dividends')} price={shareOutBonus} />
-          <HeaderItem title={t('Pending dividend')} price={1.0} />
+          {/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
           <HeaderItem title={t('Number of boards')} price={1.0} />
           <HeaderItem title={t('Number of holders')} price={1.0} />
         </FlexLayoutMain>
       </Header>
-      <Page>{renderContent()}</Page>
+      {renderContent()}
-    </>
+    </Page>
   )
 }
 

src/views/Nft/component/StepCom.tsx

@@ -1,6 +1,29 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Text, Flex, Image } from '@pancakeswap/uikit'
+import { Text, Flex, Image, Button } from '@pancakeswap/uikit'
+
+const SubButton = styled(Button)`
+  width: 25px;
+  height: 25px;
+  background: rgba(239, 232, 247, 0.39);
+  border: 1px solid rgba(255, 255, 255, 0.0588235294117647);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+  font-size: 18px;
+  color: #ada5ba;
+  border-radius: 5px;
+  padding: 0;
+`
+
+const AddButton = styled(Button)`
+  width: 25px;
+  height: 25px;
+  background: linear-gradient(180deg, #6eddfa 0%, #ac74f1 100%);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+  font-size: 18px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 0;
+`
 
 export default function StepCom() {
   const [valNumber, setInputState] = useState(1)
@@ -16,11 +39,13 @@ export default function StepCom() {
 
   return (
     <Flex justifyContent="space-between" alignItems="center" width={120}>
-      <Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} />
+      {/* <Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} /> */}
+      <SubButton onClick={() => onAdd('sub')}>-</SubButton>
       <Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
         {valNumber}
       </Text>
-      <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} />
+      <AddButton onClick={() => onAdd('add')}>+</AddButton>
+      {/* <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} /> */}
     </Flex>
   )
 }

src/views/Nft/index.tsx

@@ -46,12 +46,29 @@ const StyledPage = styled.div`
 `
 
 const BodyWrapper = styled(Card)`
+  padding-bottom: 20px;
   border-radius: 24px;
-  max-width: 500px;
+  /* width: 60%; */
-  width: 100%;
+  width: 500px;
   overflow: visible;
   position: relative;
 `
+const TextKey = styled(Text)`
+  font-size: 26px;
+  color: #999999;
+`
+const TextVal = styled(Text)`
+  font-size: 26px;
+  color: #1fc7d4;
+  margin-left: 10px;
+`
+
+const FlexTime = styled(Flex)`
+  position: absolute;
+  width: 100%;
+  top: 20px;
+  justify-content: center;
+`
 
 const HindDiv = styled.div`
   width: 32px;
@@ -77,10 +94,12 @@ const Divs = styled.div`
   min-height: calc(100vh - 104px);
   background: ${({ theme }) => theme.colors.gradients.bubblegum};
 `
-
+const DetailDiv = styled.div`
+  margin-top: -100px;
+`
 const DetailInfo = styled(Flex)`
   padding: 0 21px;
-  margin-top: 24px;
+  margin-top: 15px;
 `
 
 const SwiperDiv = styled(Swiper)`
@@ -105,7 +124,31 @@ const SwiperDiv = styled(Swiper)`
 
 const Nft: React.FC = () => {
   const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
-
+  const [hour, setHour] = useState('0')
+  const [minute, setMinute] = useState('0')
+  const [second, setSecond] = useState('0')
+  const countFun = (time) => {
+    // const timer: any = null
+    // let sys_second = new Date(time).getTime() - new Date().getTime()
+    // timer = setInterval(() => {
+    //   // 防止倒计时出现负数
+    //   if (sys_second > 1000) {
+    //     sys_second -= 1000
+    //     // let day = Math.floor(sys_second / 1000 / 3600 / 24)
+    //     setHour(Math.floor((sys_second / 1000 / 3600) % 24))
+    //     setMinute(Math.floor((sys_second / 1000 / 60) % 60))
+    //     setSecond(Math.floor((sys_second / 1000) % 60))
+    //     // this.setState({
+    //     //   day: day,
+    //     //   hour: hour < 10 ? '0' + hour : hour,
+    //     //   minute: minute < 10 ? '0' + minute : minute,
+    //     //   second: second < 10 ? '0' + second : second,
+    //     // })
+    //   } else {
+    //     clearInterval(timer)
+    //   }
+    // }, 1000)
+  }
   return (
     <MainDiv>
       <SwiperDiv
@@ -121,29 +164,34 @@ const Nft: React.FC = () => {
               <StyledPage>
                 <Divs>
                   <BodyWrapper>
-                    <HindDiv>
+                    {/* <Flex justifyContent="center" marginTop="-40px">
-                      <Image src="/images/nft/hint.png" alt="" width={32} height={32} />
-                    </HindDiv>
-                    <Flex justifyContent="center" marginTop="-40px">
                       <BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
-                    </Flex>
+                    </Flex> */}
-                    <DetailInfo justifyContent="space-between" alignItems="center">
+                    <FlexTime>
-                      <Text color="textSubtle">系列</Text>
+                      <TextKey>剩余时间</TextKey>
-                      <Text color="text">法式盛宴</Text>
+                      <TextVal>7小时</TextVal>
-                    </DetailInfo>
+                    </FlexTime>
-                    <DetailInfo justifyContent="space-between" alignItems="center">
+                    <Image src="/images/nft/blindbox.svg" width={500} height={460} />
-                      <Text color="textSubtle">价格</Text>
+                    <DetailDiv>
-                      <Flex alignItems="center" justifyContent="flex-end">
+                      <DetailInfo justifyContent="space-between" alignItems="center">
-                        <Text color="#1FC7D4" fontSize="24px">
+                        <Text color="textSubtle">系列</Text>
-                          500
+                        <Text color="text">法式盛宴</Text>
-                        </Text>
+                      </DetailInfo>
-                        <Text color="text">黄油</Text>
+                      <DetailInfo justifyContent="space-between" alignItems="center">
-                      </Flex>
+                        <Text color="textSubtle">价格</Text>
-                    </DetailInfo>
+                        <Flex alignItems="center" justifyContent="flex-end">
-                    <DetailInfo justifyContent="space-between" alignItems="center">
+                          <Text color="#1FC7D4" fontSize="24px">
-                      <Text color="textSubtle">数量</Text>
+                            500
-                      <StepCom />
+                          </Text>
-                    </DetailInfo>
+                          <Text color="text">黄油</Text>
+                        </Flex>
+                      </DetailInfo>
+                      <DetailInfo justifyContent="space-between" alignItems="center">
+                        <Text color="textSubtle">数量</Text>
+                        <StepCom />
+                      </DetailInfo>
+                    </DetailDiv>
+
                     <FlexText name="钱包中的 BUTTER" value="0" />
                     <FlexText name="回收点数抵扣" value="0" />
                     <FlexText name="实际黄油成本" value="0" />