embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.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 React, {Component} from 'react';
import PropTypes from 'prop-types';
import { import {
Alert, Alert,
FormGroup,
Input,
Button, Button,
Form Card,
} from "tabler-react"; CardHeader,
import PropTypes from 'prop-types'; CardBody
} from 'reactstrap';
class EnsLookup extends Component { class EnsLookup extends Component {
constructor(props) { constructor(props) {
@ -28,24 +32,26 @@ class EnsLookup extends Component {
showResult() { showResult() {
let ensRecord = this.props.ensRecords.find((record) => record.address === this.state.address); let ensRecord = this.props.ensRecords.find((record) => record.address === this.state.address);
if (ensRecord) { 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 { } 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(){ render(){
return ( return (
<React.Fragment> <Card>
<h3>Lookup</h3> <CardHeader>
<Form.FieldSet> <strong>ENS Lookup</strong>
<Form.Group> </CardHeader>
<Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/> <CardBody>
</Form.Group> <FormGroup>
<Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
</FormGroup>
<Button color="primary" onClick={() => this.handleLookup()}>Lookup</Button> <Button color="primary" onClick={() => this.handleLookup()}>Lookup</Button>
{this.state.showResult && this.showResult()} {this.state.showResult && this.showResult()}
</Form.FieldSet> </CardBody>
</React.Fragment> </Card>
); );
} }
} }

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

@ -2,8 +2,14 @@ import React, {Component} from 'react';
import { import {
Alert, Alert,
Button, Button,
Form, Grid FormGroup,
} from "tabler-react"; Input,
Row,
Col,
Card,
CardHeader,
CardBody
} from "reactstrap";
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
class EnsRegister extends Component { class EnsRegister extends Component {
@ -31,33 +37,35 @@ class EnsRegister extends Component {
showResult() { showResult() {
if (this.props.ensErrors) { 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 { } else {
return <Alert type="success">Successfully registered</Alert>; return <Alert className="mt-3" color="success">Successfully registered</Alert>;
} }
} }
render(){ render(){
return ( return (
<React.Fragment> <Card>
<h3>Register</h3> <CardHeader>
<Form.FieldSet> <strong>ENS Register</strong>
<Grid.Row> </CardHeader>
<Grid.Col md={6}> <CardBody>
<Form.Group> <Row>
<Form.Input placeholder="Enter a subdomain" onChange={e => this.handleChange(e, "subdomain")}/> <Col md={6}>
</Form.Group> <FormGroup>
</Grid.Col> <Input placeholder="Enter a subdomain" onChange={e => this.handleChange(e, "subdomain")}/>
<Grid.Col md={6}> </FormGroup>
<Form.Group> </Col>
<Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e, "address")}/> <Col md={6}>
</Form.Group> <FormGroup>
</Grid.Col> <Input placeholder="Enter an address" onChange={e => this.handleChange(e, "address")}/>
</Grid.Row> </FormGroup>
</Col>
</Row>
<Button color="primary" onClick={() => this.handleRegister()}>Register</Button> <Button color="primary" onClick={() => this.handleRegister()}>Register</Button>
</Form.FieldSet>
{this.state.showResult && this.showResult()} {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 { import {
Alert, Alert,
Button, Button,
Form FormGroup,
} from "tabler-react"; Input,
Card,
CardHeader,
CardBody
} from "reactstrap";
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
class EnsResolve extends Component { class EnsResolve extends Component {
@ -28,24 +32,26 @@ class EnsResolve extends Component {
showResult() { showResult() {
let ensRecord = this.props.ensRecords.find((record) => record.name === this.state.name); let ensRecord = this.props.ensRecords.find((record) => record.name === this.state.name);
if (ensRecord) { 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 { } 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(){ render(){
return ( return (
<React.Fragment> <Card>
<h3>Resolve</h3> <CardHeader>
<Form.FieldSet> <strong>ENS Resolver</strong>
<Form.Group> </CardHeader>
<Form.Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/> <CardBody>
</Form.Group> <FormGroup>
<Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/>
</FormGroup>
<Button color="primary" onClick={() => this.handleResolve()}>Resolve</Button> <Button color="primary" onClick={() => this.handleResolve()}>Resolve</Button>
{this.state.showResult && this.showResult()} {this.state.showResult && this.showResult()}
</Form.FieldSet> </CardBody>
</React.Fragment> </Card>
); );
} }
} }

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

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