Merge pull request #1 from Xahau/develop

Loading, theme and display fixes
2025-11-04 05:35:47 +00:00 · 2025-06-06 10:23:00 +02:00
parent 39d423e6fc cad684ba94
commit 086cae08ba
1 changed files with 108 additions and 50 deletions
--- 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,13 @@ 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>'+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>'
-          )+'</div>';
+        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>';
-        loadHooksHashes.push(this.mem_parent.EmitHookHash);
      }

      //mem_invokeblob
@@ -195,13 +196,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 +212,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 +222,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 +260,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 +378,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 +422,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 +1291,27 @@ 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
-        );
-      
-        var resizeData = { layout: { height: height+2 } }
+        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;
+    },
+
    hookresultcodetotext(code) {
      switch(code) {
        case 0:
@@ -1430,34 +1441,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 +1480,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 +1501,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 +1511,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 +1531,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 +1543,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 +1574,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 +1592,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 +1644,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 +1671,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 */