feat: show received amount for warp transfers with different scales

src/features/messages/MessageTable.tsx

@@ -171,6 +171,7 @@ export const MessageSummaryRow = memo(function MessageSummaryRow({
     ? warpRouteDetails.originToken.symbol !== warpRouteDetails.destinationToken.symbol ||
       warpRouteDetails.originToken.logoURI !== warpRouteDetails.destinationToken.logoURI
     : false;
+  const showWarpTooltip = isDifferentWarpToken || !!warpRouteDetails?.destAmount;
   return (
     <>
       <LinkCell
@@ -257,7 +258,7 @@ export const MessageSummaryRow = memo(function MessageSummaryRow({
             <div
               className={styles.iconText}
               data-tooltip-id="root-tooltip"
-              data-tooltip-content={`${warpRouteDetails.amount} ${warpRouteDetails.originToken.symbol}${isDifferentWarpToken ? ` → ${warpRouteDetails.destinationToken.symbol}` : ''}`}
+              data-tooltip-content={`${formatAmountCompact(warpRouteDetails.amount)} ${warpRouteDetails.originToken.symbol}${showWarpTooltip ? ` → ${formatAmountCompact(warpRouteDetails.destAmount ?? warpRouteDetails.amount)} ${warpRouteDetails.destinationToken.symbol}` : ''}`}
             >
               {formatAmountCompact(warpRouteDetails.amount)} {warpRouteDetails.originToken.symbol}
             </div>

src/features/messages/cards/WarpTransferDetailsCard.tsx

@@ -6,6 +6,7 @@ import { TokenIcon } from '../../../components/icons/TokenIcon';
 import { SectionCard } from '../../../components/layout/SectionCard';
 import { useChainMetadataResolver } from '../../../metadataStore';
 import { Message, MessageStub, WarpRouteDetails } from '../../../types';
+import { formatAmountWithCommas } from '../../../utils/amount';
 import { getBlockExplorerAddressUrl } from '../../../utils/url';
 import { isCollateralRoute } from '../collateral/utils';
 import { KeyValueRow } from './KeyValueRow';
@@ -55,7 +56,7 @@ export function WarpTransferDetailsCard({ message, warpRouteDetails, blur }: Pro
 
   if (!warpRouteDetails) return null;
 
-  const { amount, transferRecipient, originToken, destinationToken } = warpRouteDetails;
+  const { amount, destAmount, transferRecipient, originToken, destinationToken } = warpRouteDetails;
   const isCollateral = isCollateralRoute(destinationToken.standard);
   const isDifferentToken =
     originToken.symbol !== destinationToken.symbol ||
@@ -91,10 +92,19 @@ export function WarpTransferDetailsCard({ message, warpRouteDetails, blur }: Pro
             <KeyValueRow
               label="Amount:"
               labelWidth="w-28 sm:w-32"
-              display={`${amount} ${originToken.symbol}`}
+              display={`${formatAmountWithCommas(amount)} ${originToken.symbol}`}
               blurValue={blur}
               showCopy
             />
+            {destAmount && (
+              <KeyValueRow
+                label="Received amount:"
+                labelWidth="w-28 sm:w-32"
+                display={`${formatAmountWithCommas(destAmount)} ${destinationToken.symbol}`}
+                blurValue={blur}
+                showCopy
+              />
+            )}
             <KeyValueRow
               label="Origin token:"
               labelWidth="w-28 sm:w-32"

src/features/messages/utils.ts

@@ -1,3 +1,4 @@
+import { scalesEqual } from '@hyperlane-xyz/sdk';
 import {
   bytesToProtocolAddress,
   fromBase64,
@@ -67,12 +68,28 @@ export function parseWarpRouteMessageDetails(
       decimals: effectiveDecimals,
       scale: originToken.scale,
     });
+    const amount = fromWei(amountParts.amount.toString(), amountParts.decimals);
+
+    // Compute destination amount when scales differ
+    let destAmount: string | null = null;
+    if (
+      (originToken.scale || destinationToken.scale) &&
+      !scalesEqual(originToken.scale, destinationToken.scale)
+    ) {
+      const destDecimals = getEffectiveDecimals(destinationToken, originToken);
+      const destAmountParts = getWarpRouteAmountParts(parsedMessage.amount, {
+        decimals: destDecimals,
+        scale: destinationToken.scale,
+      });
+      destAmount = fromWei(destAmountParts.amount.toString(), destAmountParts.decimals);
+    }
 
     return {
-      amount: fromWei(amountParts.amount.toString(), amountParts.decimals),
+      amount,
+      destAmount,
       transferRecipient: address,
-      originToken: originToken,
-      destinationToken: destinationToken,
+      originToken,
+      destinationToken,
     };
   } catch (err) {
     logger.error(`Error parsing warp route details for ${message.id}:`, err);

src/types.ts

@@ -66,6 +66,7 @@ export type TokenArgsWithWireDecimals = TokenArgs & { wireDecimals: number };
 
 export interface WarpRouteDetails {
   amount: string;
+  destAmount: string | null;
   transferRecipient: string;
   originToken: TokenArgsWithWireDecimals;
   destinationToken: TokenArgsWithWireDecimals;