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

package.json

@@ -33,6 +33,7 @@
     "next-redux-cookie-wrapper": "^2.1.2",
     "next-redux-wrapper": "^7.0.5",
     "react": "^18.0.0",
+    "react-blockies": "^1.4.1",
     "react-dom": "^18.0.0",
     "react-hotjar": "^4.0.0",
     "react-redux": "^7.2.6",
@@ -43,6 +44,7 @@
     "@types/lodash": "^4.14.178",
     "@types/node": "^17.0.14",
     "@types/react": "^18.0.0",
+    "@types/react-blockies": "^1.4.1",
     "@types/react-dom": "^18.0.0",
     "@types/react-redux": "^7.1.22",
     "cypress": "^9.5.0",

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/AddressAvatar.tsx

@@ -0,0 +1,34 @@
+import { Avatar, AvatarProps } from "@mui/material";
+import { memo } from "react";
+import { ensApi } from "../../src/redux/slices/ensResolver.slice";
+import Blockies from "react-blockies";
+import {getAddress} from '@ethersproject/address';
+
+interface AddressAvatarProps {
+  address: string;
+  AvatarProps?: AvatarProps;
+}
+
+export default memo(function AddressAvatar({
+  address,
+  AvatarProps = {},
+}: AddressAvatarProps) {
+  const { data: ensAvatarUrl } = ensApi.useLookupAvatarQuery(address);
+  if (ensAvatarUrl) {
+    return (
+      <Avatar
+        alt="ens avatar"
+        variant="rounded"
+        src={ensAvatarUrl.avatar}
+        {...AvatarProps}
+      />
+    );
+  } else {
+    return (
+      <Avatar alt="generated blockie avatar" variant="rounded" {...AvatarProps}>
+        {/* Read about the Blockies API here: https://github.com/stephensprinkle-zz/react-blockies */}
+        <Blockies seed={getAddress(address)} size={12} scale={3} />
+      </Avatar>
+    );
+  }
+});

src/components/AddressBook.tsx

@@ -11,6 +11,7 @@ import {
   SvgIconProps,
   TextField,
   Tooltip,
+  Avatar,
 } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import StarIcon from "@mui/icons-material/Star";
@@ -23,18 +24,24 @@ 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<{
   network: Network;
   address: string;
+  description: any;
   iconProps?: SvgIconProps;
-}> = ({ network, address, iconProps }) => {
+}> = ({ network, address, iconProps, description }) => {
   const entry = useAppSelector((state) =>
     addressBookSelectors.selectById(state, createEntryId(network, address))
   );
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
+  const avatarUrl = ensApi.useLookupAvatarQuery(
+    address
+  )
+
   return (
     <>
       <Tooltip
@@ -52,8 +59,10 @@ export const AddressBookButton: FC<{
         network={network}
         address={address}
         open={isDialogOpen}
+        description={description}
         handleClose={() => setIsDialogOpen(false)}
       />
+      {avatarUrl.data ? <Avatar alt={address} src={avatarUrl.data?.avatar} /> : ''}
     </>
   );
 };
@@ -62,14 +71,16 @@ export const AddressBookDialog: FC<{
   network: Network;
   address: string;
   open: boolean;
+  description: string;
   handleClose: () => void;
-}> = ({ network, address, open, handleClose }) => {
+}> = ({ network, address, open, handleClose, description }) => {
   const dispatch = useAppDispatch();
   const existingEntry = useAppSelector((state) =>
     addressBookSelectors.selectById(state, createEntryId(network, address))
   );
 
-  const getInitialNameTag = () => existingEntry?.nameTag ?? "";
+  const getInitialNameTag = () => existingEntry?.nameTag ??  description ?? "";
+
   const [nameTag, setNameTag] = useState<string>(getInitialNameTag());
 
   // Fixes: https://github.com/superfluid-finance/superfluid-console/issues/21
@@ -112,7 +123,6 @@ export const AddressBookDialog: FC<{
         </Box>
         <Divider />
         <DialogContent>
-          <DialogContentText></DialogContentText>
           <TextField
             autoFocus
             margin="dense"
@@ -121,7 +131,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

@@ -67,9 +67,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 () => {
@@ -140,6 +138,8 @@ const SearchDialog: FC<{ open: boolean; close: () => void }> = ({
                         passHref
                       >
                         <ListItemButton component="a">
+                         <h4>{account.ENS}</h4>
+                          <h1 style={{opacity: '1%'}}>`&apos;`</h1>
                           <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,36 @@
+import { ensApi } from "../redux/slices/ensResolver.slice";
+import {useMemo} from "react";
+import {ethers} from "ethers";
+
+interface AddressNameResult {
+  addressChecksummed: string;
+  name: string;
+  avatar: string;
+}
+
+export const useAddressName = (address: string): AddressNameResult => {
+
+  const isSearchTermAddress = useMemo(
+    () => ethers.utils.isAddress(address),
+    [address]
+  );
+
+  if(isSearchTermAddress){
+    const ensLookupQuery = ensApi.useLookupAddressQuery(address);
+    return {
+      addressChecksummed: address,
+      name: ensLookupQuery.data?.name ?? "",
+      avatar: "",
+    };
+  }
+  else{
+    const ensAddressQuery = ensApi.useResolveNameQuery(address);
+    return {
+      addressChecksummed: ensAddressQuery.data?.address ?? "",
+      name: address,
+      avatar: '',
+    };
+  }
+};
+
+

src/hooks/useSearch.ts

@@ -1,6 +1,7 @@
 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";
@@ -22,7 +23,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);
@@ -119,7 +123,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.data?.name
+
   const prefetchStreamsQuery = sfSubgraph.usePrefetch("streams");
   const prefetchIndexesQuery = sfSubgraph.usePrefetch("indexes");
   const prefetchIndexSubscriptionsQuery =
@@ -146,6 +150,7 @@ const AccountPage: NextPage = () => {
         {network && accountQuery.data ? (
           <Stack direction="row" alignItems="center">
             <AddressBookButton
+              description={''}
               network={network}
               address={accountQuery.data.id}
             />
@@ -155,12 +160,21 @@ const AccountPage: NextPage = () => {
               component="h1"
               sx={{ mx: 1 }}
             >
-              {addressBookEntry
+                {
+                  ensName ?
+                  <>
+                  {ensName}
+                  <br />
+                  </>
+                  :
+                  ''
+                }
+                {addressBookEntry
                 ? addressBookEntry.nameTag
                 : 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";

src/redux/slices/addressBook.slice.ts

@@ -5,6 +5,7 @@ import {
 import { Network } from '../networks';
 import {RootState} from "../store";
 import {REHYDRATE} from "redux-persist";
+import { add } from 'lodash';
 
 export interface AddressBookEntry {
   chainId: number,