@xyo-network/react-chain-boundwitness 1.5.13 → 1.5.15

package/src/components/transactions/card/Card.tsx

@@ -1,101 +1,64 @@
 import type { CardProps } from '@mui/material'
 import {
-  Card, CardContent, Grid, Stack, Tooltip, Typography,
+  Card, CardContent, CardHeader, Grid, Link, Tooltip, Typography,
 } from '@mui/material'
-import { isUndefined } from '@xylabs/typeof'
-import { bigIntToFixedPointString } from '@xyo-network/chain-utils'
 import { BlockiesAvatarAddress } from '@xyo-network/react-chain-blockies'
 import { DetailsStack, LabelValueStack } from '@xyo-network/react-chain-shared'
+import { useEvent } from '@xyo-network/react-event'
 import type { SignedHydratedTransactionInstance } from '@xyo-network/xl1-protocol-sdk'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { GiReceiveMoney, GiSandsOfTime } from 'react-icons/gi'
 import { IoStatsChartOutline } from 'react-icons/io5'
 
-const formatFee = (fee?: bigint) => {
-  if (isUndefined(fee)) return
-  const stringValue = bigIntToFixedPointString(fee, 12)
-  if (stringValue === '0') return '0.0'
-  return stringValue
-}
+import { useTransactionDetails } from './hooks/index.ts'
 
 export interface TransactionBoundWitnessCardProps extends CardProps {
+  linkedAddress?: boolean
   wrapper?: SignedHydratedTransactionInstance
 }
 
-export const TransactionBoundWitnessCard: React.FC<TransactionBoundWitnessCardProps> = ({ wrapper, ...props }) => {
+export const TransactionBoundWitnessCard: React.FC<TransactionBoundWitnessCardProps> = ({
+  linkedAddress = true, wrapper, ...props
+}) => {
   if (!wrapper) return null
 
-  const stats = useMemo(() => {
-    const labels = [
-      'Reward',
-      'Elevated Payloads',
-      'Total Payloads',
-      'Signatures',
-    ]
-
-    const values: (string | undefined)[] = [
-      wrapper.reward().toLocaleString(navigator.language ?? 'en-US'),
-      wrapper.elevatedPayloadCount.toLocaleString(navigator.language ?? 'en-US'),
-      wrapper.payloadCount.toLocaleString(navigator.language ?? 'en-US'),
-      wrapper.signatureCount.toLocaleString(navigator.language ?? 'en-US'),,
-    ]
-
-    return { labels, values } as const
-  }, [wrapper])
-
-  const fees = useMemo(() => {
-    const labels = [
-      'Base',
-      'Gas',
-      'Priority',
-      'Gas Limit',
-    ]
-    const values = [
-      formatFee(wrapper.fees.base),
-      formatFee(wrapper.fees.gasPrice),
-      formatFee(wrapper.fees.priority),
-      formatFee(wrapper.fees.gasLimit),
-    ]
-
-    return { labels, values } as const
-  }, [wrapper])
+  const {
+    stats, fees, blockDuration,
+  } = useTransactionDetails(wrapper)
 
-  const blockDuration = useMemo(() => {
-    const labels = [
-      'Expiration',
-      'Not Before',
-    ]
-
-    const values = [
-      wrapper.boundWitness.exp.toLocaleString(navigator.language ?? 'en-US'),
-      wrapper.boundWitness.nbf.toLocaleString(navigator.language ?? 'en-US'),
-    ]
-
-    return { labels, values } as const
-  }, [wrapper])
+  const [ref, dispatch] = useEvent<HTMLDivElement>()
 
   return (
-    <Card {...props}>
+    <Card ref={ref} {...props}>
+      <CardHeader
+        title={(
+          <Typography
+            onClick={() => linkedAddress && dispatch('address', 'click', wrapper.boundWitness.from)}
+            variant="body2"
+            sx={{
+              maxWidth: '100%', textOverflow: 'ellipsis', overflow: 'hidden', fontFamily: 'monospace',
+            }}
+          >
+            {linkedAddress
+              ? (
+                  <Link sx={{ cursor: 'pointer' }}>{wrapper?.boundWitness.from}</Link>
+                )
+              : wrapper?.boundWitness.from}
+          </Typography>
+        )}
+        avatar={(
+          <Tooltip title={`From Address - ${wrapper?.boundWitness.from}`}>
+            <BlockiesAvatarAddress
+              address={wrapper?.boundWitness.from}
+              onClick={() => dispatch('address', 'click', wrapper.boundWitness.from)}
+              size={21}
+              sx={{ cursor: 'pointer' }}
+            />
+          </Tooltip>
+        )}
+      />
       <CardContent>
         <Grid container spacing={6} sx={{ width: '100%' }}>
-          <Grid size={{ xs: 12 }}>
-            <Stack direction="row" alignItems="center" gap={1} sx={{ maxWidth: '100%' }}>
-              <Tooltip title={`From Address - ${wrapper?.boundWitness.from}`}>
-                <BlockiesAvatarAddress
-                  address={wrapper?.boundWitness.from}
-                  size={21}
-                />
-              </Tooltip>
-              <Typography
-                variant="body2"
-                sx={{
-                  maxWidth: '100%', textOverflow: 'ellipsis', overflow: 'hidden', fontFamily: 'monospace',
-                }}
-              >
-                {wrapper?.boundWitness.from}
-              </Typography>
-            </Stack>
-          </Grid>
           <Grid size={{
             xs: 12, sm: 6, md: 4,
           }}

package/src/components/transactions/card/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useDetails.ts'

package/src/components/transactions/card/hooks/useDetails.ts

@@ -0,0 +1,41 @@
+import type { SignedHydratedTransactionInstance } from '@xyo-network/xl1-protocol-sdk'
+import { useMemo } from 'react'
+
+import { formatFee, formatResults } from '../../../../lib/index.ts'
+
+export const useTransactionDetails = (wrapper: SignedHydratedTransactionInstance) => {
+  const stats = useMemo(() => {
+    const stats = {
+      'Reward': wrapper.reward().toLocaleString(navigator.language ?? 'en-US'),
+      'Elevated Payloads': wrapper.elevatedPayloadCount.toLocaleString(navigator.language ?? 'en-US'),
+      'Total Payloads': wrapper.payloadCount.toLocaleString(navigator.language ?? 'en-US'),
+      'Signatures': wrapper.signatureCount.toLocaleString(navigator.language ?? 'en-US'),
+    }
+
+    return formatResults(stats)
+  }, [wrapper])
+
+  const fees = useMemo(() => {
+    const fees = {
+      'Base': formatFee(wrapper.fees.base),
+      'Gas': formatFee(wrapper.fees.gasPrice),
+      'Priority': formatFee(wrapper.fees.priority),
+      'Gas Limit': formatFee(wrapper.fees.gasLimit),
+    }
+
+    return formatResults(fees)
+  }, [wrapper])
+
+  const blockDuration = useMemo(() => {
+    const blockDuration = {
+      'Expiration': wrapper.boundWitness.exp.toLocaleString(navigator.language ?? 'en-US'),
+      'Not Before': wrapper.boundWitness.nbf.toLocaleString(navigator.language ?? 'en-US'),
+    }
+
+    return formatResults(blockDuration)
+  }, [wrapper])
+
+  return {
+    stats, fees, blockDuration,
+  }
+}

package/src/lib/formatFees.ts

@@ -0,0 +1,9 @@
+import { isUndefined } from '@xylabs/typeof'
+import { bigIntToFixedPointString } from '@xyo-network/chain-utils'
+
+export const formatFee = (fee?: bigint) => {
+  if (isUndefined(fee)) return 'N/A'
+  const stringValue = bigIntToFixedPointString(fee, 12)
+  if (stringValue === '0') return stringValue
+  return stringValue
+}

package/src/lib/formatResults.ts

@@ -0,0 +1,8 @@
+export const formatResults = (results: Record<string, string>) => {
+  const result = { labels: [] as string[], values: [] as string[] }
+  for (const [label, value] of Object.entries(results)) {
+    result.labels.push(label)
+    result.values.push(value)
+  }
+  return result
+}

package/src/lib/index.ts

@@ -1 +1,3 @@
+export * from './formatFees.ts'
 export * from './formatPayloadsForTable.ts'
+export * from './formatResults.ts'