feat: add sdk resolve address to domain

next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 
-const { version } = require('./package.json')
+const { version } = require('./package.json');
 
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = process.env.NODE_ENV !== 'production';
 
 const securityHeaders = [
   {
@@ -27,7 +27,7 @@ const securityHeaders = [
       isDev ? " 'unsafe-eval'" : ''
     }; connect-src *; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'`,
   },
-]
+];
 
 const nextConfig = {
   async headers() {
@@ -36,7 +36,7 @@ const nextConfig = {
         source: '/(.*)',
         headers: securityHeaders,
       },
-    ]
+    ];
   },
 
   env: {
@@ -45,6 +45,7 @@ const nextConfig = {
 
   reactStrictMode: true,
   swcMinify: true,
-}
+  transpilePackages: ['@web3-name-sdk/core'],
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -11,6 +11,7 @@
     "@hyperlane-xyz/widgets": "4.1.0",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@tanstack/react-query": "^5.35.5",
+    "@web3-name-sdk/core": "^0.2.0",
     "bignumber.js": "^9.1.2",
     "buffer": "^6.0.3",
     "ethers": "^5.7.2",
@@ -23,6 +24,7 @@
     "react-toastify": "^9.1.1",
     "react-tooltip": "^5.26.3",
     "urql": "^3.0.3",
+    "viem": "^2.18.2",
     "yaml": "^2.4.2",
     "zod": "^3.21.2",
     "zustand": "4.3.8"

src/features/messages/cards/AddressMapDomainRow.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+import { isZeroishAddress } from '@hyperlane-xyz/utils';
+
+import { CopyButton } from '../../../components/buttons/CopyButton';
+import { resolveAddressToDomain } from '../utils';
+
+interface Props {
+  label: string;
+  address: string;
+  blur: boolean;
+  queryChainId: number;
+  displayWidth?: string;
+}
+
+export function AddressMapDomainRow({
+  label,
+  address,
+  blur,
+  queryChainId,
+  displayWidth = 'w-64 sm:w-64',
+}: Props) {
+  const [domain, setDomain] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (isZeroishAddress(address)) {
+      return;
+    }
+    resolveAddressToDomain(address, queryChainId)
+      .then((res) => {
+        if (res) {
+          setDomain(res);
+        }
+      })
+      .catch((err) => {
+        console.error('err: ', err);
+      });
+  }, [address, queryChainId]);
+
+  return (
+    <div className={`flex items-center pl-px font-light`}>
+      <label className={`text-sm text-gray-500 w-16`}>{label}</label>
+      <div
+        className={`text-sm ml-1 truncate ${displayWidth} ${blur && 'blur-xs'}`}
+        title={domain ? `${domain} ${address}` : address}
+      >
+        <span>{domain ?? address}</span>
+      </div>
+      <CopyButton copyValue={address} width={13} height={13} classes="ml-1.5" />
+    </div>
+  );
+}

src/features/messages/cards/ContentDetailsCard.tsx

@@ -12,6 +12,7 @@ import { Message } from '../../../types';
 import { logger } from '../../../utils/logger';
 import { tryUtf8DecodeBytes } from '../../../utils/string';
 
+import { AddressMapDomainRow } from './AddressMapDomainRow';
 import { CodeBlock, LabelAndCodeBlock } from './CodeBlock';
 import { KeyValueRow } from './KeyValueRow';
 
@@ -89,21 +90,19 @@ export function ContentDetailsCard({
           blurValue={blur}
         />
         <KeyValueRow label="Nonce:" labelWidth="w-16" display={nonce.toString()} blurValue={blur} />
-        <KeyValueRow
+        <AddressMapDomainRow
           label="Sender:"
-          labelWidth="w-16"
-          display={sender}
+          address={sender}
+          blur={blur}
+          queryChainId={originDomainId}
           displayWidth="w-64 sm:w-80"
-          showCopy={true}
-          blurValue={blur}
         />
-        <KeyValueRow
+        <AddressMapDomainRow
           label="Recipient:"
-          labelWidth="w-16"
-          display={recipient}
+          address={recipient}
+          blur={blur}
+          queryChainId={destinationDomainId}
           displayWidth="w-64 sm:w-80"
-          showCopy={true}
-          blurValue={blur}
         />
       </div>
       <div>

src/features/messages/cards/TransactionCard.tsx

@@ -17,6 +17,7 @@ import { getChainDisplayName, isEvmChain } from '../../chains/utils';
 import { debugStatusToDesc } from '../../debugger/strings';
 import { MessageDebugResult } from '../../debugger/types';
 
+import { AddressMapDomainRow } from './AddressMapDomainRow';
 import { LabelAndCodeBlock } from './CodeBlock';
 import { KeyValueRow } from './KeyValueRow';
 
@@ -200,7 +201,7 @@ function TransactionDetails({
   const multiProvider = useMultiProvider();
 
   const { hash, from, timestamp, blockNumber } = transaction;
-
+  const queryChainId = chainId && chainId !== domainId ? Number(chainId) : domainId;
   const txExplorerLink =
     hash && !new BigNumber(hash).isZero()
       ? multiProvider.tryGetExplorerTxUrl(chainId, { hash })
@@ -222,14 +223,7 @@ function TransactionDetails({
         showCopy={true}
         blurValue={blur}
       />
-      <KeyValueRow
-        label="From:"
-        labelWidth="w-16"
-        display={from}
-        displayWidth="w-60 sm:w-64"
-        showCopy={true}
-        blurValue={blur}
-      />
+      <AddressMapDomainRow label="From:" address={from} blur={blur} queryChainId={queryChainId} />
       {!!timestamp && (
         <KeyValueRow
           label="Time:"

src/features/messages/utils.ts

@@ -1,3 +1,5 @@
+import { createWeb3Name } from '@web3-name-sdk/core';
+
 import { fromBase64, toBase64 } from '@hyperlane-xyz/utils';
 
 import { Message, MessageStub } from '../../types';
@@ -9,3 +11,12 @@ export function serializeMessage(msg: MessageStub | Message): string | undefined
 export function deserializeMessage<M extends MessageStub>(data: string | string[]): M | undefined {
   return fromBase64<M>(data);
 }
+
+export async function resolveAddressToDomain(address: string, chainId: number) {
+  const web3Name = createWeb3Name();
+  const domain = await web3Name.getDomainName({
+    address,
+    queryChainIdList: [chainId],
+  });
+  return domain;
+}