Fix #78: Decode warp route messages.

src/features/messages/cards/ContentDetailsCard.tsx

@@ -29,6 +29,7 @@ export function ContentDetailsCard({
     recipient,
     body,
     decodedBody,
+    warpRouteDetails,
   },
   blur,
 }: Props) {
@@ -106,6 +107,39 @@ export function ContentDetailsCard({
           blurValue={blur}
         />
       </div>
+      {warpRouteDetails && (
+        <>
+          <div className="mt-2 border-t border-gray-200 pt-4">
+            <h4 className="mb-3 text-sm font-medium text-gray-500">Warp Route Details:</h4>
+            <div className="flex flex-wrap gap-x-6 gap-y-4">
+              <KeyValueRow
+                label="Token:"
+                labelWidth="w-16"
+                display={warpRouteDetails.token}
+                displayWidth="w-64 sm:w-80"
+                showCopy={true}
+                blurValue={blur}
+              />
+              <KeyValueRow
+                label="Amount:"
+                labelWidth="w-16"
+                display={warpRouteDetails.amount}
+                displayWidth="w-64 sm:w-80"
+                showCopy={true}
+                blurValue={blur}
+              />
+              <KeyValueRow
+                label="Fee Paid:"
+                labelWidth="w-16"
+                display={warpRouteDetails.totalPayment}
+                displayWidth="w-64 sm:w-80"
+                showCopy={true}
+                blurValue={blur}
+              />
+            </div>
+          </div>
+        </>
+      )}
       <div>
         <div className="flex items-center">
           <label className="text-sm text-gray-500">Message Content:</label>

src/features/messages/queries/parse.ts

@@ -14,6 +14,8 @@ import {
   MessagesStubQueryResult,
 } from './fragments';
 
+import { parseWarpRouteDetails } from '../../../utils/token';
+
 /**
  * ========================
  * RESULT PARSING UTILITIES
@@ -111,6 +113,12 @@ function parseMessage(
 
     const body = postgresByteaToString(m.message_body ?? '');
     const decodedBody = tryUtf8DecodeBytes(body);
+    const warpRouteDetails = parseWarpRouteDetails(
+      body,
+      { to: m.origin_tx_recipient, from: m.origin_tx_sender },
+      { totalPayment: m.total_payment },
+      originMetadata
+    );
 
     return {
       ...stub,
@@ -151,6 +159,7 @@ function parseMessage(
       totalGasAmount: m.total_gas_amount.toString(),
       totalPayment: m.total_payment.toString(),
       numPayments: m.num_payments,
+      warpRouteDetails: warpRouteDetails ?? undefined,
     };
   } catch (error) {
     logger.error('Error parsing message', error);

src/types.ts

@@ -53,10 +53,17 @@ export interface Message extends MessageStub {
   totalGasAmount?: string;
   totalPayment?: string;
   numPayments?: number;
+  warpRouteDetails?: WarpRouteDetails;
 }
 
 export interface ExtendedLog extends providers.Log {
   timestamp?: number;
   from?: Address;
   to?: Address;
 }
+
+export interface WarpRouteDetails {
+  token: string;
+  amount: string;
+  totalPayment: string;
+}

src/utils/token.ts

@@ -0,0 +1,26 @@
+import { parseWarpRouteMessage } from '@hyperlane-xyz/utils';
+import { utils } from 'ethers';
+import { postgresByteaToAddress } from '../features/messages/queries/encoding';
+import { WarpRouteDetails } from '../types';
+
+export function parseWarpRouteDetails(
+  messageBody: string,
+  originTx: { to?: string; from?: string } = {},
+  gasInfo: { totalPayment: any },
+  metadata?: any
+): WarpRouteDetails | undefined {
+  try {
+    if (!messageBody?.trim()) throw new Error('Invalid message body');
+
+    const parsedMessage = parseWarpRouteMessage(messageBody);
+
+    return {
+      token: originTx?.to ? postgresByteaToAddress(originTx.to, metadata) : 'Unknown Token',
+      amount: utils.formatEther(parsedMessage.amount.toString()),
+      totalPayment: utils.formatEther(gasInfo.totalPayment.toString())
+    };
+  } catch (error) {
+    console.error('Failed to parse token details:', error, 'Message body:', messageBody);
+    return undefined;
+  }
+}