feat: ens name and avatar support

package.json

@@ -5,10 +5,10 @@
   "proxy": "https://api.thegraph.com",
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@davatar/react": "^1.8.1",
     "@indexed-finance/indexed.js": "^1.0.45",
     "@indexed-finance/narwhal-sdk": "^1.0.1",
     "@indexed-finance/subgraph-clients": "^0.0.18",
-    "@metamask/jazzicon": "^2.0.0",
     "@octokit/core": "^3.5.1",
     "@reduxjs/toolkit": "^1.5.0",
     "@uiw/react-md-editor": "^3.4.9",

src/components/atomic/molecules/JazzIcon.tsx

@@ -2,12 +2,10 @@ import { Dropdown, Menu, notification } from "antd";
 import { ExternalLink } from "components/atomic/atoms";
 import { actions } from "features";
 import { useBreakpoints, useTranslator } from "hooks";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { useWeb3React } from "@web3-react/core";
-import ReactDOM from "react-dom";
-import jazzicon from "@metamask/jazzicon";
-
+import Davatar from "@davatar/react";
 interface Props {
   address: string;
   isWalletIcon?: boolean;
@@ -17,7 +15,6 @@ export function JazzIcon({ address, isWalletIcon = false }: Props) {
   const tx = useTranslator();
   const { deactivate } = useWeb3React();
   const dispatch = useDispatch();
-  const blockie = useRef<null | HTMLSpanElement>(null);
   const handleDisconnect = useCallback(() => {
     deactivate();
     dispatch(actions.userDisconnected());
@@ -28,36 +25,10 @@ export function JazzIcon({ address, isWalletIcon = false }: Props) {
     });
   }, [dispatch, deactivate, tx]);
   const breakpoints = useBreakpoints();
-  const inner = <span ref={blockie} />;
-
-  // Effect:
-  // Use refs to integrate the third party library for displaying a wallet identicon.
-  useEffect(() => {
-    const _blockie = blockie.current;
-    let element: any;
-
-    if (_blockie) {
-      const parsedAddress = parseInt(address.slice(2, 10), 16);
-
-      element = jazzicon(28, parsedAddress);
-      element.style.display = "block";
-      element.style.border = "2px solid #ccccff";
-      element.style.top = "-4px";
-
-      _blockie.appendChild(element);
-    }
-
-    return () => {
-      if (element) {
-        element.remove();
-      }
-
-      if (_blockie) {
-        ReactDOM.unmountComponentAtNode(_blockie);
-      }
-    };
-  }, [address, breakpoints]);
 
+  const getDavatar = () => (
+    <Davatar size={30} address={address} generatedAvatarType="jazzicon" />
+  );
   return isWalletIcon ? (
     <Dropdown
       arrow={true}
@@ -75,11 +46,11 @@ export function JazzIcon({ address, isWalletIcon = false }: Props) {
         </Menu>
       }
     >
-      {inner}
+      <span>{getDavatar()}</span>
     </Dropdown>
   ) : (
     <ExternalLink to={`https://etherscan.io/tx/${address}`} withIcon={false}>
-      {inner}
+      {getDavatar()}
     </ExternalLink>
   );
 }

src/components/atomic/molecules/ServerConnection.tsx

@@ -6,13 +6,15 @@ import { selectors } from "features";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { useTranslator } from "hooks";
+import useENS from "../../../hooks/useENS";
 
 interface Props {
   showText?: boolean;
 }
 
 export function ServerConnection({ showText = false }: Props) {
   const tx = useTranslator();
+  const { ensName } = useENS();
   const userAddress = useSelector(selectors.selectUserAddress);
   const isUserConnected = useSelector(selectors.selectUserConnected);
   const isServerConnected = useSelector(selectors.selectConnected);
@@ -55,7 +57,7 @@ export function ServerConnection({ showText = false }: Props) {
     >
       <Space>
         <ConnectionIcon style={{ position: "relative", top: 2 }} />
-        {showText && connectionText}
+        {showText && (ensName || connectionText)}
       </Space>
     </Typography.Title>
   );

src/declarations.d.ts

@@ -5,7 +5,5 @@ declare module "colorthief";
 declare module "coingecko-api";
 declare module "fortmatic";
 declare module "md-2-json";
-declare module "react-identicons";
-declare module "@metamask/jazzicon";
 declare module "ssl-root-cas/latest";
 declare module "*.md";

src/hooks/useENS.ts

@@ -0,0 +1,24 @@
+import { ethers } from "ethers";
+import { useEffect, useState } from "react";
+import { useWeb3React } from "@web3-react/core";
+
+const useENS = () => {
+  const [ensName, setENSName] = useState<string | null>(null);
+  const { connector, account } = useWeb3React();
+
+  useEffect(() => {
+    const resolveENS = async () => {
+      if (connector && account && ethers.utils.isAddress(account)) {
+        const _provider = await connector.getProvider();
+        const provider = new ethers.providers.Web3Provider(_provider, 1);
+        const ensName = await provider.lookupAddress(account);
+        if (ensName) setENSName(ensName);
+      }
+    };
+    resolveENS();
+  }, [account, connector]);
+
+  return { ensName };
+};
+
+export default useENS;