hiCity-nft/src/views/Board/index.tsx

88 lines
2.8 KiB
TypeScript

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 { useWeb3React } from '@web3-react/core'
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 { 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()
useEffect(() => {
dispatch(fetchBoardsPublicDataAsync())
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 (
<>
<Header>
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
{t('Total capital pool')}
</Heading>
{/* <SecondText fontSize="28px" color="text">
{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('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>
</>
)
}
export default Boards