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

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

@@ -4,6 +4,7 @@ import { type SafeTransactionData, type SafeVersion } from '@safe-global/safe-co
 import { getEip712TxTypes } from '@safe-global/protocol-kit/dist/src/utils'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import useChainId from '@/hooks/useChainId'
+import { capitalizeHash } from '@/utils/web3'
 
 export const SafeTxHashDataRow = ({
   safeTxHash,
@@ -16,12 +17,19 @@ export const SafeTxHashDataRow = ({
 }) => {
   const chainId = useChainId()
   const safeAddress = useSafeAddress()
-  const domainHash = TypedDataEncoder.hashDomain({
-    chainId,
-    verifyingContract: safeAddress,
-  })
+
+  // We capitalize domain and message hash as it is displayed capitalized in many HW wallets.
+  const domainHash = capitalizeHash(
+    TypedDataEncoder.hashDomain({
+      chainId,
+      verifyingContract: safeAddress,
+    }),
+  )
+
   const messageHash = safeTxData
-    ? TypedDataEncoder.hashStruct('SafeTx', { SafeTx: getEip712TxTypes(safeVersion).SafeTx }, safeTxData)
+    ? capitalizeHash(
+        TypedDataEncoder.hashStruct('SafeTx', { SafeTx: getEip712TxTypes(safeVersion).SafeTx }, safeTxData),
+      )
     : undefined
 
   return (

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

@@ -57,6 +57,7 @@ import LinkIcon from '@/public/images/messages/link.svg'
 import { Blockaid } from '@/components/tx/security/blockaid'
 import CheckWallet from '@/components/common/CheckWallet'
 import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
+import { capitalizeHash } from '@/utils/web3'
 
 const createSkeletonMessage = (confirmationsRequired: number): SafeMessage => {
   return {
@@ -77,16 +78,28 @@ 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
+}) => {
+  // We capitalize domain and message hash as it is displayed capitalized in many HW wallets.
+  const hash = capitalize ? capitalizeHash(hashValue) : 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 +244,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 +329,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,20 @@ 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 capitalizeHash = (hash: string): string => {
+  return `0x${hash.slice(2).toUpperCase()}`
+}
+
+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', [