Development

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 {
@@ -23,6 +25,7 @@ export interface DataDecodeUIType extends WithClassnameType {
   setDecodeMethod?: Dispatch<SetStateAction<DecodeMethodEnum>>;
   identifier?: string;
   anchoredContent?: ReactNode;
+  hasDecode?: boolean;
 }
 
 export const DataDecode = ({
@@ -31,7 +34,8 @@ export const DataDecode = ({
   initialDecodeMethod,
   setDecodeMethod,
   identifier,
-  anchoredContent
+  anchoredContent,
+  hasDecode = true
 }: DataDecodeUIType) => {
   const defaultDecodeMethod =
     initialDecodeMethod &&
@@ -76,74 +80,79 @@ export const DataDecode = ({
 
   return (
     <div
-      className={`position-relative data-decode mt-1 ${
-        hasOverflow ? '' : 'overflow-hidden'
-      }`}
+      className={classNames('position-relative data-decode mt-1', {
+        'overflow-hidden': !hasOverflow,
+        'has-decode': hasDecode
+      })}
     >
-      <div className={`form-control textarea ${className ? className : ''}`}>
+      <div className={classNames('form-control textarea', className)}>
         {anchoredContent ? anchoredContent : displayValue}
       </div>
       {value && value !== 'N/A' && (
         <div className='d-flex button-holder'>
           <CopyButton text={displayValue} className='copy-button' />
-          <Dropdown
-            className='position-absolute'
-            onSelect={handleSelect}
-            onToggle={(e) => {
-              setHasOverflow(e);
-            }}
-          >
-            <Dropdown.Toggle
-              variant='dark'
-              size='sm'
-              className={
-                'text-capitalize py-1 d-flex align-items-center justify-content-between btn-dark-alt'
-              }
-              id='decode'
-            >
-              <span className='me-2'>{activeKey.replace('/', '')}</span>
-            </Dropdown.Toggle>
-            <Dropdown.Menu
-              style={{ marginTop: '0.35rem', marginBottom: '0.35rem' }}
+          {hasDecode && (
+            <Dropdown
+              className='position-absolute'
+              onSelect={handleSelect}
+              onToggle={(e) => {
+                setHasOverflow(e);
+              }}
             >
-              <Dropdown.Item
-                as={Anchor} // This is needed due to issues between threejs, react-bootstrap and typescript, what a time to be alive: https://github.com/react-bootstrap/react-bootstrap/issues/6283
-                eventKey={DecodeMethodEnum.raw}
-                className={activeKey === DecodeMethodEnum.raw ? 'active' : ''}
+              <Dropdown.Toggle
+                variant='dark'
+                size='sm'
+                className={
+                  'text-capitalize py-1 d-flex align-items-center justify-content-between btn-dark-alt'
+                }
+                id='decode'
               >
-                Raw
-              </Dropdown.Item>
-              <Dropdown.Item
-                as={Anchor}
-                eventKey={DecodeMethodEnum.text}
-                className={activeKey === DecodeMethodEnum.text ? 'active' : ''}
+                <span className='me-2'>{activeKey.replace('/', '')}</span>
+              </Dropdown.Toggle>
+              <Dropdown.Menu
+                style={{ marginTop: '0.35rem', marginBottom: '0.35rem' }}
               >
-                Text
-              </Dropdown.Item>
-              {value.length < MAX_DECODE_TX_DATA_LENGTH && (
-                <>
-                  <Dropdown.Item
-                    as={Anchor}
-                    eventKey={DecodeMethodEnum.decimal}
-                    className={
-                      activeKey === DecodeMethodEnum.decimal ? 'active' : ''
-                    }
-                  >
-                    Decimal
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    as={Anchor}
-                    eventKey={DecodeMethodEnum.smart}
-                    className={
-                      activeKey === DecodeMethodEnum.smart ? 'active' : ''
-                    }
-                  >
-                    Smart
-                  </Dropdown.Item>
-                </>
-              )}
-            </Dropdown.Menu>
-          </Dropdown>
+                <Dropdown.Item
+                  as={Anchor} // This is needed due to issues between threejs, react-bootstrap and typescript, what a time to be alive: https://github.com/react-bootstrap/react-bootstrap/issues/6283
+                  eventKey={DecodeMethodEnum.raw}
+                  className={activeKey === DecodeMethodEnum.raw ? 'active' : ''}
+                >
+                  Raw
+                </Dropdown.Item>
+                <Dropdown.Item
+                  as={Anchor}
+                  eventKey={DecodeMethodEnum.text}
+                  className={
+                    activeKey === DecodeMethodEnum.text ? 'active' : ''
+                  }
+                >
+                  Text
+                </Dropdown.Item>
+                {value.length < MAX_DECODE_TX_DATA_LENGTH && (
+                  <>
+                    <Dropdown.Item
+                      as={Anchor}
+                      eventKey={DecodeMethodEnum.decimal}
+                      className={
+                        activeKey === DecodeMethodEnum.decimal ? 'active' : ''
+                      }
+                    >
+                      Decimal
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      as={Anchor}
+                      eventKey={DecodeMethodEnum.smart}
+                      className={
+                        activeKey === DecodeMethodEnum.smart ? 'active' : ''
+                      }
+                    >
+                      Smart
+                    </Dropdown.Item>
+                  </>
+                )}
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </div>
       )}
       {validationWarnings.length

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,23 +47,28 @@
   .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;
     scrollbar-width: thin;
     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;
     }
   }
 }

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,

src/pages/BlockDetails/components/BlockData.tsx

@@ -34,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) => {
@@ -64,34 +68,36 @@ export const BlockData = ({ block }: { block: UIBlockType }) => {
         <DetailItem title='Block Height'>
           <div className='d-flex justify-content-between align-items-center'>
             <div>{block.nonce}</div>
-            <ul className='list-inline m-0 d-flex flex-wrap gap-2'>
-              <li className='list-inline-item me-0'>
-                <div className='pager pager-inline'>
-                  <NetworkLink
-                    to={`/blocks/${block.prevHash}`}
-                    data-testid='previousPageButton'
-                  >
-                    <FontAwesomeIcon icon={faChevronLeft} /> Prev
-                  </NetworkLink>
-                </div>
-              </li>
-              <li className='list-inline-item me-0'>
-                <div className='pager pager-inline'>
-                  {block?.nextHash && block.nextHash !== '' ? (
+            {Boolean(block.nonce) && (
+              <ul className='list-inline m-0 d-flex flex-wrap gap-2'>
+                <li className='list-inline-item me-0'>
+                  <div className='pager pager-inline'>
                     <NetworkLink
-                      data-testid='nextPageButton'
-                      to={`/blocks/${block.nextHash}`}
+                      to={`/blocks/${block.prevHash}`}
+                      data-testid='previousPageButton'
                     >
-                      Next <FontAwesomeIcon icon={faChevronRight} />
+                      <FontAwesomeIcon icon={faChevronLeft} /> Prev
                     </NetworkLink>
-                  ) : (
-                    <span className='text-neutral-400'>
-                      Next <FontAwesomeIcon icon={faChevronRight} />
-                    </span>
-                  )}
-                </div>
-              </li>
-            </ul>
+                  </div>
+                </li>
+                <li className='list-inline-item me-0'>
+                  <div className='pager pager-inline'>
+                    {block?.nextHash && block.nextHash !== '' ? (
+                      <NetworkLink
+                        data-testid='nextPageButton'
+                        to={`/blocks/${block.nextHash}`}
+                      >
+                        Next <FontAwesomeIcon icon={faChevronRight} />
+                      </NetworkLink>
+                    ) : (
+                      <span className='text-neutral-400'>
+                        Next <FontAwesomeIcon icon={faChevronRight} />
+                      </span>
+                    )}
+                  </div>
+                </li>
+              </ul>
+            )}
           </div>
         </DetailItem>
         <DetailItem title='Block Hash'>
@@ -155,7 +161,7 @@ export const BlockData = ({ block }: { block: UIBlockType }) => {
           {new BigNumber(block.maxGasLimit).toFormat()}
         </DetailItem>
         <DetailItem title='Proposer'>
-          {block.proposer ? (
+          {block.proposer && Boolean(block.nonce) ? (
             <IdentityBlock block={block} />
           ) : (
             <span className='text-neutral-400'>N/A</span>
@@ -279,6 +285,18 @@ export const BlockData = ({ block }: { block: UIBlockType }) => {
             </DetailItem>
           </>
         )}
+        {reservedText && (
+          <DetailItem title='Data'>
+            <div className='position-relative data-decode overflow-hidden mt-1'>
+              <div className='form-control textarea textarea-lg'>
+                {reservedText}
+              </div>
+              <div className='d-flex button-holder'>
+                <CopyButton text={reservedText} className='copy-button' />
+              </div>
+            </div>
+          </DetailItem>
+        )}
       </div>
     </div>
   );

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 (
-    <DetailItem title='Input Data' className='data-field'>
+    <DetailItem title={title} className='data-field'>
       <DataDecode
         value={value}
         initialDecodeMethod={!id ? dataDecode : DecodeMethodEnum.raw}

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 {