138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
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 boardsConfig from 'config/constants/boards'
|
|
import tokens from 'config/constants/tokens'
|
|
import { getAddress, getBoardAddress } from 'utils/addressHelpers'
|
|
import { getBalanceAmount } 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'
|
|
import Page from 'components/Layout/Page'
|
|
import { useBoards } from 'state/hooks'
|
|
import useRefresh from 'hooks/useRefresh'
|
|
import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
|
|
import { fetchBoardUserInfo } from 'state/boards/fetchBoardsUser'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import BoardCard from './components/BoardCard/BoardCard'
|
|
import HeaderItem from './components/HeaderItem'
|
|
|
|
const Header = styled.div`
|
|
padding: 32px 0px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
text-align: center;
|
|
|
|
${({ theme }) => theme.mediaQueries.sm} {
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
`
|
|
const SecondText = styled(Text)`
|
|
white-space: break-spaces;
|
|
`
|
|
const FlexLayoutMain = styled(FlexLayout)`
|
|
margin-top: 20px;
|
|
`
|
|
const Boards: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
const boardsList = useBoards()
|
|
const [query, setQuery] = useState('')
|
|
const { account } = useWeb3React()
|
|
|
|
const dispatch = useDispatch()
|
|
const { fastRefresh } = useRefresh()
|
|
// 资金池总额
|
|
const [totalAmount, setTotalAmount] = useState(0)
|
|
// 分红总额
|
|
const [shareOutBonus, setShareOutBonus] = useState(0)
|
|
|
|
const [boardNum, setBoardNum] = useState(0)
|
|
const [holderNum, setHolder] = useState(0)
|
|
|
|
// 获取分红总额
|
|
const fetchBoardShares = async () => {
|
|
const boardsData = await Promise.all(
|
|
boardsConfig.map(async (boardConfig) => {
|
|
const [boardPoolInfo] = await multicall(boardConfig.abi, [
|
|
{
|
|
address: getAddress(boardConfig.contractAddress),
|
|
name: '_poolInfo',
|
|
},
|
|
])
|
|
const [waitWithdrawAmount] = await multicall(erc20ABI, [
|
|
{
|
|
address: getAddress(boardConfig.tokenAddresses),
|
|
name: 'balanceOf',
|
|
params: [getAddress(boardConfig.contractRewardAddress)],
|
|
},
|
|
])
|
|
return {
|
|
pid: boardConfig.pid,
|
|
totalAmount: getBalanceAmount(new BigNumber(boardPoolInfo.totalAmount._hex)).toNumber(),
|
|
num: new BigNumber(boardPoolInfo?.num?._hex).toNumber(),
|
|
waitWithdrawAmount: getBalanceAmount(new BigNumber(waitWithdrawAmount.balance._hex)).toNumber(),
|
|
}
|
|
}),
|
|
)
|
|
let total = 0
|
|
let waitWithdrawAmountValue = 0
|
|
boardsData.forEach((item) => {
|
|
total += item.totalAmount
|
|
waitWithdrawAmountValue += item.waitWithdrawAmount
|
|
if (item.pid === 1) {
|
|
setBoardNum(item.num)
|
|
} else if (item.pid === 2) {
|
|
setHolder(item.waitWithdrawAmount)
|
|
}
|
|
})
|
|
setTotalAmount(total)
|
|
setShareOutBonus(waitWithdrawAmountValue)
|
|
}
|
|
useEffect(() => {
|
|
dispatch(fetchBoardsPublicDataAsync())
|
|
fetchBoardShares()
|
|
if (account) {
|
|
dispatch(fetchBoardUserDataAsync(account))
|
|
}
|
|
}, [account, dispatch, fastRefresh])
|
|
|
|
const renderContent = (): JSX.Element => {
|
|
return (
|
|
<div>
|
|
<FlexLayout>
|
|
{boardsList.map((board) => (
|
|
<BoardCard key={board.pid} board={board} account={account} removed />
|
|
))}
|
|
</FlexLayout>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<Header>
|
|
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
|
|
{t('Total capital pool')}
|
|
</Heading>
|
|
<Balance lineHeight="1" fontSize="32px" decimals={0} value={Number(totalAmount)} />
|
|
<FlexLayoutMain>
|
|
<HeaderItem title={t('The total amount of dividends')} price={shareOutBonus} />
|
|
{/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
|
|
<HeaderItem title={t('Number of boards')} price={boardNum} />
|
|
<HeaderItem title={t('Number of holders')} price={holderNum} />
|
|
</FlexLayoutMain>
|
|
</Header>
|
|
{renderContent()}
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export default Boards
|