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/_snippets/interactive-tutorials/connect-step.md

@@ -1,20 +1,15 @@
-{% if use_network is undefined or use_network == "Testnet" %}
-  {% set ws_url = "wss://s.altnet.rippletest.net:51233" %}
-  {% set explorer_url = "https://testnet.xrpl.org" %}
-  {% set use_network = "Testnet" %}
-{% elif use_network == "Devnet" %}
-  {% set ws_url = "wss://s.devnet.rippletest.net:51233" %}
-  {% set explorer_url = "https://devnet.xrpl.org" %}
-{% elif use_network == "Mainnet" %}
-  {% set ws_url = "wss://xrplcluster.com" %}
-  {% set explorer_url = "https://livenet.xrpl.org" %}
-{% endif %}
+<!-- Interactive tutorials are hard-coded to Testnet for now due to Redocly 
+     limitations. They'll be replaced with new-style tutorials next anyway. -->
 
-{{ start_step("Connect") }}
-<button id="connect-button" class="btn btn-primary" data-wsurl="{{ws_url}}" data-explorer="{{explorer_url}}">Connect to {{use_network}}</button>
+{% interactive-block label=default($label, "Connect") steps=$frontmatter.steps %}
+
+<button id="connect-button" class="btn btn-primary" data-wsurl="wss://s.altnet.rippletest.net:51233" data-explorer="https://testnet.xrpl.org">Connect to Testnet</button>
 <div>
-  <strong>Connection status:</strong>
+  <strong>Connection status: </strong>
   <span id="connection-status">Not connected</span>
-  <div class="loader collapse" id="loader-connect"><img class="throbber" src="assets/img/xrp-loader-96.png"></div>
+
+  {% loading-icon /%}
+
 </div>
-{{ end_step() }}
+
+{% /interactive-block %}

content/_snippets/interactive-tutorials/generate-step.md

@@ -1,15 +1,9 @@
-{% if use_network is undefined or use_network == "Testnet" %}
-  {% set use_network = "Testnet" %}
-  {% set faucet_url = "https://faucet.altnet.rippletest.net/accounts" %}
-{% elif use_network == "Devnet" %}
-  {% set faucet_url = "https://faucet.devnet.rippletest.net/accounts" %}
-{# No faucet for Mainnet! #}
-{% endif %}
+{% interactive-block label=default($label, "Generate") steps=$frontmatter.steps %}
 
-{{ start_step("Generate") }}
-<button id="generate-creds-button" class="btn btn-primary" data-fauceturl="{{faucet_url}}">Get {{use_network}} credentials</button>
-<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">Generating Keys...</div>
+<button id="generate-creds-button" class="btn btn-primary" data-fauceturl="https://faucet.altnet.rippletest.net/accounts">Get Testnet credentials</button>
+{% loading-icon message="Generating Keys..." /%}
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 **Caution:** Ripple provides the [Testnet and Devnet](../../concepts/networks-and-servers/parallel-networks.md) for testing purposes only, and sometimes resets the state of these test networks along with all balances. As a precaution, **do not** use the same addresses on Testnet/Devnet and Mainnet.

content/_snippets/interactive-tutorials/wait-step.md

@@ -1,12 +1,6 @@
-{% if use_network is undefined or use_network == "Testnet" %}
-  {% set explorer_url = "https://testnet.xrpl.org" %}
-{% elif use_network == "Devnet" %}
-  {% set explorer_url = "https://devnet.xrpl.org" %}
-{% elif use_network == "Mainnet" %}
-  {% set explorer_url = "https://livenet.xrpl.org" %}
-{% endif %}
+{% interactive-block label=default($label, "Wait") steps=$frontmatter.steps %}
 
-<table class="wait-step" data-explorerurl="{{explorer_url}}">
+<table class="wait-step" data-explorerurl="https://testnet.xrpl.org"><tbody>
   <tr>
     <th>Transaction ID:</th>
     <td class="waiting-for-tx">(None)</td>
@@ -24,4 +18,6 @@
   </tr>
   <tr class="tx-validation-status">
   </tr>
-</table>
+</tbody></table>
+
+{% /interactive-block %}