@xyo-network/react-chain-boundwitness 1.7.6 → 1.7.8

package/src/components/transactions/TransactionBoundWitnessDetails.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react-vite'
 import { Account } from '@xyo-network/account'
+import { useEvent } from '@xyo-network/react-event'
 import type { HashPayload, HydratedTransaction } from '@xyo-network/xl1-protocol'
 import { buildTransaction } from '@xyo-network/xl1-protocol-sdk'
 import React from 'react'
@@ -22,15 +23,27 @@ const invalidTx = [builtInvalidTx[0], builtInvalidTx[1].filter(payload => payloa
 
 const Template: StoryFn<typeof TransactionBoundWitnessDetails> = args => <TransactionBoundWitnessDetails {...args} />
 
+const TemplateWithEvents: StoryFn<typeof TransactionBoundWitnessDetails> = (args) => {
+  const [ref] = useEvent<HTMLElement>((noun, verb, data) => {
+    alert(`${noun}, ${verb}, ${data}`)
+  })
+  return (
+    <TransactionBoundWitnessDetails ref={ref} {...args} />
+  )
+}
+
 const Default = Template.bind({})
 Default.args = {}
 
 const WithData = Template.bind({})
 WithData.args = { transaction: tx }
 
+const WithDataEvents = TemplateWithEvents.bind({})
+WithDataEvents.args = { transaction: tx }
+
 const WithInvalidData = Template.bind({})
 WithInvalidData.args = { transaction: invalidTx }
 
 export {
-  Default, WithData, WithInvalidData,
+  Default, WithData, WithDataEvents, WithInvalidData,
 }

package/src/components/transactions/TransactionBoundWitnessDetails.tsx

@@ -2,6 +2,7 @@ import { ErrorRender } from '@xylabs/react-error'
 import { type FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
 import { usePromise } from '@xylabs/react-promise'
 import { HydratedTransactionWrapper } from '@xyo-network/chain-wrappers'
+import type { ClickableFields } from '@xyo-network/react-boundwitness-plugin'
 import {
   BoundWitnessSignatureTable, HashHeadingPaper, HeadingPaper,
 } from '@xyo-network/react-boundwitness-plugin'
@@ -10,7 +11,6 @@ import React from 'react'
 import { FaSignature } from 'react-icons/fa'
 import { VscSymbolNamespace } from 'react-icons/vsc'
 
-import type { ClickableFields } from '../PayloadTable.tsx'
 import { PayloadTableFlexbox } from '../PayloadTable.tsx'
 import { TransactionActions, TransactionBoundWitnessCard } from './card/index.ts'
 import { useTransactionPayloadTypes } from './hooks/index.ts'
@@ -50,6 +50,8 @@ export const TransactionBoundWitnessDetails: React.FC<TransactionBoundWitnessDet
         <ErrorRender key={index} error={error} scope="referencedPayloadsError:TransactionBoundWitnessDetails.tsx" />)}
       <TransactionBoundWitnessCard elevation={4} wrapper={wrapper} />
       <PayloadTableFlexbox
+        eventNoun="payload"
+        clickableFields={['hash']}
         tooltip="Payloads included in the transaction that are elevated and validated."
         IconComponent={<VscSymbolNamespace />}
         hashes={elevatedPayloadHashes}
@@ -59,6 +61,8 @@ export const TransactionBoundWitnessDetails: React.FC<TransactionBoundWitnessDet
       />
       {(publicPayloadHashes?.length ?? 0) > 0 && (
         <PayloadTableFlexbox
+          eventNoun="payload"
+          clickableFields={['hash']}
           tooltip="Public payloads included in the transaction."
           IconComponent={<VscSymbolNamespace />}
           hashes={publicPayloadHashes}
@@ -69,6 +73,7 @@ export const TransactionBoundWitnessDetails: React.FC<TransactionBoundWitnessDet
       )}
       {(referencedPayloadHashes?.length ?? 0) > 0 && (
         <PayloadTableFlexbox
+          // TODO - bring back once the hashes can be searched via datalake
           tooltip="Payload hashes referenced by the transaction but not included."
           IconComponent={<VscSymbolNamespace />}
           clickableFields={nonClickableFields}