From ad9c9e2cea449ea6ccfeb9694ccc87d052eb244d Mon Sep 17 00:00:00 2001
From: Alexander Belokon <ikatamarinaki@gmail.com>
Date: Tue, 27 Aug 2024 19:48:58 +0200
Subject: [PATCH] refactor: bring back ens name display to delegators list

---
 modules/delegation/hooks/useDelegators.ts     | 25 +++++++++++++++++--
 .../ui/DelegatorsList/DelegatorsList.tsx      |  1 +
 .../ui/DelegatorsList/DelegatorsListItem.tsx  |  5 ++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/modules/delegation/hooks/useDelegators.ts b/modules/delegation/hooks/useDelegators.ts
index ae30b546..0175be77 100644
--- a/modules/delegation/hooks/useDelegators.ts
+++ b/modules/delegation/hooks/useDelegators.ts
@@ -4,8 +4,13 @@ import { ContractVoting } from 'modules/blockChain/contracts'
 import { useWeb3 } from 'modules/blockChain/hooks/useWeb3'
 import { DELEGATORS_FETCH_SIZE, DELEGATORS_FETCH_TOTAL } from '../constants'
 import { BigNumber } from 'ethers'
+import { useEnsResolvers } from 'modules/shared/hooks/useEnsResolvers'
 
-type DelegatorData = { address: string; balance: BigNumber }
+type DelegatorData = {
+  address: string
+  balance: BigNumber
+  ensName?: string | null
+}
 
 type DelegatorsData = {
   nonZeroDelegators: DelegatorData[]
@@ -21,6 +26,7 @@ type DelegatorsData = {
 export function useDelegators() {
   const { walletAddress, chainId } = useWeb3()
   const voting = ContractVoting.useRpc()
+  const { lookupAddress } = useEnsResolvers()
 
   const { data, initialLoading, loading, error } = useLidoSWR<DelegatorsData>(
     walletAddress ? [`swr:useDelegators`, chainId, walletAddress] : null,
@@ -76,8 +82,23 @@ export function useDelegators() {
         delegator.balance.gt(0),
       )
 
+      const nonZeroDelegatorsWithEns = await Promise.all(
+        nonZeroDelegators.map(async delegator => {
+          try {
+            const ensName = await lookupAddress(delegator.address)
+
+            return {
+              ...delegator,
+              ensName,
+            }
+          } catch (err) {
+            return delegator
+          }
+        }),
+      )
+
       return {
-        nonZeroDelegators,
+        nonZeroDelegators: nonZeroDelegatorsWithEns,
         totalVotingPower,
         notFetchedDelegatorsCount: totalDelegatorsCount - delegators.length,
       }
diff --git a/modules/delegation/ui/DelegatorsList/DelegatorsList.tsx b/modules/delegation/ui/DelegatorsList/DelegatorsList.tsx
index 4039f3e7..157261b3 100644
--- a/modules/delegation/ui/DelegatorsList/DelegatorsList.tsx
+++ b/modules/delegation/ui/DelegatorsList/DelegatorsList.tsx
@@ -84,6 +84,7 @@ export function DelegatorsList() {
             key={delegator.address}
             address={delegator.address}
             balance={delegator.balance}
+            ensName={delegator.ensName}
             governanceSymbol={governanceToken?.symbol}
           />
         ))}
diff --git a/modules/delegation/ui/DelegatorsList/DelegatorsListItem.tsx b/modules/delegation/ui/DelegatorsList/DelegatorsListItem.tsx
index 8e2ee95a..a534d107 100644
--- a/modules/delegation/ui/DelegatorsList/DelegatorsListItem.tsx
+++ b/modules/delegation/ui/DelegatorsList/DelegatorsListItem.tsx
@@ -10,6 +10,7 @@ import { BigNumber } from 'ethers'
 type Props = {
   address: string
   balance: BigNumber
+  ensName: string | null | undefined
   governanceSymbol: string | undefined
 }
 
@@ -17,6 +18,7 @@ export function DelegatorsListItem({
   address,
   balance,
   governanceSymbol,
+  ensName,
 }: Props) {
   return (
     <DelegatorsListItemStyled key={address}>
@@ -24,8 +26,7 @@ export function DelegatorsListItem({
         <AddressBadgeWrap>
           <Identicon address={address} diameter={20} />
           <Text as="span" size="xxs">
-            {/* {(ensNameList && ensNameList[i]) || trimAddress(address, 4)} */}
-            {trimAddress(address, 4)}
+            {ensName ?? trimAddress(address, 6)}
           </Text>
         </AddressBadgeWrap>
       </AddressPop>