ARCHIVE/Hook-Explainer
1
0
Fork 0
mirror of https://github.com/Xahau/Hook-Explainer.git synced 2025-11-04 05:35:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from Xahau/develop

Browse Source 
Loading, theme and display fixes
This commit is contained in:
zgrguric
2025-06-06 10:23:00 +02:00
committed by GitHub
parent 39d423e6fc cad684ba94
commit 086cae08ba
1 changed files with 108 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
index.html
View File

@@ -1,4 +1,4 @@
<html lang="en"> <html lang="en" style="background-color: transparent">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <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> <title>Xaman Hook Explainer</title>
<script src="https://kit.fontawesome.com/9a6429c9a0.js" crossorigin="anonymous"></script> <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://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> <script>
/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ /*! 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 = ''; let h = '';
if(this.mem_parent) { if(this.mem_parent) {
h += '<div class="mb-2 font-weight-bold">Parent transaction</div>'; h += '<div class="mb-3 bg-light rounded p-2">';
h += '<div class="mb-1 small bg-light rounded p-2">'; h += '<div class="font-weight-bold mb-1">Parent transaction</div>';
h += '<div>'+XW_UTIL.HTML_HookNameBlock( h += '<div class="text-monospace small text-muted text-break lh-1 d-block mb-2">'+this.mem_parent.EmitParentTxnID+'</div>';
this.mem_parent.EmitHookHash,
'font-weight-bold', h += '<div class="font-weight-bold mb-1">Parent emitted by</div>';
'<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>' h += XW_UTIL.HTML_HookName(this.mem_parent.EmitHookHash);
)+'</div>';
h += '</div>'; h += '</div>';
loadHooksHashes.push(this.mem_parent.EmitHookHash);
} }
//mem_invokeblob //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++) { for (let i = 0; i < this.mem_hookexecutions.length; i++) {
let he = this.mem_hookexecutions[i]; let he = this.mem_hookexecutions[i];
//he.HookExecution.HookResult =4; //test
if(he.HookExecution.HookHash) { 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( h += '<div>'+XW_UTIL.HTML_HookNameBlock(
he.HookExecution.HookHash, he.HookExecution.HookHash,
'font-weight-bold', '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>'; )+'</div>';
h += '</div>'; h += '</div>';
XW_UTIL.Load_HookName(he.HookExecution.HookHash) 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) { if(he.HookExecution.HookResult != 3) {
//fail //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>'; h += '<div class="font-weight-bold text-danger text-break">'+XW_UTIL.hookresultcodetotext(he.HookExecution.HookResult)+'</div>';
if(he.HookExecution.HookReturnString) { if(he.HookExecution.HookReturnString) {
h += '<div class="text-break">'+xrpl.convertHexToString(he.HookExecution.HookReturnString)+'</div>'; 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>'; h += '</div>';
} else { } 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>'; h += '<div class="font-weight-bold text-success">Success</div>';
if(he.HookExecution.HookReturnString) { if(he.HookExecution.HookReturnString) {
h += '<div class="text-break">'+xrpl.convertHexToString(he.HookExecution.HookReturnString)+'</div>'; 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 if(em._data) { //connected data found
h += '<div class="font-weight-bold">' + em._data.TransactionType + '</div>'; 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>'; 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') { } else if(d.getOp() == 'no-op') {
if(d.existing_hook) subjecthookhash = d.existing_hook; if(d.existing_hook) subjecthookhash = d.existing_hook;
} else if(d.getOp() == 'namespace reset') { } else if(d.getOp() == 'namespace reset') {
subjecthookhash_lbl = "Namespace delete operation";
subjecthookhash_descr = "This operation deletes following namespace and its data."; 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>'; )+'</div>';
h += '</div>'; h += '</div>';
} else { } 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) { if(subjecthookhash_descr !== null) {
h += '<p class="small">'+subjecthookhash_descr+'</p>'; h += '<p class="small">'+subjecthookhash_descr+'</p>';
} }
} }
} }
//HookOn start //HookOn start
if(req.HookOn !== null) { if(req.HookOn !== null) {
h += '<div class="mb-2 mt-3 font-weight-bold">Transaction triggers</div>'; 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() { xamanWebViewFitFrame() {
if(window.ReactNativeWebView) { if(window.ReactNativeWebView) {
var container = document.getElementById('hooksexplainercontent_container') let height = XW_UTIL.getContainerHeight();
var height = Math.max( let resizeData = { layout: { height: height+2 } }
container.scrollHeight,
container.offsetHeight,
container.clientHeight
);
var resizeData = { layout: { height: height+2 } }
window.ReactNativeWebView.postMessage(JSON.stringify(resizeData)) 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) { hookresultcodetotext(code) {
switch(code) { switch(code) {
case 0: case 0:
@@ -1430,34 +1441,38 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
} }
</script> </script>
</head> </head>
<body> <body id="hooksexplainerbody" style="background-color: transparent">
<div id="hooksexplainercontent_container" class="container-fluid px-0 py-0 my-0"> <div id="hooksexplainercontent_container" class="container-fluid px-0 py-0 my-0">
<div id="hooksexplainererror_container" class="d-none"> <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>
<div id="hooksexplainercontent"> <div id="hooksexplainercontent">
<div class="text-center d-none" id="hooksexplainerloader">
<div class="text-center">
<div class="spinner-border spinner-border-sm" role="status"></div> <div class="spinner-border spinner-border-sm" role="status"></div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
var HE_LOADED = false;
//Language settings //Language settings
const HE_LANG = { const HE_LANG = {
//TODO //TODO
}; };
const HE_METALOADER = new XW_HooksMetadataLoader(); const HE_METALOADER = new XW_HooksMetadataLoader();
//todo remove this //todo remove this
//function checkpoint(str) { function checkpoint(str) {
// document.getElementById("hooksexplainercontentcheck").innerHTML += '<br>"'+str+'"'; document.getElementById("hooksexplainercontentcheck").innerHTML += '<br>"'+str+'"';
//} }
function renderError(error) { function renderError(error) {
let h = 'Sorry, hook explainer could not be loaded.<br><small>Returned parsing error:<br>'+(error.message?error.message:error)+'</small>'; 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'); $("#hooksexplainercontent").addClass('d-none');
$("#hooksexplainererror").html(h); $("#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(); 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 //RUNNER
function runHookExplainer(data) { function runHookExplainer(data) {
//setup theme //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'; if(!xtheme) xtheme = 'light';
document.documentElement.classList.add('theme-'+xtheme); document.documentElement.classList.add('theme-'+xtheme);
switch (xtheme) { switch (xtheme) {
case 'light':
document.documentElement.style.backgroundColor = '#FFFFFF';
break;
case 'dark': case 'dark':
document.documentElement.style.backgroundColor = '#000000'; document.documentElement.style.backgroundColor = '#000000';
break; 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'; document.documentElement.style.backgroundColor = '#030B36';
break; break;
} }
if(xtheme != 'light') {
var xlink = document.createElement('link') var xlink = document.createElement('link')
xlink.href = 'https://xumm.app/assets/themes/xapp/xumm-'+xtheme.toLowerCase()+'/bootstrap.min.css' xlink.href = 'https://xumm.app/assets/themes/xapp/xumm-'+xtheme+'/bootstrap.min.css'
xlink.type = 'text/css' xlink.type = 'text/css'
xlink.rel = 'stylesheet' xlink.rel = 'stylesheet'
document.getElementsByTagName('head')[0].appendChild(xlink); document.getElementsByTagName('head')[0].appendChild(xlink);
}
//run explainer //run explainer
const HE = new XW_HooksExplainer(data.account, data.tx_data, data.tx_metadata, data.origin, HE_LANG, window.xrpl, { const HE = new XW_HooksExplainer(data.account, data.tx_data, data.tx_metadata, data.origin, HE_LANG, window.xrpl, {
endpoint: data.node.uri, 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 => { }).catch(err => {
renderError(err); renderError(err);
}); });
} }
function docReady(fn) { function docReady(fn) {
@@ -1517,15 +1543,21 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
} }
docReady(function() { docReady(function() {
//setup spinner loader height position
renderLoader();
if(window.ReactNativeWebView) { if(window.ReactNativeWebView) {
if(!window.ReactNativeWebView_eventHandler) { if(!window.ReactNativeWebView_eventHandler) {
window.ReactNativeWebView_eventHandler = (() => { window.ReactNativeWebView_eventHandler = (() => {
const _eventHandler = event => { const _eventHandler = event => {
HE_LOADED = true;
try { try {
const data = JSON.parse(event.data) const data = JSON.parse(event.data)
if (typeof data === 'object' && data && data?.command === 'getparams') { if (typeof data === 'object' && data && data?.command === 'getparams') {
// Got initial params // Got initial params
XW_UTIL.xamanWebViewFitFrame();
runHookExplainer(data); runHookExplainer(data);
} else { } else {
throw Error('Xaman 4.1.0 or higher required'); 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 // 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 { } else {
// web context // web context
@@ -1553,6 +1592,9 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
</script> </script>
<style> <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 { #hooksexplainercontent_container {
overflow: hidden; overflow: hidden;
} }
@@ -1602,7 +1644,6 @@ var xrpl;(()=>{var e={54373:(e,t)=>{"use strict";function r(e){if(!Number.isSafe
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.hookname-inline{ .hookname-inline{
position: relative; position: relative;
-webkit-border-radius: 3px; -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 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 */ /* theme vars */
/* - DARK */ /* - DARK */