Move XRPLoader component to better place

content/@theme/components/XRPLoader.tsx

@@ -6,7 +6,7 @@ export interface XRPLoaderProps {
 
 export default function XRPLoader(props: XRPLoaderProps) {
   return (
-  <div id="loader" style={{ display: "inline" }}>
+  <div className="loader collapse">
     <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
     {props.message}
   </div>);

content/@theme/markdoc/components.tsx

@@ -4,6 +4,8 @@ import dynamicReact from '@markdoc/markdoc/dist/react';
 import { usePageSharedData } from '@portal/hooks';
 import { Link } from '@portal/Link';
 
+export {default as XRPLoader} from '../components/XRPLoader';
+
 function slugify(text: string) {
     return text
       .toLowerCase()
@@ -41,7 +43,7 @@ export function StartStep(props: { children: React.ReactNode; stepIdx: number; s
             data-steplabel={stepLabel}
             data-stepid={stepId}
           >
-            {props.steps.map((step, idx) => {
+            {props.steps?.map((step, idx) => {
               const iterStepId = slugify(step).toLowerCase();
               let className = `breadcrumb-item bc-${iterStepId}`;
               if (idx > 0) className += ' disabled';

content/@theme/markdoc/schema.ts

@@ -48,3 +48,69 @@ export const codePageName: Schema & { tagName: string } = {
   render: 'CodePageName',
   selfClosing: true,
 };
+
+export const interactiveBlock: Schema & { tagName: string } = {
+  tagName: 'interactive-block',
+  attributes: {
+    label: {
+      type: 'String',
+      required: true,
+    },
+    stepIdx: {
+      type: 'Number',
+      required: true,
+    },
+    steps: {
+      type: 'Array',
+      required: true,
+    },
+    network: {
+      type: 'Object',
+      required: false,
+      default: {
+        name: "Testnet",
+        websocket: "wss://s.altnet.rippletest.net:51233",
+        explorer: "https://testnet.xrpl.org",
+        faucet: "https://faucet.altnet.rippletest.net/accounts",
+      }
+    }
+  },
+  transform(node, config) {
+    const attributes = node.transformAttributes(config);
+    const children = replaceHtmlAttributeValuesVariables(node.transformChildren(config), config.variables.env);
+    return new Tag(this.render, attributes, children);
+  },
+  render: 'InteractiveBlock',
+};
+
+function replaceHtmlAttributeValuesVariables(nodes, variables) {
+  for (const n of nodes) {
+    if (n.attributes) {
+      for (const attribName of Object.keys(n.attributes)) {
+        const v = n.attributes[attribName];
+        if (typeof v !== 'string') continue;
+        n.attributes[attribName] = v.replace(/{%\s*\$env.([\w_\d]+)\s*%}/g, (_, name) => {
+          return variables[name];
+        });
+      }
+    }
+    if (n.children) {
+      replaceHtmlAttributeValuesVariables(n.children, variables);
+    }
+  }
+
+  return nodes;
+}
+
+export const xrpLoader: Schema & { tagName: string } = {
+  tagName: 'loading-icon',
+  attributes: {
+    message: {
+      type: 'String',
+      required: false,
+      default: "...",
+    },
+  },
+  render: 'XRPLoader',
+  selfClosing: true,
+};

content/resources/dev-tools/xrp-faucets.page.tsx

@@ -3,7 +3,7 @@ import { useTranslate } from '@portal/hooks';
 import { useState } from 'react';
 import { Client, dropsToXrp, Wallet } from 'xrpl'; 
 import * as faucetData from './faucets.json'
-import XRPLoader from 'content/static/components/XRPLoader';
+import XRPLoader from '../../@theme/components/XRPLoader';
 
 interface FaucetInfo {
   id: string,

content/static/js/faucet.js

@@ -34,7 +34,7 @@ function TestNetCredentials(url, altnet_name, ws_url) {
   const secret = $('#secret')
   const balance = $('#balance')
   const sequence = $('#sequence')
-  const loader = $('#loader')
+  const loader = $('.loader')
 
   //reset the fields initially and for re-generation
   credentials.hide()

content/static/js/interactive-tutorial.js

@@ -196,7 +196,7 @@ function setup_generate_step() {
           <span id="use-secret">${wallet.seed}</span></div>`)
       if (data.balance) {
         block.find(".output-area").append(`<div><strong>${tl("Balance:")}</strong>
-        ${Number(data.balance).toLocaleString(current_locale)} XRP</div>`)
+        ${data.balance} XRP</div>`)
       }
 
       // Automatically populate all examples in the page with the
@@ -339,11 +339,12 @@ function setup_connect_step() {
     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)
-    $("#loader-connect").hide()
+    block.find(".loader").hide()
     $(".connection-required").prop("disabled", false)
     $(".connection-required").prop("title", "")
 
@@ -362,7 +363,7 @@ function setup_connect_step() {
   })
   $("#connect-button").click(async (event) => {
     $("#connection-status").text( tl("Connecting...") )
-    $("#loader-connect").show()
+    block.find(".loader").show()
     await api.connect()
 
     for (const fn of after_connect) {