Register and resolve

embark-ui/src/components/EnsLookup.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {
+  Alert,
   Button,
   Form
 } from "tabler-react";
@@ -10,18 +11,29 @@ class EnsLookup extends Component {
     super(props);
 
     this.state = {
-      address: ''
+      address: '',
+      showResult: false
     };
   }
 
   handleChange(e) {
-    this.setState({address: e.target.value});
+    this.setState({address: e.target.value, showResult: false});
   }
 
   handleLookup() {
+    this.setState({showResult: true});
     this.props.lookup(this.state.address);
   }
 
+  showResult() {
+    let ensRecord = this.props.ensRecords.find((record) => record.address === this.state.address);
+    if (ensRecord) {
+      return <Alert type="success">The name is: {ensRecord.name}</Alert>;
+    } else {
+      return <Alert type="danger">We could not find a name for this address</Alert>;
+    }
+  }
+
   render(){
     return (
       <React.Fragment>
@@ -31,6 +43,7 @@ class EnsLookup extends Component {
             <Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
           </Form.Group>
           <Button color="primary" onClick={() => this.handleLookup()}>Lookup</Button>
+          {this.state.showResult && this.showResult()}
         </Form.FieldSet>
       </React.Fragment>
     );
@@ -38,7 +51,8 @@ class EnsLookup extends Component {
 }
 
 EnsLookup.propTypes = {
-  lookup: PropTypes.func
+  lookup: PropTypes.func,
+  ensRecords: PropTypes.arrayOf(PropTypes.object)
 };
 
 export default EnsLookup;

embark-ui/src/components/EnsRecords.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import {
-  Page,
-  Grid,
-  Card,
-  Table
-} from "tabler-react";
-import PropTypes from 'prop-types';
-
-const EnsRecords = ({ensRecords}) => (
-  <Page.Content title="Records">
-    <Grid.Row>
-      <Grid.Col>
-        <Card>
-          <Table
-            responsive
-            className="card-table table-vcenter text-nowrap"
-            headerItems={[
-              {content: "Name"},
-              {content: "Address"}
-            ]}
-            bodyItems={
-              ensRecords.map((ensRecord) => {
-                return ([
-                  {content: ensRecord.name},
-                  {content: ensRecord.address}
-                ]);
-              })
-            }
-          />
-        </Card>
-      </Grid.Col>
-    </Grid.Row>
-  </Page.Content>
-);
-
-EnsRecords.propTypes = {
-  ensRecords: PropTypes.arrayOf(PropTypes.object)
-};
-
-export default EnsRecords;

embark-ui/src/components/EnsRegister.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {
+  Alert,
   Button,
   Form, Grid
 } from "tabler-react";
@@ -11,18 +12,30 @@ class EnsRegister extends Component {
 
     this.state = {
       name: '',
-      address: ''
+      address: '',
+      showResult: false
     };
   }
 
   handleChange(e, name) {
     this.setState({
+      showResult: false,
       [name]: e.target.value
     });
   }
 
   handleRegister() {
     this.props.register(this.state.name, this.state.address);
+    this.setState({showResult: true});
+  }
+
+  showResult() {
+    let ensRecord = this.props.ensRecords.find((record) => record.address === this.state.address && record.name === this.state.name);
+    if (ensRecord) {
+      return <Alert type="success">Successfully registered</Alert>;
+    } else {
+      return <Alert type="danger">An error happened</Alert>;
+    }
   }
 
   render(){
@@ -44,13 +57,15 @@ class EnsRegister extends Component {
           </Grid.Row>
           <Button color="primary" onClick={() => this.handleRegister()}>Register</Button>
         </Form.FieldSet>
+        {this.state.showResult && this.showResult()}
       </React.Fragment>
     );
   }
 }
 
 EnsRegister.propTypes = {
-  register: PropTypes.func
+  register: PropTypes.func,
+  ensRecords: PropTypes.arrayOf(PropTypes.object)
 };
 
 export default EnsRegister;

embark-ui/src/components/EnsResolve.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {
+  Alert,
   Button,
   Form
 } from "tabler-react";
@@ -10,18 +11,29 @@ class EnsResolve extends Component {
     super(props);
 
     this.state = {
-      name: ''
+      name: '',
+      showResult: false
     };
   }
 
   handleChange(e) {
-    this.setState({name: e.target.value});
+    this.setState({name: e.target.value, showResult: false});
   }
 
   handleResolve() {
+    this.setState({showResult: true});
     this.props.resolve(this.state.name);
   }
 
+  showResult() {
+    let ensRecord = this.props.ensRecords.find((record) => record.name === this.state.name);
+    if (ensRecord) {
+      return <Alert type="success">The address is: {ensRecord.address}</Alert>;
+    } else {
+      return <Alert type="danger">We could not find an address for this name</Alert>;
+    }
+  }
+
   render(){
     return (
       <React.Fragment>
@@ -31,6 +43,7 @@ class EnsResolve extends Component {
             <Form.Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/>
           </Form.Group>
           <Button color="primary" onClick={() => this.handleResolve()}>Resolve</Button>
+          {this.state.showResult && this.showResult()}
         </Form.FieldSet>
       </React.Fragment>
     );
@@ -38,7 +51,8 @@ class EnsResolve extends Component {
 }
 
 EnsResolve.propTypes = {
-  resolve: PropTypes.func
+  resolve: PropTypes.func,
+  ensRecords: PropTypes.arrayOf(PropTypes.object)
 };
 
 export default EnsResolve;

embark-ui/src/containers/EnsContainer.js

@@ -3,11 +3,9 @@ import React, {Component} from 'react';
 import connect from "react-redux/es/connect/connect";
 import {Alert, Page} from "tabler-react";
 import {ensRecord, ensRecords} from "../actions";
-import DataWrapper from "../components/DataWrapper";
 import EnsRegister from "../components/EnsRegister";
 import EnsLookup from "../components/EnsLookup";
 import EnsResolve from "../components/EnsResolve";
-import EnsRecords from "../components/EnsRecords";
 import {getEnsRecords, isEnsEnabled} from "../reducers/selectors";
 
 class EnsContainer extends Component {
@@ -15,12 +13,9 @@ class EnsContainer extends Component {
   showEns() {
     return (
       <React.Fragment>
-        <EnsLookup lookup={this.props.lookup}/>
-        <EnsResolve resolve={this.props.resolve}/>
-        <EnsRegister register={this.props.register}/>
-        <DataWrapper shouldRender={this.props.ensRecords.length > 0} {...this.props} render={({ensRecords}) => (
-          <EnsRecords ensRecords={ensRecords} />
-        )} />
+        <EnsLookup lookup={this.props.lookup} ensRecords={this.props.ensRecords}/>
+        <EnsResolve resolve={this.props.resolve} ensRecords={this.props.ensRecords}/>
+        <EnsRegister register={this.props.register} ensRecords={this.props.ensRecords}/>
       </React.Fragment>
     );
   }