mirror of
https://github.com/Xahau/Hook-Explainer.git
synced 2025-12-06 17:27:59 +00:00
Update index.html
Display fixes, loading fixes.
This commit is contained in:
zgrguric
182
index.html
182
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 */
|
||||
|
||||
Reference in New Issue
Block a user