Handle errors from empty msg body

src/features/messages/cards/CodeBlock.tsx

@@ -11,7 +11,7 @@ export function LabelAndCodeBlock({ label, value }: { label: string; value: stri
 
 export function CodeBlock({ value }: { value: string }) {
   return (
-    <div className="relative max-w-full break-words py-2 pl-2 pr-9 mt-2 bg-gray-100 text-sm font-mono rounded">
+    <div className="relative max-w-full break-words py-2 pl-2 pr-9 mt-2 min-h-[2rem] bg-gray-100 text-sm font-mono rounded">
       {value}
       <CopyButton
         copyValue={value}

src/features/messages/cards/ContentDetailsCard.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { utils } from '@hyperlane-xyz/utils';
 
@@ -9,6 +9,7 @@ import { Card } from '../../../components/layout/Card';
 import { MAILBOX_VERSION } from '../../../consts/environments';
 import EnvelopeInfo from '../../../images/icons/envelope-info.svg';
 import { Message } from '../../../types';
+import { logger } from '../../../utils/logger';
 import { tryUtf8DecodeBytes } from '../../../utils/string';
 
 import { CodeBlock, LabelAndCodeBlock } from './CodeBlock';
@@ -40,20 +41,30 @@ export function ContentDetailsCard({
     setBodyDecodeType(value);
   };
 
-  const bodyDisplay =
-    bodyDecodeType === 'hex'
-      ? body
-      : decodedBody || tryUtf8DecodeBytes(body, false) || 'Unable to decode';
+  const bodyDisplay = useMemo(() => {
+    return (
+      (bodyDecodeType === 'hex'
+        ? body
+        : decodedBody || tryUtf8DecodeBytes(body, false) || 'Unable to decode') || ''
+    );
+  }, [bodyDecodeType, decodedBody, body]);
 
-  const rawBytes = utils.formatMessage(
-    MAILBOX_VERSION,
-    nonce,
-    originDomainId,
-    sender,
-    destinationDomainId,
-    recipient,
-    body,
-  );
+  const rawBytes = useMemo(() => {
+    try {
+      return utils.formatMessage(
+        MAILBOX_VERSION,
+        nonce,
+        originDomainId,
+        sender,
+        destinationDomainId,
+        recipient,
+        body,
+      );
+    } catch (error) {
+      logger.warn('Error formatting message', error);
+      return '';
+    }
+  }, [nonce, originDomainId, sender, destinationDomainId, recipient, body]);
 
   return (
     <Card classes="w-full space-y-4">

src/features/messages/cards/TransactionCard.tsx

@@ -180,7 +180,7 @@ function TransactionDetails({
       <KeyValueRow
         label="Block:"
         labelWidth="w-16"
-        display={blockNumber.toString()}
+        display={blockNumber?.toString()}
         displayWidth="w-60 sm:w-64"
         blurValue={blur}
       />