add ens to demo

templates/demo/app/components/ens.js

@@ -0,0 +1,121 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import {Alert, Form, FormGroup, FormControl, Button} from 'react-bootstrap';
+
+window.EmbarkJS = EmbarkJS;
+
+class ENS extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      valueResolve: 'ethereumfoundation.eth',
+      responseResolve: null,
+      isResolveError: false,
+      valueLookup: '0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359',
+      responseLookup: null,
+      isLookupError: false,
+      embarkLogs: []
+    };
+  }
+
+  handleChange(stateName, e) {
+    this.setState({[stateName]: e.target.value});
+  }
+
+  resolveName(e) {
+    e.preventDefault();
+    const embarkLogs = this.state.embarkLogs;
+    embarkLogs.push(`EmbarkJS.Names.resolve('${this.state.valueResolve}', console.log)`);
+
+    this.setState({
+      embarkLogs: embarkLogs
+    });
+    EmbarkJS.Names.resolve(this.state.valueResolve, (err, result) => {
+      if (err) {
+        return this.setState({
+          responseResolve: err,
+          isResolveError: true
+        });
+      }
+      this.setState({
+        responseResolve: result,
+        isResolveError: false
+      });
+    });
+  }
+
+  lookupAddress(e) {
+    e.preventDefault();
+    const embarkLogs = this.state.embarkLogs;
+    embarkLogs.push(`EmbarkJS.Names.resolve('${this.state.valueLookup}', console.log)`);
+
+    this.setState({
+      embarkLogs: embarkLogs
+    });
+    EmbarkJS.Names.lookup(this.state.valueLookup, (err, result) => {
+      if (err) {
+        return this.setState({
+          responseLookup: err,
+          isLookupError: true
+        });
+      }
+      this.setState({
+        responseLookup: result,
+        isLookupError: false
+      });
+    });
+  }
+
+  render() {
+    return (<React.Fragment>
+        {
+          !this.props.enabled ?
+            <React.Fragment>
+              <Alert bsStyle="warning">ENS provider might not be set</Alert>
+            </React.Fragment> : ''
+        }
+        <h3>Resolve a name</h3>
+        <Form inline>
+          <FormGroup>
+            {this.state.responseResolve &&
+            <Alert className="alert-result" bsStyle={this.state.isResolveError ? 'danger' : 'success'}>
+              Resolved address: <span className="value">{this.state.responseResolve}</span>
+            </Alert>}
+            <FormControl
+              type="text"
+              defaultValue={this.state.valueResolve}
+              onChange={(e) => this.handleChange('valueResolve', e)}/>
+            <Button bsStyle="primary" onClick={(e) => this.resolveName(e)}>Resolve name</Button>
+          </FormGroup>
+        </Form>
+
+        <h3>Lookup an address</h3>
+        <Form inline>
+          <FormGroup>
+            {this.state.responseLookup &&
+            <Alert className="alert-result" bsStyle={this.state.isLookupError ? 'danger' : 'success'}>
+              Looked up domain: <span className="value">{this.state.responseLookup}</span>
+            </Alert>}
+            <FormControl
+              type="text"
+              defaultValue={this.state.valueLookup}
+              onChange={(e) => this.handleChange('valueLookup', e)}/>
+            <Button bsStyle="primary" onClick={(e) => this.lookupAddress(e)}>Lookup address</Button>
+          </FormGroup>
+        </Form>
+
+        <h3>Embark Calls </h3>
+        <p>Javascript calls being made: </p>
+        <div className="logs">
+          {
+            this.state.embarkLogs.map((item, i) => <p key={i}>{item}</p>)
+          }
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default ENS;

templates/demo/app/dapp.css

@@ -50,4 +50,8 @@ div {
 
 input.form-control {
   margin-right: 5px;
-}
+}
+
+.alert-result {
+  margin-left: 0;
+}

templates/demo/app/dapp.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tabs, Tab } from 'react-bootstrap';
+import {Tabs, Tab} from 'react-bootstrap';
 
 import EmbarkJS from 'Embark/EmbarkJS';
 import Blockchain from './components/blockchain';
 import Whisper from './components/whisper';
 import Storage from './components/storage';
+import ENS from './components/ens';
 
 import './dapp.css';
 
@@ -16,56 +17,61 @@ class App extends React.Component {
 
     this.state = {
       whisperEnabled: false,
-      storageEnabled: false
+      storageEnabled: false,
-    }
+      ensEnabled: false
+    };
   }
 
-  componentDidMount(){ 
+  componentDidMount() {
     EmbarkJS.onReady(() => {
       if (EmbarkJS.isNewWeb3()) {
-        EmbarkJS.Messages.Providers.whisper.getWhisperVersion((err, version) => { 
+        EmbarkJS.Messages.Providers.whisper.getWhisperVersion((err, _version) => {
-          if(!err)
+          if (err) {
-              this.setState({whisperEnabled: true})
+            return console.log(err);
-            else
+          }
-              console.log(err);
+          this.setState({whisperEnabled: true});
         });
       } else {
         if (EmbarkJS.Messages.providerName === 'whisper') {
-          EmbarkJS.Messages.getWhisperVersion((err, version) => {
+          EmbarkJS.Messages.getWhisperVersion((err, _version) => {
-            if(!err)
+            if (err) {
-              this.setState({whisperEnabled: true})
+              return console.log(err);
-            else
+            }
-              console.log(err);
+            this.setState({whisperEnabled: true});
           });
         }
       }
 
       this.setState({
-        storageEnabled: true
+        storageEnabled: true,
+        ensEnabled: EmbarkJS.Names.isAvailable()
       });
     });
   }
 
 
-  _renderStatus(title, available){
+  _renderStatus(title, available) {
     let className = available ? 'pull-right status-online' : 'pull-right status-offline';
     return <React.Fragment>
-      {title} 
+      {title}
       <span className={className}></span>
     </React.Fragment>;
   }
 
-  render(){
+  render() {
     return (<div><h3>Embark - Usage Example</h3>
       <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
         <Tab eventKey={1} title="Blockchain">
-          <Blockchain />
+          <Blockchain/>
         </Tab>
         <Tab eventKey={2} title={this._renderStatus('Decentralized Storage', this.state.storageEnabled)}>
-          <Storage enabled={this.state.storageEnabled} />
+          <Storage enabled={this.state.storageEnabled}/>
         </Tab>
-        <Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper/Orbit)', this.state.whisperEnabled)}>
+        <Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper)', this.state.whisperEnabled)}>
-          <Whisper enabled={this.state.whisperEnabled} />
+          <Whisper enabled={this.state.whisperEnabled}/>
+        </Tab>
+        <Tab eventKey={4} title={this._renderStatus('Naming (ENS)', this.state.ensEnabled)}>
+          <ENS enabled={this.state.ensEnabled}/>
         </Tab>
       </Tabs>
     </div>);