feat: add ENS resolution and update dependencies

package.json

@@ -130,5 +130,6 @@
       "cross-spawn@<7.0.5": ">=7.0.5",
       "nanoid@<3.3.8": "3.3.8"
     }
-  }
+  },
+  "packageManager": "[email protected]+sha512.1acb565e6193efbebda772702950469150cf12bcc764262e7587e71d19dc98a423dff9536e57ea44c49bdf790ff694e83c27be5faa23d67e0c033b583be4bfcf"
 }

packages/app/package.json

@@ -41,6 +41,7 @@
     "dayjs": "1.11.10",
     "dexie": "4.0.9",
     "dexie-observable": "4.0.1-beta.13",
+    "ethers": "5.7.2",
     "events": "3.3.0",
     "fake-indexeddb": "4.0.2",
     "framer-motion": "10.16.4",
@@ -57,6 +58,7 @@
     "react-qr-code": "2.0.12",
     "react-router-dom": "6.26.2",
     "tai64": "1.0.0",
+    "uuid": "^9.0.1",
     "vite-plugin-markdown": "2.2.0",
     "xstate": "4.38.2",
     "yup": "1.4.0"

packages/app/src/systems/Account/components/EthAddress/EthAddress.tsx

@@ -1,8 +1,9 @@
 import type { ThemeUtilsCSS } from '@fuel-ui/css';
 import { cssObj } from '@fuel-ui/css';
-import { Box, Copyable, Text, Tooltip } from '@fuel-ui/react';
+import { Avatar, Box, Copyable, Text, Tooltip } from '@fuel-ui/react';
 import { bn } from 'fuels';
 import { isValidEthAddress, shortAddress } from '~/systems/Core';
+import { useEns } from '../../hooks/useEns';
 
 export type EthAddressProps = {
   address: string;
@@ -12,26 +13,50 @@ export type EthAddressProps = {
 export const EthAddress = ({ address, css }: EthAddressProps) => {
   const isValidAddress = isValidEthAddress(address);
   const ethAddress = isValidAddress ? bn(address).toHex(20) : '';
+  const { name: ensName, avatar: ensAvatar, loading } = useEns(ethAddress);
 
   return (
-    <Box.Flex css={styles.root}>
+    <Box.Flex css={{ ...styles.root, ...css }} gap="$2" align="center">
+      {ensAvatar ? (
+        <Box css={styles.avatar}>
+          <img
+            src={ensAvatar}
+            alt={ensName || address}
+            style={{ width: '100%', height: '100%', borderRadius: '50%' }}
+          />
+        </Box>
+      ) : (
+        <Avatar.Generated
+          size="sm"
+          hash={ethAddress}
+          aria-label={ensName || address}
+        />
+      )}
       <Copyable value={address} aria-label={address}>
         <Tooltip content={address} className="address_tooltip" side="top">
-          <Text css={css}>{shortAddress(ethAddress)}</Text>
+          <Text>
+            {loading ? 'Loading...' : ensName || shortAddress(ethAddress)}
+          </Text>
         </Tooltip>
       </Copyable>
     </Box.Flex>
   );
 };
 
 const styles = {
-  root: {
-    '.address_tooltip': cssObj({
+  root: cssObj({
+    '.address_tooltip': {
       fontSize: '$xs',
       lineHeight: '$4',
       maxWidth: 125,
       textAlign: 'center',
       wordWrap: 'break-word',
-    }),
-  },
+    },
+  }),
+  avatar: cssObj({
+    width: '24px',
+    height: '24px',
+    borderRadius: '$full',
+    overflow: 'hidden',
+  }),
 };

packages/app/src/systems/Account/hooks/index.tsx

@@ -1,6 +1,10 @@
 export * from './useAccounts';
 export * from './useAccountForm';
+export * from './useAccountFormName';
 export * from './useAddAccount';
 export * from './useEditAccount';
+export * from './useExplorerLink';
+export * from './useExportAccount';
 export * from './useImportAccount';
 export * from './useImportAccountForm';
+export * from './useEns';

packages/app/src/systems/Account/hooks/useEns.ts

@@ -0,0 +1,72 @@
+import { ethers } from 'ethers';
+import { useEffect, useState } from 'react';
+import { isValidEthAddress } from '~/systems/Core';
+
+export type EnsData = {
+  name: string | null;
+  avatar: string | null;
+  loading: boolean;
+  error: Error | null;
+};
+
+export function useEns(address?: string) {
+  const [ensData, setEnsData] = useState<EnsData>({
+    name: null,
+    avatar: null,
+    loading: false,
+    error: null,
+  });
+
+  useEffect(() => {
+    async function resolveEns() {
+      if (!address || !isValidEthAddress(address)) {
+        setEnsData({
+          name: null,
+          avatar: null,
+          loading: false,
+          error: null,
+        });
+        return;
+      }
+
+      setEnsData((prev) => ({ ...prev, loading: true, error: null }));
+
+      try {
+        // Using Ethereum mainnet for ENS resolution
+        const provider = new ethers.providers.JsonRpcProvider(
+          'https://mainnet.infura.io/v3/84842078b09946638c03157f83405213'
+        );
+
+        // Get ENS name for the address (reverse lookup)
+        const name = await provider.lookupAddress(address);
+
+        // Get avatar if ENS name exists
+        let avatar = null;
+        if (name) {
+          const resolver = await provider.getResolver(name);
+          if (resolver) {
+            avatar = await resolver.getText('avatar');
+          }
+        }
+
+        setEnsData({
+          name,
+          avatar,
+          loading: false,
+          error: null,
+        });
+      } catch (error) {
+        setEnsData({
+          name: null,
+          avatar: null,
+          loading: false,
+          error: error as Error,
+        });
+      }
+    }
+
+    resolveEns();
+  }, [address]);
+
+  return ensData;
+}