Issue token tutorial: use memos, wait steps"

assets/js/interactive-tutorial.js

@@ -425,6 +425,54 @@ async function activate_wait_step(step_name, prelim_result) {
   status_box.data("status_pending", true)
 }
 
+
+/**
+ * Get the hexadecimal ASCII representation of a string (must contain only
+ * 7-bit ASCII characters).
+ * @param {String} s The string to encode.
+ * @return {String} The uppercase hexadecimal representation of the string.
+ */
+function text_to_hex(s) {
+  result = ""
+  for (let i=0; i<s.length; i++) {
+    result += s.charCodeAt(i).toString(16)
+  }
+  return result.toUpperCase()
+}
+
+/**
+ * Add a memo to transaction instructions (before signing) to indicate that this
+ * transaction was generated by an interactive tutorial. This allows anyone to
+ * observe transactions on Testnet/Devnet to see which ones originate from which
+ * interactive tutorials. For privacy reasons, the memo does not and MUST NOT
+ * include personally identifying information about the user or their browser.
+ * @param {Object} event The click event that caused this transaction to be sent
+ * @param {Object} tx_json The JSON transaction instructions to have the memo
+ *                         added to them (in-place).
+ */
+function add_memo(event, tx_json) {
+  const tutorial_info = {
+    "path": window.location.pathname,
+    "button": event.target.id
+  }
+
+  const memo = {
+    "Memo": {
+      "MemoData": text_to_hex(JSON.stringify(tutorial_info, null, 0)),
+      "MemoFormat": "6170706C69636174696F6E2F6A736F6E", // application/json
+      // The MemoType decodes to a URL that explains the format of this memo type:
+      // https://github.com/XRPLF/xrpl-dev-portal/blob/master/tool/INTERACTIVE_TUTORIALS_README.md
+      "MemoType": "68747470733A2F2F6769746875622E636F6D2F5852504C462F7872706C2D6465762D706F7274616C2F626C6F622F6D61737465722F746F6F6C2F494E5445524143544956455F5455544F5249414C535F524541444D452E6D64"
+    }
+  }
+
+  if (tx_json.Memos === undefined) {
+    tx_json["Memos"] = [memo]
+  } else {
+    tx_json["Memos"].push(memo)
+  }
+}
+
 /**
  * Helper for "Send Transaction" buttons to handle the full process of
  * Prepare → Sign → Submit in one step with appropriate outputs. Assumes you are
@@ -441,15 +489,23 @@ async function activate_wait_step(step_name, prelim_result) {
  * @param {Event} event The (click) event that this is helping to handle.
  * @param {Object} tx_json JSON object of transaction instructions to finish
  *                         preparing and send.
+ * @param {String} secret (Optional) The base58 seed to use to sign the
+ *                        transaction. If omitted, look up the #use-secret field
+ *                        which was probably added by a "Get Credentials" step.
  */
-async function generic_full_send(event, tx_json) {
+async function generic_full_send(event, tx_json, secret) {
   const block = $(event.target).closest(".interactive-block")
   const blob_selector = $(event.target).data("txBlobFrom")
   const wait_step_name = $(event.target).data("waitStepName")
   block.find(".output-area").html("")
-  const secret = get_secret(event)
+
+  if (secret === undefined) {
+    secret = get_secret(event)
+  }
   if (!secret) {return}
 
+  add_memo(event, tx_json)
+
   block.find(".loader").show()
   const prepared = await api.prepareTransaction(tx_json, {
     maxLedgerVersionOffset: 20