RPC tool updates

assets/js/rpc-tool.js

@@ -1,40 +1,33 @@
 jQuery(function ($) {
-  var reTxId = /^[0-9A-Fa-f]{64}$/,
+  const FULL_HISTORY_SERVER = "wss://s2.ripple.com"
-      reLedgerSeq = /^[0-9]+$/;
+  const reTxId = /^[0-9A-Fa-f]{64}$/
+  const reLedgerSeq = /^[0-9]+$/
+  let currentTarget = null
+  let previousMarkers = []
+  let currentMarker
+  let nextMarker
 
-  var txOffset = 0,
+  const api = new ripple.RippleAPI({server: FULL_HISTORY_SERVER})
-      txCount = 0,
-      currentTarget = null;
 
-  var remote = ripple.Remote.from_config({
+  api.on('connected', () => {
-    "trace" : true,
+    const target = location.hash.slice(1);
-    "websocket_ip" : "s2.ripple.com",
+    if (api.isValidAddress(target) ||
-    "websocket_port" : 443,
-    "websocket_ssl" : true
-  });
-  remote.connect();
-
-  remote.once('connected', function () {
-    var target = location.hash.slice(1);
-    if (ripple.UInt160.from_json(target).is_valid() ||
         reTxId.exec(target) ||
         reLedgerSeq.exec(target)) {
       $('#target').val(target);
       fetchTarget(target);
     }
-  });
+  })
+  api.connect();
 
   $('#account-entry').submit(function (e) {
-    e.preventDefault();
+    e.preventDefault()
+    fetchTarget( $('#target').val() )
+  })
 
-    var target = $('#target').val();
+  async function fetchTarget(target)
-
-    fetchTarget(target);
-  });
-
-  function fetchTarget(target)
   {
-    if (!remote.state === "online") return;
+    if (!api.isConnected()) return;
 
     // Reset
     $("#links").show();
@@ -43,114 +36,100 @@ jQuery(function ($) {
     $("#error").hide();
     $("#progress").show();
     $(".json").html("");
-    $("#datalink").parent().removeClass("disabled");
     $(".account-tx-more").parent().hide();
     $(".account-tx-back").parent().hide();
-    txOffset = 0;
 
     currentTarget = target;
 
-    var locationWithoutHash = location.protocol+'//'+location.hostname+(location.port?":"+location.port:"")+location.pathname+(location.search?location.search:"");
+    let locationWithoutHash = location.protocol+'//'+location.hostname+(location.port?":"+location.port:"")+location.pathname+(location.search?location.search:"");
     $("#permalink").attr("href", locationWithoutHash + "#" + target);
-    $("#graphlink").attr("href", "https://www.ripplecharts.com/#/graph/" + target);
+    $("#explorerlink").attr("href", ""); // Reset
 
-    if (ripple.UInt160.from_json(target).is_valid()) {
+    if (api.isValidAddress(target)) { // Account -------------------------------
-      // Account
+      let account = target;
-      var account = target;
+      previousMarkers = []
+      nextMarker = undefined
+      currentMarker = undefined
+      $("#explorerlink").attr("href", `https://livenet.xrpl.org/accounts/${account}`)
 
       $("#result > .group-account").show();
 
       $("#progress .progress-bar").css("width", "10%");
-      $("#datalink").attr("href", null).parent().addClass("disabled");
 
-      async.waterfall([
+      try {
-        function (callback) {
+        let result = await api.request("account_info", {account})
-          remote.request_account_info({account:account})
+        $("#progress .progress-bar").css("width", "20%");
-            .on('success', function (result) {
+        console.log('account_info', result);
-              $("#progress .progress-bar").css("width", "20%");
+        format(result, $("#account_info"));
-              console.log('account_info', result);
+
-              format(result, $("#account_info"));
+        result = await api.request("account_lines", {account})
-              callback();
+        $("#progress .progress-bar").css("width", "40%");
-            })
+        console.log('account_lines', result);
-            .on('error', callback)
+        format(result, $("#account_lines"));
-            .request();
+
-        },
+        result = await pagedAccountTx(account);
-        function (callback) {
+        $("#progress .progress-bar").css("width", "60%");
-          remote.request_account_lines({account:account})
+
-            .on('success', function (result) {
+        result = await api.request("account_objects", {account})
-              $("#progress .progress-bar").css("width", "40%");
+        $("#progress .progress-bar").css("width", "80%");
-              console.log('account_lines', result);
+        console.log('account_objects', result);
-              format(result, $("#account_lines"));
+        format(result, $("#account_objects"));
-              callback();
+
-            })
-            .on('error', callback)
-            .request();
-        },
-        function (callback) {
-          requestTx(account, function (err) {
-            if (err) return callback(err);
-            $("#progress .progress-bar").css("width", "60%");
-            callback();
-          });
-        },
-        function (callback) {
-          remote.request_account_offers({account:account})
-            .on('success', function (result) {
-              $("#progress .progress-bar").css("width", "80%");
-              console.log('account_offers', result);
-              format(result, $("#account_offers"));
-              callback();
-            })
-            .on('error', callback)
-            .request();
-        }
-      ], function (err) {
-        if (err) handleError(err);
         $("#progress .progress-bar").css("width", "100%");
         $("#progress").fadeOut();
-      });
+
-    } else if (reLedgerSeq.exec(target)) {
+      } catch(err) {
+        handleError(err)
+        $("#progress .progress-bar").css("width", "100%");
+        $("#progress").fadeOut();
+      }
+
+
+
+    } else if (reLedgerSeq.exec(target)) { // Ledger ---------------------------
       $("#result > .group-ledger").show();
+      $("#explorerlink").attr("href", `https://livenet.xrpl.org/ledgers/${target}`)
 
-      // Ledger
       $("#progress .progress-bar").css("width", "10%");
-      remote.request_ledger(undefined, { transactions: true, expand: true })
+      try {
-        .ledger_index(+target)
+        let result = await api.request("ledger", {
-        .on('success', function (result) {
+          ledger_index: target,
-          $("#progress .progress-bar").css("width", "100%");
+          transactions: true,
-          $("#progress").fadeOut();
+          expand: true
-          console.log('ledger', result.ledger);
-          format(result.ledger, $("#ledger_info"));
         })
-        .on('error', function (err) {
+        console.log('ledger', result.ledger);
-          console.log(err);
+        format(result.ledger, $("#ledger_info"));
-          handleError(err);
+        $("#progress .progress-bar").css("width", "100%");
-          $("#progress .progress-bar").css("width", "100%");
+        $("#progress").fadeOut();
-          $("#progress").fadeOut();
+
-        })
+      } catch(err) {
-        .request();
+        handleErr(err)
-    } else if (reTxId.exec(target)) {
+        $("#progress .progress-bar").css("width", "100%");
+        $("#progress").fadeOut();
+      }
+
+    } else if (reTxId.exec(target)) { // Transaction ---------------------------
       $("#result > .group-tx").show();
+      $("#explorerlink").attr("href", `https://livenet.xrpl.org/transactions/${target}`)
 
-      $("#datalink").attr("href", "https://ripple.com/client/#/tx/?id=" + target);
+      try {
+        $("#progress .progress-bar").css("width", "10%");
+        let result = await api.request("tx", {
+          transaction: target,
+          binary: false
+        })
+        $("#progress .progress-bar").css("width", "100%");
+        $("#progress").fadeOut();
+        console.log('tx', result);
+        format(result, $("#tx_info"));
 
-      // Transaction
+      } catch (err) {
-      $("#progress .progress-bar").css("width", "10%");
+        handleError(err);
-      remote.requestTransaction({"hash": target, "binary": false})
+        $("#progress .progress-bar").css("width", "100%");
-        .on('success', function (result) {
+        $("#progress").fadeOut();
-          $("#progress .progress-bar").css("width", "100%");
+      }
-          $("#progress").fadeOut();
+
-          console.log('tx', result);
+    } else { // Unknown/Invalid ------------------------------------------------
-          format(result, $("#tx_info"));
-        })
-        .on('error', function (err) {
-          handleError(err);
-          $("#progress .progress-bar").css("width", "100%");
-          $("#progress").fadeOut();
-        })
-        .request();
-    } else {
-      // Unknown/Invalid
       $("#links").hide();
       $("#progress").hide();
       handleError("Input is not a valid address or transaction hash");
@@ -190,27 +169,23 @@ jQuery(function ($) {
   });
 
   $('.account-tx-more').click(function () {
-    $(".account-tx-back").parent().show();
-    txOffset += 20;
     $("#account_tx").text("... loading ...");
-    requestTx(currentTarget, function (err) {});
+    pagedAccountTx(currentTarget, "next");
-    updateTxOffsetNav();
   });
 
   $('.account-tx-back').click(function () {
-    txOffset -= 20;
     $("#account_tx").text("... loading ...");
-    requestTx(currentTarget, function (err) {});
+    let previous_markers = $(".account-tx-back").data("marker")
-    updateTxOffsetNav();
+    pagedAccountTx(currentTarget, "prev");
   });
 
-  $('.account-offers-expand').click(function () {
+  $('.account-objects-expand').click(function () {
-    $("#account_offers .expanded").removeClass("expanded");
+    $("#account_objects .expanded").removeClass("expanded");
-    $("#account_offers").find("ul > li").addClass("expanded");
+    $("#account_objects").find("ul > li").addClass("expanded");
   });
 
-  $('.account-offers-collapse').click(function () {
+  $('.account-objects-collapse').click(function () {
-    $("#account_offers .expanded").removeClass("expanded");
+    $("#account_objects .expanded").removeClass("expanded");
   });
 
   $('.ledger-expand-tx').click(function () {
@@ -228,7 +203,6 @@ jQuery(function ($) {
   });
 
   $('pre.json').delegate(".toggle", "click", function (evt) {
-    console.log(this);
     $(this).parent().toggleClass("expanded");
   });
 
@@ -240,6 +214,7 @@ jQuery(function ($) {
       if (err.error === "remoteError" &&
           "object" === typeof err.remote)
       {
+        // TODO: is this "remoteError" thing still valid with ripple-lib 1.x+?
         err = err.remote;
       }
 
@@ -253,37 +228,49 @@ jQuery(function ($) {
     }
   }
 
-  function requestTx(account, callback) {
+  async function pagedAccountTx(account, page) {
-    remote.request_account_tx({
+    let opts = {
-      'account': account,
+      "account": account,
-      'ledger_index_min': -1,
+      "ledger_index_min": -1,
-      'descending': true,
+      "ledger_index_max": -1,
-      'limit': 20,
+      "binary": false,
-      'offset' : txOffset,
+      "limit": 20,
-      'count': true,
+      "forward": false
-      'binary': false
+    }
-    })
+
-      .on('success', function (result) {
+    if (page === "prev") {
-        txCount = result.count;
+      let prev_marker = previousMarkers.pop()
-        console.log('account_tx', result);
+      if (prev_marker) {
-        format(result, $("#account_tx").empty());
+        opts["marker"] = prev_marker
-        callback();
+      } // omit to ask for page 1
-        updateTxOffsetNav();
+    } else if (page === "next") {
-      })
+      opts["marker"] = nextMarker
-      .on('error', callback)
+      if (currentMarker) {
-      .request();
+        previousMarkers.push(currentMarker)
+      }
+      currentMarker = opts["marker"]
+    }
+
+    let result = await api.request("account_tx", opts)
+    console.log('account_tx', result)
+    format(result, $("#account_tx").empty())
+    updateTxMarkerNav(result)
+
   }
 
-  function updateTxOffsetNav()
+  function updateTxMarkerNav(result) {
-  {
+    if (previousMarkers.length) {
-    $(".account-tx-back").parent().hide();
+      $(".account-tx-back").parent().show()
-    $(".account-tx-more").parent().hide();
+    } else {
+      $(".account-tx-back").parent().hide()
+    }
 
-    if (txOffset > 0)
+    if (result.marker) {
-      $(".account-tx-back").parent().show();
+      nextMarker = result.marker
-
+      $(".account-tx-more").parent().show()
-    if (txCount > (txOffset + 20))
+    } else {
-      $(".account-tx-more").parent().show();
+      $(".account-tx-more").parent().hide()
+    }
   }
 
   String.prototype.repeat = function(times) {
@@ -295,15 +282,15 @@ jQuery(function ($) {
 
     switch (typeof v) {
     case "object":
-      var el, sub = null, count;
+      let el = null
+      let sub = null
       if (Array.isArray(v)) {
         ct.append("[");
-        count = v.length;
+        for (var i = 0; i < v.length; i++) {
-        for (var i = 0; i < count; i++) {
           if (!sub) {
             $('<a class="toggle"></a>').appendTo(ct);
             $('<span class="ellipsis"></span>')
-              .text(getEllipText(count)).appendTo(ct);
+              .text(getEllipText(v.length)).appendTo(ct);
             el = $("<ul></ul>");
           } else sub.append(",");
           sub = $("<li></li>").addClass("type-" + typeof v[i]);
@@ -318,12 +305,11 @@ jQuery(function ($) {
         ct.append("]");
       } else {
         ct.append("{");
-        count = Object.keys(v).length;
         for (var i in v) {
           if (!sub) {
             $('<a class="toggle"></a>').appendTo(ct);
             $('<span class="ellipsis"></span>')
-              .text(getEllipText(Object.keys(v))).appendTo(ct);
+              .text(getEllipText(v)).appendTo(ct);
             el = $("<ul></ul>");
           } else sub.append(",");
           sub = $("<li></li>").addClass("type-" + typeof v[i]);
@@ -351,18 +337,45 @@ jQuery(function ($) {
       break;
     }
   }
-  function getEllipText(count) {
+
+  const TYPE_IDENTIFYING_KEYS = [
+    "TransactionType",
+    "LedgerEntryType"
+  ]
+  function getEllipText(contents) {
     var label = "...";
-    if (Array.isArray(count)) {
+    if ("number" === typeof contents) {
+      // Array - just list how many items
+      label = "" + contents + " items";
+    } else {
+      // Object - list keys intelligently
       label = "";
-      while (label.length < 15) {
+      let i = 0
-        if (!count.length) break;
+      // Look for type-identifying keys first:
-        if (label.length) label += ", ";
+      for (const key of TYPE_IDENTIFYING_KEYS) {
-        label += count.shift();
+        if (key in contents) {
+          label += contents[key]+": "
+          i++
+          break; // Only one type-identifying key per object
+        }
+      }
+      // Now list other keys as space permits
+      for (k in contents) {
+        if (label.length >= 19) {
+          break
+        }
+        if (TYPE_IDENTIFYING_KEYS.includes(k)) {
+          // Skip type-identifying keys already printed
+          continue
+        }
+        label += k + ", "
+        i++
+      }
+      if (i < Object.keys(contents).length) {
+        label += "..."
+      } else {
+        label = label.slice(0,-2) // Remove the last ", "
       }
-      if (count.length) label += ", ...";
-    } else if ("number" === typeof count) {
-      label = "" + count + " items";
     }
     return "\u00A0/* "+label+" */\u00A0";
   }

tool/template-rest-api-tool.html

@@ -57,7 +57,6 @@
     var URL_BASE = '{{ currentpage.rest_host }}';
     var DOC_BASE = '{{ currentpage.doc_page }}';
     </script>
-    <script type='text/javascript' src='assets/js/es5-shim.js'></script>
     <script type='text/javascript' src='assets/vendor/codemirror-js-json-lint.min.js'></script>
     <script type='text/javascript' src='assets/vendor/cm-javascript.min.js'></script>
     <script type='text/javascript' src='assets/js/jquery.autosize.input.min.js'></script>

tool/template-websocket-api-tool.html

@@ -182,7 +182,6 @@
   </div><!--/.modal-->
 
   <script type="text/javascript" src="assets/vendor/jsonlint.js"></script>
-  <!-- <link rel="stylesheet" type="text/css" href="assets/vendor/codemirror.css"/> -->
   <script type="text/javascript" src="assets/vendor/codemirror-js-json-lint.min.js"></script>
   <script type="text/javascript" src="assets/js/apitool-websocket.js"></script>
   <script type="text/javascript" src="assets/js/apitool-methods-ws.js"></script>

tool/template-xrp-ledger-rpc-tool.html

@@ -7,92 +7,89 @@
   <h1>RPC Tool</h1>
   <div class="content">
 
-  <p>This is a debug tool for printing raw information about an account, a transaction (by hash) or a ledger (by sequence number).</p>
+  <p>This is a debug tool for printing raw information about an account (by classic address), a transaction (by hash) or a ledger (by sequence number).</p>
 
   <form id="account-entry">
   <fieldset><input id="target" class="form-control" required="" type="text" placeholder="XRP Ledger classic address or transaction ID" />
-  <span class="help-block"><small>Try an account like <em>r9kiSEUEw6iSCNksDVKf9k3AyxjW3r1qPf</em>.</small></span>
+  <span class="help-block"><small>{% trans %}Try an account like <em>rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn</em>.{% endtrans %}</small></span>
-  <button class="btn btn-primary">Get info</button></fieldset>
+  <button class="btn btn-primary">{% trans %}Get info{% endtrans %}</button></fieldset>
   </form>
   <div id="result">
-    <h2>Result</h2>
+    <h2>{% trans %}Result{% endtrans %}</h2>
     <div id="progress" class="progress">
     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
     </div>
     <div id="error" class="devportal-callout warning"></div>
     <ul id="links" class="nav nav-pills">
-     	<li><a id="permalink" href="#" target="_blank" rel="noopener">Permalink</a></li>
+     	<li><a id="permalink" href="#" target="_blank" rel="noopener">{% trans %}Permalink{% endtrans %}</a></li>
-     	<li><a id="graphlink" href="#" target="_blank" rel="noopener">Graph</a></li>
+     	<li><a id="explorerlink" href="#" target="_blank" rel="noopener">{% trans %}Explorer{% endtrans %}</a></li>
     </ul>
-    <div class="devportal-callout tip"><strong>Tip:</strong> This page features intelligent copy/paste. Any
-    nodes you expand will be copied, any that you don't expand will show up
-    as a little <code>/* */</code> comment in your copy/pasted text.</div>
     <div class="group group-tx">
-    <h3>tx</h3>
+    <h3><a href="tx.html">tx</a></h3>
     <ul class="tools nav nav-pills">
-     	<li><a class="tx-expand">expand all</a></li>
+     	<li><a class="tx-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="tx-collapse">collapse all</a></li>
+     	<li><a class="tx-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
     <pre id="tx_info" class="json"></pre>
     <ul class="tools nav nav-pills">
-     	<li><a class="tx-expand">expand all</a></li>
+     	<li><a class="tx-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="tx-collapse">collapse all</a></li>
+     	<li><a class="tx-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
     </div>
 
     <div class="group group-account">
-    <h3>account_info</h3>
+    <h3><a href="account_info.html">account_info</a></h3>
     <pre id="account_info" class="json"></pre>
-    <h3>account_lines</h3>
+    <h3><a href="account_lines.html">account_lines</a></h3>
     <ul class="tools nav nav-pills">
-     	<li><a class="account-lines-expand">expand all</a></li>
+     	<li><a class="account-lines-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="account-lines-collapse">collapse all</a></li>
+     	<li><a class="account-lines-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
     <pre id="account_lines" class="json"></pre>
     <ul class="tools nav nav-pills">
-     	<li><a class="account-lines-expand">expand all</a></li>
+     	<li><a class="account-lines-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="account-lines-collapse">collapse all</a></li>
+     	<li><a class="account-lines-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
-    <h3>account_tx (last 20)</h3>
+    <h3><a href="account_tx.html">account_tx</a> (last 20)</h3>
     <ul class="tools nav nav-pills">
-     	<li><a class="account-tx-expand-tx">expand tx</a></li>
+     	<li><a class="account-tx-expand-tx">{% trans %}expand tx{% endtrans %}</a></li>
-     	<li><a class="account-tx-expand">expand all</a></li>
+     	<li><a class="account-tx-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="account-tx-collapse">collapse all</a></li>
+     	<li><a class="account-tx-collapse">{% trans %}collapse all{% endtrans %}</a></li>
-     	<li><a class="account-tx-more">next 20</a></li>
+     	<li><a class="account-tx-more">{% trans %}next 20{% endtrans %}</a></li>
-     	<li><a class="account-tx-back">prev 20</a></li>
+     	<li><a class="account-tx-back">{% trans %}prev 20{% endtrans %}</a></li>
     </ul>
     <pre id="account_tx" class="json"></pre>
     <ul class="tools nav nav-pills">
-     	<li><a class="account-tx-expand-tx">expand tx</a></li>
+     	<li><a class="account-tx-expand-tx">{% trans %}expand tx{% endtrans %}</a></li>
-     	<li><a class="account-tx-expand">expand all</a></li>
+     	<li><a class="account-tx-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="account-tx-collapse">collapse all</a></li>
+     	<li><a class="account-tx-collapse">{% trans %}collapse all{% endtrans %}</a></li>
-     	<li><a class="account-tx-more">next 20</a></li>
+     	<li><a class="account-tx-more">{% trans %}next 20{% endtrans %}</a></li>
-     	<li><a class="account-tx-back">prev 20</a></li>
+     	<li><a class="account-tx-back">{% trans %}prev 20{% endtrans %}</a></li>
     </ul>
-    <h3>account_offers</h3>
+    <h3><a href="account_objects.html">account_objects</a></h3>
     <ul class="tools nav nav-pills">
-     	<li><a class="account-offers-expand">expand all</a></li>
+     	<li><a class="account-objects-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="account-offers-collapse">collapse all</a></li>
+     	<li><a class="account-objects-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
-    <pre id="account_offers" class="json"></pre>
+    <pre id="account_objects" class="json"></pre>
     <ul class="tools nav nav-pills">
-     	<li><a class="account-offers-expand">expand all</a></li>
+     	<li><a class="account-objects-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="account-offers-collapse">collapse all</a></li>
+     	<li><a class="account-objects-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
     </div>
 
     <div class="group group-ledger">
-    <h3>ledger</h3>
+    <h3><a href="ledger.html">ledger</a></h3>
     <ul class="tools nav nav-pills">
-     	<li><a class="ledger-expand-tx">expand tx</a></li>
+     	<li><a class="ledger-expand-tx">{% trans %}expand tx{% endtrans %}</a></li>
-     	<li><a class="ledger-tx-expand">expand all</a></li>
+     	<li><a class="ledger-tx-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="ledger-tx-collapse">collapse all</a></li>
+     	<li><a class="ledger-tx-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
     <pre id="ledger_info" class="json"></pre>
     <ul class="tools nav nav-pills">
-     	<li><a class="ledger-tx-expand-tx">expand tx</a></li>
+     	<li><a class="ledger-tx-expand-tx">{% trans %}expand tx{% endtrans %}</a></li>
-     	<li><a class="ledger-tx-expand">expand all</a></li>
+     	<li><a class="ledger-tx-expand">{% trans %}expand all{% endtrans %}</a></li>
-     	<li><a class="ledger-tx-collapse">collapse all</a></li>
+     	<li><a class="ledger-tx-collapse">{% trans %}collapse all{% endtrans %}</a></li>
     </ul>
     </div>
 
@@ -102,10 +99,8 @@
 {% endblock %}
 
 {% block endbody %}
-  <script type='text/javascript' src='assets/js/es5-shim.js'></script>
+  {{currentpage.lodash_tag}}
-  <script type='text/javascript' src='assets/js/ripple-0.11.0-min.js'></script>
+  {{currentpage.ripple_lib_tag}}
-  <script type='text/javascript' src='assets/vendor/async.min.js'></script>
-  <script type='text/javascript' src='assets/vendor/cm-javascript.min.js'></script>
   <script type='text/javascript' src='assets/js/rpc-tool.js'></script>
 
   <script type="application/javascript">