Migrate interactive tutorials (post realm v0.70)

Attempt migrating interactive tutorial again

Migrate interactive tutorial snippet syntax

Interactive tutorials: partially migrate send-xrp, no-freeze to new syntax

Fix Send XRP interactive tutorial

Interactive tutorials: fixes for Redocly incl. localization challenges

Interactive tutorials: switch defaultValue back to value in anticipation of Redocly bugfix

Fix document.ready→window.onRouteChange, cyclers, etc. in interactive
tutorials.

content/tutorials/get-started/monitor-incoming-payments-with-websocket.md

@@ -21,8 +21,10 @@ WebSocket follows a model where the client and server open one connection, then
 - You need a stable internet connection and access to an XRP Ledger server. The embedded examples connect to Ripple's pool of public servers. If you [run your own `rippled` or Clio server](../../infrastructure/installation/index.md), you can also connect to that server locally.
 - To properly handle XRP values without rounding errors, you need access to a number type that can do math on 64-bit unsigned integers. The examples in this tutorial use [big.js](https://github.com/MikeMcl/big.js/). If you are working with [tokens](../../concepts/tokens/index.md), you need even more precision. For more information, see [Currency Precision](../../references/protocol/data-types/currency-formats.md#xrp-precision).
 
+
+<script type="application/javascript" src="/js/interactive-tutorial.js"></script>
 <!-- Big number support -->
-<script type="application/javascript" src="assets/vendor/big.min.js"></script>
+<script type="application/javascript" src="/vendor/big.min.js"></script>
 <script type="application/javascript">
 // Helper stuff for this interactive tutorial specifically
 
@@ -72,13 +74,15 @@ const socket = new WebSocket('ws://localhost:6006')
 
 Example:
 
-{{ start_step("Connect") }}
+{% interactive-block label="Connect" steps=$frontmatter.steps %}
+
 <button id="connect-socket-button" class="btn btn-primary">Connect</button>
 <strong>Connection status:</strong>
 <span id="connection-status">Not connected</span>
 <h5>Console:</h5>
 <div class="ws-console" id="monitor-console-connect"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 let socket;
@@ -187,12 +191,14 @@ async function pingpong() {
 // Add pingpong() to the 'open' listener for socket
 ```
 
-{{ start_step("Dispatch Messages") }}
+{% interactive-block label="Dispatch Messages" steps=$frontmatter.steps %}
+
 <button id="enable_dispatcher" class="btn btn-primary" disabled="disabled">Enable Dispatcher</button>
 <button id="dispatch_ping" class="btn btn-primary" disabled="disabled">Ping!</button>
 <h5>Responses</h5>
 <div class="ws-console" id="monitor-console-ping"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 const AWAITING = {}
@@ -290,13 +296,15 @@ WS_HANDLERS["transaction"] = log_tx
 
 For the following example, try opening the [Transaction Sender](/resources/dev-tools/tx-sender) in a different window or even on a different device and sending transactions to the address you subscribed to:
 
-{{ start_step("Subscribe") }}
+{% interactive-block label="Subscribe" steps=$frontmatter.steps %}
+
 <label for="subscribe_address">Test Net Address:</label>
 <input type="text" class="form-control" id="subscribe_address" value="rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM">
 <button id="tx_subscribe" class="btn btn-primary" disabled="disabled">Subscribe</button>
 <h5>Transactions</h5>
 <div class="ws-console" id="monitor-console-subscribe"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 async function do_subscribe() {
@@ -358,11 +366,13 @@ The following sample code looks at transaction metadata of all the above transac
 
 {% code-snippet file="/_code-samples/monitor-payments-websocket/js/read-amount-received.js" language="js" /%}
 
-{{ start_step("Read Payments") }}
+{% interactive-block label="Read Payments" steps=$frontmatter.steps %}
+
 <button id="tx_read" class="btn btn-primary" disabled="disabled">Start Reading</button>
 <h5>Transactions</h5>
 <div class="ws-console" id="monitor-console-read"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 function CountXRPDifference(affected_nodes, address) {

content/tutorials/get-started/send-xrp.md

@@ -3,13 +3,11 @@ html: send-xrp.html
 parent: tasks.html
 blurb: Learn how to send test payments right from your browser.
 cta_text: Send XRP
-embed_xrpl_js: true
-filters:
-  - interactive_steps
 labels:
   - XRP
   - Payments
 top_nav_grouping: Popular Pages
+steps: ['Generate', 'Connect', 'Prepare', 'Sign', 'Submit', 'Wait', 'Check']
 ---
 # Send XRP
 
@@ -20,8 +18,8 @@ This tutorial explains how to send a direct XRP Payment using `xrpl.js` for Java
 ## Prerequisites
 
 <!-- Source for this specific tutorial's interactive bits: -->
-<script type="application/javascript" src="assets/js/tutorials/send-xrp.js"></script>
-{% set use_network = "Testnet" %}
+<script type="application/javascript" src="/js/interactive-tutorial.js"></script>
+<script type="application/javascript" src="/js/tutorials/send-xrp.js"></script>
 
 To interact with the XRP Ledger, you need to set up a dev environment with the necessary tools. This tutorial provides examples using the following options:
 
@@ -145,14 +143,15 @@ Here's an example of preparing the above payment:
 
 {% /tabs %}
 
-{{ start_step("Prepare") }}
+{% interactive-block label="Prepare" steps=$frontmatter.steps %}
+
 <div class="input-group mb-3">
   <div class="input-group-prepend">
     <span class="input-group-text">Send: </span>
   </div>
   <input type="number" class="form-control" value="22" id="xrp-amount"
   aria-label="Amount of XRP, as a decimal" aria-describedby="xrp-amount-label"
-  min=".000001" max="100000000000" step="any">
+  min=".000001" max="100000000000" step="any" />
   <div class="input-group-append">
     <span class="input-group-text" id="xrp-amount-label"> XRP</span>
   </div>
@@ -160,7 +159,8 @@ Here's an example of preparing the above payment:
 <button id="prepare-button" class="btn btn-primary previous-steps-required">Prepare
   example transaction</button>
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 
 ### 4. Sign the Transaction Instructions
@@ -199,11 +199,13 @@ The result of the signing operation is a transaction object containing a signatu
 - In xrpl4j, `SignatureService.sign` returns a `SignedTransaction`, which contains the transaction's hash, which you can use to look up the transaction later.
 - In `XRPL_PHP`, the signing API also returns the transaction's ID, or identifying hash, which you can use to look up the transaction later. This is a 64-character hexadecimal string that is unique to this transaction.
 
-{{ start_step("Sign") }}
+{% interactive-block label="Sign" steps=$frontmatter.steps %}
+
 <button id="sign-button" class="btn btn-primary previous-steps-required">Sign
   example transaction</button>
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 
 ### 5. Submit the Signed Blob
@@ -246,12 +248,16 @@ If you see any other result, you should check the following:
 
 See the full list of [transaction results](../../references/protocol/transactions/transaction-results/transaction-results.md) for more possibilities.
 
-{{ start_step("Submit") }}
+{% interactive-block label="Submit" steps=$frontmatter.steps %}
+
 <button id="submit-button" class="btn btn-primary previous-steps-required" data-tx-blob-from="#signed-tx-blob" data-wait-step-name="Wait">Submit
 example transaction</button>
-<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png"> Sending...</div>
+
+{% loading-icon message="Sending..." /%}
+
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 
 ### 6. Wait for Validation
@@ -286,9 +292,7 @@ Most transactions are accepted into the next ledger version after they're submit
 
 {% /tabs %}
 
-{{ start_step("Wait") }}
 {% partial file="/_snippets/interactive-tutorials/wait-step.md" /%}
-{{ end_step() }}
 
 
 ### 7. Check Transaction Status
@@ -327,10 +331,12 @@ To know for sure what a transaction did, you must look up the outcome of the tra
 
 **Caution:** XRP Ledger APIs may return tentative results from ledger versions that have not yet been validated. For example, in [tx method][] response, be sure to look for `"validated": true` to confirm that the data comes from a validated ledger version. Transaction results that are not from a validated ledger version are subject to change. For more information, see [Finality of Results](../../concepts/transactions/finality-of-results/index.md).
 
-{{ start_step("Check") }}
+{% interactive-block label="Check" steps=$frontmatter.steps %}
+
 <button id="get-tx-button" class="btn btn-primary previous-steps-required">Check transaction status</button>
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 
 ## Differences for Production