blockworks-foundation
/
solana-with-rpc-optimizations
mirror of https://github.com/blockworks-foundation/solana-with-rpc-optimizations.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

explorer: Fix wrapping for pretty hex data (#19835)

This commit is contained in:
Justin Starry 2021-09-13 17:07:13 -05:00 committed by GitHub
parent 1942d294e9
commit 4cc17ec6a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
explorer/src/components/common/HexData.tsx
View File

@ -13,20 +13,34 @@ export function HexData({ raw }: { raw: Buffer }) {
chunks.push(hexString.slice(i, i + 2));
}
const spans: ReactNode[] = [];
for (let i = 0; i < chunks.length; i += 4) {
const color = i % 8 === 0 ? "text-white" : "text-gray-500";
const SPAN_SIZE = 4;
const ROW_SIZE = 4 * SPAN_SIZE;
const divs: ReactNode[] = [];
let spans: ReactNode[] = [];
for (let i = 0; i < chunks.length; i += SPAN_SIZE) {
const color = i % (2 * SPAN_SIZE) === 0 ? "text-white" : "text-gray-500";
spans.push(
<span key={i} className={color}>
{chunks.slice(i, i + 4).join(" ")}&emsp;
{chunks.slice(i, i + SPAN_SIZE).join(" ")}&emsp;
</span>
);
if (
i % ROW_SIZE === ROW_SIZE - SPAN_SIZE ||
i >= chunks.length - SPAN_SIZE
) {
divs.push(<div key={i / ROW_SIZE}>{spans}</div>);
// clear spans
spans = [];
}
}
function Content() {
return (
<Copyable text={hexString}>
<pre className="d-inline-block text-left mb-0 data-wrap">{spans}</pre>
<pre className="d-inline-block text-left mb-0">{divs}</pre>
</Copyable>
);
}