diff --git a/embark-ui/src/components/EnsLookup.js b/embark-ui/src/components/EnsLookup.js
index acb319f2..b8446b7f 100644
--- a/embark-ui/src/components/EnsLookup.js
+++ b/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 The name is: {ensRecord.name};
+ } else {
+ return We could not find a name for this address;
+ }
+ }
+
render(){
return (
@@ -31,6 +43,7 @@ class EnsLookup extends Component {
this.handleChange(e)}/>
+ {this.state.showResult && this.showResult()}
);
@@ -38,7 +51,8 @@ class EnsLookup extends Component {
}
EnsLookup.propTypes = {
- lookup: PropTypes.func
+ lookup: PropTypes.func,
+ ensRecords: PropTypes.arrayOf(PropTypes.object)
};
export default EnsLookup;
diff --git a/embark-ui/src/components/EnsRecords.js b/embark-ui/src/components/EnsRecords.js
deleted file mode 100644
index b1be757a..00000000
--- a/embark-ui/src/components/EnsRecords.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import {
- Page,
- Grid,
- Card,
- Table
-} from "tabler-react";
-import PropTypes from 'prop-types';
-
-const EnsRecords = ({ensRecords}) => (
-
-
-
-
- {
- return ([
- {content: ensRecord.name},
- {content: ensRecord.address}
- ]);
- })
- }
- />
-
-
-
-
-);
-
-EnsRecords.propTypes = {
- ensRecords: PropTypes.arrayOf(PropTypes.object)
-};
-
-export default EnsRecords;
diff --git a/embark-ui/src/components/EnsRegister.js b/embark-ui/src/components/EnsRegister.js
index 7f738463..e9ce3858 100644
--- a/embark-ui/src/components/EnsRegister.js
+++ b/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 Successfully registered;
+ } else {
+ return An error happened;
+ }
}
render(){
@@ -44,13 +57,15 @@ class EnsRegister extends Component {
+ {this.state.showResult && this.showResult()}
);
}
}
EnsRegister.propTypes = {
- register: PropTypes.func
+ register: PropTypes.func,
+ ensRecords: PropTypes.arrayOf(PropTypes.object)
};
export default EnsRegister;
diff --git a/embark-ui/src/components/EnsResolve.js b/embark-ui/src/components/EnsResolve.js
index 1f21f0f5..879bacbd 100644
--- a/embark-ui/src/components/EnsResolve.js
+++ b/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 The address is: {ensRecord.address};
+ } else {
+ return We could not find an address for this name;
+ }
+ }
+
render(){
return (
@@ -31,6 +43,7 @@ class EnsResolve extends Component {
this.handleChange(e)}/>
+ {this.state.showResult && this.showResult()}
);
@@ -38,7 +51,8 @@ class EnsResolve extends Component {
}
EnsResolve.propTypes = {
- resolve: PropTypes.func
+ resolve: PropTypes.func,
+ ensRecords: PropTypes.arrayOf(PropTypes.object)
};
export default EnsResolve;
diff --git a/embark-ui/src/containers/EnsContainer.js b/embark-ui/src/containers/EnsContainer.js
index f5c8a127..68a15af8 100644
--- a/embark-ui/src/containers/EnsContainer.js
+++ b/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 (
-
-
-
- 0} {...this.props} render={({ensRecords}) => (
-
- )} />
+
+
+
);
}