onToggleNode(node.pageId, node.cellIndex)}>
+ {hasExpandableContent ? (
+ ▶
+ ) : (
+
+ )}
+ {node.nodeType}
+
+ {displayPath ? (
+ <>
+ 0x{accountPath && {accountPath}:}
+ {basePath && {basePath}}
+ {node.prefix && {node.prefix}}
+ {copied && Copied!}
+
+ ) : (
+ '(root)'
+ )}
+
+
+ Cell {node.cellIndex} | {node.sizeBytes} bytes
+
+
+ {/* Node details (account/storage leaf values) */}
+ {(node.nodeType === 'AccountLeaf' || node.nodeType === 'StorageLeaf') && (
+
+
+ {node.nodeType === 'AccountLeaf' && (
+ <>
+ - Nonce
+ - {node.nonce}
+ - Balance
+ - {node.balance}
+ - Code Hash
+ - 0x{node.codeHash}
+
+ )}
+ {node.nodeType === 'StorageLeaf' && (
+ <>
+ - Value
+ - {node.value}
+
+ )}
+
+
+ )}
+
+ {/* Branch children - sorted by index */}
+ {node.nodeType === 'Branch' && sortedBranchChildren.length > 0 && (
+
+ {sortedBranchChildren.map(({ index, type, child, treeNode: childTreeNode }) => {
+ const nibble = index.toString(16).toUpperCase();
+
+ if (type === 'empty') {
+ return (
+
+ [{nibble}]
+ —
+
+ );
+ }
+
+ if (type === 'local' && childTreeNode) {
+ return (
+
+
+ [{nibble}]
+ {showHashes && child?.pointer.rlpHash && (
+
+ {child.pointer.rlpHash}
+
+ )}
+
+
+
+ );
+ }
+
+ if (type === 'remote' && child) {
+ return (
+
+ );
+ }
+
+ return null;
+ })}
+
+ )}
+
+ {/* Local storage children */}
+ {storageChildren.map((child) => (
+
+ ))}
+
+ {/* Remote storage root for account leaves */}
+ {node.nodeType === 'AccountLeaf' && node.storageRoot &&
+ node.storageRoot.locationType === 'OtherPage' &&
+ node.storageRoot.pageId !== undefined && (
+
+
+
+ )}
+