1  import React from 'react';
 2  import {withRouter} from 'react-router-dom';
 3  import {
 4    Card,
 5    CardHeader,
 6    CardBody,
 7    Form,
 8    FormGroup,
 9    Input,
10    InputGroup,
11    InputGroupAddon,
12    Button,
13    Alert
14  } from 'reactstrap';
15  import ReactJson from 'react-json-view';
16  
17  class TransactionDecoder extends React.Component {
18  
19    constructor(props) {
20      super(props);
21      this.state = {
22        transactionHash: this.props.transactionHash || ''
23      };
24    }
25  
26    handleTransactionHashChange(event) {
27      const transactionHash = event.target.value;
28      this.setState({transactionHash});
29    }
30  
31    fetchTransaction(e) {
32      e.preventDefault();
33      if (this.state.transactionHash !== '') {
34        this.props.history.push({
35          search: `hash=${this.state.transactionHash}`
36        });
37      }
38    }
39  
40    render() {
41      return (
42        <Card>
43          <CardHeader>
44            <strong>Transaction Decoder</strong>
45          </CardHeader>
46          <CardBody>
47            <Form onSubmit={e => this.fetchTransaction(e)}>
48              <FormGroup>
49                <InputGroup>
50                  <Input type="text" id="transactionHash" placeholder="Enter transaction hash" value={this.state.transactionHash} onChange={e => this.handleTransactionHashChange(e)}/>
51                  <InputGroupAddon addonType="append">
52                    <Button color="primary" type="submit">Decode</Button>
53                  </InputGroupAddon>
54                </InputGroup>
55              </FormGroup>
56            </Form>
57            {this.props.transactionHash && !this.props.transaction && <Alert color="danger">Couldn't find transaction for hash {this.props.transactionHash}</Alert>}
58  
59            <div className="mt-3">
60              {this.props.transaction && <ReactJson src={this.props.transaction} theme="monokai" sortKeys={true} collapsed={1} />}
61            </div>
62          </CardBody>
63        </Card>
64      );
65    }
66  }
67  
68  export default withRouter(TransactionDecoder);