Merge pull request #2575 from bigint/ens

feat: add ens name and avatar support
Giveth · Mar 16, 2022 · 78f50ee · 78f50ee
2 parents fdec34b + 0d1b0da
commit 78f50ee
Show file tree

Hide file tree

Showing 4 changed files with 331 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.5.0",
+    "@davatar/react": "^1.8.1",
+    "@ethersproject/providers": "^5.5.2",
     "@feathersjs/authentication-client": "^4.5.11",
     "@feathersjs/feathers": "^4.5.11",
     "@feathersjs/rest-client": "^4.5.11",

diff --git a/src/components/layout/MainMenu/RightMenu.jsx b/src/components/layout/MainMenu/RightMenu.jsx
@@ -3,7 +3,9 @@ import Avatar from 'react-avatar';
 import { Link, useLocation } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { Menu, Grid } from 'antd';
+import Davatar from '@davatar/react';
 
+import { useENS } from 'hooks/useENS';
 import { Context as UserContext } from '../../../contextProviders/UserProvider';
 import { Context as Web3Context } from '../../../contextProviders/Web3Provider';
 import { Context as WhiteListContext } from '../../../contextProviders/WhiteListProvider';
@@ -46,6 +48,8 @@ const RightMenu = () => {
     state: { reviewerWhitelistEnabled, delegateWhitelistEnabled, projectOwnersWhitelistEnabled },
   } = useContext(WhiteListContext);
 
+  const { ensName } = useENS(currentUser.address);
+
   const userIsDelegator = currentUser.isDelegator || !delegateWhitelistEnabled;
   const userIsCampaignManager = currentUser.isProjectOwner || !projectOwnersWhitelistEnabled;
   const userIsReviewer = currentUser.isReviewer || !reviewerWhitelistEnabled;
@@ -189,12 +193,25 @@ const RightMenu = () => {
 
       {validProvider && (
         <Menu.Item key="userAddress">
-          <button type="button" className="btn btn-outline-success btn-sm" onClick={switchWallet}>
+          <button
+            type="button"
+            className="d-flex btn btn-outline-success btn-sm"
+            onClick={switchWallet}
+          >
             {walletIcon && currentUser.address && (
               <Avatar className="mr-2" size={25} src={walletIcon} />
             )}
             <span>
-              {currentUser.address ? shortenAddress(currentUser.address) : 'Switch Wallet'}
+              {currentUser.address ? (
+                <span className="d-flex align-items-center">
+                  <span className="mr-1">
+                    <Davatar size={20} address={currentUser.address} />
+                  </span>
+                  <div>{ensName || shortenAddress(currentUser.address)}</div>
+                </span>
+              ) : (
+                'Switch Wallet'
+              )}
             </span>
           </button>
         </Menu.Item>

diff --git a/src/hooks/useENS.jsx b/src/hooks/useENS.jsx
@@ -0,0 +1,19 @@
+import { getDefaultProvider } from '@ethersproject/providers';
+import { useEffect, useState } from 'react';
+
+export function useENS(address) {
+  const [ensName, setENSName] = useState();
+
+  useEffect(() => {
+    async function resolveENS() {
+      if (address) {
+        const provider = await getDefaultProvider();
+        const name = await provider.lookupAddress(address);
+        if (name) setENSName(name);
+      }
+    }
+    resolveENS();
+  }, [address]);
+
+  return { ensName };
+}