feat: add ens name and avatar support

package.json

@@ -14,6 +14,7 @@
     ]
   },
   "dependencies": {
+    "@davatar/react": "^1.8.1",
     "@ethersproject/providers": "^5.0.12",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",

src/components/Drawer/drawer-content/drawer-content.scss

@@ -14,7 +14,9 @@
 
     .wallet-link {
       margin: 10px;
-
+      display: flex;
+      align-items: center;
+
       p{
         font-family: Montserrat SemiBold;
         font-size: 14px;

src/components/Drawer/drawer-content/index.tsx

@@ -14,11 +14,14 @@ import "./drawer-content.scss";
 import DocsIcon from "../../../assets/icons/stake.svg";
 import GlobeIcon from "../../../assets/icons/wonderglobe.svg";
 import classnames from "classnames";
+import useENS from "src/hooks/useENS";
+import Davatar from "@davatar/react";
 
 function NavContent() {
     const [isActive] = useState();
     const address = useAddress();
     const { bonds } = useBonds();
+    const { ensName } = useENS(address);
 
     const checkPage = useCallback((location: any, page: string): boolean => {
         const currentPath = location.pathname.replace("/", "");
@@ -46,8 +49,9 @@ function NavContent() {
 
                 {address && (
                     <div className="wallet-link">
+                        <Davatar size={20} address={address} style={{ marginRight: 8 }} generatedAvatarType="jazzicon" />
                         <Link href={`https://cchain.explorer.avax.network/address/${address}`} target="_blank">
-                            <p>{shorten(address)}</p>
+                            <p>{ensName || shorten(address)}</p>
                         </Link>
                     </div>
                 )}

src/hooks/useENS.ts

@@ -0,0 +1,21 @@
+import { ethers } from "ethers";
+import { useEffect, useState } from "react";
+
+const useENS = (address: string) => {
+    const [ensName, setENSName] = useState<string | null>(null);
+
+    useEffect(() => {
+        const resolveENS = async () => {
+            if (ethers.utils.isAddress(address)) {
+                const provider = new ethers.providers.JsonRpcProvider("https://cloudflare-eth.com");
+                const ensName = await provider.lookupAddress(address);
+                setENSName(ensName);
+            }
+        };
+        resolveENS();
+    }, [address]);
+
+    return { ensName };
+};
+
+export default useENS;