From 2f41ef9480868e2c6591fd62555ca8bce7fe8b77 Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Thu, 21 Oct 2021 17:46:26 -0700
Subject: [PATCH] Make 'Enable No Freeze' interactive

---
 assets/js/tutorials/enable-no-freeze.js       | 58 +++++++++++++++++++
 .../js/tutorials/require-destination-tags.js  |  4 +-
 .../tutorials/use-tokens/enable-no-freeze.md  | 33 +++++++++++
 3 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/tutorials/enable-no-freeze.js

diff --git a/assets/js/tutorials/enable-no-freeze.js b/assets/js/tutorials/enable-no-freeze.js
new file mode 100644
index 0000000000..a2d64eb7a3
--- /dev/null
+++ b/assets/js/tutorials/enable-no-freeze.js
@@ -0,0 +1,58 @@
+// 1. Generate
+// 2. Connect
+// The code for these steps is handled by interactive-tutorial.js
+$(document).ready(() => {
+
+  // 3. Send AccountSet --------------------------------------------------------
+  $("#send-accountset").click( async (event) => {
+    const address = get_address(event)
+    if (!address) {return}
+
+    try {
+      await generic_full_send(event, {
+        "TransactionType": "AccountSet",
+        "Account": address,
+        "SetFlag": xrpl.AccountSetAsfFlags.asfNoFreeze
+      })
+      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.lsfNoFreeze) {
+      block.find(".output-area").append(`<p><i class="fa fa-check-circle"></i>
+          No Freeze is enabled.</p>`)
+    } else {
+      block.find(".output-area").append(`<p><i class="fa fa-times-circle"></i>
+          No Freeze Tag is DISABLED.</p>`)
+    }
+
+    complete_step("Confirm Settings")
+  })
+
+})
diff --git a/assets/js/tutorials/require-destination-tags.js b/assets/js/tutorials/require-destination-tags.js
index 5c8bd06ae3..124d3ca688 100644
--- a/assets/js/tutorials/require-destination-tags.js
+++ b/assets/js/tutorials/require-destination-tags.js
@@ -12,7 +12,7 @@ $(document).ready(() => {
       await generic_full_send(event, {
         "TransactionType": "AccountSet",
         "Account": address,
-        "SetFlag": 1 // RequireDest
+        "SetFlag": xrpl.AccountSetAsfFlags.asfRequireDest
       })
       complete_step("Send AccountSet")
     } catch(err) {
@@ -38,7 +38,7 @@ $(document).ready(() => {
         "ledger_index": "validated"
     })
     console.log(account_info)
-    const flags = xrpl.parseAccountRootFlags(account_info.account_data.Flags)
+    const flags = xrpl.parseAccountRootFlags(account_info.result.account_data.Flags)
     block.find(".loader").hide()
 
     block.find(".output-area").append(
diff --git a/content/tutorials/use-tokens/enable-no-freeze.md b/content/tutorials/use-tokens/enable-no-freeze.md
index 300708e0a5..fe6a6a6c00 100644
--- a/content/tutorials/use-tokens/enable-no-freeze.md
+++ b/content/tutorials/use-tokens/enable-no-freeze.md
@@ -2,7 +2,9 @@
 html: enable-no-freeze.html
 parent: use-tokens.html
 blurb: Permanently give up your account's ability to freeze tokens it issues.
+embed_ripple_lib: true
 filters:
+  - interactive_steps
   - include_code
 labels:
   - Tokens
@@ -18,6 +20,9 @@ If you [issue tokens](issued-currencies.html) in the XRP Ledger, can enable the
     - **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 enable No Freeze, but the main reason you would do so is if you intend to or have already issued such a token.
 
+<!-- Source for this specific tutorial's interactive bits: -->
+<script type="application/javascript" src="assets/js/tutorials/enable-no-freeze.js"></script>
+
 
 ## Example Code
 
@@ -34,6 +39,13 @@ To transact on the XRP Ledger, you need an address and secret key, and some XRP.
 
 **Caution:** You cannot use a [regular key pair](cryptographic-keys.html) or [multi-signing](multi-signing.html) to enable the No Freeze setting.
 
+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
 
 You must be connected to the network to submit transactions to it. The following code shows how to connect to a public XRP Ledger Testnet server a supported [client library](client-libraries.html):
@@ -46,6 +58,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
 
@@ -81,10 +97,21 @@ _WebSocket_
 <!-- MULTICODE_BLOCK_END -->
 
 
+{{ start_step("Send AccountSet") }}
+<button id="send-accountset" class="btn btn-primary previous-steps-required" data-wait-step-name="Wait">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
@@ -142,6 +169,12 @@ Response:
 
 <!-- MULTICODE_BLOCK_END -->
 
+{{ start_step("Confirm Settings") }}
+<button id="confirm-settings" class="btn btn-primary previous-steps-required" data-wait-step-name="Wait">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() }}
+
 
 ## See Also