import React from 'react'; import { Helmet } from 'react-helmet-async'; import { Tab, Nav } from 'react-bootstrap'; import { useParams } from 'react-router-dom'; import ColStyled from '../../components/styled/ColStyled'; import Card from '../../components/styled/Card'; import { Container, Row } from '../../components/styled/CustomBsGrid'; import General from '../../components/validators/validator/General'; import BalanceDistribution from '../../components/validators/validator/charts/BalanceDistribution'; import DelegatedBalance from '../../components/validators/validator/charts/DelegatedBalance'; import NumOfDelegators from '../../components/validators/validator/charts/NumOfDelegators'; import ValidatorStats from '../../components/validators/validator/Stats'; import DelegatorsTable from '../../components/validators/validator/tables/Delegators'; import VotesTable from '../../components/validators/validator/tables/Votes'; import useRequest from '../../hooks/useRequest'; import API from '../../api'; const Validator = () => { const { address } = useParams(); const { resp } = useRequest(API.getValidatorInfo, address); return ( <Container> <Helmet> <title>Cosmos validator | Cosmoscan</title> <meta name="description" content="View information on the individual Cosmos validator." /> <meta itemProp="description" content="View information on the individual Cosmos validator." /> <meta property="og:description" content="View information on the individual Cosmos validator." /> <meta name="twitter:description" content="View information on the individual Cosmos validator." /> </Helmet> <Row xs={1} xl={2}> <ColStyled> <General info={resp || {}} /> </ColStyled> <ColStyled> <BalanceDistribution /> </ColStyled> <ColStyled> <DelegatedBalance /> </ColStyled> <ColStyled> <NumOfDelegators /> </ColStyled> </Row> <Row> <ColStyled> <ValidatorStats /> </ColStyled> </Row> <Row> <ColStyled> <Card> <Tab.Container id="left-tabs-example" defaultActiveKey="delegators"> <Card.Header style={{ padding: 0, border: 'none' }}> <Nav fill variant="tabs"> <Nav.Item> <Nav.Link eventKey="delegators">Delegators</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="votes">Governance votes</Nav.Link> </Nav.Item> </Nav> </Card.Header> <Card.Body style={{ borderLeft: '1px solid #dee2e6', borderRight: '1px solid #dee2e6 ', borderBottom: '1px solid #dee2e6 ', paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0, }} > <Tab.Content> <Tab.Pane eventKey="delegators"> <DelegatorsTable /> </Tab.Pane> <Tab.Pane eventKey="votes"> {resp && resp.acc_address ? ( <VotesTable accAddress={resp.acc_address} /> ) : ( <div>No data</div> )} </Tab.Pane> </Tab.Content> </Card.Body> </Tab.Container> </Card> </ColStyled> </Row> </Container> ); }; export default Validator;