From da711075861c38f76a0cad9d0ec4e1cdbdcf84aa Mon Sep 17 00:00:00 2001 From: Etan Kissling Date: Thu, 17 Aug 2023 00:14:24 +0200 Subject: [PATCH] add merkleization information When inspecting SSZ serialization, display a merkleization diagram. --- index.html | 457 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 455 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c6861c6..e8e9c33 100644 --- a/index.html +++ b/index.html @@ -93,6 +93,286 @@ text-align: left; } + .tree { + font-family: 'm_1mmedium', monospace; + text-align: right; + } + + .tree td { + position: relative; + } + + .unused { + font-family: 'm_1mlight', monospace; + color: #797979; + } + + .tree .node-right { + padding-right: 30px; + } + + .tree .node-left { + padding-left: 30px; + } + + .tree .node-right::after { + content: ""; + width: 10px; + height: 10px; + border: 1px solid #000; + background-color: #fff; + z-index: 1; + border-radius: 50%; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + } + + .tree .node-bottom { + text-align: center; + } + + .tree .node-bottom::after { + content: ""; + width: 10px; + height: 10px; + border: 1px solid #000; + background-color: #fff; + z-index: 1; + border-radius: 50%; + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + } + + .tree .node-left { + text-align: left; + } + + .tree .node-left::before { + content: ""; + width: 10px; + height: 10px; + border: 1px solid #000; + background-color: #fff; + z-index: 1; + border-radius: 50%; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + } + + .tree .lines { + background-color: #000; + position: absolute; + } + + .tree .node-right .lines { + left: -15px; + height: 1px; + transform-origin: left; + } + + .tree .node-right .lines:nth-child(1) { + top: 25%; + } + + .tree .node-right .lines:nth-child(2) { + top: 75%; + } + + .tree .node-right[rowspan="2"] .lines { + width: 100%; + } + + .tree .node-right[rowspan="2"] .lines:nth-child(1) { + transform: rotate(17deg) translateY(-50%); + } + + .tree .node-right[rowspan="2"] .lines:nth-child(2) { + transform: rotate(-17deg) translateY(-50%); + } + + .tree .node-right[rowspan="4"] .lines { + width: 110%; + } + + .tree .node-right[rowspan="4"] .lines:nth-child(1) { + transform: rotate(35deg) translateY(-50%); + } + + .tree .node-right[rowspan="4"] .lines:nth-child(2) { + transform: rotate(-35deg) translateY(-50%); + } + + .tree .node-right[rowspan="8"] .lines { + width: 170%; + } + + .tree .node-right[rowspan="8"] .lines:nth-child(1) { + transform: rotate(54deg) translateY(-50%); + } + + .tree .node-right[rowspan="8"] .lines:nth-child(2) { + transform: rotate(-54deg) translateY(-50%); + } + + .tree .node-right[rowspan="16"] .lines { + width: 290%; + } + + .tree .node-right[rowspan="16"] .lines:nth-child(1) { + transform: rotate(71deg) translateY(-50%); + } + + .tree .node-right[rowspan="16"] .lines:nth-child(2) { + transform: rotate(-71deg) translateY(-50%); + } + + .tree .node-right[rowspan="17"] .lines { + width: 220%; + } + + .tree .node-right[rowspan="17"] .lines:nth-child(1) { + top: 0%; + transform: rotate(63deg) translateY(-50%); + } + + .tree .node-right[rowspan="17"] .lines:nth-child(2) { + width: 210%; + top: 97%; + transform: rotate(-62deg) translateY(-50%); + } + + .tree .node-right[rowspan="32"] .lines { + width: 540%; + } + + .tree .node-right[rowspan="32"] .lines:nth-child(1) { + transform: rotate(80deg) translateY(-50%); + } + + .tree .node-right[rowspan="32"] .lines:nth-child(2) { + transform: rotate(-80deg) translateY(-50%); + } + + .tree .node-bottom .lines { + bottom: -15px; + height: 1px; + width: 85px; + transform-origin: top; + } + + .tree .node-bottom .lines:nth-child(1) { + left: 10%; + bottom: 23%; + } + + .tree .node-bottom .lines:nth-child(2) { + left: 43%; + bottom: -12%; + } + + .tree .node-bottom[rowspan="4"] .lines:nth-child(1) { + transform: rotate(-36deg) translateX(-50%); + } + + .tree .node-bottom[rowspan="4"] .lines:nth-child(2) { + transform: rotate(36deg) translateY(-50%); + } + + .tree .node-left .lines { + right: -15px; + height: 1px; + transform-origin: right; + } + + .tree .node-left .lines:nth-child(1) { + top: 25%; + } + + .tree .node-left .lines:nth-child(2) { + top: 75%; + } + + .tree .node-left[rowspan="2"] .lines { + width: 100%; + } + + .tree .node-left[rowspan="2"] .lines:nth-child(1) { + transform: rotate(-17deg) translateY(-50%); + } + + .tree .node-left[rowspan="2"] .lines:nth-child(2) { + transform: rotate(17deg) translateY(-50%); + } + + .tree .node-left[rowspan="4"] .lines { + width: 110%; + } + + .tree .node-left[rowspan="4"] .lines:nth-child(1) { + transform: rotate(-35deg) translateY(-50%); + } + + .tree .node-left[rowspan="4"] .lines:nth-child(2) { + transform: rotate(35deg) translateY(-50%); + } + + .tree .node-left[rowspan="8"] .lines { + width: 170%; + } + + .tree .node-left[rowspan="8"] .lines:nth-child(1) { + transform: rotate(-54deg) translateY(-50%); + } + + .tree .node-left[rowspan="8"] .lines:nth-child(2) { + transform: rotate(54deg) translateY(-50%); + } + + .tree .node-left[rowspan="16"] .lines { + width: 290%; + } + + .tree .node-left[rowspan="16"] .lines:nth-child(1) { + transform: rotate(-71deg) translateY(-50%); + } + + .tree .node-left[rowspan="16"] .lines:nth-child(2) { + transform: rotate(71deg) translateY(-50%); + } + + .tree .node-left[rowspan="17"] .lines { + width: 180%; + } + + .tree .node-left[rowspan="17"] .lines:nth-child(1) { + top: 0%; + width: 190%; + transform: rotate(-59deg) translateY(-50%); + } + + .tree .node-left[rowspan="17"] .lines:nth-child(2) { + top: 97%; + transform: rotate(57deg) translateY(-50%); + } + + .tree .node-left[rowspan="32"] .lines { + width: 540%; + } + + .tree .node-left[rowspan="32"] .lines:nth-child(1) { + transform: rotate(-80deg) translateY(-50%); + } + + .tree .node-left[rowspan="32"] .lines:nth-child(2) { + transform: rotate(80deg) translateY(-50%); + } + .fas { width: 12px; text-align: center; @@ -237,7 +517,7 @@ - + @@ -317,6 +597,179 @@
RootEIP-6404 root
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nonce
from
max_fee_per_gas
gas
ecdsa_signature
to
value
no_replay_protection
input
access_list
type
max_priority_fee_per_gas
max_fee_per_blob_gas
0
blob_versioned_hashes
0
0
0
0
0
0
0
0
0
0
payload
signature
0
0
0
0
0
root
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
active_fieldsactive_fields
+
@@ -1202,7 +1655,7 @@ document.getElementById('selectedTransactionEip6404SignatureFrom').innerText = arrayToHexString(signatureFrom); document.getElementById('selectedTransactionEip6404SignatureFromDescription').innerHTML = '' + - 'Destination' + ''; + 'Origin' + ''; } else { document.getElementById('selectedTransactionEip6404SignatureHasFrom').hidden = true; }