Merge pull request #985 from gnosis/fix/#983-support-ens-for-contract-interaction

(Fix) [Contract Interaction] Support ENS for contract address

src/components/forms/AddressInput/index.tsx

@@ -5,8 +5,7 @@ import { OnChange } from 'react-final-form-listeners'
 import TextField from 'src/components/forms/TextField'
 import { composeValidators, mustBeEthereumAddress, required } from 'src/components/forms/validator'
 import { getAddressFromENS } from 'src/logic/wallets/getWeb3'
-
+import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
-const isValidEnsName = (name) => /^([\w-]+\.)+(eth|test|xyz|luxe)$/.test(name)
 
 // an idea for second field was taken from here
 // https://github.com/final-form/react-final-form-listeners/blob/master/src/OnBlur.js

src/logic/wallets/ethAddresses.ts

@@ -43,3 +43,5 @@ export const isUserOwner = (safe, userAccount) => {
 }
 
 export const isUserOwnerOnAnySafe = (safes, userAccount) => safes.some((safe) => isUserOwner(safe, userAccount))
+
+export const isValidEnsName = (name) => /^([\w-]+\.)+(eth|test|xyz|luxe)$/.test(name)

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

@@ -12,6 +12,7 @@ import Identicon from 'src/components/Identicon'
 import { mustBeEthereumAddress, mustBeEthereumContractAddress } from 'src/components/forms/validator'
 import { getAddressBookListSelector } from 'src/logic/addressBook/store/selectors'
 import { getAddressFromENS } from 'src/logic/wallets/getWeb3'
+import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
 
 const textFieldLabelStyle = makeStyles(() => ({
   root: {
@@ -38,8 +39,6 @@ const filterAddressBookWithContractAddresses = async (addressBook) => {
   return addressBook.filter((adbkEntry, index) => abFlags[index])
 }
 
-const isValidEnsName = (name) => /^([\w-]+\.)+(eth|test|xyz|luxe)$/.test(name)
-
 const AddressBookInput = ({
   classes,
   fieldMutator,

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'
 
@@ -20,7 +21,7 @@ export const abiExtractor = createDecorator({
         mustBeEthereumAddress(contractAddress) ||
         (await mustBeEthereumContractAddress(contractAddress))
       ) {
-        return NO_CONTRACT
+        return
       }
       const network = getNetwork()
       const source = getConfiguredSource()
@@ -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])