feat: show message and domain hash for off-chain msgs

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

@@ -16,12 +16,16 @@ export const SafeTxHashDataRow = ({
 }) => {
   const chainId = useChainId()
   const safeAddress = useSafeAddress()
-  const domainHash = TypedDataEncoder.hashDomain({
+  const domainHash = `0x${TypedDataEncoder.hashDomain({
     chainId,
     verifyingContract: safeAddress,
   })
+    .slice(2)
+    .toUpperCase()}`
   const messageHash = safeTxData
-    ? TypedDataEncoder.hashStruct('SafeTx', { SafeTx: getEip712TxTypes(safeVersion).SafeTx }, safeTxData)
+    ? `0x${TypedDataEncoder.hashStruct('SafeTx', { SafeTx: getEip712TxTypes(safeVersion).SafeTx }, safeTxData)
+        .slice(2)
+        .toUpperCase()}`
     : undefined
 
   return (

src/components/tx-flow/flows/SignMessage/SignMessage.tsx

@@ -77,16 +77,27 @@ const createSkeletonMessage = (confirmationsRequired: number): SafeMessage => {
   }
 }
 
-const MessageHashField = ({ label, hashValue }: { label: string; hashValue: string }) => (
-  <>
-    <Typography variant="body2" fontWeight={700} mt={2}>
-      {label}:
-    </Typography>
-    <Typography data-testid="message-hash" variant="body2" component="div">
-      <EthHashInfo address={hashValue} showAvatar={false} shortAddress={false} showCopyButton />
-    </Typography>
-  </>
-)
+const MessageHashField = ({
+  label,
+  hashValue,
+  capitalize,
+}: {
+  label: string
+  hashValue: string
+  capitalize?: boolean
+}) => {
+  const hash = capitalize ? `0x${hashValue.slice(2).toUpperCase()}` : hashValue
+  return (
+    <>
+      <Typography variant="body2" fontWeight={700} mt={2}>
+        {label}:
+      </Typography>
+      <Typography data-testid="message-hash" variant="body2" component="div">
+        <EthHashInfo address={hash} showAvatar={false} shortAddress={false} showCopyButton />
+      </Typography>
+    </>
+  )
+}
 
 const DialogHeader = ({ threshold }: { threshold: number }) => (
   <>
@@ -231,7 +242,10 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
   const wallet = useWallet()
   useHighlightHiddenTab()
 
-  const { decodedMessage, safeMessageMessage, safeMessageHash } = useDecodedSafeMessage(message, safe)
+  const { decodedMessage, safeMessageMessage, safeMessageHash, messageHash, domainHash } = useDecodedSafeMessage(
+    message,
+    safe,
+  )
   const [safeMessage, setSafeMessage] = useSafeMessage(safeMessageHash)
   const isPlainTextMessage = typeof decodedMessage === 'string'
   const decodedMessageAsString = isPlainTextMessage ? decodedMessage : JSON.stringify(decodedMessage, null, 2)
@@ -313,6 +327,8 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
             <AccordionDetails>
               <MessageHashField label="SafeMessage" hashValue={safeMessageMessage} />
               <MessageHashField label="SafeMessage hash" hashValue={safeMessageHash} />
+              <MessageHashField label="Domain hash" hashValue={domainHash} capitalize />
+              <MessageHashField label="Message hash" hashValue={messageHash} capitalize />
             </AccordionDetails>
           </Accordion>
 

src/hooks/messages/useDecodedSafeMessage.ts

@@ -1,5 +1,10 @@
 import { getDecodedMessage } from '@/components/safe-apps/utils'
-import { generateSafeMessageMessage, generateSafeMessageHash } from '@/utils/safe-messages'
+import {
+  generateSafeMessageMessage,
+  generateSafeMessageHash,
+  generateSafeMessageTypedData,
+} from '@/utils/safe-messages'
+import { getTypedDataDomainHash, getTypedDataMessageHash } from '@/utils/web3'
 import type { EIP712TypedData, SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { useMemo } from 'react'
 
@@ -18,7 +23,13 @@ import { useMemo } from 'react'
 const useDecodedSafeMessage = (
   message: string | EIP712TypedData,
   safe: SafeInfo,
-): { decodedMessage: string | EIP712TypedData; safeMessageMessage: string; safeMessageHash: string } => {
+): {
+  decodedMessage: string | EIP712TypedData
+  safeMessageMessage: string
+  safeMessageHash: string
+  messageHash: string
+  domainHash: string
+} => {
   // Decode message if UTF-8 encoded
   const decodedMessage = useMemo(() => {
     return typeof message === 'string' ? getDecodedMessage(message) : message
@@ -34,10 +45,22 @@ const useDecodedSafeMessage = (
     return generateSafeMessageHash(safe, decodedMessage)
   }, [safe, decodedMessage])
 
+  const messageHash = useMemo(() => {
+    const typedData = generateSafeMessageTypedData(safe, message)
+    return getTypedDataMessageHash('SafeMessage', typedData)
+  }, [message, safe])
+
+  const domainHash = useMemo(() => {
+    const typedData = generateSafeMessageTypedData(safe, message)
+    return getTypedDataDomainHash(typedData)
+  }, [message, safe])
+
   return {
     decodedMessage,
     safeMessageMessage,
     safeMessageHash,
+    messageHash,
+    domainHash,
   }
 }
 

src/utils/web3.ts

@@ -29,6 +29,16 @@ export const normalizeTypedData = (typedData: EIP712TypedData): EIP712Normalized
   return payload
 }
 
+export const getTypedDataMessageHash = (name: string, typedData: EIP712TypedData): string => {
+  // `ethers` doesn't require `EIP712Domain` and otherwise throws
+  const { EIP712Domain: _, ...types } = typedData.types
+  return TypedDataEncoder.hashStruct(name, types, typedData.message)
+}
+
+export const getTypedDataDomainHash = (typedData: EIP712TypedData): string => {
+  return TypedDataEncoder.hashDomain(typedData.domain as TypedDataDomain)
+}
+
 // Fall back to `eth_signTypedData` for Ledger that doesn't support `eth_signTypedData_v4`
 const signTypedDataFallback = async (signer: JsonRpcSigner, typedData: EIP712TypedData): Promise<string> => {
   return await signer.provider.send('eth_signTypedData', [