xrpl-dev-portal/static/js/interactive-tutorial.js

// Helper functions for interactive tutorials

// Locale strings. TODO: maybe move these out to their own file.
LOCALES = {
  "en": {
    // Leave empty, use the keys provided (in English) by default
  },
  "ja": {
    "Address:": "アドレス：",
    "Secret:": "シード：",
    "Balance:": "残高：",
    "Complete all previous steps first": "前の手順をすべて完了して下さい",
    "Connection to the XRP Ledger required": "XRP Ledgerの接続が必要です",
    "Error:": "エラー：",
    "Populated this page's examples with these credentials.": "このページの例にこのアドレスとシードを入力しました。",
    "There was an error connecting to the Faucet. Please try again.": "テストネットワークFaucetにエラーが発生しました。もう一度試してください。",
    "Connecting...": "接続しています...",
    "Connection required": "接続が必要です",
    "Connected": "接続されました",
    "Faucet returned an error:": "テストネットワークFaucetがこのエラーを返しました：",
    "Validated": "検証済み",
    "Final Result:": "確定結果：",
    "(Still pending...)": "（まだ未決…）",
    "(None)": "（無）",
    "Prepared transaction:": "準備済みトランザクション：",
    "Failed to achieve consensus (final)": "検証済みレジャーには含まれません（決定結果）",
    "Preliminary result:": "予備結果：",
    "Unknown": "不明",
    "Couldn't get a valid address/secret value. Check that the previous steps were completed successfully.": "有効なアドレスかシードの取得出来ませんでした。前の手順が完了しましたことを確認して下さい。",
    "Transaction hash:": "トランザクションハッシュ："
  }
}

/**
 * Quick-n-dirty localization function. TODO: migrate to a real localization
 * library, such as https://github.com/wikimedia/jquery.i18n
 * @param {String} key The string to translate into this page's locale
 * @return {String} The translated string, if one is available, or the provided
 *                  key value if no translation is available.
 */
function tl(key) {
  let current_locale = $("html").prop("lang").substring(0,2)
  if (!(current_locale in LOCALES)) {
    console.warn("Interactive tutorials don't have translations for locale:", current_locale)
    current_locale = "en"
  }
  let mesg = LOCALES[current_locale][key]
  if (typeof mesg === "undefined") {
    mesg = key
  }
  return mesg
}

/**
 * Convert a string of text into a "slug" form that is appropriate for use in
 * URLs, HTML id and class attributes, and similar. This matches the equivalent
 * function in @theme/helpers.js so that IDs can be found consistently.
 * This version is more Unicode-friendly than the old version ('slugify')
 * @param {String} s The text (step_name or similar) to convert into a
 * @return {String} The "slug" version of the text, lowercase with no whitespace
 *                  and with most non-alphanumeric characters removed.
 */
function idify(s) {
 // s = s.replace(/[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]/gu, '').trim().toLowerCase()
 s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase()
 s = s.replace(/[\s-]+/gu, '-')
  if (!s) {
    s = "_";
  }
  return s
}


/**
 * Check whether a given step has been marked completed already.
 * @param {String} step_name The exact name of the step, as defined in the
 *                           start_step(step_name) function in the MD file.
 * @return {Boolean}         Whether or not this step has been marked complete.
 */
function is_complete(step_name) {
  return is_complete_by_id(idify(step_name))
}

/**
 * Helper for is_complete. Also called directly in cases where we only have
 * the step_id and not the step_name (since that's a one-way conversion).
 * @param {String} step_id The slugified name of the step.
 * @return {Boolean}       Whether or not this step has been marked complete.
 */
function is_complete_by_id(step_id) {
  return $(".bc-"+step_id).hasClass("done")
}

/**
 * Mark a step as done in the breadcrumbs, mark the following step as active,
 * and enable buttons and such in the following step that have the
 * "previous-steps-required" class.
 * @param {String} step_name The exact name of the step, as defined in the
 *                           start_step(step_name) function in the MD file.
 */
function complete_step(step_name) {
  complete_step_by_id(idify(step_name))
}

/**
 * Helper for complete_step. Also called directly in cases where we only have
 * the step_id and not the step_name (since that's a one-way conversion).
 * @param {String} step_id The slugified name of the step.
 */
function complete_step_by_id(step_id) {
  $(".bc-"+step_id).removeClass("active").addClass("done")
  $(".bc-"+step_id).next().removeClass("disabled").addClass("active")

  // Enable follow-up steps that require this step to be done first
  const next_ui = $(`#interactive-${step_id}`).nextAll(
                    ".interactive-block").eq(0).find(".previous-steps-required")
  next_ui.prop("title", "")
  next_ui.prop("disabled", false)
  next_ui.removeClass("disabled")
}

/**
 * Get the step_id of the interactive block that contains a given element.
 * @param {jQuery} jEl The jQuery result representing a single HTML element in
 *                     an interactive block.
 * @return {String}    The step_id of the block that contains jEl.
 */
function get_block_id(jEl) {
  // Traverse up, then slice "interactive-" off the block's HTML ID
  return jEl.closest(".interactive-block").prop("id").slice(12)
}

/**
 * Pretty-print JSON with standard indentation.
 * @param {String, Object} j Either a JSON/JSON-like object, or a string
                             containing JSON.
 */
function pretty_print(j) {
  try {
    return JSON.stringify(JSON.parse(j),null,2)
  } catch (e) {
    // probably already decoded JSON
    return JSON.stringify(j,null,2)
  }
}

/**
 * Disable buttons and such with the "previous-steps-required" class, and give
 * them an appropriate tooltip message.
 */
function disable_followup_steps() {
  $(".previous-steps-required").prop("title", tl("Complete all previous steps first"))
  $(".previous-steps-required").prop("disabled", true).addClass("disabled")
  $(".connection-required").prop("title", tl("Conection to the XRP Ledger required"))
  $(".connection-required").prop("disabled", true).addClass("disabled")
}

/**
 * Output an error message in the given area.
 * @param {jQuery} block The block where this error message should go. This
 *                       should be a parent element containing an element with
 *                       the "output-area" class.
 * @param {String} message The HTML contents to put inside the message.
 */
function show_error(block, message) {
  block.find(".output-area").html(
    `<p class="devportal-callout warning"><strong>${tl("Error:")}</strong>
    ${message}</p>`)
}

/**
 * To be used with _snippets/interactive/tutorials/generate-step.md.
 * Adds an event to the "Generate" button to call the appropriate faucet
 * (Testnet or Devnet) and write the credentials to elements that later steps
 * can use in their examples. Also updates code samples in the current page to
 * use the generated credentials instead of the placeholder EXAMPLE_ADDR and
 * EXAMPLE_SECRET.
 */
var EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
var EXAMPLE_SECRET = "s████████████████████████████"
function setup_generate_step() {

  $("#generate-creds-button").click( async (event) => {
    const block = $(event.target).closest(".interactive-block")
    block.find(".output-area").html("")
    block.find(".loader").show()
    // Get faucet URL (Testnet/Devnet/etc.)
    const faucet_url = $("#generate-creds-button").data("fauceturl")

    try {
      const wallet = xrpl.Wallet.generate("ed25519")
      const data = await call_faucet(faucet_url, wallet.address, event)

      block.find(".loader").hide()
      block.find(".output-area").html(`<div><strong>${tl("Address:")}</strong>
          <span id="use-address">${data.account.address}</span></div>
          <div><strong>${tl("Secret:")}</strong>
          <span id="use-secret">${wallet.seed}</span></div>`)
      if (data.balance) {
        block.find(".output-area").append(`<div><strong>${tl("Balance:")}</strong>
        ${data.balance} XRP</div>`)
      }

      // Automatically populate all examples in the page with the
      // generated credentials...
      let creds_updated = false;
      $("code span:contains('"+EXAMPLE_ADDR+"')").each( function() {
        creds_updated = true
        let eltext = $(this).text()
        $(this).text( eltext.replace(EXAMPLE_ADDR, data.account.address) )
      })
      $("code span:contains('"+EXAMPLE_SECRET+"')").each( function() {
        creds_updated = true
        let eltext = $(this).text()
        $(this).text( eltext.replace(EXAMPLE_SECRET, data.account.secret) )
      })

      if (creds_updated) {
        block.find(".output-area").append(`<p>${tl("Populated this page's examples with these credentials.")}</p>`)
      }

      complete_step("Generate")

    } catch(err) {
      block.find(".loader").hide()
      block.find(".output-area").html(
        `<p class="devportal-callout warning"><strong>${tl("Error:")}</strong>
        ${tl("There was an error connecting to the Faucet. Please try again.")}
        </p>`)
      return
    }
  })
}

/**
 * Get the address from the Generate step (snippet), or display an error in
 * the relevant interactive block if it fails—usually because the user hasn't
 * clicked the "Get Credentials" button yet.
 * @return {String, undefined} The address, if available, or undefined if not
 */
function get_address(event) {
  const address = $("#use-address").text()
  if (!address) {
    const block = $(event.target).closest(".interactive-block")
    if (!block.length) {return}
    show_error(block, tl("Couldn't get a valid address/secret value. Check that the previous steps were completed successfully."))
  }
  return address
}

/**
 * Get the Wallet from the Generate step (snippet), or display an error in
 * the relevant interactive block if it fails—usually because the user hasn't
 * clicked the "Get Credentials" button yet.
 * @return {Wallet, undefined} The Wallet instance, if available, or undefined if not
 */
function get_wallet(event) {
  const secret = $("#use-secret").text()
  if (!secret) {
    const block = $(event.target).closest(".interactive-block")
    if (!block.length) {return}
    show_error(block, tl("Couldn't get a valid address/secret value. Check that the previous steps were completed successfully."))
  }
  if (secret == EXAMPLE_SECRET) {
    const block = $(event.target).closest(".interactive-block")
    if (!block.length) {return}
    show_error(block, tl("Can't use the example secret here. Check that the previous steps were completed successfully."))
    return
  }
  return xrpl.Wallet.fromSeed(secret)
}

/**
 * Helper for calling the Testnet/Devnet faucet.
 * @param {String} faucet_url The URL of the faucet to call, for example:
 *                            https://faucet.altnet.rippletest.net/accounts
 * @param {String} destination The account to fund, if undefined, the faucet will create one
 * @param {Object} event The event object to get memo data from
 * */
async function call_faucet(faucet_url, destination, event) {
  // Future feature: support the Faucet's optional xrpAmount param
  const block = $(event.target).closest(".interactive-block");

  const tutorial_info = {
    path: window.location.pathname,
    button: event.target.id,
    step: block.data("stepnumber"),
    totalsteps: block.data("totalsteps"),
  };
  //pass in plain text instead of HEX- the API will encode.
  const memo = {
    data: JSON.stringify(tutorial_info, null, 0),
    format: "application/json", // 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
    type: "https://github.com/XRPLF/xrpl-dev-portal/blob/master/tool/INTERACTIVE_TUTORIALS_README.md",
  };

  const body = {};
  body["destination"] = destination;
  body["memos"] = [memo];

  const response = await fetch(faucet_url, {
    method: 'POST',
    headers: {
      "Content-Type": "application/json; charset=utf-8"
    },
    body: JSON.stringify(body)
  })
  const data = await response.json()

  if (!response.ok) {
    throw `${tl("Faucet returned an error:")} ${data.error}`
  }
  return data
}

/**
 * Tutorials' scripts should push functions to this array to have them run
 * automatically after connecting to the network. The scopes don't work out
 * right to use api.on("connect", callback) directly from the tutorials' unique
 * scripts because the api instance (specific to the network) is instantiated
 * by the setup_connect_step() in this file, below.
 */
window.after_connect = window.after_connect || [];


/**
 * To be used with _snippets/interactive-tutorials/connect-step.md
 * Adds an event to the "Connect" button to connect to the appropriate
 * WebSocket server (Testnet, Devnet, maybe Mainnet for some cases).
 * Also adds an event to re-disable following steps if we get disconnected.
 */
function setup_connect_step() {
  if (!$("#connect-button").length) {
    console.debug("Connect step not included. Skipping related setup.")
    return
  }
  const ws_url = $("#connect-button").data("wsurl")
  if (!ws_url) {
    console.error("Interactive Tutorial: WS URL not found. Did you set use_network?")
    return
  }
  const block = $("#connect-button").closest(".interactive-block");
  api = new xrpl.Client(ws_url)
  api.on('connected', async function() {
    $("#connection-status").text(tl("Connected"))
    $("#connect-button").prop("disabled", true)
    block.find(".loader").hide()
    $(".connection-required").prop("disabled", false)
    $(".connection-required").prop("title", "")

    // Subscribe to ledger close events
    api.request({command: "subscribe", streams: ["ledger"]})

    complete_step("Connect")
  })
  api.on('disconnected', (code) => {
    $("#connection-status").text( tl("Disconnected") +" ("+code+")" )
    $("#connect-button").prop("disabled", false)
    $(".connection-required").prop("disabled", true)
    $(".connection-required").prop("title", tl("Connection required"))

    disable_followup_steps()
  })
  $("#connect-button").click(async (event) => {
    $("#connection-status").text( tl("Connecting...") )
    block.find(".loader").show()
    await api.connect()

    for (const fn of after_connect) {
      fn()
    }
  })
}

/**
 * To be used with _snippets/interactive-tutorials/wait-step.md
 * For each wait step in the page, set up a listener that checks for the
 * transaction shown in that step's "waiting-for-tx" field, as long as that
 * step's "tx-validation-status" field doesn't have a final result set.
 * These listeners do very little (just updating the latest validated ledger
 * index) until you activate one with activate_wait_step(step_name).
 * Requires xrpl.js to be loaded and instantiated as "api" first.
 */
function setup_wait_steps() {
  const wait_steps = $(".wait-step")

  wait_steps.each(async (i, el) => {
    const wait_step = $(el)
    const explorer_url = wait_step.data("explorerurl")
    const status_box = wait_step.find(".tx-validation-status")
    api.on('ledgerClosed', async (ledger) => {
      // Update the latest validated ledger index in this step's table
      wait_step.find(".validated-ledger-version").text(ledger.ledger_index)
      if (!status_box.data("status_pending")) {
        // Before submission or after a final result.
        // Either way, nothing more to do here.
        return
      }

      const transaction = wait_step.find(".waiting-for-tx").text().trim()
      const min_ledger = parseInt(wait_step.find(".earliest-ledger-version").text())
      const max_ledger = parseInt(wait_step.find(".lastledgersequence").text())
      let tx_response
      try {
        tx_response = await api.request({
          command: "tx",
          transaction,
          min_ledger,
          max_ledger
        })

        if (tx_response.result.validated) {
          status_box.html(
          `<th>${tl("Final Result:")}</th><td>${tx_response.result.meta.TransactionResult}
          (<a href="${explorer_url}/transactions/${transaction}"
          target="_blank">${tl("Validated")}</a>)</td>`)

          const step_id = get_block_id(wait_step)
          if (!is_complete_by_id(step_id)) {
            status_box.data("status_pending", false)
            complete_step_by_id(step_id)
          }
        } else {
          status_box.html(
            `<th>${tl("Final Result:")}</th>
            <td><img class="throbber" src="/img/xrp-loader-96.png">
            ${tl("(Still pending...)")}</td>`)
        }

      } catch(e) {
        if (e.data.error == "txnNotFound" && e.data.searched_all) {
          status_box.html(
            `<th>${tl("Final Result:")}</th><td>${tl("Failed to achieve consensus (final)")}</td>`)
        } else {
          status_box.html(
            `<th>${tl("Final Result:")}</th><td>${tl("Unknown")}</td>`)
        }
      }
    }) // end 'ledger' event handler
  }) // end "each" wait_step
}

/**
 * To be used with _snippets/interactive-tutorials/wait-step.md
 * Populate the table of the wait step with the relevant transaction details
 * and signal this step's listener to look up the relevant transaction.
 * This function is called by the generic submit handlers that
 * make_submit_handler() creates.
 * @param {String} step_name The exact name of the "Wait" step to activate, as
 *                           defined in the start_step(step_name) function in
 *                           the MD file.
 * @param {Object} prelim The (resolved) return value of submitting a
 *                           transaction blob via api.request({command: "submit", opts})
 */
async function activate_wait_step(step_name, prelim) {
  const step_id = idify(step_name)
  const wait_step = $(`#interactive-${step_id} .wait-step`)
  const status_box = wait_step.find(".tx-validation-status")
  const tx_id = prelim.result.tx_json.hash
  const lls = prelim.result.tx_json.LastLedgerSequence || tl("(None)")

  if (wait_step.find(".waiting-for-tx").text() == tx_id) {
    // Re-submitting the same transaction? Don't update min_ledger.
  } else {
    wait_step.find(".waiting-for-tx").text(tx_id)
    wait_step.find(".earliest-ledger-version").text(
      prelim.result.validated_ledger_index
    )
  }
  wait_step.find(".lastledgersequence").text(lls)
  status_box.html("")
  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 block = $(event.target).closest(".interactive-block")

  const tutorial_info = {
    "path": window.location.pathname,
    "button": event.target.id,
    "step": block.data("stepnumber"),
    "totalsteps": block.data("totalsteps")
  }

  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
 * also using _snippets/interactive-tutorials/wait-step.md to report the
 * transaction's final results. Gets important information from data
 * attributes defined on the button that triggers the event:
 * data-tx-blob-from="{jQuery selector}" A selector for an element whose .text()
 *                                       is the blob to submit.
 * data-wait-step-name="{String}" The exact name of the wait step where this
 *                                transaction's results should be reported, as
 *                                defined in start_step(step_name) as the MD
 * This function is meant to be called from within a .click(event) handler, not
 * directly bound as the click handler.
 * @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 {Wallet} wallet (Optional) The xrpl.js Wallet instance 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, wallet) {
  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("")

  if (wallet === undefined) {
    wallet = get_wallet(event)
  }
  if (!wallet) {return}

  add_memo(event, tx_json)

  block.find(".loader").show()
  const prepared = await api.autofill(tx_json)
  block.find(".output-area").append(
    `<p>${tl("Prepared transaction:")}</p>
    <pre><code>${pretty_print(prepared)}</code></pre>`)

  const {tx_blob, hash} = wallet.sign(prepared)
  block.find(".output-area").append(
    `<p>${tl("Transaction hash:")} <code id="tx_id">${hash}</code></p>`)

  await do_submit(block, {"tx_blob":  tx_blob}, wait_step_name)
}

/**
 * Generic event handler for transaction submission buttons. Assumes
 * you are also using _snippets/interactive-tutorials/wait-step.md to report
 * the transaction's final results. Gets important information from data
 * attributes defined on the button that triggers the event:
 * data-tx-blob-from="{jQuery selector}" A selector for an element whose .text()
 *                                       is the blob to submt.
 * data-wait-step-name="{String}" The exact name of the wait step where this
 *                                transaction's results should be reported, as
 *                                defined in start_step(step_name) as the MD
 * This function is intended to be bound directly on a submit button as the
 * click event handler.
 */
async function submit_handler(event) {
  const block = $(event.target).closest(".interactive-block")
  const blob_selector = $(event.target).data("txBlobFrom")
  const wait_step_name = $(event.target).data("waitStepName")
  const tx_blob = $(blob_selector).text()
  do_submit(block, {tx_blob}, wait_step_name)
}

/**
 * General-purpose transaction submission helper.
 * @param {jQuery} block Output preliminary results inside this wrapping
 *                       .interactive-block's .output-area.
 * @param {Object} submit_opts The JSON object to be passed to the rippled
 *                             submit command. At a minimum, needs "tx_blob"
 * @param {String} wait_step_name The name of a wait step. Report the final
 *                                results of the transaction there. Must be a
 *                                _snippets/interactive-tutorials/wait-step.md
 */
async function do_submit(block, submit_opts, wait_step_name) {
  block.find(".loader").show()
  try {
    submit_opts["command"] = "submit"
    const prelim_result = await api.request(submit_opts)
    block.find(".output-area").append(
      `<p>${tl("Preliminary result:")}</p>
      <pre><code>${pretty_print(prelim_result)}</code></pre>`)

    block.find(".loader").hide()
    submit_step_id = get_block_id(block)
    complete_step_by_id(submit_step_id)
    if (wait_step_name){
      activate_wait_step(wait_step_name, prelim_result)
    }
    return prelim_result
  } catch(error) {
    block.find(".loader").hide()
    show_error(block, error)
  }
}

async function show_log(block, msg) {
  block.find(".output-area").append(msg)
}

/**
 * Run callback only when the current route is loaded.
 */
function onCurrentRouteLoaded(callback) {
  const currentPath = window.location.pathname;
  window.onRouteChange(() => {
    if (window.location.pathname === currentPath) {
      callback()
    }
  });
}

window.onRouteChange(() => {
  disable_followup_steps()
  setup_generate_step()
  setup_connect_step()
  setup_wait_steps()
})