@xyo-network/react-chain-blockchain 1.16.2 → 1.16.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.16.2",
+  "version": "1.16.4",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -60,30 +60,30 @@
     "@xylabs/react-shared": "~7.1.8",
     "@xylabs/react-theme": "~7.1.8",
     "@xylabs/typeof": "~5.0.22",
-    "@xyo-network/account": "~5.1.18",
-    "@xyo-network/archivist-memory": "~5.1.18",
-    "@xyo-network/archivist-model": "~5.1.18",
-    "@xyo-network/boundwitness-builder": "~5.1.18",
-    "@xyo-network/boundwitness-model": "~5.1.18",
-    "@xyo-network/bridge-http": "~5.1.18",
-    "@xyo-network/chain-analyze": "~1.16.2",
-    "@xyo-network/chain-protocol": "~1.16.2",
-    "@xyo-network/chain-services": "~1.16.2",
-    "@xyo-network/chain-utils": "~1.16.2",
-    "@xyo-network/chain-wrappers": "~1.16.2",
-    "@xyo-network/module-model": "~5.1.18",
-    "@xyo-network/payload-builder": "~5.1.18",
-    "@xyo-network/payload-model": "~5.1.18",
+    "@xyo-network/account": "~5.1.19",
+    "@xyo-network/archivist-memory": "~5.1.19",
+    "@xyo-network/archivist-model": "~5.1.19",
+    "@xyo-network/boundwitness-builder": "~5.1.19",
+    "@xyo-network/boundwitness-model": "~5.1.19",
+    "@xyo-network/bridge-http": "~5.1.19",
+    "@xyo-network/chain-analyze": "~1.16.4",
+    "@xyo-network/chain-protocol": "~1.16.4",
+    "@xyo-network/chain-services": "~1.16.4",
+    "@xyo-network/chain-utils": "~1.16.4",
+    "@xyo-network/chain-wrappers": "~1.16.4",
+    "@xyo-network/module-model": "~5.1.19",
+    "@xyo-network/payload-builder": "~5.1.19",
+    "@xyo-network/payload-model": "~5.1.19",
     "@xyo-network/react-boundwitness-plugin": "~7.3.10",
-    "@xyo-network/react-chain-blockies": "~1.16.2",
-    "@xyo-network/react-chain-shared": "~1.16.2",
+    "@xyo-network/react-chain-blockies": "~1.16.4",
+    "@xyo-network/react-chain-shared": "~1.16.4",
     "@xyo-network/react-event": "~7.3.10",
     "@xyo-network/react-payload-raw-info": "~7.3.10",
     "@xyo-network/react-payload-table": "~7.3.10",
     "@xyo-network/react-shared": "~7.3.10",
     "@xyo-network/react-table": "~7.3.10",
     "@xyo-network/xl1-protocol": "~1.13.1",
-    "@xyo-network/xl1-protocol-sdk": "~1.16.2"
+    "@xyo-network/xl1-protocol-sdk": "~1.16.4"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
@@ -97,7 +97,7 @@
     "@xylabs/tsconfig": "~7.2.8",
     "@xylabs/tsconfig-dom": "~7.2.8",
     "@xylabs/tsconfig-react": "~7.2.8",
-    "@xyo-network/api-models": "~5.1.18",
+    "@xyo-network/api-models": "~5.1.19",
     "eslint": "^9.39.1",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",

package/src/components/block/ProducerChip.tsx

@@ -18,20 +18,24 @@ const formatProducerAddress = (address?: string): string | undefined => {
 export interface BlockProducerChipProps extends ChipProps {
   block?: HydratedBlock
 }
-export const BlockProducerChip: React.FC<BlockProducerChipProps> = ({
-  block, sx, ...props
-}) => {
+export const BlockProducerChip: React.FC<BlockProducerChipProps> = ({ block, ...props }) => {
   const blockProducer = block?.[0].addresses[0]
 
-  const shortedBlockProducer = blockProducer === undefined ? null : formatProducerAddress(blockProducer)
+  return <BlockAddressChip address={blockProducer} toolTipTitle={`Block producer: ${blockProducer}`} {...props} />
+}
+
+export const BlockAddressChip: React.FC<BlockProducerChipProps & { address?: string; toolTipTitle?: string }> = ({
+  address, sx, toolTipTitle, ...props
+}) => {
+  const shortedBlockProducer = address === undefined ? null : formatProducerAddress(address)
 
-  const avatar = useMemo(() => blockProducer === '' ? undefined : <BlockiesAvatar blockiesOptions={{ seed: blockProducer }} />, [blockProducer])
+  const avatar = useMemo(() => address === '' ? undefined : <BlockiesAvatar blockiesOptions={{ seed: address }} />, [address])
 
   return (
     <Chip
       avatar={avatar}
       label={shortedBlockProducer ?? <ChipSkeleton width={115} />}
-      title={`Block producer: ${blockProducer}`}
+      title={toolTipTitle}
       sx={{
         fontFamily: 'monospace', cursor: 'pointer', ...sx,
       }}

package/src/components/block/table/cell/BlockNumber.tsx

@@ -13,6 +13,12 @@ export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
 }) => {
   const blockNumber = block?.[0].block
 
+  return <BlockNumberTableCellInner blockNumber={blockNumber} linked={linked} {...props} />
+}
+
+export const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & { blockNumber?: number }> = ({
+  blockNumber, linked, ...props
+}) => {
   return (
     <TableCell {...props}>
       <Tooltip title={`Block Number: ${blockNumber}`}>

package/src/components/block/table/cell/Epoch.tsx

@@ -29,3 +29,20 @@ export const BlockEpochTableCell: React.FC<BlockEpochTableCellProps> = ({
     </TableCell>
   )
 }
+
+export const BlockEpochTableCellInner: React.FC<BlockEpochTableCellProps & { epoch?: number }> = ({
+  epoch, linked, ...props
+}) => {
+  const dateTime = dateFormat.format(epoch)
+  const age = isDefined(epoch) ? timeAgo(epoch) : undefined
+
+  return (
+    <TableCell {...props}>
+      <Tooltip title={`Block Epoch: ${dateTime}`}>
+        <Typography component="span" variant="body1">
+          {age ?? <Skeleton width={115} /> }
+        </Typography>
+      </Tooltip>
+    </TableCell>
+  )
+}

package/src/components/block/table/cell/Producer.tsx

@@ -1,10 +1,11 @@
 import { TableCell, Tooltip } from '@mui/material'
-import React from 'react'
+import type { MouseEvent } from 'react'
+import React, { useState } from 'react'
 
 import { FeatureNotAvailable } from '../../../FeatureNotAvailable.tsx'
 import { useBlockProducer } from '../../hooks/index.ts'
 import type { BlockProducerChipProps } from '../../ProducerChip.tsx'
-import { BlockProducerChip } from '../../ProducerChip.tsx'
+import { BlockAddressChip } from '../../ProducerChip.tsx'
 import { useLinkedBlockItem } from './hooks/index.ts'
 import type { BlockTableCellProps } from './lib/index.ts'
 
@@ -18,12 +19,41 @@ export const BlockProducerTableCell: React.FC<BlockProducerTableCell> = ({
 }) => {
   const [ref, handleClick] = useLinkedBlockItem('block-producer', JSON.stringify(block))
   const producer = useBlockProducer(block)
-  const [notAvailable, setNotAvailable] = React.useState(false)
 
   return (
-    <TableCell ref={ref} {...props}>
-      <Tooltip title={`Block Producer: ${producer}`}>
-        <BlockProducerChip sx={{ cursor: 'pointer' }} onClick={linked ? handleClick : () => setNotAvailable(true)} block={block} {...producerChipProps} />
+    <BlockProducerTableCellInner
+      address={producer}
+      handleClick={handleClick}
+      linked={linked}
+      notAvailableDialog={notAvailableDialog}
+      producerChipProps={producerChipProps}
+      {...props}
+      ref={ref}
+    />
+  )
+}
+
+export interface BlockProducerTableCellInner extends BlockTableCellProps {
+  address?: string
+  handleClick?: (event: MouseEvent) => void
+  notAvailableDialog?: boolean
+  producerChipProps?: BlockProducerChipProps
+}
+
+export const BlockProducerTableCellInner: React.FC<BlockProducerTableCell & BlockProducerTableCellInner> = ({
+  address, handleClick, linked, notAvailableDialog, producerChipProps, ...props
+}) => {
+  const [notAvailable, setNotAvailable] = useState(false)
+  return (
+    <TableCell {...props}>
+      <Tooltip title={`Block Producer: ${address}`}>
+        <BlockAddressChip
+          sx={{ cursor: 'pointer' }}
+          onClick={linked ? handleClick : () => setNotAvailable(true)}
+          address={address}
+          toolTipTitle={`Block Producer: ${address}`}
+          {...producerChipProps}
+        />
       </Tooltip>
       {(notAvailableDialog && notAvailable)
         ? <FeatureNotAvailable featureName="Producer Details" open={notAvailable} onClick={() => setNotAvailable(false)} />