feat: show message and domain hash (#4394)

Co-authored-by: Aaron Cook <[email protected]>

src/components/transactions/TxDetails/Summary/SafeTxHashDataRow/index.tsx

@@ -0,0 +1,42 @@
+import { TypedDataEncoder } from 'ethers'
+import { TxDataRow, generateDataRowValue } from '../TxDataRow'
+import { type SafeTransactionData, type SafeVersion } from '@safe-global/safe-core-sdk-types'
+import { getEip712TxTypes } from '@safe-global/protocol-kit/dist/src/utils'
+import useSafeAddress from '@/hooks/useSafeAddress'
+import useChainId from '@/hooks/useChainId'
+
+export const SafeTxHashDataRow = ({
+  safeTxHash,
+  safeTxData,
+  safeVersion,
+}: {
+  safeTxHash: string
+  safeTxData?: SafeTransactionData
+  safeVersion: SafeVersion
+}) => {
+  const chainId = useChainId()
+  const safeAddress = useSafeAddress()
+  const domainHash = TypedDataEncoder.hashDomain({
+    chainId,
+    verifyingContract: safeAddress,
+  })
+  const messageHash = safeTxData
+    ? TypedDataEncoder.hashStruct('SafeTx', { SafeTx: getEip712TxTypes(safeVersion).SafeTx }, safeTxData)
+    : undefined
+
+  return (
+    <>
+      <TxDataRow datatestid="tx-safe-hash" title="safeTxHash:">
+        {generateDataRowValue(safeTxHash, 'hash')}
+      </TxDataRow>
+      <TxDataRow datatestid="tx-domain-hash" title="Domain hash:">
+        {generateDataRowValue(domainHash, 'hash')}
+      </TxDataRow>
+      {messageHash && (
+        <TxDataRow datatestid="tx-message-hash" title="Message hash:">
+          {generateDataRowValue(messageHash, 'hash')}
+        </TxDataRow>
+      )}
+    </>
+  )
+}

src/components/transactions/TxDetails/Summary/index.tsx

@@ -1,15 +1,18 @@
 import type { ReactElement } from 'react'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Link, Box } from '@mui/material'
 import { generateDataRowValue, TxDataRow } from '@/components/transactions/TxDetails/Summary/TxDataRow'
 import { isCustomTxInfo, isMultisigDetailedExecutionInfo } from '@/utils/transaction-guards'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import { Operation } from '@safe-global/safe-gateway-typescript-sdk'
 import { dateString } from '@/utils/formatters'
 import css from './styles.module.css'
-import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import type { SafeTransaction, SafeTransactionData, SafeVersion } from '@safe-global/safe-core-sdk-types'
 import SafeTxGasForm from '../SafeTxGasForm'
 import DecodedData from '../TxData/DecodedData'
+import { calculateSafeTransactionHash } from '@safe-global/protocol-kit/dist/src/utils'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { SafeTxHashDataRow } from './SafeTxHashDataRow'
 
 interface Props {
   txDetails: TransactionDetails
@@ -18,6 +21,7 @@ interface Props {
 }
 
 const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }: Props): ReactElement => {
+  const { safe } = useSafeInfo()
   const [expanded, setExpanded] = useState<boolean>(defaultExpanded)
 
   const toggleExpanded = () => {
@@ -26,10 +30,25 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }
 
   const { txHash, detailedExecutionInfo, executedAt, txData } = txDetails
 
-  let submittedAt, confirmations, safeTxHash, baseGas, gasPrice, gasToken, refundReceiver, safeTxGas
+  let safeTxData: SafeTransactionData | undefined = undefined
+  let submittedAt, confirmations, safeTxHash, baseGas, gasPrice, gasToken, refundReceiver, safeTxGas, nonce
   if (isMultisigDetailedExecutionInfo(detailedExecutionInfo)) {
-    ;({ submittedAt, confirmations, safeTxHash, baseGas, gasPrice, gasToken, safeTxGas } = detailedExecutionInfo)
+    ;({ submittedAt, confirmations, safeTxHash, baseGas, gasPrice, gasToken, safeTxGas, nonce } = detailedExecutionInfo)
     refundReceiver = detailedExecutionInfo.refundReceiver?.value
+    if (txData) {
+      safeTxData = {
+        to: txData.to.value,
+        data: txData.hexData ?? '0x',
+        value: txData.value ?? '0',
+        operation: txData.operation as number,
+        baseGas,
+        gasPrice,
+        gasToken,
+        nonce,
+        refundReceiver,
+        safeTxGas,
+      }
+    }
   }
 
   const isCustom = isCustomTxInfo(txDetails.txInfo)
@@ -41,9 +60,9 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }
           {generateDataRowValue(txHash, 'hash', true)}{' '}
         </TxDataRow>
       )}
-      <TxDataRow datatestid="tx-safe-hash" title="safeTxHash:">
-        {generateDataRowValue(safeTxHash, 'hash')}
-      </TxDataRow>
+      {safeTxHash && (
+        <SafeTxHashDataRow safeTxHash={safeTxHash} safeTxData={safeTxData} safeVersion={safe.version as SafeVersion} />
+      )}
       <TxDataRow datatestid="tx-created-at" title="Created:">
         {submittedAt ? dateString(submittedAt) : null}
       </TxDataRow>
@@ -115,8 +134,15 @@ export default Summary
 
 export const PartialSummary = ({ safeTx }: { safeTx: SafeTransaction }) => {
   const txData = safeTx.data
+  const { safeAddress, safe } = useSafeInfo()
+  const safeTxHash = useMemo(() => {
+    return safe.version && calculateSafeTransactionHash(safeAddress, safeTx.data, safe.version, BigInt(safe.chainId))
+  }, [safe.chainId, safe.version, safeAddress, safeTx.data])
   return (
     <>
+      {safeTxHash && (
+        <SafeTxHashDataRow safeTxHash={safeTxHash} safeTxData={safeTx.data} safeVersion={safe.version as SafeVersion} />
+      )}
       <TxDataRow datatestid="tx-executed-at" title="safeTxGas:">
         <SafeTxGasForm />
       </TxDataRow>