From aea2b6f97f0396dc70f2cab034a2aa17be054de6 Mon Sep 17 00:00:00 2001 From: emizzle Date: Mon, 16 Dec 2019 16:06:51 +1100 Subject: [PATCH] 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 | 38 +++++++++ dapps/tests/app/app/js/index.js | 82 +++++++++++++++++++ .../cockpit/ui/src/containers/EnsContainer.js | 18 +++- packages/cockpit/ui/src/reducers/selectors.js | 6 +- 4 files changed, 139 insertions(+), 5 deletions(-) diff --git a/dapps/tests/app/app/index.html b/dapps/tests/app/app/index.html index 8542e0dba..dd3701b3d 100644 --- a/dapps/tests/app/app/index.html +++ b/dapps/tests/app/app/index.html @@ -15,6 +15,7 @@
  • Decentralized Storage (IPFS)
  • P2P communication (Whisper/Orbit)
    • +
  • Namesystem (ENS)
    • @@ -104,6 +105,43 @@
    EmbarkJS.Messages.setProvider('whisper')
    + +
    + +
    +
    +

    Resolve a name

    + + +
    + + +
    +
    +
    +

    Lookup an address

    + + +
    + + +
    +
    +
    +

    Register subdomain

    + + +
    + + + +
    +
    +
    +

    Embark Calls

    +

    Javascript calls being made:

    +
    +
    diff --git a/dapps/tests/app/app/js/index.js b/dapps/tests/app/app/js/index.js index ea08c08cc..898a95198 100644 --- a/dapps/tests/app/app/js/index.js +++ b/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)`); + }); + }); +}); diff --git a/packages/cockpit/ui/src/containers/EnsContainer.js b/packages/cockpit/ui/src/containers/EnsContainer.js index 072d99f32..3e9f9df04 100644 --- a/packages/cockpit/ui/src/containers/EnsContainer.js +++ b/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 ( @@ -33,7 +40,8 @@ class EnsContainer extends Component { render() { return ( - {this.props.isEnsEnabled ? this.showEns() : this.showWarning()} + {this.props.isLoading && } + {!this.props.isLoading && this.props.isEnsEnabled ? this.showEns() : this.showWarning()} ); } @@ -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) }; } diff --git a/packages/cockpit/ui/src/reducers/selectors.js b/packages/cockpit/ui/src/reducers/selectors.js index be256616c..e754e904f 100644 --- a/packages/cockpit/ui/src/reducers/selectors.js +++ b/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; +}