cwfront/src/pages/Home.js

86 lines
2.4 KiB
JavaScript

import React from "react"
import {
Box, Stack, VStack, Image, Text,
Flex, HStack, useColorModeValue
} from "@chakra-ui/react"
import { Auditors, Partners, } from "../components"
import { useApp } from '../AppContext'
import { get_page_mining } from '../api'
import { PoolData } from "../components/PoolData"
import { Faq } from "../components/Faq"
import { LatestScreen } from "../components/LatestScreen"
const HomeFooter = () => {
const app = useApp()
return (
<Flex
mt="6"
mx="4"
justifyContent="space-between"
alignItems="center"
color="gray.500"
>
<Image src={app.logo} filter="grayscale(100%)" opacity="0.5" alt='logo' />
<a href="https://www.fairyproof.com/" target="_blank" rel="noreferrer">
<Text
fontFamily="monospace"
fontSize="14"
>FAIRYPROOF</Text>
</a>
</Flex>
)
}
let defPoolData = [
{ name: 'Total output', value: 234, emp: true, unit: '' },
{ name: 'Valid node', value: 2344.34, emp: true, unit: '' },
{ name: 'Participant', value: 2342342.32, emp: false, unit: '' },
{ name: 'User revenue', value: 234234.04, emp: false, unit: 'USDT' },
]
export const Home = () => {
const [poolData, setPoolData] = React.useState(defPoolData)
const [lastestRecord, setLastestRecord] = React.useState([])
const [articles, setArticles] = React.useState([])
const app = useApp()
const bg = useColorModeValue('white', 'gray.900')
const stateCardBg = useColorModeValue('gray.100', 'gray.900')
React.useEffect(() => {
get_page_mining().then(res => {
// console.log(res.data)
const pd = res.data.pool_data
let newPd = [...defPoolData]
newPd[0].value = pd.totalOutput
newPd[1].value = pd.validNode
newPd[2].value = pd.participant
newPd[3].value = pd.userRevenue
setPoolData(newPd)
setArticles(res.data.articles)
setLastestRecord(res.data.topEarns)
}).catch(err => {
})
}, [])
return (
<>
<PoolData title='Pool' data={poolData} />
<LatestScreen mt="4" data={lastestRecord} />
<Faq articles={articles} mt="4" />
<Auditors mt="4" />
<Partners mt="4" />
<HomeFooter />
</>
)
}