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}) => ( - - )} /> + + + ); }