merkletree-viz
Version:
Merkle tree visualization library for browser, works with merkletreejs.
60 lines (57 loc) • 2.4 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes">
<title>Merkle Tree Visualization</title>
</head>
<body>
<h1> Merkle Tree Visualization</h1>
<textarea id="input" rows="14" style="display: block; width: 100%; margin-bottom: 1rem;">
// <script src="https://cdn.jsdelivr.net/npm/keccak256@latest/keccak256.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/merkletreejs@latest/merkletree.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/merkletree-viz@latest/merkletreeviz.js"></script>
const rawLeaves = []
for (let i = 0; i < 8; i++) {
rawLeaves.push(`${i}`)
}
const leaves = rawLeaves.map(keccak256)
const tree = new MerkleTree(leaves, keccak256)
const viz = new MerkleTreeViz('#viz')
viz.renderTree(tree)
viz.renderProof(tree.getHexProof(leaves[2]))
</textarea>
<button id="submit">Render</button>
<div id="viz"></div>
<script src="https://cdn.jsdelivr.net/npm/keccak256@latest/keccak256.js"></script>
<script src="https://cdn.jsdelivr.net/npm/merkletreejs@latest/merkletree.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/merkletree-viz@latest/merkletreeviz.js"></script>-->
<script src="../merkletreeviz.js"></script>
<script>
function render() {
const input = document.querySelector('#input').value
try {
new Function(input)()
} catch (err) {
console.error(err)
alert(err.message)
}
try {
localStorage.setItem('input', input)
} catch (err) {}
}
try {
const input = localStorage.getItem('input')
if (input) {
document.querySelector('#input').value = input
}
} catch (err) {}
document.querySelector('#submit').addEventListener('click', event => {
event.preventDefault()
render()
})
render()
</script>
<a href="https://github.com/miguelmota/merkletree-viz" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</body>
</html>