status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(components/Ens): move ENS components to Utilities

This commit is contained in:
Pascal Precht 2018-10-12 12:23:02 +02:00
parent 18320573d0
commit df3bce145d
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
4 changed files with 77 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
embark-ui/src/components/EnsLookup.js
View File

@ -1,10 +1,14 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
Alert,
FormGroup,
Input,
Button,
Form
} from "tabler-react";
import PropTypes from 'prop-types';
Card,
CardHeader,
CardBody
} from 'reactstrap';
class EnsLookup extends Component {
constructor(props) {
@ -28,24 +32,26 @@ class EnsLookup extends Component {
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>;
return <Alert className="mt-3" color="success">The name is: {ensRecord.name}</Alert>;
} else {
return <Alert type="danger">We could not find a name for this address</Alert>;
return <Alert className="mt-3" color="danger">We could not find a name for this address</Alert>;
}
}
render(){
return (
<React.Fragment>
<h3>Lookup</h3>
<Form.FieldSet>
<Form.Group>
<Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
</Form.Group>
<Card>
<CardHeader>
<strong>ENS Lookup</strong>
</CardHeader>
<CardBody>
<FormGroup>
<Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
</FormGroup>
<Button color="primary" onClick={() => this.handleLookup()}>Lookup</Button>
{this.state.showResult && this.showResult()}
</Form.FieldSet>
</React.Fragment>
</CardBody>
</Card>
);
}
}

50
embark-ui/src/components/EnsRegister.js
View File

@ -2,8 +2,14 @@ import React, {Component} from 'react';
import {
Alert,
Button,
Form, Grid
} from "tabler-react";
FormGroup,
Input,
Row,
Col,
Card,
CardHeader,
CardBody
} from "reactstrap";
import PropTypes from 'prop-types';
class EnsRegister extends Component {
@ -31,33 +37,35 @@ class EnsRegister extends Component {
showResult() {
if (this.props.ensErrors) {
return <Alert type="danger">An error happened: {this.props.ensErrors}</Alert>;
return <Alert className="mt-3" color="danger">An error happened: {this.props.ensErrors}</Alert>;
} else {
return <Alert type="success">Successfully registered</Alert>;
return <Alert className="mt-3" color="success">Successfully registered</Alert>;
}
}
render(){
return (
<React.Fragment>
<h3>Register</h3>
<Form.FieldSet>
<Grid.Row>
<Grid.Col md={6}>
<Form.Group>
<Form.Input placeholder="Enter a subdomain" onChange={e => this.handleChange(e, "subdomain")}/>
</Form.Group>
</Grid.Col>
<Grid.Col md={6}>
<Form.Group>
<Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e, "address")}/>
</Form.Group>
</Grid.Col>
</Grid.Row>
<Card>
<CardHeader>
<strong>ENS Register</strong>
</CardHeader>
<CardBody>
<Row>
<Col md={6}>
<FormGroup>
<Input placeholder="Enter a subdomain" onChange={e => this.handleChange(e, "subdomain")}/>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Input placeholder="Enter an address" onChange={e => this.handleChange(e, "address")}/>
</FormGroup>
</Col>
</Row>
<Button color="primary" onClick={() => this.handleRegister()}>Register</Button>
</Form.FieldSet>
{this.state.showResult && this.showResult()}
</React.Fragment>
</CardBody>
</Card>
);
}
}

30
embark-ui/src/components/EnsResolve.js
View File

@ -2,8 +2,12 @@ import React, {Component} from 'react';
import {
Alert,
Button,
Form
} from "tabler-react";
FormGroup,
Input,
Card,
CardHeader,
CardBody
} from "reactstrap";
import PropTypes from 'prop-types';
class EnsResolve extends Component {
@ -28,24 +32,26 @@ class EnsResolve extends Component {
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>;
return <Alert className="mt-3" color="success">The address is: {ensRecord.address}</Alert>;
} else {
return <Alert type="danger">We could not find an address for this name</Alert>;
return <Alert className="mt-3" color="danger">We could not find an address for this name</Alert>;
}
}
render(){
return (
<React.Fragment>
<h3>Resolve</h3>
<Form.FieldSet>
<Form.Group>
<Form.Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/>
</Form.Group>
<Card>
<CardHeader>
<strong>ENS Resolver</strong>
</CardHeader>
<CardBody>
<FormGroup>
<Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/>
</FormGroup>
<Button color="primary" onClick={() => this.handleResolve()}>Resolve</Button>
{this.state.showResult && this.showResult()}
</Form.FieldSet>
</React.Fragment>
</CardBody>
</Card>
);
}
}

20
embark-ui/src/containers/EnsContainer.js
View File

@ -1,7 +1,7 @@
import PropTypes from "prop-types";
import React, {Component} from 'react';
import connect from "react-redux/es/connect/connect";
import {Alert, Page} from "tabler-react";
import {Alert, Row, Col} from 'reactstrap';
import {ensRecord, ensRecords} from "../actions";
import EnsRegister from "../components/EnsRegister";
import EnsLookup from "../components/EnsLookup";
@ -12,23 +12,25 @@ class EnsContainer extends Component {
showEns() {
return (
<React.Fragment>
<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} ensErrors={this.props.ensErrors}/>
</React.Fragment>
<Row className="mt-3 justify-content-md-center">
<Col xs="12" sm="9" lg="6">
<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} ensErrors={this.props.ensErrors}/>
</Col>
</Row>
);
}
showWarning() {
return <Alert type="warning">Please enable Ens in Embark first</Alert>;
return <Alert color="warning">Please enable Ens in Embark first</Alert>;
}
render() {
return (
<Page.Content title="Ens">
<React.Fragment>
{this.props.isEnsEnabled ? this.showEns() : this.showWarning()}
</Page.Content>
</React.Fragment>
);
}
}