Add Nomspace integration

package.json

@@ -211,5 +211,9 @@
     "not ie 11",
     "not dead",
     "not op_mini all"
-  ]
+  ],
+  "dependencies": {
+    "@ensdomains/ensjs": "^2.0.1",
+    "ethers": "^5.5.4"
+  }
 }

src/components/AccountDetails/index.tsx

@@ -23,6 +23,7 @@ interface AccountDetailsProps {
   pendingTransactions: string[]
   confirmedTransactions: string[]
   ENSName?: string
+  nom?: string
   openOptions: () => void
 }
 
@@ -31,6 +32,7 @@ const AccountDetails: FC<AccountDetailsProps> = ({
   pendingTransactions,
   confirmedTransactions,
   ENSName,
+  nom,
   openOptions,
 }) => {
   const { i18n } = useLingui()
@@ -82,7 +84,13 @@ const AccountDetails: FC<AccountDetailsProps> = ({
                 />
               </div>
               <Typography weight={700} variant="lg" className="text-white">
-                {ENSName ? ENSName : account && shortenAddress(account)}
+                {nom && ENSName
+                  ? ENSName + ' (' + nom + ')'
+                  : ENSName
+                  ? ENSName
+                  : nom
+                  ? account && shortenAddress(account) + ' (' + nom + ')'
+                  : account && shortenAddress(account)}
               </Typography>
             </div>
             <div className="flex items-center gap-2 space-x-3">

src/components/Web3Status/index.tsx

@@ -96,7 +96,7 @@ function Web3StatusInner() {
   const { i18n } = useLingui()
   const { account, connector, library } = useWeb3React()
 
-  const { ENSName } = useENSName(account ?? undefined)
+  const { ENSName, nom } = useENSName(account ?? undefined)
 
   const allTransactions = useAllTransactions()
 
@@ -127,7 +127,7 @@ function Web3StatusInner() {
           </div>
         ) : (
           <div className="flex items-center gap-2">
-            <div>{ENSName || shortenAddress(account)}</div>
+            <div>{ENSName ? ENSName : nom ? shortenAddress(account) + ' (' + nom + ')' : shortenAddress(account)}</div>
             <Davatar
               size={20}
               address={account}
@@ -155,8 +155,7 @@ export default function Web3Status() {
   const { active, account } = useWeb3React()
   const contextNetwork = useWeb3React(NetworkContextName)
 
-  const { ENSName } = useENSName(account ?? undefined)
-
+  const { ENSName, nom } = useENSName(account ?? undefined)
   const allTransactions = useAllTransactions()
 
   const sortedRecentTransactions = useMemo(() => {
@@ -174,7 +173,12 @@ export default function Web3Status() {
   return (
     <>
       <Web3StatusInner />
-      <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
+      <WalletModal
+        ENSName={ENSName ?? undefined}
+        pendingTransactions={pending}
+        confirmedTransactions={confirmed}
+        nom={nom ?? undefined}
+      />
     </>
   )
 }

src/features/portfolio/HeaderDropdown.tsx

@@ -18,7 +18,7 @@ interface HeaderDropdownProps {
 const HeaderDropdown: FC<HeaderDropdownProps> = ({ account, hideAccount = false }) => {
   const { library, chainId } = useActiveWeb3React()
   const [show, setShow] = useState<boolean>(false)
-  const { ENSName } = useENSName(account ?? undefined)
+  const { ENSName, nom } = useENSName(account ?? undefined)
 
   return (
     <>
@@ -42,7 +42,16 @@ const HeaderDropdown: FC<HeaderDropdownProps> = ({ account, hideAccount = false
                   className="text-high-emphesis flex gap-1 cursor-pointer hover:text-blue-100"
                   weight={700}
                 >
-                  {ENSName ? ENSName : account ? shortenAddress(account) : ''} <LinkIcon width={20} />
+                  {nom && ENSName
+                    ? ENSName + ' (' + nom + ')'
+                    : ENSName
+                    ? ENSName
+                    : nom
+                    ? shortenAddress(account) + ' (' + nom + ')'
+                    : account
+                    ? shortenAddress(account)
+                    : ''}
+                  <LinkIcon width={20} />
                 </Typography>
               </a>
             </Link>

src/hooks/useENSName.ts

@@ -1,21 +1,29 @@
+// @ts-ignore
+import ENS from '@ensdomains/ensjs'
 import { isAddress } from '@ethersproject/address'
 import { namehash } from '@ethersproject/hash'
-import { useMemo } from 'react'
+import { providers } from 'ethers'
+import { useEffect, useMemo, useState } from 'react'
 
 import { isZero } from '../functions'
 import { useSingleCallResult } from '../state/multicall/hooks'
 import { useENSRegistrarContract, useENSResolverContract } from './useContract'
 import useDebounce from './useDebounce'
+const NOM_REGISTRY_ADDRESS = '0x3DE51c3960400A0F752d3492652Ae4A0b2A36FB3'
 
 /**
  * Does a reverse lookup for an address to find its ENS name.
  * Note this is not the same as looking up an ENS name to find an address.
  */
 export default function useENSName(address?: string): {
   ENSName: string | null
+  nom: string | null
   loading: boolean
 } {
   const debouncedAddress = useDebounce(address, 200)
+  const provider = new providers.JsonRpcProvider('https://forno.celo.org')
+  const [nom, setNom] = useState<string | null>(null)
+
   const ensNodeArgument = useMemo(() => {
     if (!debouncedAddress || !isAddress(debouncedAddress)) return [undefined]
     try {
@@ -24,6 +32,18 @@ export default function useENSName(address?: string): {
       return [undefined]
     }
   }, [debouncedAddress])
+
+  useEffect(() => {
+    ;(async () => {
+      const nom = new ENS({ provider, ensAddress: NOM_REGISTRY_ADDRESS })
+      try {
+        const { name } = await nom.getName(address)
+        if (name) setNom(`${name}.nom`)
+      } catch (e) {
+        console.error('Could not fetch nom data', e)
+      }
+    })()
+  }, [address, provider])
   const registrarContract = useENSRegistrarContract(false)
   const resolverAddress = useSingleCallResult(registrarContract, 'resolver', ensNodeArgument)
   const resolverAddressResult = resolverAddress.result?.[0]
@@ -36,6 +56,7 @@ export default function useENSName(address?: string): {
   const changed = debouncedAddress !== address
   return {
     ENSName: changed ? null : name.result?.[0] ?? null,
+    nom,
     loading: changed || resolverAddress.loading || name.loading,
   }
 }

src/modals/WalletModal/index.tsx

@@ -30,9 +30,10 @@ interface WalletModal {
   pendingTransactions: string[] // hashes of pending
   confirmedTransactions: string[] // hashes of confirmed
   ENSName?: string
+  nom?: string
 }
 
-const WalletModal: FC<WalletModal> = ({ pendingTransactions, confirmedTransactions, ENSName }) => {
+const WalletModal: FC<WalletModal> = ({ pendingTransactions, confirmedTransactions, ENSName, nom }) => {
   const { active, account, connector, activate, error, deactivate } = useWeb3React()
   const { i18n } = useLingui()
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
@@ -227,6 +228,7 @@ const WalletModal: FC<WalletModal> = ({ pendingTransactions, confirmedTransactio
           pendingTransactions={pendingTransactions}
           confirmedTransactions={confirmedTransactions}
           ENSName={ENSName}
+          nom={nom}
           openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
         />
       ) : (