display pairing qrcode for the block explorer

static/admin/css/style.css

@@ -370,11 +370,20 @@ table.spaced tr td {
 }
 
 /* PAIRING */
-#qr-label {
+#qr-label,
+#qr-explorer-label {
   margin: 0 0 20px 0;
+  text-align: center;
+  display: inline-block;
+}
+
+#qr-container,
+#qr-explorer-container {
+  display: inline-block;
 }
 
-#qr-pairing {
+#qr-pairing,
+#qr-explorer-pairing {
   width: 276px;
   height: 276px;
   padding: 10px;
@@ -390,8 +399,8 @@ table.spaced tr td {
 }
 
 .halfwidth {
-  width: 50%;
-  min-width: 50%;
+  width: 49%;
+  min-width: 49%;
 }
 
 .fullwidth {

static/admin/lib/api-wrapper.js

@@ -39,6 +39,15 @@ var lib_api = {
     return this.sendGetUriEncoded(uri, {});
   },
 
+  /**
+   * Get block explorer pairing info
+   */
+  getExplorerPairingInfo: function() {
+    let prefix = conf['prefixes']['support'];
+    let uri = this.baseUri + '/' + prefix + '/pairing/explorer';
+    return this.sendGetUriEncoded(uri, {});
+  },
+
   /**
    * PushTx Status
    */

static/admin/tool/index.html

@@ -86,10 +86,22 @@
       <div class="col-xs-10 json-data-container">
         <!-- PAIRING -->
         <div id="screen-pairing">
-          <div class="center" id="qr-label">
-            PAIR YOUR SAMOURAI WALLET WITH YOUR DOJO BY SCANNING THIS QRCODE
+          <div class="row">
+            <div id="qr-label" class="halfwidth">
+              PAIR YOUR WALLET WITH YOUR DOJO
+            </div>
+            <div id="qr-explorer-label" class="halfwidth">
+              PAIR YOUR WALLET WITH YOUR BLOCK EXPLORER
+            </div>
+          </div>
+          <div class="row">
+            <div id="qr-container" class="halfwidth">
+              <div id="qr-pairing"></div>
+            </div>
+            <div id="qr-explorer-container" class="halfwidth">
+              <div id="qr-explorer-pairing"></div>
+            </div>
           </div>
-          <div class="center" id="qr-pairing"></div>
         </div>
         <!-- MAINTENANCE -->
         <div id="form-maintenance">

static/admin/tool/index.js

@@ -16,12 +16,25 @@ function displayQRPairing() {
   const activeTab = sessionStorage.getItem('activeTab');
   processAction(activeTab).then(
     function (result) {
-      if (!result) {return;}
-      const url = window.location.protocol + '//' + window.location.host + conf['api']['baseUri'];
-      result['pairing']['url'] = url;
-      const textJson = JSON.stringify(result, null, 4);
-      $("#qr-pairing").html('') // clear qrcode first
-      $('#qr-pairing').qrcode({width: 256, height: 256, text: textJson});
+      if (result) {
+        if (result['api']) {
+          const textJson = JSON.stringify(result['api'], null, 4);
+          $("#qr-pairing").html('') // clear qrcode first
+          $('#qr-pairing').qrcode({width: 256, height: 256, text: textJson});
+        }
+        if (result['explorer'] && result['explorer']['pairing']['url']) {
+          const textJson = JSON.stringify(result['explorer'], null, 4);
+          $("#qr-explorer-pairing").html('') // clear qrcode first
+          $('#qr-explorer-pairing').qrcode({width: 256, height: 256, text: textJson});
+        } else {
+          $("#qr-label").removeClass('halfwidth');
+          $("#qr-label").addClass('fullwidth');
+          $("#qr-container").removeClass('halfwidth');
+          $("#qr-container").addClass('fullwidth');
+          $("#qr-explorer-label").hide();
+          $("#qr-explorer-container").hide();
+        }
+      }
     },
     function (jqxhr) {}
   );
@@ -147,14 +160,34 @@ function preparePage() {
  * Process action (api calls)
  */
 function processAction(activeTab, args, args2, args3) {
-  if (activeTab == '#link-pairing')
-    return lib_api.getPairingInfo();
-  else if (activeTab == '#link-status-api')
+  if (activeTab == '#link-pairing') {
+    //return lib_api.getPairingInfo();
+    let result = {
+      'api': null,
+      'explorer': null
+    };
+    return lib_api.getPairingInfo().then(apiInfo => {
+      if (apiInfo) {
+        apiInfo['pairing']['url'] = window.location.protocol + '//' + window.location.host + conf['api']['baseUri'];
+        result['api'] = apiInfo;
+      }
+    }).then(() => {
+      return lib_api.getExplorerPairingInfo();
+    }).then(explorerInfo => {
+      if (explorerInfo)
+        result['explorer'] = explorerInfo;
+      return result
+    }).catch(e => {
+      console.log(e);
+      return result;
+    });
+  } else if (activeTab == '#link-status-api') {
     return lib_api.getApiStatus();
-  else if (activeTab == '#link-status-pushtx')
+  } else if (activeTab == '#link-status-pushtx') {
     return lib_api.getPushtxStatus();
-  else if (activeTab == '#link-orchestrator')
+  } else if (activeTab == '#link-orchestrator') {
     return lib_api.getOrchestratorStatus();
+  }
 
   if (args == '') {
     alert('Argument is mandatory');