|
@@ -1,12 +1,11 @@
|
|
|
import React from "react";
|
|
|
-import { Form, Table, Button} from "react-bootstrap";
|
|
|
+import { Form, Table, Button, Spinner} from "react-bootstrap";
|
|
|
import axios from "axios";
|
|
|
import Pagination from 'react-bootstrap/Pagination'
|
|
|
|
|
|
import { alternativeBackendApis } from "../../config"
|
|
|
|
|
|
import { ValidatorApiResponse } from "../../types";
|
|
|
-import { Left } from "react-bootstrap/lib/Media";
|
|
|
|
|
|
interface IProps {
|
|
|
}
|
|
@@ -17,6 +16,7 @@ interface IState {
|
|
|
blockEnd: number
|
|
|
page: number,
|
|
|
search: boolean,
|
|
|
+ loading: boolean,
|
|
|
apiResponse?: ValidatorApiResponse;
|
|
|
}
|
|
|
|
|
@@ -29,7 +29,8 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
blockStart: 0,
|
|
|
blockEnd: 0,
|
|
|
page: 1,
|
|
|
- search: false
|
|
|
+ search: false,
|
|
|
+ loading: false
|
|
|
};
|
|
|
this.accountTxFilterChanged = this.accountTxFilterChanged.bind(this);
|
|
|
this.searchClicked = this.searchClicked.bind(this);
|
|
@@ -42,7 +43,7 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
console.log(`Fetching transactions`);
|
|
|
const backend = `${alternativeBackendApis}/validator-report?addr=${address}&start_block=${blockStart}&end_block=${blockEnd}&page=${page}`;
|
|
|
|
|
|
- axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data, search: false})});
|
|
|
+ axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data, search: false, loading: false})});
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -72,19 +73,19 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
|
|
|
changePage(page: number) {
|
|
|
if(this.state.page !== page) {
|
|
|
- this.setState({...this.state, page: page, search: true });
|
|
|
+ this.setState({...this.state, page: page, search: true, loading: true });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
searchClicked() {
|
|
|
if(!this.state.search) {
|
|
|
- this.setState({...this.state, page: 1, search: true });
|
|
|
+ this.setState({...this.state, page: 1, search: true, loading: true });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
|
|
- const { address, blockStart, blockEnd, apiResponse, page } = this.state;
|
|
|
+ const { address, blockStart, blockEnd, apiResponse, page, loading } = this.state;
|
|
|
|
|
|
return (
|
|
|
<div className="box" style={{textAlign: "left"}}>
|
|
@@ -110,7 +111,7 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
<Button variant="outline-light" onClick={this.searchClicked}>Search</Button>
|
|
|
</div>
|
|
|
<>
|
|
|
- { !apiResponse ? <div/> :
|
|
|
+ { !apiResponse ? (loading ? <Spinner animation="border" /> : <div/>) :
|
|
|
(apiResponse.report && apiResponse.report.length == 0) ? <h4>No records found</h4> :
|
|
|
<>
|
|
|
<Pagination>
|
|
@@ -122,7 +123,7 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
}
|
|
|
</Pagination>
|
|
|
|
|
|
- <Table striped bordered hover size="sm">
|
|
|
+ <Table striped bordered hover size="sm" variant="dark">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>Era</th>
|