From 626804daee57902345b338fadf262a38bb9930ec Mon Sep 17 00:00:00 2001
From: zgrguric <zgrguric@xrplwin.com>
Date: Wed, 4 Jun 2025 14:19:43 +0200
Subject: [PATCH 1/2] Update index.html

Display fixes, loading fixes.
---
 index.html | 182 +++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 142 insertions(+), 40 deletions(-)
diff --git a/index.html b/index.html
index 3624fb3..1fdf073 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<html lang="en">
+<html lang="en" style="background-color: transparent">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -6,6 +6,9 @@
   <title>Xaman Hook Explainer</title>
   <script src="https://kit.fontawesome.com/9a6429c9a0.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://xumm-apps-xapps.nodum.io/static/style/xapps-routed-dist.css?1745960212">
+  
+  <link rel="stylesheet" href="https://use.typekit.net/vtt7ckl.css">
+  <link rel="stylesheet" href="https://xumm.app/assets/themes/xapp/xumm-light/bootstrap.min.css">
       
 <script>
 /*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
@@ -162,15 +165,49 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
       let h = '';
       
       if(this.mem_parent) {
-        h += '<div class="mb-2 font-weight-bold">Parent transaction</div>';
-        h += '<div class="mb-1 small bg-light rounded p-2">';
+
+
+
+        h += '<div class="mb-3 bg-light rounded p-2">';
+        h += '<div class="font-weight-bold mb-1">Parent transaction</div>';
+          h += '<div class="text-monospace small text-muted text-break lh-1 d-block mb-2">'+this.mem_parent.EmitParentTxnID+'</div>';
+    
+        h += '<div class="font-weight-bold mb-1">Parent emitted by</div>';
+        h += XW_UTIL.HTML_HookName(this.mem_parent.EmitHookHash);
+        h += '</div>';
+
+
+
+
+
+
+
+
+
+
+
+
+
+        /*h += '<div class="mb-2 font-weight-bold">Parent transaction</div>';
+        h += '<div class="mb-1 small bg-light rounded rounded-nobottom p-2">';
           h += '<div>'+XW_UTIL.HTML_HookNameBlock(
             this.mem_parent.EmitHookHash,
             'font-weight-bold',
-            '<span class="text-monospace text-muted text-break lh-1 d-block" style="max-width:calc( 100% - 70px )">'+XW_UTIL.xwshortenize(this.mem_parent.EmitParentTxnID,10)+'</span>'
+            '<span class="text-monospace text-muted text-break lh-1 d-block" style="max-width:calc( 100% - 40px )">'+this.mem_parent.EmitHookHash+'</span>'
           )+'</div>';
         h += '</div>';
         loadHooksHashes.push(this.mem_parent.EmitHookHash);
+
+
+        h += '<div class="mb-3 small bg-light rounded rounded-notop p-2">';
+        h += '<div class="font-weight-bold mb-1">Transaction</div>';
+
+          h += '<div class="text-monospace text-muted text-break lh-1 d-block">'+this.mem_parent.EmitParentTxnID+'</div>';
+     
+        h += '</div>';
+
+        */
+        //todo
       }
 
       //mem_invokeblob
@@ -195,13 +232,14 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
         for (let i = 0; i < this.mem_hookexecutions.length; i++) {
           
           let he = this.mem_hookexecutions[i];
-
+          //he.HookExecution.HookResult =4; //test
           if(he.HookExecution.HookHash) {
-            h += '<div class="mb-1 small bg-light rounded p-2">';
+            h += '<div class="mb-1 small bg-light rounded rounded-nobottom p-2">';
               h += '<div>'+XW_UTIL.HTML_HookNameBlock(
                 he.HookExecution.HookHash,
                 'font-weight-bold',
-                '<span class="text-monospace text-muted text-break lh-1 d-block" style="max-width:calc( 100% - 70px )">'+XW_UTIL.xwshortenize(he.HookExecution.HookHash,10)+'</span>'
+                '<span class="text-monospace text-muted text-break lh-1 d-block user-select-all font-weight-normal" style="max-width:calc( 100% - 40px )">'+he.HookExecution.HookHash+'</span>'
+                //'<span class="text-monospace text-muted text-break lh-1 d-block" style="max-width:calc( 100% - 70px )">'+XW_UTIL.xwshortenize(he.HookExecution.HookHash,10)+'</span>'
               )+'</div>';
             h += '</div>';
             XW_UTIL.Load_HookName(he.HookExecution.HookHash)
@@ -210,7 +248,7 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
           
           if(he.HookExecution.HookResult != 3) {
             //fail
-            h += '<div class="mb-3 small bg-lightred rounded p-2 ml-2">';
+            h += '<div class="mb-3 small bg-lightred rounded rounded-notop p-2">';
             h += '<div class="font-weight-bold text-danger text-break">'+XW_UTIL.hookresultcodetotext(he.HookExecution.HookResult)+'</div>';
             if(he.HookExecution.HookReturnString) {
               h += '<div class="text-break">'+xrpl.convertHexToString(he.HookExecution.HookReturnString)+'</div>';
@@ -220,7 +258,7 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
             h += '</div>';
 
           } else {
-            h += '<div class="mb-3 small bg-lightgreen rounded p-2 ml-2">';
+            h += '<div class="mb-3 small bg-lightgreen rounded rounded-notop p-2">';
             h += '<div class="font-weight-bold text-success">Success</div>';
             if(he.HookExecution.HookReturnString) {
               h += '<div class="text-break">'+xrpl.convertHexToString(he.HookExecution.HookReturnString)+'</div>';
@@ -258,7 +296,8 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
             if(em._data) { //connected data found
               h += '<div class="font-weight-bold">' + em._data.TransactionType + '</div>';
             }
-            h += '<div class="text-monospace text-muted text-break lh-1 mb-1">'+XW_UTIL.xwshortenize(em.HookEmission.EmittedTxnID,10)+'</div>';
+            //h += '<div class="text-monospace text-muted text-break lh-1 mb-1">'+XW_UTIL.xwshortenize(em.HookEmission.EmittedTxnID,10)+'</div>';
+            h += '<div class="text-monospace text-muted text-break lh-1 mb-1">'+em.HookEmission.EmittedTxnID+'</div>';
             
           h += '</div>';
         }
@@ -375,6 +414,7 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
       } else if(d.getOp() == 'no-op') {
         if(d.existing_hook) subjecthookhash = d.existing_hook;
       } else if(d.getOp() == 'namespace reset') {
+        subjecthookhash_lbl = "Namespace delete operation";
         subjecthookhash_descr = "This operation deletes following namespace and its data.";
       }
 
@@ -418,15 +458,13 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
           )+'</div>';
         h += '</div>';
         } else {
-          h += '<div class="mb-2 font-weight-bold">Namespace delete operation</div>';
+          h += '<div class="mb-2 font-weight-bold">'+subjecthookhash_lbl+'</div>';
           if(subjecthookhash_descr !== null) {
             h += '<p class="small">'+subjecthookhash_descr+'</p>';
           }
         }
       }
 
-      
-      
       //HookOn start
       if(req.HookOn !== null) {
         h += '<div class="mb-2 mt-3 font-weight-bold">Transaction triggers</div>';
@@ -1289,18 +1327,35 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
     
     xamanWebViewFitFrame() {
       if(window.ReactNativeWebView) {
-        var container = document.getElementById('hooksexplainercontent_container')
+        /*var container = document.getElementById('hooksexplainercontent_container');
         var height = Math.max(
           container.scrollHeight,
           container.offsetHeight, 
           container.clientHeight
         );
-      
-        var resizeData = { layout: { height: height+2 } }
+        if(height < 30) height = 30;*/
+        let height = XW_UTIL.getContainerHeight();
+        let resizeData = { layout: { height: height+2 } }
         window.ReactNativeWebView.postMessage(JSON.stringify(resizeData))
       }
     },
 
+    getContainerHeight() {
+      let container = document.getElementById('hooksexplainercontent_container');
+      let height = Math.max(
+        container.scrollHeight,
+        container.offsetHeight, 
+        container.clientHeight
+      );
+      if(height < 30) height = 30;
+      return height;
+    },
+
+    getWindowHeight() {
+      return window.innerHeight;
+      //let container = document.getElementById('hooksexplainercontent_container');
+    },
+
     hookresultcodetotext(code) {
       switch(code) {
         case 0:
@@ -1430,34 +1485,38 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
   }
   </script>
 </head>
-<body>
+<body id="hooksexplainerbody" style="background-color: transparent">
   <div id="hooksexplainercontent_container" class="container-fluid px-0 py-0 my-0">
     
     <div id="hooksexplainererror_container" class="d-none">
-      <div class="alert alert-danger" id="hooksexplainererror" role="alert"></div>
+      <div class="alert alert-danger mb-0" id="hooksexplainererror" role="alert"></div>
+    </div>
+    <div id="hooksexplainermsg_container" class="d-none">
+      <div class="alert alert-warning mb-0" id="hooksexplainermsg" role="alert"></div>
     </div>
     <div id="hooksexplainercontent">
-    
-      <div class="text-center">
+      <div class="text-center d-none" id="hooksexplainerloader">
         <div class="spinner-border spinner-border-sm" role="status"></div>
       </div>
-    
     </div>
       </div>
 <script>
+  var HE_LOADED = false;
+
   //Language settings
   const HE_LANG = {
     //TODO
   };
+  
   const HE_METALOADER = new XW_HooksMetadataLoader();
+  
 
   //todo remove this
-  //function checkpoint(str) {
-  //  document.getElementById("hooksexplainercontentcheck").innerHTML += '<br>"'+str+'"';
-  //}
+  function checkpoint(str) {
+    document.getElementById("hooksexplainercontentcheck").innerHTML += '<br>"'+str+'"';
+  }
 
   function renderError(error) {
-
     let h = 'Sorry, hook explainer could not be loaded.<br><small>Returned parsing error:<br>'+(error.message?error.message:error)+'</small>';
     $("#hooksexplainercontent").addClass('d-none');
     $("#hooksexplainererror").html(h);
@@ -1465,6 +1524,20 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
     XW_UTIL.xamanWebViewFitFrame();
   }
 
+  function renderMsg(msg) {
+    $("#hooksexplainercontent").addClass('d-none');
+    $("#hooksexplainermsg").html(msg);
+    $("#hooksexplainermsg_container").removeClass('d-none');
+    XW_UTIL.xamanWebViewFitFrame();
+  }
+
+  function renderLoader() {
+    let cheight = XW_UTIL.getWindowHeight();
+    let halfheight = parseInt(cheight/2) - 8;
+    if(halfheight < 1) halfheight = 0;
+    $("#hooksexplainerloader").css('margin-top',halfheight+"px").removeClass('d-none');
+  }
+
   //RUNNER
   function runHookExplainer(data) {
     //setup theme
@@ -1472,9 +1545,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
     if(!xtheme) xtheme = 'light';
     document.documentElement.classList.add('theme-'+xtheme);
     switch (xtheme) {
-      case 'light':
-      document.documentElement.style.backgroundColor = '#FFFFFF';
-      break;
       case 'dark':
       document.documentElement.style.backgroundColor = '#000000';
       break;
@@ -1485,14 +1555,13 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
       document.documentElement.style.backgroundColor = '#030B36';
       break;
     }
-
-    var xlink = document.createElement('link')
-    xlink.href = 'https://xumm.app/assets/themes/xapp/xumm-'+xtheme.toLowerCase()+'/bootstrap.min.css'
-    xlink.type = 'text/css'
-    xlink.rel = 'stylesheet'
-    document.getElementsByTagName('head')[0].appendChild(xlink);
-
-
+    if(xtheme != 'light') {
+      var xlink = document.createElement('link')
+      xlink.href = 'https://xumm.app/assets/themes/xapp/xumm-'+xtheme+'/bootstrap.min.css'
+      xlink.type = 'text/css'
+      xlink.rel = 'stylesheet'
+      document.getElementsByTagName('head')[0].appendChild(xlink);
+    }
     //run explainer
     const HE = new XW_HooksExplainer(data.account, data.tx_data, data.tx_metadata, data.origin, HE_LANG, window.xrpl, {
       endpoint: data.node.uri,
@@ -1506,6 +1575,7 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
     }).catch(err => {
       renderError(err);
     });
+    
   }
 
   function docReady(fn) {
@@ -1517,15 +1587,21 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
   }
 
   docReady(function() {
+
+    //setup spinner loader height position
+    renderLoader();
+    
+
     if(window.ReactNativeWebView) {
       if(!window.ReactNativeWebView_eventHandler) {
+        
         window.ReactNativeWebView_eventHandler = (() => {
           const _eventHandler = event => {
+            HE_LOADED = true;
             try {
               const data = JSON.parse(event.data)
               if (typeof data === 'object' && data && data?.command === 'getparams') {
                 // Got initial params
-                XW_UTIL.xamanWebViewFitFrame();
                 runHookExplainer(data);
               } else {
                 throw Error('Xaman 4.1.0 or higher required');
@@ -1542,9 +1618,16 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
         })();
 
         // Fetch the initial params
-        window.ReactNativeWebView.postMessage(JSON.stringify({ command: 'getparams' }))
+        window.ReactNativeWebView.postMessage(JSON.stringify({ command: 'getparams' }));
+
+        //if no response from xaman in 3 seconds render "Hooks explainer is under development" message
+        setTimeout(() => {
+          if(!HE_LOADED) {
+            renderMsg('Hooks explainer is under development');
+          }
+        }, 3000);
       }
-      XW_UTIL.xamanWebViewFitFrame();
+      //XW_UTIL.xamanWebViewFitFrame();
     } else {
       // web context
       
@@ -1553,6 +1636,9 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
 
 </script>
 <style>
+    body {
+      font-family:"proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    }
     #hooksexplainercontent_container {
       overflow: hidden;
     }
@@ -1602,7 +1688,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
       width: 1em;
       height: 1em;
     }
-    
     .hookname-inline{
       position: relative;
       -webkit-border-radius: 3px;
@@ -1630,6 +1715,23 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
       margin-bottom:.5em
     }
 
+    .rounded-nobottom{
+      -webkit-border-bottom-right-radius: 0 !important;
+      -webkit-border-bottom-left-radius: 0 !important;
+      -moz-border-radius-bottomright: 0 !important;
+      -moz-border-radius-bottomleft: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+    .rounded-notop{
+      -webkit-border-top-left-radius: 0 !important;
+      -webkit-border-top-right-radius: 0 !important;
+      -moz-border-radius-topleft: 0 !important;
+      -moz-border-radius-topright: 0 !important;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+
     /* theme vars */
 
     /* - DARK */

From cad684ba942ebf3775b4758d339e2c302d460b36 Mon Sep 17 00:00:00 2001
From: zgrguric <zgrguric@xrplwin.com>
Date: Wed, 4 Jun 2025 14:23:04 +0200
Subject: [PATCH 2/2] Update index.html

---
 index.html | 44 --------------------------------------------
 1 file changed, 44 deletions(-)

diff --git a/index.html b/index.html
index 1fdf073..53799e6 100644
--- a/index.html
+++ b/index.html
@@ -165,9 +165,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
       let h = '';
       
       if(this.mem_parent) {
-
-
-
         h += '<div class="mb-3 bg-light rounded p-2">';
         h += '<div class="font-weight-bold mb-1">Parent transaction</div>';
           h += '<div class="text-monospace small text-muted text-break lh-1 d-block mb-2">'+this.mem_parent.EmitParentTxnID+'</div>';
@@ -175,39 +172,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
         h += '<div class="font-weight-bold mb-1">Parent emitted by</div>';
         h += XW_UTIL.HTML_HookName(this.mem_parent.EmitHookHash);
         h += '</div>';
-
-
-
-
-
-
-
-
-
-
-
-
-
-        /*h += '<div class="mb-2 font-weight-bold">Parent transaction</div>';
-        h += '<div class="mb-1 small bg-light rounded rounded-nobottom p-2">';
-          h += '<div>'+XW_UTIL.HTML_HookNameBlock(
-            this.mem_parent.EmitHookHash,
-            'font-weight-bold',
-            '<span class="text-monospace text-muted text-break lh-1 d-block" style="max-width:calc( 100% - 40px )">'+this.mem_parent.EmitHookHash+'</span>'
-          )+'</div>';
-        h += '</div>';
-        loadHooksHashes.push(this.mem_parent.EmitHookHash);
-
-
-        h += '<div class="mb-3 small bg-light rounded rounded-notop p-2">';
-        h += '<div class="font-weight-bold mb-1">Transaction</div>';
-
-          h += '<div class="text-monospace text-muted text-break lh-1 d-block">'+this.mem_parent.EmitParentTxnID+'</div>';
-     
-        h += '</div>';
-
-        */
-        //todo
       }
 
       //mem_invokeblob
@@ -1327,13 +1291,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
     
     xamanWebViewFitFrame() {
       if(window.ReactNativeWebView) {
-        /*var container = document.getElementById('hooksexplainercontent_container');
-        var height = Math.max(
-          container.scrollHeight,
-          container.offsetHeight, 
-          container.clientHeight
-        );
-        if(height < 30) height = 30;*/
         let height = XW_UTIL.getContainerHeight();
         let resizeData = { layout: { height: height+2 } }
         window.ReactNativeWebView.postMessage(JSON.stringify(resizeData))
@@ -1353,7 +1310,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
 
     getWindowHeight() {
       return window.innerHeight;
-      //let container = document.getElementById('hooksexplainercontent_container');
     },
 
     hookresultcodetotext(code) {
