1  import React, {Component} from 'react';
 2  import PropTypes from 'prop-types';
 3  import {
 4    Alert,
 5    FormGroup,
 6    Input,
 7    Button,
 8    Card,
 9    CardHeader,
10    CardBody
11  } from 'reactstrap';
12  
13  class EnsLookup extends Component {
14    constructor(props) {
15      super(props);
16  
17      this.state = {
18        address: '',
19        showResult: false
20      };
21    }
22  
23    handleChange(e) {
24      this.setState({address: e.target.value, showResult: false});
25    }
26  
27    handleLookup() {
28      this.setState({showResult: true});
29      this.props.lookup(this.state.address);
30    }
31  
32    showResult() {
33      let ensRecord = this.props.ensRecords.find((record) => record.address === this.state.address);
34      if (ensRecord) {
35        return <Alert className="mt-3" color="success">The name is: {ensRecord.name}</Alert>;
36      } else {
37        return <Alert className="mt-3" color="danger">We could not find a name for this address</Alert>;
38      }
39    }
40  
41    render(){
42      return (
43        <Card>
44          <CardHeader>
45            <strong>ENS Lookup</strong>
46          </CardHeader>
47          <CardBody>
48            <FormGroup>
49              <Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
50            </FormGroup>
51            <Button color="primary" onClick={() => this.handleLookup()}>Lookup</Button>
52            {this.state.showResult && this.showResult()}
53          </CardBody>
54        </Card>
55      );
56    }
57  }
58  
59  EnsLookup.propTypes = {
60    lookup: PropTypes.func,
61    ensRecords: PropTypes.arrayOf(PropTypes.object)
62  };
63  
64  export default EnsLookup;