Make global freeze tutorial interactive

assets/js/tutorials/enable-no-freeze.js

@@ -5,6 +5,7 @@ $(document).ready(() => {
 
   // 3. Send AccountSet --------------------------------------------------------
   $("#send-accountset").click( async (event) => {
+    const block = $(event.target).closest(".interactive-block")
     const address = get_address(event)
     if (!address) {return}
 

assets/js/tutorials/enact-global-freeze.js

@@ -0,0 +1,105 @@
+// 1. Generate
+// 2. Connect
+// The code for these steps is handled by interactive-tutorial.js
+$(document).ready(() => {
+
+  // 3. Send AccountSet --------------------------------------------------------
+  // also 6. Send AccountSet to end the freeze.
+  $(".send-accountset").click( async (event) => {
+    const block = $(event.target).closest(".interactive-block")
+    const address = get_address(event)
+    if (!address) {return}
+
+    let astx = {
+      "TransactionType": "AccountSet",
+      "Account": address
+    }
+    if ($(event.target).data("action") === "start_freeze") {
+      astx["SetFlag"] = xrpl.AccountSetAsfFlags.asfGlobalFreeze
+    } else if ($(event.target).data("action") === "end_freeze") {
+      astx["ClearFlag"] = xrpl.AccountSetAsfFlags.asfGlobalFreeze
+    } else {
+      show_error(block, "There was an error with this tutorial: the button clicked must have data-action defined.")
+    }
+
+    try {
+      block.find(".loader").show()
+      await generic_full_send(event, astx)
+      complete_step("Send AccountSet")
+    } catch(err) {
+      block.find(".loader").hide()
+      show_error(block, err)
+    }
+  })
+
+  // 4. Wait for Validation: handled by interactive-tutorial.js and by the
+  // generic full send in the previous step. -----------------------------------
+
+  // 5. Confirm Account Settings -----------------------------------------------
+  $("#confirm-settings").click( async (event) => {
+    const block = $(event.target).closest(".interactive-block")
+    const address = get_address(event)
+    if (!address) {return}
+
+    block.find(".output-area").html("")
+    block.find(".loader").show()
+    const account_info = await api.request({
+        "command": "account_info",
+        "account": address,
+        "ledger_index": "validated"
+    })
+    console.log(account_info)
+    const flags = xrpl.parseAccountRootFlags(account_info.result.account_data.Flags)
+    block.find(".loader").hide()
+
+    block.find(".output-area").append(
+        `<p>Got settings for address ${address}:</p>
+        <pre><code>${pretty_print(flags)}</code></pre>`)
+    if (flags.lsfGlobalFreeze) {
+      block.find(".output-area").append(`<p><i class="fa fa-check-circle"></i>
+          Global Freeze is enabled.</p>`)
+    } else {
+      block.find(".output-area").append(`<p><i class="fa fa-times-circle"></i>
+          Global Freeze Tag is DISABLED.</p>`)
+    }
+
+    complete_step("Confirm Settings")
+  })
+
+  // 6. Send AccountSet to End the Freeze: same handler as step 3.
+
+  // 7. Wait for Validation: handled by generic full send as before.
+
+  // 8. Confirm Account Settings (freeze ended)
+  $("#confirm-settings-end").click( async (event) => {
+    const block = $(event.target).closest(".interactive-block")
+    const address = get_address(event)
+    if (!address) {return}
+
+    block.find(".output-area").html("")
+    block.find(".loader").show()
+    const account_info = await api.request({
+        "command": "account_info",
+        "account": address,
+        "ledger_index": "validated"
+    })
+    console.log(account_info)
+    const flags = xrpl.parseAccountRootFlags(account_info.result.account_data.Flags)
+    block.find(".loader").hide()
+
+    block.find(".output-area").append(
+        `<p>Got settings for address ${address}:</p>
+        <pre><code>${pretty_print(flags)}</code></pre>`)
+    if (flags.lsfGlobalFreeze) {
+      block.find(".output-area").append(`<p><i class="fa fa-times-circle"></i>
+          Global Freeze is ENABLED (still active).</p>`)
+    } else {
+      block.find(".output-area").append(`<p><i class="fa fa-check-circle"></i>
+          Global Freeze Tag is disabled.</p>`)
+    }
+
+    complete_step("Confirm Settings")
+  })
+
+
+})

assets/js/tutorials/require-destination-tags.js

@@ -5,6 +5,7 @@ $(document).ready(() => {
 
   // 3. Send AccountSet --------------------------------------------------------
   $("#send-accountset").click( async (event) => {
+    const block = $(event.target).closest(".interactive-block")
     const address = get_address(event)
     if (!address) {return}
 

content/tutorials/manage-account-settings/require-destination-tags.md

@@ -94,7 +94,7 @@ _JavaScript_
 
 
 {{ start_step("Confirm Settings") }}
-<button id="confirm-settings" class="btn btn-primary previous-steps-required" data-wait-step-name="Wait">Confirm Settings</button>
+<button id="confirm-settings" class="btn btn-primary previous-steps-required">Confirm Settings</button>
 <div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">Sending...</div>
 <div class="output-area"></div>
 {{ end_step() }}

content/tutorials/use-tokens/enact-global-freeze.md

@@ -2,7 +2,9 @@
 html: enact-global-freeze.html
 parent: use-tokens.html
 blurb: Freeze all tokens issued by your address.
+embed_ripple_lib: true
 filters:
+  - interactive_steps
   - include_code
 labels:
   - Tokens
@@ -21,6 +23,8 @@ If you [issue tokens](issued-currencies.html) in the XRP Ledger, can enact a [Gl
     - **JavaScript** with the [xrpl.js library](https://github.com/XRPLF/xrpl.js/). See [Get Started Using JavaScript](get-started-using-javascript.html) for setup steps.
 - You don't need to have [issued a token](issue-a-fungible-token.html) in the XRP Ledger to enact a Global Freeze, but the main reason you would do so is if you have already issued such a token.
 
+<!-- Source for this specific tutorial's interactive bits: -->
+<script type="application/javascript" src="assets/js/tutorials/enact-global-freeze.js"></script>
 
 ## Example Code
 
@@ -38,6 +42,12 @@ To transact on the XRP Ledger, you need an address and secret key, and some XRP.
 
 **Tip:** Unlike the No Freeze setting, you _can_ enable and disable a Global Freeze using a [regular key pair](cryptographic-keys.html) or [multi-signing](multi-signing.html).
 
+For this tutorial, you can get credentials from the following interface:
+
+{% include '_snippets/interactive-tutorials/generate-step.md' %}
+
+When you're [building actual production-ready software](production-readiness.html), you'll instead use an existing account, and manage your keys using a [secure signing configuration](set-up-secure-signing.html).
+
 
 ### {{n.next()}}. Connect to the Network
 
@@ -51,6 +61,10 @@ _JavaScript_
 
 <!-- MULTICODE_BLOCK_END -->
 
+For this tutorial, you can connect directly from your browser by pressing the following button:
+
+{% include '_snippets/interactive-tutorials/connect-step.md' %}
+
 
 ### {{n.next()}}. Send AccountSet Transaction to Enact the Freeze
 
@@ -87,11 +101,21 @@ _WebSocket_
 
 <!-- MULTICODE_BLOCK_END -->
 
+{{ start_step("Send AccountSet") }}
+<button class="btn btn-primary previous-steps-required send-accountset" data-wait-step-name="Wait" data-action="start_freeze">Send AccountSet</button>
+<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">Sending...</div>
+<div class="output-area"></div>
+{{ end_step() }}
+
 
 ### {{n.next()}}. Wait for Validation
 
 Most transactions are accepted into the next ledger version after they're submitted, which means it may take 4-7 seconds for a transaction's outcome to be final. If the XRP Ledger is busy or poor network connectivity delays a transaction from being relayed throughout the network, a transaction may take longer to be confirmed. (For information on how to set an expiration for transactions, see [Reliable Transaction Submission](reliable-transaction-submission.html).)
 
+{{ start_step("Wait") }}
+{% include '_snippets/interactive-tutorials/wait-step.md' %}
+{{ end_step() }}
+
 
 ### {{n.next()}}. Confirm Account Settings
 
@@ -148,6 +172,12 @@ Response:
 
 <!-- MULTICODE_BLOCK_END -->
 
+{{ start_step("Confirm Settings") }}
+<button id="confirm-settings" class="btn btn-primary previous-steps-required">Confirm Settings</button>
+<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">Sending...</div>
+<div class="output-area"></div>
+{{ end_step() }}
+
 
 ### Intermission: While Frozen
 
@@ -195,16 +225,31 @@ _WebSocket_
 
 <!-- MULTICODE_BLOCK_END -->
 
+{{ start_step("End Freeze") }}
+<button class="btn btn-primary previous-steps-required send-accountset" data-wait-step-name="Wait (again)" data-action="end_freeze">Send AccountSet (end the freeze)</button>
+<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">Sending...</div>
+<div class="output-area"></div>
+{{ end_step() }}
+
 
 ### {{n.next()}}. Wait for Validation
 
 As before, wait for the previous transaction to be validated by consensus before continuing.
 
+{{ start_step("Wait (again)") }}
+{% include '_snippets/interactive-tutorials/wait-step.md' %}
+{{ end_step() }}
+
 
 ### {{n.next()}}. Confirm Account Settings
 
 After the transaction is validated, you can confirm the status of the Global Freeze flag in the same way as before: by calling the [account_info method][] and checking the value of the account's `Flags` field to see if the [`lsfGlobalFreeze` bit (`0x00400000`)](accountroot.html#accountroot-flags) is **off**.
 
+{{ start_step("Confirm Settings (After Freeze)") }}
+<button id="confirm-settings-end" class="btn btn-primary previous-steps-required">Confirm Settings (After Freeze)</button>
+<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">Sending...</div>
+<div class="output-area"></div>
+{{ end_step() }}
 
 
 ## See Also