From 608adc1127aa115ee436c0f9a0db738239f8d051 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Thu, 13 Nov 2025 16:00:29 +0200 Subject: [PATCH 1/3] added reserved field on block details --- src/components/DataDecode/DataDecode.tsx | 118 +++++++++--------- .../BlockDetails/components/BlockData.tsx | 8 +- src/types/block.types.ts | 1 + 3 files changed, 70 insertions(+), 57 deletions(-) diff --git a/src/components/DataDecode/DataDecode.tsx b/src/components/DataDecode/DataDecode.tsx index 072512118..7b203c4b8 100644 --- a/src/components/DataDecode/DataDecode.tsx +++ b/src/components/DataDecode/DataDecode.tsx @@ -23,6 +23,7 @@ export interface DataDecodeUIType extends WithClassnameType { setDecodeMethod?: Dispatch>; identifier?: string; anchoredContent?: ReactNode; + hasDecode?: boolean; } export const DataDecode = ({ @@ -31,7 +32,8 @@ export const DataDecode = ({ initialDecodeMethod, setDecodeMethod, identifier, - anchoredContent + anchoredContent, + hasDecode = true }: DataDecodeUIType) => { const defaultDecodeMethod = initialDecodeMethod && @@ -86,64 +88,68 @@ export const DataDecode = ({ {value && value !== 'N/A' && (
- { - setHasOverflow(e); - }} - > - { + setHasOverflow(e); + }} > - {activeKey.replace('/', '')} - - - - Raw - - {activeKey.replace('/', '')} + + - Text - - {value.length < MAX_DECODE_TX_DATA_LENGTH && ( - <> - - Decimal - - - Smart - - - )} - - + + Raw + + + Text + + {value.length < MAX_DECODE_TX_DATA_LENGTH && ( + <> + + Decimal + + + Smart + + + )} + + + )}
)} {validationWarnings.length diff --git a/src/pages/BlockDetails/components/BlockData.tsx b/src/pages/BlockDetails/components/BlockData.tsx index 8f4bdb99d..1ea0f58da 100644 --- a/src/pages/BlockDetails/components/BlockData.tsx +++ b/src/pages/BlockDetails/components/BlockData.tsx @@ -13,7 +13,8 @@ import { IdentityBlock, BlockGasUsed, Overlay, - ShardLink + ShardLink, + DataDecode } from 'components'; import { formatDate, formatSize, urlBuilder } from 'helpers'; import { useIsSovereign } from 'hooks'; @@ -279,6 +280,11 @@ export const BlockData = ({ block }: { block: UIBlockType }) => { )} + {block.reserved && ( + + + + )} ); diff --git a/src/types/block.types.ts b/src/types/block.types.ts index 30af1a376..90a7920b2 100644 --- a/src/types/block.types.ts +++ b/src/types/block.types.ts @@ -24,6 +24,7 @@ export interface BlockType { gasPenalized: number; maxGasLimit: number; proposerIdentity?: IdentityType; + reserved?: string; } export interface UIBlockType extends BlockType { From d5577712b9432f16ba82f8f2706e260e6d3b06f0 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Thu, 13 Nov 2025 17:54:49 +0200 Subject: [PATCH 2/3] updated data decode display --- src/components/DataDecode/DataDecode.tsx | 11 ++- .../DataDecode/dataDecode.styles.scss | 39 +++++----- src/pages/BlockDetails/BlockDetails.tsx | 2 +- .../BlockDetails/components/BlockData.tsx | 74 +++++++++++-------- .../components/DataField/DataField.tsx | 4 +- 5 files changed, 75 insertions(+), 55 deletions(-) diff --git a/src/components/DataDecode/DataDecode.tsx b/src/components/DataDecode/DataDecode.tsx index 7b203c4b8..e27c7195c 100644 --- a/src/components/DataDecode/DataDecode.tsx +++ b/src/components/DataDecode/DataDecode.tsx @@ -6,7 +6,9 @@ import { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; import { Anchor, Dropdown } from 'react-bootstrap'; + import { CopyButton } from 'components'; import { faExclamationTriangle } from 'icons/regular'; import { @@ -78,11 +80,12 @@ export const DataDecode = ({ return (
-
+
{anchoredContent ? anchoredContent : displayValue}
{value && value !== 'N/A' && ( diff --git a/src/components/DataDecode/dataDecode.styles.scss b/src/components/DataDecode/dataDecode.styles.scss index a861cdff2..15a3476af 100644 --- a/src/components/DataDecode/dataDecode.styles.scss +++ b/src/components/DataDecode/dataDecode.styles.scss @@ -1,15 +1,13 @@ .data-decode { - $name: 'data-decode'; + --data-decode-padding: 0.375rem 3rem 0.375rem 0.75rem; + border-radius: var(--border-radius); - $color: var(--#{$prefix}#{$name}-color, var(--neutral-200)); - $bg-color: var(--#{$prefix}#{$name}-bg-color, var(--neutral-800)); - $border-color: var(--#{$prefix}#{$name}-border-color, var(--border-color)); - $border-width: var(--#{$prefix}#{$name}-border-width, 0); - $border-radius: var(--#{$prefix}#{$name}-border-radius, var(--border-radius)); - $font-size: var(--#{$prefix}#{$name}-font-size, $font-size-base); - $padding: var(--#{$prefix}#{$name}-padding, 0.375rem 9rem 0.375rem 0.75rem); - - border-radius: $border-radius; + &.has-decode { + --data-decode-padding: 0.375rem 9rem 0.375rem 0.75rem; + .copy-button { + right: 6.75rem; + } + } .button-holder { .dropdown { @@ -29,7 +27,7 @@ .copy-button { position: absolute; top: 0.313rem; - right: 6.75rem; + right: 0.313rem; width: 1.813rem; height: 1.813rem; border-radius: 0.5rem; @@ -49,15 +47,15 @@ .textarea { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; - border: $border-width solid $border-color; - background-color: $bg-color; - color: $color; - border-radius: $border-radius; - font-size: $font-size; + border: var(--border-width) solid var(--border-color); + background-color: var(--neutral-800); + color: var(--neutral-200); + border-radius: var(--border-radius); + font-size: $font-size-base; min-height: 4rem; height: 5.5rem; overflow: auto; - padding: $padding; + padding: var(--data-decode-padding); word-wrap: break-word; white-space: pre-wrap; resize: vertical; @@ -65,7 +63,12 @@ overflow-x: hidden; &:hover { - border: $border-width solid $border-color; + border: var(--border-width) solid var(--border-color); + } + + &.textarea-lg { + min-height: 8rem; + height: 9.5rem; } } } diff --git a/src/pages/BlockDetails/BlockDetails.tsx b/src/pages/BlockDetails/BlockDetails.tsx index 37ed8b19c..662c654e2 100644 --- a/src/pages/BlockDetails/BlockDetails.tsx +++ b/src/pages/BlockDetails/BlockDetails.tsx @@ -21,7 +21,7 @@ export const BlockDetails = () => { const fetchBlock = async () => { const { success, data } = await getBlock(blockId); - if (success && data?.nonce && data?.shard !== undefined) { + if (success && data?.nonce !== undefined && data?.shard !== undefined) { const { data: blocksData } = await getBlocks({ nonce: data.nonce + 1, shard: data.shard, diff --git a/src/pages/BlockDetails/components/BlockData.tsx b/src/pages/BlockDetails/components/BlockData.tsx index 1ea0f58da..041d77fdd 100644 --- a/src/pages/BlockDetails/components/BlockData.tsx +++ b/src/pages/BlockDetails/components/BlockData.tsx @@ -13,8 +13,7 @@ import { IdentityBlock, BlockGasUsed, Overlay, - ShardLink, - DataDecode + ShardLink } from 'components'; import { formatDate, formatSize, urlBuilder } from 'helpers'; import { useIsSovereign } from 'hooks'; @@ -35,8 +34,12 @@ function createHashItemIfLengthIsOdd(length: number) { } export const BlockData = ({ block }: { block: UIBlockType }) => { - const isFirstBlock = block.prevHash && block.prevHash.length > 64; const [expanded, setExpanded] = useState(false); + + const isFirstBlock = block.prevHash && block.prevHash.length > 64; + const reservedText = block.reserved + ? Buffer.from(block.reserved, 'base64').toString() + : ''; const isSovereign = useIsSovereign(); const toggleCollapseClick = (e: React.MouseEvent) => { @@ -65,34 +68,36 @@ export const BlockData = ({ block }: { block: UIBlockType }) => {
{block.nonce}
-
    -
  • -
    - - Prev - -
    -
    • -
  • -
    - {block?.nextHash && block.nextHash !== '' ? ( + {Boolean(block.nonce) && ( +
      +
    • +
      - Next + Prev - ) : ( - - Next - - )} -
      -
      • -
    +
    +
    • +
  • +
    + {block?.nextHash && block.nextHash !== '' ? ( + + Next + + ) : ( + + Next + + )} +
    +
    • +
+ )}
@@ -156,7 +161,7 @@ export const BlockData = ({ block }: { block: UIBlockType }) => { {new BigNumber(block.maxGasLimit).toFormat()} - {block.proposer ? ( + {block.proposer && Boolean(block.nonce) ? ( ) : ( N/A @@ -280,9 +285,16 @@ export const BlockData = ({ block }: { block: UIBlockType }) => { )} - {block.reserved && ( + {reservedText && ( - +
+
+ {reservedText} +
+
+ +
+
)}
diff --git a/src/pages/TransactionDetails/components/DataField/DataField.tsx b/src/pages/TransactionDetails/components/DataField/DataField.tsx index 018880491..a643ee410 100644 --- a/src/pages/TransactionDetails/components/DataField/DataField.tsx +++ b/src/pages/TransactionDetails/components/DataField/DataField.tsx @@ -17,12 +17,14 @@ import { ScamInfoType, WithClassnameType } from 'types'; export interface DataFieldUIType extends WithClassnameType { data?: string; + title?: string; scamInfo?: ScamInfoType; skipDataScamCheck?: boolean; } export const DataField = ({ data, + title = 'Input Data', scamInfo, skipDataScamCheck }: DataFieldUIType) => { @@ -74,7 +76,7 @@ export const DataField = ({ ); return ( - + Date: Thu, 13 Nov 2025 17:58:20 +0200 Subject: [PATCH 3/3] updated reserved text --- src/pages/BlockDetails/components/BlockData.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/BlockDetails/components/BlockData.tsx b/src/pages/BlockDetails/components/BlockData.tsx index 041d77fdd..36d5f8f79 100644 --- a/src/pages/BlockDetails/components/BlockData.tsx +++ b/src/pages/BlockDetails/components/BlockData.tsx @@ -286,7 +286,7 @@ export const BlockData = ({ block }: { block: UIBlockType }) => { )} {reservedText && ( - +
{reservedText}