|
@@ -1,11 +1,12 @@
|
|
import React from "react";
|
|
import React from "react";
|
|
-import { Form, Table} from "react-bootstrap";
|
|
|
|
|
|
+import { Form, Table, Button} from "react-bootstrap";
|
|
import axios from "axios";
|
|
import axios from "axios";
|
|
import Pagination from 'react-bootstrap/Pagination'
|
|
import Pagination from 'react-bootstrap/Pagination'
|
|
|
|
|
|
import { alternativeBackendApis } from "../../config"
|
|
import { alternativeBackendApis } from "../../config"
|
|
|
|
|
|
import { ValidatorApiResponse } from "../../types";
|
|
import { ValidatorApiResponse } from "../../types";
|
|
|
|
+import { Left } from "react-bootstrap/lib/Media";
|
|
|
|
|
|
interface IProps {
|
|
interface IProps {
|
|
}
|
|
}
|
|
@@ -15,7 +16,8 @@ interface IState {
|
|
blockStart: number
|
|
blockStart: number
|
|
blockEnd: number
|
|
blockEnd: number
|
|
page: number,
|
|
page: number,
|
|
- apiResponse: ValidatorApiResponse;
|
|
|
|
|
|
+ search: boolean,
|
|
|
|
+ apiResponse?: ValidatorApiResponse;
|
|
}
|
|
}
|
|
|
|
|
|
class ValidatorReport extends React.Component<IProps, IState> {
|
|
class ValidatorReport extends React.Component<IProps, IState> {
|
|
@@ -27,20 +29,20 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
blockStart: 0,
|
|
blockStart: 0,
|
|
blockEnd: 0,
|
|
blockEnd: 0,
|
|
page: 1,
|
|
page: 1,
|
|
- apiResponse: {} as ValidatorApiResponse
|
|
|
|
|
|
+ search: false
|
|
};
|
|
};
|
|
this.accountTxFilterChanged = this.accountTxFilterChanged.bind(this);
|
|
this.accountTxFilterChanged = this.accountTxFilterChanged.bind(this);
|
|
|
|
+ this.searchClicked = this.searchClicked.bind(this);
|
|
}
|
|
}
|
|
|
|
|
|
componentDidUpdate(prevProps: IProps, prevState: IState) {
|
|
componentDidUpdate(prevProps: IProps, prevState: IState) {
|
|
- let { address, blockStart, blockEnd, page } = this.state;
|
|
|
|
-
|
|
|
|
- if(blockStart !== prevState.blockStart || blockEnd != prevState.blockEnd) {
|
|
|
|
|
|
+ let { address, blockStart, blockEnd, page, search } = this.state;
|
|
|
|
|
|
|
|
+ if(search) {
|
|
console.log(`Fetching transactions`);
|
|
console.log(`Fetching transactions`);
|
|
const backend = `${alternativeBackendApis}/validator-report?addr=${address}&start_block=${blockStart}&end_block=${blockEnd}&page=${page}`;
|
|
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})});
|
|
|
|
|
|
+ axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data, search: false})});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -70,41 +72,55 @@ class ValidatorReport extends React.Component<IProps, IState> {
|
|
|
|
|
|
changePage(page: number) {
|
|
changePage(page: number) {
|
|
if(this.state.page !== page) {
|
|
if(this.state.page !== page) {
|
|
- this.setState({...this.state, page: page });
|
|
|
|
|
|
+ this.setState({...this.state, page: page, search: true });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ searchClicked() {
|
|
|
|
+ if(!this.state.search) {
|
|
|
|
+ this.setState({...this.state, page: 1, search: true });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
render() {
|
|
render() {
|
|
|
|
|
|
const { address, blockStart, blockEnd, apiResponse, page } = this.state;
|
|
const { address, blockStart, blockEnd, apiResponse, page } = this.state;
|
|
|
|
|
|
return (
|
|
return (
|
|
- <div className="box">
|
|
|
|
|
|
+ <div className="box" style={{textAlign: "left"}}>
|
|
<h3>Validator Report</h3>
|
|
<h3>Validator Report</h3>
|
|
<Form>
|
|
<Form>
|
|
<Form.Group className="mb-3">
|
|
<Form.Group className="mb-3">
|
|
|
|
+ <Form.Label>Wallet address</Form.Label>
|
|
<Form.Control type="address" placeholder="Wallet account" onChange={(e) => this.accountTxFilterChanged(e.target.value)} value={address}/>
|
|
<Form.Control type="address" placeholder="Wallet account" onChange={(e) => this.accountTxFilterChanged(e.target.value)} value={address}/>
|
|
<Form.Text className="text-muted">
|
|
<Form.Text className="text-muted">
|
|
48 character string starting with 5
|
|
48 character string starting with 5
|
|
</Form.Text>
|
|
</Form.Text>
|
|
|
|
+ </Form.Group>
|
|
|
|
+ <Form.Group className="mb-3">
|
|
|
|
+ <Form.Label>Start Block</Form.Label>
|
|
<Form.Control type="blockStart" placeholder="Start Block" onChange={(e) => this.startBlockFilterChanged(+e.target.value)} value={blockStart}/>
|
|
<Form.Control type="blockStart" placeholder="Start Block" onChange={(e) => this.startBlockFilterChanged(+e.target.value)} value={blockStart}/>
|
|
|
|
+ </Form.Group>
|
|
|
|
+ <Form.Group className="mb-3">
|
|
|
|
+ <Form.Label>End Block</Form.Label>
|
|
<Form.Control type="blockEnd" placeholder="End Block" onChange={(e) => this.endBlockFilterChanged(+e.target.value)} value={blockEnd}/>
|
|
<Form.Control type="blockEnd" placeholder="End Block" onChange={(e) => this.endBlockFilterChanged(+e.target.value)} value={blockEnd}/>
|
|
</Form.Group>
|
|
</Form.Group>
|
|
</Form>
|
|
</Form>
|
|
|
|
+ <div className="box" style={{textAlign: "left"}}>
|
|
|
|
+ <Button variant="outline-light" onClick={this.searchClicked}>Search</Button>
|
|
|
|
+ </div>
|
|
<>
|
|
<>
|
|
- { (!apiResponse || !apiResponse.report) ? <h4>No records found</h4> :
|
|
|
|
|
|
+ { !apiResponse ? <div/> :
|
|
|
|
+ (apiResponse.report && apiResponse.report.length == 0) ? <h4>No records found</h4> :
|
|
<>
|
|
<>
|
|
- { (this.totalPages() <= 1) ? <div/> :
|
|
|
|
<Pagination>
|
|
<Pagination>
|
|
- {[...Array(this.totalPages())].map((i) => {
|
|
|
|
- <Pagination.Item key={i} active={i === page} onClick={() => this.changePage(i)}>
|
|
|
|
- {i}
|
|
|
|
|
|
+ {[...Array(this.totalPages()).keys()].map(i =>
|
|
|
|
+ <Pagination.Item key={i+1} active={i+1 === page} onClick={() => this.changePage(i+1)}>
|
|
|
|
+ {i + 1}
|
|
</Pagination.Item>
|
|
</Pagination.Item>
|
|
- })
|
|
|
|
|
|
+ )
|
|
}
|
|
}
|
|
</Pagination>
|
|
</Pagination>
|
|
- }
|
|
|
|
|
|
|
|
<Table striped bordered hover size="sm">
|
|
<Table striped bordered hover size="sm">
|
|
<thead>
|
|
<thead>
|