|
@@ -2,11 +2,14 @@ import React from "react";
|
|
|
import { Form, Table, Button, Spinner} from "react-bootstrap";
|
|
|
import axios from "axios";
|
|
|
import Pagination from 'react-bootstrap/Pagination'
|
|
|
+import moment from 'moment'
|
|
|
|
|
|
import { alternativeBackendApis } from "../../config"
|
|
|
|
|
|
import { ValidatorApiResponse } from "../../types";
|
|
|
|
|
|
+const reportDateFormat = 'DD-MM-yyyy';
|
|
|
+
|
|
|
interface IProps {
|
|
|
}
|
|
|
|
|
@@ -36,8 +39,8 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
this.searchClicked = this.searchClicked.bind(this);
|
|
|
}
|
|
|
|
|
|
- componentDidUpdate(prevProps: IProps, prevState: IState) {
|
|
|
- let { address, blockStart, blockEnd, page, search } = this.state;
|
|
|
+ componentDidUpdate = (prevProps: IProps, prevState: IState) => {
|
|
|
+ const { address, blockStart, blockEnd, page, search } = this.state;
|
|
|
|
|
|
if(search) {
|
|
|
console.log(`Fetching transactions`);
|
|
@@ -47,37 +50,37 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- accountTxFilterChanged(address: string) {
|
|
|
+ accountTxFilterChanged = (address: string) => {
|
|
|
if(this.state.address !== address) {
|
|
|
this.setState({...this.state, address: address });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- startBlockFilterChanged(blockStart: number) {
|
|
|
+ startBlockFilterChanged = (blockStart: number) => {
|
|
|
if(this.state.blockStart !== blockStart) {
|
|
|
this.setState({...this.state, blockStart: blockStart });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- endBlockFilterChanged(blockEnd: number) {
|
|
|
+ endBlockFilterChanged = (blockEnd: number) => {
|
|
|
if(this.state.blockEnd !== blockEnd) {
|
|
|
this.setState({...this.state, blockEnd: blockEnd });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- totalPages(): number {
|
|
|
+ totalPages = (): number => {
|
|
|
const pageSize = this.state.apiResponse?.pageSize ?? 50
|
|
|
const result = 1 + (this.state.apiResponse?.totalCount ?? 1) / pageSize
|
|
|
return Math.floor(result)
|
|
|
}
|
|
|
|
|
|
- changePage(page: number) {
|
|
|
+ changePage = (page: number) => {
|
|
|
if(this.state.page !== page) {
|
|
|
this.setState({...this.state, page: page, search: true, loading: true });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- searchClicked() {
|
|
|
+ searchClicked = () => {
|
|
|
if(!this.state.search) {
|
|
|
this.setState({...this.state, page: 1, search: true, loading: true });
|
|
|
}
|
|
@@ -106,14 +109,21 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
<Form.Label>End Block</Form.Label>
|
|
|
<Form.Control type="blockEnd" placeholder="End Block" onChange={(e) => this.endBlockFilterChanged(+e.target.value)} value={blockEnd}/>
|
|
|
</Form.Group>
|
|
|
- </Form>
|
|
|
- <div className="box" style={{textAlign: "left"}}>
|
|
|
<Button variant="outline-light" onClick={this.searchClicked}>Search</Button>
|
|
|
- </div>
|
|
|
+ </Form>
|
|
|
<>
|
|
|
{ !apiResponse ? (loading ? <Spinner animation="border" /> : <div/>) :
|
|
|
(apiResponse.report && apiResponse.report.length == 0) ? <h4>No records found</h4> :
|
|
|
<>
|
|
|
+ <div className="box" style={{textAlign: "left", fontSize: "1rem", fontFamily: "courier"}}>
|
|
|
+ {
|
|
|
+ `Validator Date: ${moment(apiResponse?.startTime).format(reportDateFormat)} - ${moment(apiResponse?.endTime).format(reportDateFormat)}\n
|
|
|
+ Description: I was an active validator from era/block ${apiResponse?.startEra}/${apiResponse?.startBlock}
|
|
|
+ to era/block ${apiResponse?.endEra}/${apiResponse?.endBlock}\n
|
|
|
+ with stash account ${address}.
|
|
|
+ (I was active in all the eras in this range and found a total of ${this.state.apiResponse?.totalBlocks} blocks)`
|
|
|
+ }
|
|
|
+ </div>
|
|
|
<Pagination>
|
|
|
{[...Array(this.totalPages()).keys()].map(i =>
|
|
|
<Pagination.Item key={i+1} active={i+1 === page} onClick={() => this.changePage(i+1)}>
|