feat: add ens avatar support (#46)

* feat: add ens avatar support * revert: yarn.lock Co-authored-by: Yoginth <[email protected]>
opynfinance · Jan 7, 2022 · 2389b2b · 2389b2b
1 parent 4652b82
commit 2389b2b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/components/WalletSelector/index.tsx b/src/components/WalletSelector/index.tsx
@@ -31,7 +31,7 @@ type SelectorProps = {
 
 const WalletSelector = ({ buttonClicked }: SelectorProps) => {
   const { handleSelectWallet, connected, address, networkId } = useWallet();
-  const { ensName } = useENS(address);
+  const { ensName, ensAvatar } = useENS(address);
 
   const handleClick = () => {
     buttonClicked?.();
@@ -43,6 +43,18 @@ const WalletSelector = ({ buttonClicked }: SelectorProps) => {
       {connected ? (
         <SecondaryButton onClick={handleClick} variant={'contained'} disableElevation>
           <Circle connected={connected} networkId={networkId} />
+          {ensAvatar && (
+            <img
+              style={{
+                borderRadius: '50%',
+                width: '1.2rem',
+                height: '1.2rem',
+                marginRight: '.50rem',
+              }}
+              src={ensAvatar}
+              alt={address}
+            />
+          )}
           {ensName || formatAddress(address)}
         </SecondaryButton>
       ) : (

diff --git a/src/hooks/useENS.ts b/src/hooks/useENS.ts
@@ -2,10 +2,17 @@ import { useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 import { useWallet } from '.';
 
-type ReturnType = { ensName: string | null };
+const getENSAvatar = async (ensName: string) => {
+  const response = await fetch(`https://metadata.ens.domains/mainnet/avatar/${ensName}/meta`);
+  const data = await response.json();
+  return data.image ?? null;
+};
+
+type ReturnType = { ensName: string | null; ensAvatar: string | null };
 
 export const useENS = (address: string | null | undefined): ReturnType => {
   const [ensName, setENSName] = useState<string | null>(null);
+  const [ensAvatar, setENSAvatar] = useState<string | null>(null);
   const { networkId } = useWallet();
 
   useEffect(() => {
@@ -14,11 +21,13 @@ export const useENS = (address: string | null | undefined): ReturnType => {
         const networkName = networkId === 1 ? 'homestead' : networkId === 42 ? 'kovan' : 'ropsten';
         let provider = new ethers.providers.InfuraProvider(networkName, process.env.REACT_APP_INFURA_API_KEY);
         const ensName = await provider.lookupAddress(address);
+        const ensAvatar = ensName ? await getENSAvatar(ensName) : null;
         if (ensName) setENSName(ensName);
+        if (ensAvatar) setENSAvatar(ensAvatar);
       }
     }
     resolveENS();
   }, [address, networkId]);
 
-  return { ensName };
+  return { ensName, ensAvatar };
 };