@xyo-network/react-chain-blockchain 1.2.3 → 1.2.4

package/dist/types/components/block/helpers/index.d.ts

@@ -1,4 +1,5 @@
 export * from './blockProducer.ts';
 export * from './buildBlockChainRenderComponent.tsx';
+export * from './payloadCountsFromBlock.ts';
 export * from './tsxFromBlock.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/block/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,sCAAsC,CAAA;AACpD,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,sCAAsC,CAAA;AACpD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA"}

package/dist/types/components/block/helpers/payloadCountsFromBlock.d.ts

@@ -0,0 +1,3 @@
+import { type HydratedBlock } from '@xyo-network/xl1-model';
+export declare const payloadCountsFromBlock: ([block, payloads]: HydratedBlock) => [number, number];
+//# sourceMappingURL=payloadCountsFromBlock.d.ts.map

package/dist/types/components/block/helpers/payloadCountsFromBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payloadCountsFromBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/helpers/payloadCountsFromBlock.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAA6B,MAAM,wBAAwB,CAAA;AAEtF,eAAO,MAAM,sBAAsB,GAAI,mBAAmB,aAAa,KAAG,CAAC,MAAM,EAAE,MAAM,CAQxF,CAAA"}

package/dist/types/components/block/helpers/tsxFromBlock.d.ts

@@ -1,7 +1,7 @@
-import type { HydratedBlock } from '@xyo-network/xl1-model';
+import { type HydratedBlock } from '@xyo-network/xl1-model';
 export declare const txsFromBlock: (block: HydratedBlock) => Promise<[import("@xylabs/object").DeepRestrictToStringKeys<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
     schema: string;
-}> & Partial<import("@xyo-network/payload-model").PayloadMetaFields> & import("@xyo-network/payload-model").StorageMeta & import("@xylabs/object").DeepRestrictToStringKeys<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & import("@xyo-network/boundwitness-model").BoundWitnessFields & {
+}> & Partial<import("@xyo-network/payload-model").PayloadMetaFields> & import("@xyo-network/payload-model").StorageMeta & import("@xylabs/object").DeepRestrictToStringKeys<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & import("@xyo-network/boundwitness-model").BoundWitnessFields & import("@xyo-network/xl1-model").TransactionBoundWitnessFields & import("@xyo-network/xl1-model").ExecutableFields & import("@xyo-network/xl1-model").FromFields & {
     schema: "network.xyo.boundwitness";
 }> & import("@xyo-network/boundwitness-model").BoundWitnessMeta & {
     $signatures: import("@xylabs/hex").Hex[];

package/dist/types/components/block/helpers/tsxFromBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tsxFromBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/helpers/tsxFromBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAE3D,eAAO,MAAM,YAAY,GAAU,OAAO,aAAa;;;;;;wBAGtD,CAAA"}
+{"version":3,"file":"tsxFromBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/helpers/tsxFromBlock.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAA6B,MAAM,wBAAwB,CAAA;AAEtF,eAAO,MAAM,YAAY,GAAU,OAAO,aAAa;;;;;;wBAGtD,CAAA"}

package/dist/types/components/block/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAnchorElement.ts';
 export * from './useBlockHeadingEvents.ts';
 export * from './useBlockProducer.ts';
 export * from './useDynamicBlockComponents.ts';
+export * from './usePayloadCountsFromBlock.ts';
 export * from './useStaticBlockComponents.ts';
 export * from './useTxsFromBlock.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/block/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA"}

package/dist/types/components/block/hooks/useBlockHeadingEvents.d.ts

@@ -1,5 +1,5 @@
 import { useEvent } from '@xyo-network/react-event';
-export type BlockHeaderEventNouns = 'transaction-count' | 'block-hash' | 'block-number' | 'block-producer' | 'block-verification';
+export type BlockHeaderEventNouns = 'transaction-count' | 'block-hash' | 'block-number' | 'block-producer' | 'block-verification' | 'payload-counts';
 type HookArgs<TElement extends HTMLElement> = Parameters<typeof useEvent<TElement, BlockHeaderEventNouns>>;
 export declare const useBlockHeadingEvents: <TElement extends HTMLElement>(...args: HookArgs<TElement>) => [import("react").RefObject<TElement | null>, import("@xyo-network/react-event").EventDispatch<BlockHeaderEventNouns, import("@xyo-network/react-event").EventVerb, string>];
 export {};

package/dist/types/components/block/hooks/useBlockHeadingEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBlockHeadingEvents.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/hooks/useBlockHeadingEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEnD,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,YAAY,GAAG,cAAc,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAIjI,KAAK,QAAQ,CAAC,QAAQ,SAAS,WAAW,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAA;AAE1G,eAAO,MAAM,qBAAqB,GAAI,QAAQ,SAAS,WAAW,EAAE,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,gLAE9F,CAAA"}
+{"version":3,"file":"useBlockHeadingEvents.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/hooks/useBlockHeadingEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEnD,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,YAAY,GAAG,cAAc,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,gBAAgB,CAAA;AAIpJ,KAAK,QAAQ,CAAC,QAAQ,SAAS,WAAW,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAA;AAE1G,eAAO,MAAM,qBAAqB,GAAI,QAAQ,SAAS,WAAW,EAAE,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,gLAE9F,CAAA"}

package/dist/types/components/block/hooks/usePayloadCountsFromBlock.d.ts

@@ -0,0 +1,3 @@
+import type { HydratedBlock } from '@xyo-network/xl1-model';
+export declare const usePayloadCountsFromBlock: (block?: HydratedBlock) => [number | undefined, number | undefined, Error | undefined];
+//# sourceMappingURL=usePayloadCountsFromBlock.d.ts.map

package/dist/types/components/block/hooks/usePayloadCountsFromBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePayloadCountsFromBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/block/hooks/usePayloadCountsFromBlock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAK3D,eAAO,MAAM,yBAAyB,GAAI,QAAQ,aAAa,KAAG,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,GAAG,SAAS,CAO3H,CAAA"}

package/dist/types/components/block/hooks/useTxsFromBlock.d.ts

@@ -1,7 +1,7 @@
 import type { HydratedBlock } from '@xyo-network/xl1-model';
 export declare const useTxsFromBlock: (block?: HydratedBlock) => [[import("@xylabs/object").DeepRestrictToStringKeys<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
     schema: string;
-}> & Partial<import("@xyo-network/payload-model").PayloadMetaFields> & import("@xyo-network/payload-model").StorageMeta & import("@xylabs/object").DeepRestrictToStringKeys<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & import("@xyo-network/boundwitness-model").BoundWitnessFields & {
+}> & Partial<import("@xyo-network/payload-model").PayloadMetaFields> & import("@xyo-network/payload-model").StorageMeta & import("@xylabs/object").DeepRestrictToStringKeys<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & import("@xyo-network/boundwitness-model").BoundWitnessFields & import("@xyo-network/xl1-model").TransactionBoundWitnessFields & import("@xyo-network/xl1-model").ExecutableFields & import("@xyo-network/xl1-model").FromFields & {
     schema: "network.xyo.boundwitness";
 }> & import("@xyo-network/boundwitness-model").BoundWitnessMeta & {
     $signatures: import("@xylabs/hex").Hex[];

package/dist/types/components/block/table/cell/JsonView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/JsonView.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;CAAG;AAE3E,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA6BxE,CAAA"}
+{"version":3,"file":"JsonView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/JsonView.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;CAAG;AAE3E,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA4BxE,CAAA"}

package/dist/types/components/block/table/cell/PayloadCounts.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { BlockTableCellProps } from './lib/index.ts';
+export interface BlockPayloadCountsTableCellProps extends BlockTableCellProps {
+}
+export declare const BlockPayloadCountsTableCell: React.FC<BlockPayloadCountsTableCellProps>;
+//# sourceMappingURL=PayloadCounts.d.ts.map

package/dist/types/components/block/table/cell/PayloadCounts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCounts.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/PayloadCounts.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB;CAAG;AAEhF,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAqBlF,CAAA"}

package/dist/types/components/block/table/cell/index.d.ts

@@ -1,6 +1,7 @@
 export * from './BlockNumber.tsx';
 export * from './Hash.tsx';
 export * from './JsonView.tsx';
+export * from './PayloadCounts.tsx';
 export * from './Producer.tsx';
 export * from './TransactionCount.tsx';
 export * from './Verification.tsx';

package/dist/types/components/block/table/cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA"}

package/dist/types/components/block/table/head/TableHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/head/TableHead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAavC,CAAA"}
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/head/TableHead.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAA;AAkBzB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAcvC,CAAA"}

package/dist/types/components/block/table/row/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/row/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAOrE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,EAAE,aAAa;IACjF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAehE,CAAA"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/row/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAOrE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,EAAE,aAAa;IACjF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgBhE,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -46,26 +46,26 @@
     "@xylabs/react-identicon": "^6.1.15",
     "@xylabs/react-promise": "^6.1.15",
     "@xylabs/react-quick-tip-button": "^6.1.15",
-    "@xyo-network/account": "^3.12.3",
-    "@xyo-network/api-models": "^3.12.3",
-    "@xyo-network/archivist-model": "^3.12.3",
-    "@xyo-network/boundwitness-builder": "^3.12.3",
-    "@xyo-network/boundwitness-model": "^3.12.3",
-    "@xyo-network/bridge-http": "^3.12.3",
-    "@xyo-network/chain-ethereum": "^1.2.3",
-    "@xyo-network/chain-protocol": "^1.2.3",
-    "@xyo-network/chain-services": "^1.2.3",
-    "@xyo-network/module-model": "^3.12.3",
-    "@xyo-network/payload-builder": "^3.12.3",
-    "@xyo-network/payload-model": "^3.12.3",
-    "@xyo-network/react-chain-blockies": "^1.2.3",
-    "@xyo-network/react-chain-boundwitness": "^1.2.3",
-    "@xyo-network/react-event": "^5.1.4",
-    "@xyo-network/react-payload-raw-info": "^5.1.4",
-    "@xyo-network/react-payload-table": "^5.1.4",
-    "@xyo-network/react-shared": "^5.1.4",
-    "@xyo-network/react-table": "^5.1.4",
-    "@xyo-network/xl1-model": "^1.2.3"
+    "@xyo-network/account": "^3.12.4",
+    "@xyo-network/api-models": "^3.12.4",
+    "@xyo-network/archivist-model": "^3.12.4",
+    "@xyo-network/boundwitness-builder": "^3.12.4",
+    "@xyo-network/boundwitness-model": "^3.12.4",
+    "@xyo-network/bridge-http": "^3.12.4",
+    "@xyo-network/chain-ethereum": "^1.2.4",
+    "@xyo-network/chain-protocol": "^1.2.4",
+    "@xyo-network/chain-services": "^1.2.4",
+    "@xyo-network/module-model": "^3.12.4",
+    "@xyo-network/payload-builder": "^3.12.4",
+    "@xyo-network/payload-model": "^3.12.4",
+    "@xyo-network/react-chain-blockies": "^1.2.4",
+    "@xyo-network/react-chain-boundwitness": "^1.2.4",
+    "@xyo-network/react-event": "^5.1.7",
+    "@xyo-network/react-payload-raw-info": "^5.1.7",
+    "@xyo-network/react-payload-table": "^5.1.7",
+    "@xyo-network/react-shared": "^5.1.7",
+    "@xyo-network/react-table": "^5.1.7",
+    "@xyo-network/xl1-model": "^1.2.4"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -73,13 +73,13 @@
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@storybook/react": "^8.6.12",
-    "@types/react": "^19.1.1",
+    "@types/react": "^19.1.2",
     "@xylabs/delay": "^4.8.5",
     "@xylabs/hex": "^4.8.5",
     "@xylabs/ts-scripts-yarn3": "^6.2.1",
     "@xylabs/tsconfig-react": "^6.2.1",
-    "@xyo-network/archivist-memory": "^3.12.3",
-    "@xyo-network/chain-utils": "^1.2.3",
+    "@xyo-network/archivist-memory": "^3.12.4",
+    "@xyo-network/chain-utils": "^1.2.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.5.0",

package/src/components/block/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './blockProducer.ts'
 export * from './buildBlockChainRenderComponent.tsx'
+export * from './payloadCountsFromBlock.ts'
 export * from './tsxFromBlock.ts'

package/src/components/block/helpers/payloadCountsFromBlock.ts

@@ -0,0 +1,12 @@
+import { BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import { type HydratedBlock, isTransactionBoundWitness } from '@xyo-network/xl1-model'
+
+export const payloadCountsFromBlock = ([block, payloads]: HydratedBlock): [number, number] => {
+  const privPayloads = block.payload_schemas.filter(schema => schema !== BoundWitnessSchema)
+  const transactionPayloads = payloads.filter(payload => isTransactionBoundWitness(payload))
+  let privPayloadsCount = 0
+  for (let tx of transactionPayloads) {
+    privPayloadsCount += tx.payload_hashes.length - tx.$opCodes.filter(opCode => !opCode.startsWith('elevate|')).length
+  }
+  return [privPayloads.length, privPayloadsCount]
+}

package/src/components/block/helpers/tsxFromBlock.ts

@@ -1,8 +1,7 @@
-import { isBoundWitness } from '@xyo-network/boundwitness-model'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
-import type { HydratedBlock } from '@xyo-network/xl1-model'
+import { type HydratedBlock, isTransactionBoundWitness } from '@xyo-network/xl1-model'
 
 export const txsFromBlock = async (block: HydratedBlock) => {
-  const transactionPayloads = block[1].filter(payload => isBoundWitness(payload))
+  const transactionPayloads = block[1].filter(payload => isTransactionBoundWitness(payload))
   return await PayloadBuilder.hashPairs(transactionPayloads)
 }

package/src/components/block/hooks/index.ts

@@ -2,5 +2,6 @@ export * from './useAnchorElement.ts'
 export * from './useBlockHeadingEvents.ts'
 export * from './useBlockProducer.ts'
 export * from './useDynamicBlockComponents.ts'
+export * from './usePayloadCountsFromBlock.ts'
 export * from './useStaticBlockComponents.ts'
 export * from './useTxsFromBlock.ts'

package/src/components/block/hooks/useBlockHeadingEvents.ts

@@ -1,6 +1,6 @@
 import { useEvent } from '@xyo-network/react-event'
 
-export type BlockHeaderEventNouns = 'transaction-count' | 'block-hash' | 'block-number' | 'block-producer' | 'block-verification'
+export type BlockHeaderEventNouns = 'transaction-count' | 'block-hash' | 'block-number' | 'block-producer' | 'block-verification' | 'payload-counts'
 
 // NOTE: extracting the type so compilers can easily strip it off vs inlining it withing the hook
 // which causes compilation warnings.

package/src/components/block/hooks/usePayloadCountsFromBlock.ts

@@ -0,0 +1,13 @@
+import type { HydratedBlock } from '@xyo-network/xl1-model'
+import { useMemo } from 'react'
+
+import { payloadCountsFromBlock } from '../helpers/index.ts'
+
+export const usePayloadCountsFromBlock = (block?: HydratedBlock): [number | undefined, number | undefined, Error | undefined] => {
+  return useMemo(() => {
+    if (block) {
+      return [...payloadCountsFromBlock(block), undefined]
+    }
+    return [undefined, undefined, undefined]
+  }, [block])
+}

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

@@ -5,7 +5,7 @@ import {
 } from '@mui/material'
 import type { IdenticonProps } from '@xylabs/react-identicon'
 import { Identicon } from '@xylabs/react-identicon'
-import { usePayloadHash } from '@xyo-network/react-shared'
+import { usePayloadRootHash } from '@xyo-network/react-shared'
 import React from 'react'
 
 import { FeatureNotAvailable } from '../../../FeatureNotAvailable.tsx'
@@ -20,7 +20,7 @@ export interface BlockHashTableCellProps extends BlockTableCellProps {
 export const BlockHashTableCell: React.FC<BlockHashTableCellProps> = ({
   block, identiconProps, notAvailableDialog, linked, ...props
 }) => {
-  const hash = usePayloadHash(block?.[0])
+  const hash = usePayloadRootHash(block?.[0])
 
   const [ref, handleClick] = useLinkedBlockItem('block-hash', hash)
   const [notAvailable, setNotAvailable] = React.useState(false)

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

@@ -1,13 +1,12 @@
-import { Code } from '@mui/icons-material'
+import { DataObject } from '@mui/icons-material'
 import {
   Button,
   Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TableCell,
 } from '@mui/material'
 import { ellipsize } from '@xylabs/eth-address'
 import { FlexRow } from '@xylabs/react-flexbox'
-import { useIsDark } from '@xylabs/react-theme'
 import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
-import { usePayloadHash } from '@xyo-network/react-shared'
+import { usePayloadRootHash } from '@xyo-network/react-shared'
 import React, { useState } from 'react'
 
 import type { BlockTableCellProps } from './lib/index.ts'
@@ -17,16 +16,15 @@ export interface BlockJsonViewTableCellProps extends BlockTableCellProps {}
 export const BlockJsonViewTableCell: React.FC<BlockJsonViewTableCellProps> = ({ block, ...props }) => {
   const [open, setOpen] = useState(false)
   const onClose = () => setOpen(false)
-  const isDark = useIsDark()
 
-  const hash = usePayloadHash(block?.[0])
+  const hash = usePayloadRootHash(block?.[0])
   const title = hash ? `JSON for ${ellipsize(hash, 5)}` : 'JSON'
 
   return (
     <TableCell {...props}>
       <FlexRow sx={{ width: '100%' }}>
         <IconButton onClick={() => setOpen(true)}>
-          <Code />
+          <DataObject />
         </IconButton>
       </FlexRow>
       <Dialog open={open} onClose={onClose}>

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

@@ -0,0 +1,34 @@
+import { Error } from '@mui/icons-material'
+import {
+  Link, TableCell, Tooltip,
+} from '@mui/material'
+import React from 'react'
+
+import { usePayloadCountsFromBlock } from '../../hooks/index.ts'
+import { useLinkedBlockItem } from './hooks/index.ts'
+import type { BlockTableCellProps } from './lib/index.ts'
+
+export interface BlockPayloadCountsTableCellProps extends BlockTableCellProps {}
+
+export const BlockPayloadCountsTableCell: React.FC<BlockPayloadCountsTableCellProps> = ({
+  block, linked, ...props
+}) => {
+  const [pubPayloads, privPayloads, error] = usePayloadCountsFromBlock(block)
+  const data = `${pubPayloads}/${privPayloads}`
+  const [ref, handleClick] = useLinkedBlockItem('payload-counts', data)
+
+  return (
+    <TableCell ref={ref} {...props}>
+      <span>
+        {error
+          ? (
+              <Tooltip title={error.message}>
+                <Error color="error" />
+              </Tooltip>
+            )
+          : null}
+        {linked ? <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>{data ?? '--/--'}</Link> : data ?? '--/--'}
+      </span>
+    </TableCell>
+  )
+}

package/src/components/block/table/cell/index.ts

@@ -1,6 +1,7 @@
 export * from './BlockNumber.tsx'
 export * from './Hash.tsx'
 export * from './JsonView.tsx'
+export * from './PayloadCounts.tsx'
 export * from './Producer.tsx'
 export * from './TransactionCount.tsx'
 export * from './Verification.tsx'

package/src/components/block/table/head/TableHead.tsx

@@ -1,18 +1,40 @@
+import { InfoOutline } from '@mui/icons-material'
+import type { TableCellProps } from '@mui/material'
 import {
   TableCell, TableHead, TableRow,
+  Tooltip,
+  Typography,
 } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
+const ToolTipTableCell: React.FC<TableCellProps> = ({
+  children, align, title, ...props
+}) => {
+  return (
+    <TableCell title={title} {...props}>
+      <Tooltip title={title}>
+        <FlexRow justifyContent={align}>
+          <Typography variant="body2">{children}</Typography>
+          &nbsp;
+          <InfoOutline fontSize="small" />
+        </FlexRow>
+      </Tooltip>
+    </TableCell>
+  )
+}
+
 export const BlockchainTableHead: React.FC = () => {
   return (
     <TableHead>
       <TableRow>
-        <TableCell>Block Hash</TableCell>
-        <TableCell>Block Number</TableCell>
-        <TableCell>Transaction Count</TableCell>
-        <TableCell align="center">Block Producer</TableCell>
-        <TableCell align="center">Valid</TableCell>
-        <TableCell align="center">JSON</TableCell>
+        <ToolTipTableCell title="The hash of the block">Block Hash</ToolTipTableCell>
+        <ToolTipTableCell align="center" title="The block number that is included in the block">Block Number</ToolTipTableCell>
+        <ToolTipTableCell align="center" title="Count of transactions that are included in the block">Transactions</ToolTipTableCell>
+        <ToolTipTableCell align="center" title="Count of public and private payload counts for the block">Payloads</ToolTipTableCell>
+        <ToolTipTableCell align="center" title="The address of the block producer that produced the block">Block Producer</ToolTipTableCell>
+        <ToolTipTableCell align="center" title="The result of the local validation check for the block">Valid</ToolTipTableCell>
+        <ToolTipTableCell align="center" title="Link to display the raw JSON of the block">JSON</ToolTipTableCell>
       </TableRow>
     </TableHead>
   )

package/src/components/block/table/row/TableRow.tsx

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react'
 
 import type { BlockComponentProps } from '../../../../types/index.ts'
 import {
-  BlockHashTableCell, BlockJsonViewTableCell, BlockNumberTableCell, BlockProducerTableCell,
+  BlockHashTableCell, BlockJsonViewTableCell, BlockNumberTableCell, BlockPayloadCountsTableCell, BlockProducerTableCell,
   BlockTransactionCountTableCell,
   BlockVerificationTableCell,
 } from '../cell/index.ts'
@@ -21,8 +21,9 @@ export const BlockChainTableRow: React.FC<BlockChainTableRowProps> = ({
   return (
     <TableRow sx={{ overflowY: 'scroll', ...sx }} {...props}>
       <BlockHashTableCell {...linkedTableCellProps} />
-      <BlockNumberTableCell {...linkedTableCellProps} />
-      <BlockTransactionCountTableCell {...linkedTableCellProps} />
+      <BlockNumberTableCell align="center" {...linkedTableCellProps} />
+      <BlockTransactionCountTableCell align="center" {...linkedTableCellProps} />
+      <BlockPayloadCountsTableCell align="center" {...linkedTableCellProps} />
       <BlockProducerTableCell {...linkedTableCellProps} />
       <BlockVerificationTableCell {...defaultTableCellProps} />
       <BlockJsonViewTableCell {...defaultTableCellProps} />