added ENS resolver hooks, display results in the console (Ready for review)

src/components/AccountAddress.tsx

@@ -65,7 +65,6 @@ export const AccountAddressFormatted: FC<{
   const addressBookEntry = useAppSelector((state) =>
     addressBookSelectors.selectById(state, createEntryId(network, address))
   );
-
   const parsedAddress = ellipsis
     ? ellipsisAddress(ethers.utils.getAddress(address), ellipsis)
     : ethers.utils.getAddress(address);

src/components/AddressBook.tsx

@@ -4,13 +4,13 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  DialogContentText,
   DialogTitle,
   Divider,
   IconButton,
   SvgIconProps,
   TextField,
   Tooltip,
+  Avatar,
 } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import StarIcon from "@mui/icons-material/Star";
@@ -23,6 +23,7 @@ import {
   getEntryId,
 } from "../redux/slices/addressBook.slice";
 import { Network } from "../redux/networks";
+import { ensApi } from "../redux/slices/ensResolver.slice";
 import { ethers } from "ethers";
 
 export const AddressBookButton: FC<{
@@ -35,6 +36,10 @@ export const AddressBookButton: FC<{
   );
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
+  const avatarUrl = ensApi.useLookupAvatarQuery(
+    address
+  )
+
   return (
     <>
       <Tooltip
@@ -54,6 +59,7 @@ export const AddressBookButton: FC<{
         open={isDialogOpen}
         handleClose={() => setIsDialogOpen(false)}
       />
+      {avatarUrl.currentData ? <Avatar alt={address} src={avatarUrl.currentData?.avatar} /> : ''}
     </>
   );
 };
@@ -70,6 +76,7 @@ export const AddressBookDialog: FC<{
   );
 
   const getInitialNameTag = () => existingEntry?.nameTag ?? "";
+
   const [nameTag, setNameTag] = useState<string>(getInitialNameTag());
 
   // Fixes: https://github.com/superfluid-finance/superfluid-console/issues/21
@@ -112,7 +119,6 @@ export const AddressBookDialog: FC<{
         </Box>
         <Divider />
         <DialogContent>
-          <DialogContentText></DialogContentText>
           <TextField
             autoFocus
             margin="dense"
@@ -121,7 +127,7 @@ export const AddressBookDialog: FC<{
             type="text"
             fullWidth
             variant="standard"
-            value={nameTag}
+            value={`${nameTag}`}
             onChange={(event) => setNameTag(event.target.value)}
           />
         </DialogContent>

src/components/AddressName.tsx

@@ -0,0 +1,29 @@
+import { memo } from "react";
+import { useAddressName } from "../hooks/useAddressENS";
+import {shortenHex} from "../utils/shortenHex";
+
+export interface AddressNameProps {
+  address: string;
+  length?: "short" | "medium" | "long";
+}
+
+export default memo(function AddressName({
+  address,
+  length = "short",
+}: AddressNameProps) {
+  const addressName = useAddressName(address);
+  if (addressName.name) {
+    return <>{addressName.name}</>;
+  } else {
+    return (
+      <>
+        {length === "long"
+          ? addressName.addressChecksummed
+          : shortenHex(
+              addressName.addressChecksummed,
+              length === "medium" ? 8 : 4
+            )}
+      </>
+    );
+  }
+});

src/components/SearchBar.tsx

@@ -20,7 +20,7 @@ const SearchBar: FC<PropsWithChildren<unknown>> = ({ children}) => {
 
 export default SearchBar;
 
-export const searchBarPlaceholderText = "Search any address on any network..."
+export const searchBarPlaceholderText = "Search any ENS, address on any network..."
 
 // NOTE: Search bar UI is inspired by: https://mui.com/components/app-bar/#app-bar-with-a-primary-search-field
 

src/components/SearchDialog.tsx

@@ -45,7 +45,6 @@ const SearchDialog: FC<{ open: boolean; close: () => void }> = ({
   };
 
   const router = useRouter();
-
   const [searchTermVisible, setSearchTermVisible] = useState("");
   const [searchTermDebounced, _setSearchTermDebounced] =
     useState(searchTermVisible);
@@ -67,9 +66,7 @@ const SearchDialog: FC<{ open: boolean; close: () => void }> = ({
     const handleRouteChange = () => {
       handleClose();
     };
-
     router.events.on("routeChangeStart", handleRouteChange);
-
     // If the component is unmounted, unsubscribe
     // from the event with the `off` method:
     return () => {
@@ -139,7 +136,18 @@ const SearchDialog: FC<{ open: boolean; close: () => void }> = ({
                         href={`/${x.network.slugName}/accounts/${account.id}`}
                         passHref
                       >
-                        <ListItemButton component="a">
+                        <ListItemButton component="a"
+                        sx={{ display: 'flex', alignItems: 'flex-start',
+                        flexDirection: 'column', justifyContent: 'flex-start' }}>
+                          {
+                            account.ENS.includes('.') ?
+                            <Typography  sx={{ mr: 2, mb: 0.5 }} variant={"h5"} component="h2">
+                              {account.ENS}
+                            </Typography>
+                            :
+                            ''
+                          }
+
                           <AccountAddressFormatted
                             network={x.network}
                             address={account.id}

src/components/SfAppBar.tsx

@@ -1,7 +1,6 @@
 import {
   Box,
   AppBar,
-  Button,
   Toolbar,
   Container,
   Stack,
@@ -14,7 +13,6 @@ import SearchDialog from "./SearchDialog";
 import Image from "next/image";
 import SearchBar from "./SearchBar";
 import { FC, useState } from "react";
-import SubgraphIcon from "./SubgraphIcon";
 import SettingsIcon from "@mui/icons-material/SettingsOutlined";
 import SettingsDrawer from "./SettingsDrawer";
 

src/hooks/useAddressENS.tsx

@@ -0,0 +1,65 @@
+import { ensApi } from "../redux/slices/ensResolver.slice";
+import { useMemo } from "react";
+import {ethers} from "ethers";
+
+interface AddressNameResult {
+  addressChecksummed: string;
+  name: string;
+  avatar: string;
+  isFetching: boolean;
+}
+
+export const useAddressName = (address: string): AddressNameResult => {
+  const isSearchTermAddress = useMemo(
+    () => ethers.utils.isAddress(address),
+    [address]
+  );
+
+  if(isSearchTermAddress){
+    return useAddress(address);
+  }
+
+  else{
+    return useName(address);
+  }
+};
+
+export const useName = (address: string): AddressNameResult => {
+  try{
+    const ensAddressQuery = ensApi.useResolveNameQuery(address);
+    return {
+      addressChecksummed: ensAddressQuery.currentData?.address ?? "",
+      name: address,
+      avatar: '',
+      isFetching: ensAddressQuery.isFetching,
+    };
+  }
+  catch(e){
+    return {
+      addressChecksummed: address,
+      name: address,
+      avatar: "",
+      isFetching: false,
+    };
+  }
+}
+
+export const useAddress = (address: string): AddressNameResult => {
+  try{
+    const ensLookupQuery = ensApi.useLookupAddressQuery(address);
+    return {
+      addressChecksummed: address,
+      name: ensLookupQuery.data?.name ?? "",
+      avatar: "",
+      isFetching: ensLookupQuery.isFetching,
+    };
+  }
+  catch(e){
+    return {
+      addressChecksummed: address,
+      name: address,
+      avatar: "",
+      isFetching: false,
+    };
+  }
+}

src/hooks/useSearch.ts

@@ -1,9 +1,11 @@
 import {Network, networks, networksByChainId} from "../redux/networks";
 import _ from "lodash";
 import {ethers} from "ethers";
+import { useAddressName } from "./useAddressENS";
 import {useSearchAddressBook} from "./useSearchAddressBook";
 import {SubgraphSearchByAddressResult, useSearchSubgraphByAddress} from "./useSearchSubgraphByAddress";
 import {SubgraphSearchByTokenSymbolResult, useSearchSubgraphByTokenSymbol} from "./useSearchSubgraphByTokenSymbol";
+import { useEffect } from "react";
 import { SerializedError } from "@reduxjs/toolkit";
 
 export type NetworkSearchResult = {
@@ -22,7 +24,10 @@ export type NetworkSearchResult = {
 };
 
 export const useSearch = (searchTerm: string) => {
-  const subgraphSearchByAddressResults = useSearchSubgraphByAddress(searchTerm);
+
+  const searchResults = useAddressName(searchTerm);
+
+  const subgraphSearchByAddressResults = useSearchSubgraphByAddress(searchResults.addressChecksummed);
   const subgraphSearchByTokenSymbolResults =
     useSearchSubgraphByTokenSymbol(searchTerm);
   const addressBookResults = useSearchAddressBook(searchTerm);
@@ -102,7 +107,8 @@ export const useSearch = (searchTerm: string) => {
       network: network,
       isFetching:
         searchByAddressMappedResult.isFetching ||
-        searchByTokenSymbolMappedResult.isFetching,
+        searchByTokenSymbolMappedResult.isFetching ||
+        searchResults.isFetching,
       error:
         searchByAddressMappedResult.error &&
         searchByTokenSymbolMappedResult.error,
@@ -119,7 +125,7 @@ export const useSearch = (searchTerm: string) => {
       accounts: _.uniqBy(
         searchByAddressMappedResult.accounts
           .concat(addressBookResult.accounts)
-          .map((x) => ({...x, id: ethers.utils.getAddress(x.id)})),
+      .map((x) => ({...x, id: ethers.utils.getAddress(x.id), ENS: searchResults.name})),
         (x) => x.id
       ),
     };

src/hooks/useSearchAddressBook.ts

@@ -12,7 +12,7 @@ export const useSearchAddressBook = (searchTerm: string) => {
 
   return networks.map((network) => {
     const addressBookEntries = useAppSelector((state) =>
-      searchTerm !== "" && !isSearchTermAddress
+        searchTerm !== "" && !isSearchTermAddress
         ? addressBookSelectors
           .selectAll(state)
           .filter((x) => x.chainId === network.chainId)

src/hooks/useSearchSubgraphByAddress.ts

@@ -62,7 +62,8 @@ export const useSearchSubgraphByAddress = (searchTerm: string) => {
             addressBytes: searchTerm.toLowerCase(),
           },
         }
-        : skipToken
+        :
+        skipToken
     )
   );
 };

src/pages/[_network]/accounts/[_id].tsx

@@ -34,6 +34,7 @@ import InfoTooltipBtn from "../../../components/InfoTooltipBtn";
 import AccountNetworkSelect from "../../../components/NetworkSelect/AccountNetworkSelect";
 import SkeletonAddress from "../../../components/skeletons/SkeletonAddress";
 import SkeletonNetwork from "../../../components/skeletons/SkeletonNetwork";
+import { ensApi } from "../../../redux/slices/ensResolver.slice";
 import SubgraphQueryLink from "../../../components/SubgraphQueryLink";
 import {
   incomingStreamOrderingDefault,
@@ -64,12 +65,15 @@ import ellipsisAddress from "../../../utils/ellipsisAddress";
 const AccountPage: NextPage = () => {
   const network = useContext(NetworkContext);
   const address = useContext(IdContext);
-
   const accountQuery = sfSubgraph.useAccountQuery({
     chainId: network.chainId,
     id: address,
   });
 
+  const ensAddressQuery = ensApi.useLookupAddressQuery(address);
+
+  const ensName = ensAddressQuery.currentData?.name
+
   const prefetchStreamsQuery = sfSubgraph.usePrefetch("streams");
   const prefetchIndexesQuery = sfSubgraph.usePrefetch("indexes");
   const prefetchIndexSubscriptionsQuery =
@@ -109,7 +113,7 @@ const AccountPage: NextPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tabValue]);
 
-  const addressBookEntry = useAppSelector((state) =>
+  const addressBookEntry = useAppSelector((state: any) =>
     network
       ? addressBookSelectors.selectById(state, createEntryId(network, address))
       : undefined
@@ -149,18 +153,29 @@ const AccountPage: NextPage = () => {
               network={network}
               address={accountQuery.data.id}
             />
+            <Typography
+               data-cy={"ensName"}
+               variant="h4"
+              component="h1"
+               sx={{ mx: 1 }}
+            >
+              {
+                addressBookEntry ?
+                  addressBookEntry.nameTag
+                  :
+                  ensName
+              }
+            </Typography>
             <Typography
               data-cy={"address"}
               variant="h4"
               component="h1"
               sx={{ mx: 1 }}
             >
-              {addressBookEntry
-                ? addressBookEntry.nameTag
-                : ellipsisAddress(
-                    ethers.utils.getAddress(accountQuery.data.id),
-                    6
-                  )}
+              {ellipsisAddress(
+                  ethers.utils.getAddress(accountQuery.data.id),
+                  6
+              )}
             </Typography>
             <CopyIconBtn
               copyText={ethers.utils.getAddress(accountQuery.data.id)}

src/pages/_app.tsx

@@ -5,7 +5,7 @@ import { CacheProvider, EmotionCache } from "@emotion/react";
 import createEmotionCache from "../utils/createEmotionCache";
 import { wrapper } from "../redux/store";
 import SfAppBar from "../components/SfAppBar";
-import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
+import { FC, PropsWithChildren, useEffect, useRef } from "react";
 import Box from "@mui/material/Box";
 import "../styles/graphiql.min.css";
 import "../styles/app.css";