Fix delivered_message query

Add message hash to details page

src/features/search/MessageDetails.tsx

@@ -55,6 +55,7 @@ export function MessageDetails({ messageId }: { messageId: string }) {
     originTransaction,
     destinationTransaction: destTransaction,
     leafIndex,
+    hash: msgHash,
   } = message;
   const msgRawBytes = utils.formatMessage(originDomainId, sender, destDomainId, recipient, body);
 
@@ -164,6 +165,7 @@ export function MessageDetails({ messageId }: { messageId: string }) {
           leafIndex={leafIndex}
           body={body}
           rawBytes={msgRawBytes}
+          msgHash={msgHash}
           shouldBlur={shouldBlur}
         />
       </div>
@@ -320,6 +322,7 @@ interface DetailsCardProps {
   leafIndex: number;
   body: string;
   rawBytes: string;
+  msgHash: string;
   shouldBlur: boolean;
 }
 
@@ -331,6 +334,7 @@ function DetailsCard({
   leafIndex,
   body,
   rawBytes,
+  msgHash,
   shouldBlur,
 }: DetailsCardProps) {
   return (
@@ -369,6 +373,7 @@ function DetailsCard({
       />
       <HexStringBlock label="Message content:" value={body} />
       <HexStringBlock label="Raw bytes:" value={rawBytes} />
+      <HexStringBlock label="Message hash:" value={msgHash} />
     </Card>
   );
 }
@@ -429,6 +434,7 @@ query MessageDetails ($messageId: bigint!){
     destination
     id
     leaf_index
+    hash
     msg_body
     origin
     origin_tx_id
@@ -450,7 +456,7 @@ query MessageDetails ($messageId: bigint!){
     recipient
     sender
     timestamp
-    delivered_messages {
+    delivered_message {
       id
       tx_id
       inbox_address

src/features/search/MessageSearch.tsx

@@ -200,7 +200,7 @@ const messageStubProps = `
   recipient
   sender
   timestamp
-  delivered_messages {
+  delivered_message {
     id
     tx_id
     inbox_address

src/features/search/MessageSummary.tsx

@@ -36,7 +36,7 @@ export function MessageSummary({ message }: { message: MessageStub }) {
             <div className={styles.value}>{getHumanReadableTimeString(timestamp)}</div>
           </div>
         </div>
-        <div className={`w-20 md:w-24 py-2 text-sm text-center rounded ${statusColor}`}>
+        <div className={`w-20 md:w-[5.5rem] py-2 text-sm text-center rounded ${statusColor}`}>
           {statusText}
         </div>
       </a>

src/features/search/placeholderMessages.ts

@@ -25,6 +25,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: 0,
@@ -40,6 +41,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: chain.polygon.id,
@@ -55,6 +57,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: avalancheChain.id,
@@ -70,6 +73,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: bscChain.id,
@@ -85,6 +89,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: chain.mainnet.id,
@@ -100,6 +105,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: chain.mainnet.id,
@@ -115,6 +121,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: chain.optimism.id,
@@ -130,6 +137,7 @@ export const PLACEHOLDER_MESSAGES: Message[] = [
     sender: constants.AddressZero,
     recipient: constants.AddressZero,
     body: BODY_ZERO,
+    hash: TX_HASH_ZERO,
     originDomainId: 0,
     destinationDomainId: 0,
     originChainId: bscChain.id,

src/features/search/query.ts

@@ -45,16 +45,17 @@ function parseMessage(m: MessageEntry): Message | null {
   try {
     const status = getMessageStatus(m);
     const destinationTransaction =
-      status === MessageStatus.Delivered && m.delivered_messages
-        ? parseTransaction(m.delivered_messages.transaction)
+      status === MessageStatus.Delivered && m.delivered_message?.transaction
+        ? parseTransaction(m.delivered_message.transaction)
         : undefined;
     return {
       id: m.id,
       status,
       sender: parsePaddedAddress(m.sender),
       recipient: parsePaddedAddress(m.recipient),
-      leafIndex: m.leaf_index,
       body: decodeBinaryHex(m.msg_body ?? ''),
+      leafIndex: m.leaf_index,
+      hash: m.hash,
       originDomainId: m.origin,
       destinationDomainId: m.destination,
       originChainId: domainToChain[m.origin],
@@ -96,8 +97,8 @@ function decodeBinaryHex(b: string) {
 }
 
 function getMessageStatus(m: MessageEntry | MessageStubEntry) {
-  const { delivered_messages, message_states } = m;
-  if (delivered_messages) {
+  const { delivered_message, message_states } = m;
+  if (delivered_message) {
     return MessageStatus.Delivered;
   } else if (message_states.length > 0) {
     const latestState = message_states.at(-1);

src/features/search/types.ts

@@ -49,16 +49,17 @@ export interface MessageStubEntry {
   sender: string; // binary e.g. \\x123
   timestamp: string; // e.g. "2022-08-28T17:30:15"
   transaction: TransactionEntry; // origin transaction
-  delivered_messages: DeliveredMessageStubEntry | null | undefined;
+  delivered_message: DeliveredMessageStubEntry | null | undefined;
   message_states: MessageStateEntry[];
 }
 
 export interface MessageEntry extends MessageStubEntry {
   outbox_address: string; // binary e.g. \\x123
-  leaf_index: number;
   msg_body: string | null | undefined; // binary e.g. \\x123
+  hash: string; // message hash, not related to tx
+  leaf_index: number;
   origin_tx_id: number;
-  delivered_messages: DeliveredMessageEntry | null | undefined;
+  delivered_message: DeliveredMessageEntry | null | undefined;
 }
 
 export interface MessagesStubQueryResult {

src/types.ts

@@ -27,8 +27,9 @@ export interface MessageStub {
 }
 
 export interface Message extends MessageStub {
-  leafIndex: number;
   body: string;
+  leafIndex: number;
+  hash: string; // message hash, not related to txs
   originTransaction: PartialTransactionReceipt;
   destinationTransaction?: PartialTransactionReceipt;
 }