add decorator to extract eth address from ENS for contract address

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx

@@ -18,7 +18,7 @@ import Header from './Header'
 import MethodsDropdown from './MethodsDropdown'
 import RenderInputParams from './RenderInputParams'
 import RenderOutputParams from './RenderOutputParams'
-import { abiExtractor, createTxObject, formMutators, handleSubmitError, isReadMethod } from './utils'
+import { abiExtractor, createTxObject, formMutators, handleSubmitError, isReadMethod, ensResolver } from './utils'
 
 const useStyles = makeStyles(styles)
 
@@ -73,7 +73,7 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
       <Header onClose={onClose} subTitle="1 of 2" title="Contract Interaction" />
       <Hairline />
       <GnoForm
-        decorators={[abiExtractor]}
+        decorators={[abiExtractor, ensResolver]}
         formMutators={formMutators}
         initialValues={initialValues}
         onSubmit={handleSubmit}

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils/index.ts

@@ -6,8 +6,9 @@ import { mustBeEthereumAddress, mustBeEthereumContractAddress } from 'src/compon
 import { getNetwork } from 'src/config'
 import { getConfiguredSource } from 'src/logic/contractInteraction/sources'
 import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService'
-import { getWeb3 } from 'src/logic/wallets/getWeb3'
+import { getAddressFromENS, getWeb3 } from 'src/logic/wallets/getWeb3'
 import { TransactionReviewType } from '../Review'
+import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
 
 export const NO_CONTRACT = 'no contract'
 
@@ -29,6 +30,26 @@ export const abiExtractor = createDecorator({
   },
 })
 
+export const ensResolver = createDecorator({
+  field: 'contractAddress',
+  updates: {
+    contractAddress: async (contractAddress) => {
+      try {
+        const resolvedAddress = isValidEnsName(contractAddress) && (await getAddressFromENS(contractAddress))
+
+        if (resolvedAddress) {
+          return resolvedAddress
+        }
+      } catch (e) {
+        console.error(e.message)
+        return contractAddress
+      }
+
+      return contractAddress
+    },
+  },
+})
+
 export const formMutators = {
   setMax: (args, state, utils) => {
     utils.changeValue(state, 'value', () => args[0])