fix(@embark/ens): Show ENS controls for Test DApp

For the test DApp, when ENS is enabled, ENS controls were not showing in Cockpit (under Utils), nor were they available to test in the DApp interface as they did not exist.

Fix ENS controls not showing in Cockpit when enabled.

Add ENS tab to Test DApp for ENS UI.

dapps/tests/app/app/index.html

@@ -15,6 +15,7 @@
       <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
       <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
       <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
+      <li role="presentation"><a href="#namesystem" aria-controls="namesystem" role="tab" data-toggle="tab">Namesystem (ENS)<span class="pull-right" id="status-namesystem"></span></a></li>
     </ul>
 
     <div class="tab-content">
@@ -104,6 +105,43 @@
           <br> EmbarkJS.Messages.setProvider('whisper')
         </div>
       </div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="namesystem">
+      <div class="alert alert-danger not-enabled" role="alert">ENS is not enabled</div>
+      <div id="namesystem-controls">
+        <div class="resolve">
+          <h3>Resolve a name</h3>
+          <div class="error alert alert-danger" role="alert"></div>
+          <div class="success alert alert-success" role="alert"></div>
+          <div class="inline-input-btn form-group form-inline">
+            <input type="text" class="form-control" value="eth" size="60">
+            <button id="resolve" type="button" class="btn btn-primary">Resolve name</button>
+          </div>
+        </div>
+        <div class="lookup">
+          <h3>Lookup an address</h3>
+          <div class="error alert alert-danger" role="alert"></div>
+          <div class="success alert alert-success" role="alert"></div>
+          <div class="inline-input-btn form-group form-inline">
+            <input type="text" class="form-control" size="60">
+            <button id="lookup" type="button" class="btn btn-primary">Lookup address</button>
+          </div>
+        </div>
+        <div class="register">
+          <h3>Register subdomain</h3>
+          <div class="error alert alert-danger" role="alert"></div>
+          <div class="success alert alert-success" role="alert"></div>
+          <div class="form-group">
+            <input type="text" class="small-input float-left form-control name" size="60" placeholder="subdomain (ie 'test' resulting in 'test.embark.eth' assuming the root domain is 'embark.eth')">
+            <input type="text" class="form-control address" size="60" placeholder="subdomain address">
+            <button id="register" type="button" class="btn btn-primary">Register subdomain</button>
+          </div>
+        </div>
+        <div class="form-group">
+          <h3>Embark Calls </h3>
+          <p>Javascript calls being made: </p>
+          <div class="logs"></div>
+        </div>
       </div>
     </div>
 

dapps/tests/app/app/js/index.js

@@ -140,3 +140,85 @@ $(document).ready(function() {
   });
 });
 
+// ===========================
+// Namesystem (ENS) example
+// ===========================
+$(document).ready(function () {
+  EmbarkJS.onReady(async () => {
+    $("#namesystem .error").hide();
+    let error = null, isAvailable = false;
+    try {
+      if (!EmbarkJS.Names.currentNameSystems) {
+        throw new Error("Please set a provider using e.g. 'EmbarkJS.Names.setProvider(\"ens\")'");
+      }
+      addToLog("#namesystem", "EmbarkJS.Names.setProvider('ens')");
+      await EmbarkJS.Names.currentNameSystems.waitForProviderReady();
+      isAvailable = EmbarkJS.Names.isAvailable();
+    } catch (err) {
+      error = err;
+    }
+    finally {
+      if (error || !isAvailable) {
+        $("#namesystem .not-enabled").show();
+        $("#namesystem .error").text(error).show();
+        $("#namesystem-controls").hide();
+        $("#status-namesystem").addClass('status-offline');
+      } else {
+        $("#status-namesystem").addClass('status-online');
+        $("#namesystem .not-enabled").hide();
+
+        $("#namesystem .resolve .error").hide();
+        $("#namesystem .resolve .success").hide();
+        $("#namesystem .resolve input").val(EmbarkJS.Names.currentNameSystems.registration.rootDomain);
+
+        $("#namesystem .lookup .error").hide();
+        $("#namesystem .lookup .success").hide();
+        $("#namesystem .lookup input").val(web3.eth.defaultAccount);
+
+        $("#namesystem .register .error").hide();
+        $("#namesystem .register .success").hide();
+        $("#namesystem .register input.address").val(web3.eth.defaultAccount);
+      }
+    }
+
+    $("#namesystem .resolve button").click(function () {
+      $("#namesystem .resolve .error").hide();
+      $("#namesystem .resolve .success").hide();
+      var resolveName = $("#namesystem .resolve input").val();
+      EmbarkJS.Names.resolve(resolveName, (err, result) => {
+        if (err) {
+          return $("#namesystem .resolve .error").text(err).show();
+        }
+        $("#namesystem .resolve .success").text(result).show();
+      });
+      addToLog("#namesystem", `EmbarkJS.Names.resolve('${resolveName}', console.log)`);
+    });
+
+    $("#namesystem .lookup button").click(function () {
+      $("#namesystem .lookup .error").hide();
+      $("#namesystem .lookup .success").hide();
+      var lookupName = $("#namesystem .lookup input").val();
+      EmbarkJS.Names.lookup(lookupName, (err, result) => {
+        if (err) {
+          return $("#namesystem .lookup .error").text(err).show();
+        }
+        $("#namesystem .lookup .success").text(result).show();
+      });
+      addToLog("#namesystem", `EmbarkJS.Names.lookup('${lookupName}', console.log)`);
+    });
+
+    $("#namesystem .register button").click(function () {
+      $("#namesystem .register .error").hide();
+      $("#namesystem .register .success").hide();
+      var registerName = $("#namesystem .register input.name").val();
+      var registerAddress = $("#namesystem .register input.address").val();
+      EmbarkJS.Names.registerSubDomain(registerName, registerAddress, (err, transaction) => {
+        if (err) {
+          return $("#namesystem .register .error").text(err).show();
+        }
+        $("#namesystem .register .success").text(`Successfully registered "${registerAddress}" with ${transaction.gasUsed} gas`).show();
+      });
+      addToLog("#namesystem", `EmbarkJS.Names.registerSubDomain('${registerName}', '${registerAddress}', console.log)`);
+    });
+  });
+});

packages/cockpit/ui/src/containers/EnsContainer.js

@@ -6,11 +6,18 @@ import {ensRecord, ensRecords} from "../actions";
 import EnsRegister from "../components/EnsRegister";
 import EnsLookup from "../components/EnsLookup";
 import EnsResolve from "../components/EnsResolve";
+import Loading from "../components/Loading";
 import PageHead from "../components/PageHead";
-import {getEnsRecords, isEnsEnabled, getEnsErrors} from "../reducers/selectors";
+import {getEnsRecords, isEnsEnabled, getEnsErrors, isLoading} from "../reducers/selectors";
 
 class EnsContainer extends Component {
 
+  componentDidMount() {
+    // Fire off resolve to determine if ENS api endpoints have been registered.
+    // This will tell us if ENS is enabled or not.
+    this.props.resolve();
+  }
+
   showEns() {
     return (
       <React.Fragment>
@@ -33,7 +40,8 @@ class EnsContainer extends Component {
   render() {
     return (
       <React.Fragment>
-        {this.props.isEnsEnabled ? this.showEns() : this.showWarning()}
+        {this.props.isLoading && <Loading></Loading>}
+        {!this.props.isLoading && this.props.isEnsEnabled ? this.showEns() : this.showWarning()}
       </React.Fragment>
     );
   }
@@ -45,14 +53,16 @@ EnsContainer.propTypes = {
   lookup: PropTypes.func,
   register: PropTypes.func,
   isEnsEnabled: PropTypes.bool,
-  ensErrors: PropTypes.string
+  ensErrors: PropTypes.string,
+  isLoading: PropTypes.bool
 };
 
 function mapStateToProps(state) {
   return {
     ensRecords: getEnsRecords(state),
     ensErrors: getEnsErrors(state),
-    isEnsEnabled: isEnsEnabled(state)
+    isEnsEnabled: isEnsEnabled(state),
+    isLoading: isLoading(state)
   };
 }
 

packages/cockpit/ui/src/reducers/selectors.js

@@ -176,7 +176,7 @@ export function getEnsErrors(state) {
 }
 
 export function isEnsEnabled(state) {
-  return Boolean(state.entities.plugins.find((plugin) => plugin.name === 'embark-ens'));
+  return Boolean(state.errorEntities.ensRecords !== "Request failed with status code 404");
 }
 
 export function getFiles(state) {
@@ -267,3 +267,7 @@ export function getPreviewUrl(state) {
 export function getEditorOperationStatus(state) {
   return state.editorOperationStatus;
 }
+
+export function isLoading(state) {
+  return state.loading;
+}