feat: Add ENS Reverse Lookup to Create/Load Safe process

src/routes/LoadSafePage/LoadSafePage.tsx

@@ -30,6 +30,7 @@ import {
   FIELD_LOAD_IS_LOADING_SAFE_ADDRESS,
   FIELD_LOAD_SAFE_ADDRESS,
   FIELD_LOAD_SUGGESTED_SAFE_NAME,
+  FIELD_SAFE_OWNER_ENS_LIST,
   FIELD_SAFE_OWNER_LIST,
   LoadSafeFormValues,
 } from './fields/loadFields'
@@ -54,6 +55,7 @@ function Load(): ReactElement {
       [FIELD_LOAD_SAFE_ADDRESS]: safeAddress,
       [FIELD_LOAD_IS_LOADING_SAFE_ADDRESS]: false,
       [FIELD_SAFE_OWNER_LIST]: [],
+      [FIELD_SAFE_OWNER_ENS_LIST]: {},
     }
     setInitialFormValues(initialValues)
   }, [safeAddress, safeRandomName])
@@ -64,13 +66,13 @@ function Load(): ReactElement {
     const ownerEntries = ownerList
       .map((owner) => {
         const ownerFieldName = `owner-address-${owner.address}`
-        const ownerNameValue = values[ownerFieldName]
+        const ownerNameValue = values[ownerFieldName] || values[FIELD_SAFE_OWNER_ENS_LIST][owner.address]
         return {
           ...owner,
           name: ownerNameValue,
         }
       })
-      .filter((owner) => !!owner.name)
+      .filter(Boolean)
 
     const safeEntry = makeAddressBookEntry({
       address: checksumAddress(values[FIELD_LOAD_SAFE_ADDRESS] || ''),

src/routes/LoadSafePage/fields/loadFields.tsx

@@ -3,6 +3,7 @@ export const FIELD_LOAD_SUGGESTED_SAFE_NAME = 'suggestedSafeName'
 export const FIELD_LOAD_SAFE_ADDRESS = 'safeAddress'
 export const FIELD_LOAD_IS_LOADING_SAFE_ADDRESS = 'isLoadingSafeAddress'
 export const FIELD_SAFE_OWNER_LIST = 'safeOwnerList'
+export const FIELD_SAFE_OWNER_ENS_LIST = 'safeOwnerENSList'
 export const FIELD_SAFE_THRESHOLD = 'safeThreshold'
 
 export type OwnerFieldListItem = {
@@ -16,5 +17,6 @@ export type LoadSafeFormValues = {
   [FIELD_LOAD_SAFE_ADDRESS]?: string
   [FIELD_LOAD_IS_LOADING_SAFE_ADDRESS]: boolean
   [FIELD_SAFE_OWNER_LIST]: Array<OwnerFieldListItem>
+  [FIELD_SAFE_OWNER_ENS_LIST]: Record<string, string>
   [FIELD_SAFE_THRESHOLD]?: number
 }

src/routes/LoadSafePage/fields/utils.ts

@@ -6,6 +6,7 @@ import {
   FIELD_LOAD_SUGGESTED_SAFE_NAME,
   LoadSafeFormValues,
 } from './loadFields'
+import { getSDKWeb3Adapter } from '../../../logic/wallets/getWeb3'
 
 export function getLoadSafeName(formValues: LoadSafeFormValues, addressBook: AddressBookMap): string {
   let safeAddress = formValues[FIELD_LOAD_SAFE_ADDRESS] || ''
@@ -17,3 +18,13 @@ export function getLoadSafeName(formValues: LoadSafeFormValues, addressBook: Add
     formValues[FIELD_LOAD_SUGGESTED_SAFE_NAME]
   )
 }
+
+export async function getOwnerName(owner: string, signer: string): Promise<string> {
+  const sdkWeb3Adapter = getSDKWeb3Adapter(signer)
+  try {
+    const ensName = await sdkWeb3Adapter.ensReverseLookup(owner)
+    return ensName ?? ''
+  } catch (error) {
+    return ''
+  }
+}

src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx

@@ -22,22 +22,26 @@ import {
   FIELD_LOAD_CUSTOM_SAFE_NAME,
   FIELD_LOAD_IS_LOADING_SAFE_ADDRESS,
   FIELD_LOAD_SAFE_ADDRESS,
+  FIELD_SAFE_OWNER_ENS_LIST,
   FIELD_SAFE_OWNER_LIST,
   FIELD_SAFE_THRESHOLD,
   LoadSafeFormValues,
 } from '../fields/loadFields'
 import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
-import { getLoadSafeName } from '../fields/utils'
+import { getLoadSafeName, getOwnerName } from '../fields/utils'
 import { currentChainId } from 'src/logic/config/store/selectors'
+import { userAccountSelector } from '../../../logic/wallets/store/selectors'
 
 export const loadSafeAddressStepLabel = 'Name and address'
 
 function LoadSafeAddressStep(): ReactElement {
   const [ownersWithName, setOwnersWithName] = useState<AddressBookEntry[]>([])
+  const [ownersWithENSName, setOwnersWithENSName] = useState<any>([])
   const [threshold, setThreshold] = useState<number>()
   const [isValidSafeAddress, setIsValidSafeAddress] = useState<boolean>(false)
   const [isSafeInfoLoading, setIsSafeInfoLoading] = useState<boolean>(false)
   const chainId = useSelector(currentChainId)
+  const connectedWalletAddress = useSelector(userAccountSelector)
 
   const loadSafeForm = useForm()
   const addressBook = useSelector(currentNetworkAddressBookAsMap)
@@ -64,10 +68,26 @@ function LoadSafeAddressStep(): ReactElement {
       try {
         const { owners, threshold } = await getSafeInfo(safeAddress)
         setIsSafeInfoLoading(false)
-        const ownersWithName = owners.map(({ value: address }) =>
-          makeAddressBookEntry(addressBook[address] || { address, name: '', chainId }),
+        const ownersWithName = owners.map(({ value: address }) => {
+          return makeAddressBookEntry(addressBook[address] || { address, name: '', chainId })
+        })
+
+        const ownersWithENSName = await Promise.all(
+          owners.map(async ({ value: address }) => {
+            const ensName = await getOwnerName(address, connectedWalletAddress)
+            return makeAddressBookEntry({ address, name: ensName, chainId })
+          }),
         )
+
+        const ownersWithENSNameRecord = ownersWithENSName.reduce<Record<string, string>>((acc, { address, name }) => {
+          return {
+            ...acc,
+            [address]: name,
+          }
+        }, {})
+
         setOwnersWithName(ownersWithName)
+        setOwnersWithENSName(ownersWithENSNameRecord)
         setThreshold(threshold)
         setIsValidSafeAddress(true)
       } catch (error) {
@@ -97,6 +117,12 @@ function LoadSafeAddressStep(): ReactElement {
     }
   }, [ownersWithName, loadSafeForm])
 
+  useEffect(() => {
+    if (ownersWithENSName) {
+      loadSafeForm.change(FIELD_SAFE_OWNER_ENS_LIST, ownersWithENSName)
+    }
+  }, [ownersWithENSName, loadSafeForm])
+
   const handleScan = (value: string, closeQrModal: () => void): void => {
     loadSafeForm.change(FIELD_LOAD_SAFE_ADDRESS, value)
     closeQrModal()

src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx

@@ -14,14 +14,15 @@ import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { disabled, extraSmallFontSize, lg, md, sm } from 'src/theme/variables'
 import { minMaxLength } from 'src/components/forms/validator'
 import { getExplorerInfo } from 'src/config'
-import { FIELD_SAFE_OWNER_LIST } from '../fields/loadFields'
+import { FIELD_SAFE_OWNER_ENS_LIST, FIELD_SAFE_OWNER_LIST } from '../fields/loadFields'
 import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
 
 export const loadSafeOwnersStepLabel = 'Owners'
 
 function LoadSafeOwnersStep(): ReactElement {
   const loadSafeForm = useForm()
   const ownersWithName = loadSafeForm.getState().values[FIELD_SAFE_OWNER_LIST]
+  const ownersWithENSName = loadSafeForm.getState().values[FIELD_SAFE_OWNER_ENS_LIST]
 
   return (
     <>
@@ -40,14 +41,16 @@ function LoadSafeOwnersStep(): ReactElement {
         <Block margin="md" padding="md">
           {ownersWithName.map(({ address, name }, index) => {
             const ownerFieldName = `owner-address-${address}`
+            const ownerName = ownersWithENSName[address] || 'Owner Name'
+
             return (
               <OwnerContainer key={address} data-testid="owner-row">
                 <Col xs={4}>
                   <FieldContainer
                     component={TextField}
                     initialValue={name}
                     name={ownerFieldName}
-                    placeholder="Owner Name"
+                    placeholder={ownerName}
                     text="Owner Name"
                     type="text"
                     validate={minMaxLength(0, 50)}

src/routes/LoadSafePage/steps/ReviewLoadStep.tsx

@@ -15,6 +15,7 @@ import Hairline from 'src/components/layout/Hairline'
 import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import {
   FIELD_LOAD_SAFE_ADDRESS,
+  FIELD_SAFE_OWNER_ENS_LIST,
   FIELD_SAFE_OWNER_LIST,
   FIELD_SAFE_THRESHOLD,
   LoadSafeFormValues,
@@ -31,6 +32,7 @@ function ReviewLoadStep(): ReactElement {
   const addressBook = useSelector(currentNetworkAddressBookAsMap)
 
   const formValues = loadSafeForm.getState().values as LoadSafeFormValues
+  const ownersWithENSName = formValues[FIELD_SAFE_OWNER_ENS_LIST]
   const safeName = getLoadSafeName(formValues, addressBook)
   const safeAddress = formValues[FIELD_LOAD_SAFE_ADDRESS] || ''
   const threshold = formValues[FIELD_SAFE_THRESHOLD]
@@ -118,7 +120,7 @@ function ReviewLoadStep(): ReactElement {
                 <Col align="center" xs={12}>
                   <PrefixedEthHashInfo
                     hash={owner.address}
-                    name={owner.name}
+                    name={owner.name || ownersWithENSName[owner.address]}
                     showAvatar
                     showCopyBtn
                     explorerUrl={getExplorerInfo(owner.address)}