display transaction input in details view

For each transaction, display the validated input.

UpdateWasm

@@ -88,7 +88,7 @@ nim c \
     --passL:'-sUSE_PTHREADS=1' \
     --passC:'-sPTHREAD_POOL_SIZE_STRICT=0' \
     --passL:'-sPTHREAD_POOL_SIZE_STRICT=0' \
-    --passL:'-sEXPORTED_FUNCTIONS="[_free, _malloc, _NimMain, _ETHRandomNumberCreate, _ETHConsensusConfigCreateFromYaml, _ETHConsensusConfigGetConsensusVersionAtEpoch, _ETHBeaconStateCreateFromSsz, _ETHBeaconStateDestroy, _ETHBeaconStateCopyGenesisValidatorsRoot, _ETHRootDestroy, _ETHForkDigestsCreateFromState, _ETHBeaconClockCreateFromState, _ETHBeaconClockGetSlot, _ETHLightClientStoreCreateFromBootstrap, _ETHLightClientStoreDestroy, _kETHLcSyncKind_UpdatesByRange, _kETHLcSyncKind_FinalityUpdate, _kETHLcSyncKind_OptimisticUpdate, _ETHLightClientStoreGetNextSyncTask, _ETHLightClientStoreGetMillisecondsToNextSyncTask, _ETHLightClientStoreProcessUpdatesByRange, _ETHLightClientStoreProcessFinalityUpdate, _ETHLightClientStoreProcessOptimisticUpdate, _ETHLightClientStoreGetFinalizedHeader, _ETHLightClientStoreIsNextSyncCommitteeKnown, _ETHLightClientStoreGetOptimisticHeader, _ETHLightClientStoreGetSafetyThreshold, _ETHLightClientHeaderCreateCopy, _ETHLightClientHeaderDestroy, _ETHLightClientHeaderCopyBeaconRoot, _ETHLightClientHeaderGetBeacon, _ETHBeaconBlockHeaderGetSlot, _ETHBeaconBlockHeaderGetProposerIndex, _ETHBeaconBlockHeaderGetParentRoot, _ETHBeaconBlockHeaderGetStateRoot, _ETHBeaconBlockHeaderGetBodyRoot, _ETHLightClientHeaderCopyExecutionHash, _ETHLightClientHeaderGetExecution, _ETHExecutionPayloadHeaderGetParentHash, _ETHExecutionPayloadHeaderGetFeeRecipient, _ETHExecutionPayloadHeaderGetStateRoot, _ETHExecutionPayloadHeaderGetReceiptsRoot, _ETHExecutionPayloadHeaderGetLogsBloom, _ETHExecutionPayloadHeaderGetPrevRandao, _ETHExecutionPayloadHeaderGetBlockNumber, _ETHExecutionPayloadHeaderGetGasLimit, _ETHExecutionPayloadHeaderGetGasUsed, _ETHExecutionPayloadHeaderGetTimestamp, _ETHExecutionPayloadHeaderGetExtraDataBytes, _ETHExecutionPayloadHeaderGetNumExtraDataBytes, _ETHExecutionPayloadHeaderGetBaseFeePerGas, _ETHExecutionPayloadHeaderGetBlobGasUsed, _ETHExecutionPayloadHeaderGetExcessBlobGas, _ETHExecutionBlockHeaderCreateFromJson, _ETHExecutionBlockHeaderDestroy, _ETHExecutionBlockHeaderGetTransactionsRoot, _ETHExecutionBlockHeaderGetWithdrawalsRoot, _ETHTransactionsCreateFromJson, _ETHTransactionsDestroy, _ETHTransactionsGetCount, _ETHTransactionsGet, _ETHTransactionGetHash, _ETHTransactionGetFrom, _ETHTransactionGetNonce, _ETHTransactionGetMaxPriorityFeePerGas, _ETHTransactionGetMaxFeePerGas, _ETHTransactionGetGas, _ETHTransactionIsCreatingContract, _ETHTransactionGetTo, _ETHTransactionGetValue, _ETHTransactionGetBytes]"' \
+    --passL:'-sEXPORTED_FUNCTIONS="[_free, _malloc, _NimMain, _ETHRandomNumberCreate, _ETHConsensusConfigCreateFromYaml, _ETHConsensusConfigGetConsensusVersionAtEpoch, _ETHBeaconStateCreateFromSsz, _ETHBeaconStateDestroy, _ETHBeaconStateCopyGenesisValidatorsRoot, _ETHRootDestroy, _ETHForkDigestsCreateFromState, _ETHBeaconClockCreateFromState, _ETHBeaconClockGetSlot, _ETHLightClientStoreCreateFromBootstrap, _ETHLightClientStoreDestroy, _kETHLcSyncKind_UpdatesByRange, _kETHLcSyncKind_FinalityUpdate, _kETHLcSyncKind_OptimisticUpdate, _ETHLightClientStoreGetNextSyncTask, _ETHLightClientStoreGetMillisecondsToNextSyncTask, _ETHLightClientStoreProcessUpdatesByRange, _ETHLightClientStoreProcessFinalityUpdate, _ETHLightClientStoreProcessOptimisticUpdate, _ETHLightClientStoreGetFinalizedHeader, _ETHLightClientStoreIsNextSyncCommitteeKnown, _ETHLightClientStoreGetOptimisticHeader, _ETHLightClientStoreGetSafetyThreshold, _ETHLightClientHeaderCreateCopy, _ETHLightClientHeaderDestroy, _ETHLightClientHeaderCopyBeaconRoot, _ETHLightClientHeaderGetBeacon, _ETHBeaconBlockHeaderGetSlot, _ETHBeaconBlockHeaderGetProposerIndex, _ETHBeaconBlockHeaderGetParentRoot, _ETHBeaconBlockHeaderGetStateRoot, _ETHBeaconBlockHeaderGetBodyRoot, _ETHLightClientHeaderCopyExecutionHash, _ETHLightClientHeaderGetExecution, _ETHExecutionPayloadHeaderGetParentHash, _ETHExecutionPayloadHeaderGetFeeRecipient, _ETHExecutionPayloadHeaderGetStateRoot, _ETHExecutionPayloadHeaderGetReceiptsRoot, _ETHExecutionPayloadHeaderGetLogsBloom, _ETHExecutionPayloadHeaderGetPrevRandao, _ETHExecutionPayloadHeaderGetBlockNumber, _ETHExecutionPayloadHeaderGetGasLimit, _ETHExecutionPayloadHeaderGetGasUsed, _ETHExecutionPayloadHeaderGetTimestamp, _ETHExecutionPayloadHeaderGetExtraDataBytes, _ETHExecutionPayloadHeaderGetNumExtraDataBytes, _ETHExecutionPayloadHeaderGetBaseFeePerGas, _ETHExecutionPayloadHeaderGetBlobGasUsed, _ETHExecutionPayloadHeaderGetExcessBlobGas, _ETHExecutionBlockHeaderCreateFromJson, _ETHExecutionBlockHeaderDestroy, _ETHExecutionBlockHeaderGetTransactionsRoot, _ETHExecutionBlockHeaderGetWithdrawalsRoot, _ETHTransactionsCreateFromJson, _ETHTransactionsDestroy, _ETHTransactionsGetCount, _ETHTransactionsGet, _ETHTransactionGetHash, _ETHTransactionGetFrom, _ETHTransactionGetNonce, _ETHTransactionGetMaxPriorityFeePerGas, _ETHTransactionGetMaxFeePerGas, _ETHTransactionGetGas, _ETHTransactionIsCreatingContract, _ETHTransactionGetTo, _ETHTransactionGetValue, _ETHTransactionGetInputBytes, _ETHTransactionGetBytes]"' \
     --passL:'-sEXPORTED_RUNTIME_METHODS="[lengthBytesUTF8, stringToNewUTF8]"' \
     --passL:'-Wl,--no-entry' \
     --noMain:on \

index.html

@@ -214,6 +214,31 @@
             return num.toString();
         }
 
+        function toHumanReadableByteCountString(numBytes) {
+            if (numBytes >= 1e12) {
+                return (number / 1e12).toFixed(1) + ' TB';
+            }
+            if (numBytes >= 1e11) {
+                return (number / 1e9).toFixed(0) + ' GB';
+            }
+            if (numBytes >= 1e9) {
+                return (number / 1e9).toFixed(1) + ' GB';
+            }
+            if (numBytes >= 1e8) {
+                return (number / 1e6).toFixed(0) + ' MB';
+            }
+            if (numBytes >= 1e6) {
+                return (number / 1e6).toFixed(1) + ' MB';
+            }
+            if (numBytes >= 1e5) {
+                return (number / 1e3).toFixed(0) + ' KB';
+            }
+            if (numBytes >= 1e3) {
+                return (number / 1e3).toFixed(1) + ' KB';
+            }
+            return numBytes + ' bytes'
+        }
+
         function toHumanReadableNumberString(number) {
             if (number >= 1e12) {
                 return (number / 1e12).toFixed(1) + 'T';
@@ -509,6 +534,8 @@
 
                         const numTransactions = Module._ETHTransactionsGetCount(transactions);
                         document.getElementById(prefix + 'TransactionList').innerHTML = '';
+                        const numTransactionInputBytesPtr = Module._malloc(4);
+                        assert(numTransactionInputBytesPtr);
                         const numTransactionBytesPtr = Module._malloc(4);
                         assert(numTransactionBytesPtr);
                         for (let transactionIndex = 0; transactionIndex < numTransactions; transactionIndex++) {
@@ -524,6 +551,8 @@
                             const transactionIsCreatingContract = Module._ETHTransactionIsCreatingContract(transaction);
                             const transactionTo = Module._ETHTransactionGetTo(transaction);
                             const transactionValue = Module._ETHTransactionGetValue(transaction);
+                            const transactionInputBytes = Module._ETHTransactionGetBytes(transaction, numTransactionInputBytesPtr);
+                            const numTransactionInputBytes = Module.HEAPU32[numTransactionInputBytesPtr >>> 2];
                             const transactionBytes = Module._ETHTransactionGetBytes(transaction, numTransactionBytesPtr);
                             const transactionBytesString = toHexString(transactionBytes, Module.HEAPU32[numTransactionBytesPtr >>> 2]);
 
@@ -559,9 +588,12 @@
                                 '</span></td>' +
                                 '        </tr>' +
                                 '        <tr>' +
-                                '            <td colspan="4"><span class="fas fa-brands fa-ethereum"></span> <span>' +
+                                '            <td colspan="3"><span class="fas fa-brands fa-ethereum"></span> <span>' +
                                 toEthString(transactionValue, 32) + ' ETH' +
                                 '</span></td>' +
+                                '            <td colspan="1" style="text-align: right;"><span class="fas fa-file-arrow-up"></span> <span>' +
+                                toHumanReadableByteCountString(numTransactionInputBytes) +
+                                '</span></td>' +
                                 '        </tr>' +
                                 '        <tr>' +
                                 '            <td colspan="4"><span class="fas ' +
@@ -577,6 +609,7 @@
                             document.getElementById(prefix + 'TransactionList').appendChild(transactionDiv);
                         }
                         Module._free(numTransactionBytesPtr);
+                        Module._free(numTransactionInputBytesPtr);
                     });
                 }
             }