feat: add ens name (#142)

aave · Nov 11, 2021 · b36290c · b36290c
1 parent 731a54d
commit b36290c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/src/components/menu/AddressInfo/index.tsx b/src/components/menu/AddressInfo/index.tsx
@@ -12,6 +12,7 @@ import ConnectButton from '../../ConnectButton';
 
 import staticStyles from './style';
 import messages from './messages';
+import useGetEnsName from '../../../libs/hooks/use-get-ens-name';
 
 export default function AddressInfo() {
   const intl = useIntl();
@@ -24,6 +25,12 @@ export default function AddressInfo() {
     currentProviderName,
     availableAccounts,
   } = useUserWalletDataContext();
+  const { ensName } = useGetEnsName(currentAccount);
+  const ensNameAbbreviated = ensName
+    ? ensName.length > 18
+      ? textCenterEllipsis(ensName, 12, 3)
+      : ensName
+    : undefined;
   const { closeMobileMenu } = useMenuContext();
 
   const [visible, setVisible] = useState(false);
@@ -69,7 +76,9 @@ export default function AddressInfo() {
               type="button"
             >
               <p>{formattedNetworkName}</p>
-              <span>{textCenterEllipsis(currentAccount, 4, 4)}</span>
+              <span>
+                {ensNameAbbreviated ? ensNameAbbreviated : textCenterEllipsis(currentAccount, 4, 4)}
+              </span>
             </button>
           }
         >
@@ -80,6 +89,7 @@ export default function AddressInfo() {
                 <span>{intl.formatMessage(networkMessage, { name: networkName })}</span>
               </p>
               <p className="AddressInfo__content-address">{currentAccount}</p>
+              {ensName ? <p className="AddressInfo__content-ens">{ensName}</p> : <></>}
             </div>
 
             <Link

diff --git a/src/components/menu/AddressInfo/style.ts b/src/components/menu/AddressInfo/style.ts
@@ -95,6 +95,15 @@ const staticStyles = css.global`
         font-size: $regular;
       }
     }
+    &__content-ens {
+      font-size: $small;
+      word-break: break-all;
+      text-align: center;
+      margin-top: 12px;
+      @include respond-to(sm) {
+        font-size: $regular;
+      }
+    }
 
     &__contentButton {
       font-weight: 300;

diff --git a/src/libs/hooks/use-get-ens-name.tsx b/src/libs/hooks/use-get-ens-name.tsx
@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+import { Network } from '@aave/protocol-js';
+import { getProvider } from '../../helpers/markets/markets-data';
+
+const mainnetProvider = getProvider(Network.mainnet);
+
+const useGetEnsName = (address: string) => {
+  const [ensName, setEnsName] = useState<string | undefined>(undefined);
+
+  const getRecord = async (address: string) => {
+    try {
+      const name = await mainnetProvider.lookupAddress(address);
+      setEnsName(name);
+    } catch (error) {
+      console.error('ENS lookup error', error);
+    }
+  };
+
+  useEffect(() => {
+    if (address) {
+      getRecord(address);
+    } else {
+      setEnsName(undefined);
+    }
+  }, [address]);
+
+  return { ensName };
+};
+
+export default useGetEnsName;