Address input component wip

package.json

@@ -31,14 +31,15 @@
   "dependencies": {
     "@gnosis.pm/safe-contracts": "^1.0.0",
     "@gnosis.pm/util-contracts": "2.0.1",
-    "@material-ui/core": "4.2.0",
+    "@material-ui/core": "4.2.1",
     "@material-ui/icons": "4.2.1",
     "@testing-library/jest-dom": "^4.0.0",
-    "@welldone-software/why-did-you-render": "3.2.1",
+    "@welldone-software/why-did-you-render": "3.2.3",
     "axios": "0.19.0",
     "bignumber.js": "9.0.0",
     "connected-react-router": "6.5.2",
     "date-fns": "1.30.1",
+    "ethereum-ens": "^0.7.7",
     "final-form": "4.18.2",
     "history": "^4.7.2",
     "immortal-db": "^1.0.2",
@@ -50,7 +51,7 @@
     "react-dom": "^16.8.6",
     "react-final-form": "6.3.0",
     "react-final-form-listeners": "^1.0.2",
-    "react-hot-loader": "4.12.7",
+    "react-hot-loader": "4.12.9",
     "react-infinite-scroll-component": "^4.5.2",
     "react-redux": "7.1.0",
     "react-router-dom": "^5.0.1",
@@ -59,12 +60,12 @@
     "redux-actions": "^2.3.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^4.0.0",
-    "web3": "1.0.0-beta.37"
+    "web3": "1.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.5.0",
-    "@babel/core": "7.5.4",
-    "@babel/plugin-proposal-class-properties": "7.5.0",
+    "@babel/cli": "7.5.5",
+    "@babel/core": "7.5.5",
+    "@babel/plugin-proposal-class-properties": "7.5.5",
     "@babel/plugin-proposal-decorators": "7.4.4",
     "@babel/plugin-proposal-do-expressions": "7.5.0",
     "@babel/plugin-proposal-export-default-from": "7.5.2",
@@ -83,7 +84,7 @@
     "@babel/plugin-transform-member-expression-literals": "^7.2.0",
     "@babel/plugin-transform-property-literals": "^7.2.0",
     "@babel/polyfill": "7.4.4",
-    "@babel/preset-env": "7.5.4",
+    "@babel/preset-env": "7.5.5",
     "@babel/preset-flow": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
     "@sambego/storybook-state": "^1.0.7",
@@ -91,7 +92,7 @@
     "@storybook/addon-knobs": "5.1.9",
     "@storybook/addon-links": "5.1.9",
     "@storybook/react": "5.1.9",
-    "@testing-library/react": "8.0.5",
+    "@testing-library/react": "8.0.6",
     "autoprefixer": "9.6.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.0.2",
@@ -101,19 +102,19 @@
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "classnames": "^2.2.5",
-    "css-loader": "3.0.0",
+    "css-loader": "3.1.0",
     "detect-port": "^1.2.2",
     "eslint": "5.16.0",
     "eslint-config-airbnb": "17.1.1",
-    "eslint-plugin-flowtype": "3.11.1",
-    "eslint-plugin-import": "2.18.0",
-    "eslint-plugin-jest": "22.9.0",
+    "eslint-plugin-flowtype": "3.12.1",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jest": "22.13.7",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.2",
+    "eslint-plugin-react": "7.14.3",
     "ethereumjs-abi": "^0.6.7",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "4.0.0",
-    "flow-bin": "0.102.0",
+    "file-loader": "4.1.0",
+    "flow-bin": "0.103.0",
     "fs-extra": "8.1.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.0.4",
@@ -130,11 +131,11 @@
     "storybook-host": "5.1.0",
     "storybook-router": "^0.3.3",
     "style-loader": "^0.23.1",
-    "truffle": "5.0.27",
-    "truffle-contract": "4.0.24",
-    "truffle-solidity-loader": "0.1.26",
+    "truffle": "5.0.29",
+    "truffle-contract": "4.0.26",
+    "truffle-solidity-loader": "0.1.28",
     "uglifyjs-webpack-plugin": "2.1.3",
-    "webpack": "4.35.3",
+    "webpack": "4.38.0",
     "webpack-bundle-analyzer": "3.3.2",
     "webpack-cli": "3.3.6",
     "webpack-dev-server": "3.7.2",

src/components/forms/AddressInput/index.jsx

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react'
+import { Field } from 'react-final-form'
+import { OnChange } from 'react-final-form-listeners'
+import TextField from '~/components/forms/TextField'
+import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
+import { getAddressFromENS } from '~/logic/wallets/getWeb3'
+
+type Props = {
+  className?: string,
+  name?: string,
+  text?: string,
+  placeholder?: string,
+}
+
+const isValidEnsName = name => /^([\w-]+\.)+(eth|test)$/.test(name)
+
+const AddressInput = ({
+  className = '',
+  name = 'recipientAddress',
+  text = 'Recipient*',
+  placeholder = 'Recipient*',
+}: Props): React.Element<*> => (
+  <>
+    <Field
+      name={name}
+      component={TextField}
+      type="text"
+      // validate={composeValidators(required, mustBeEthereumAddress)}
+      placeholder={placeholder}
+      text={text}
+      className={className}
+    />
+    <OnChange name={name}>
+      {async (value) => {
+        if (isValidEnsName(value)) {
+          try {
+            const resolverAddr = await getAddressFromENS(value)
+          } catch {
+            console.error('No resolver for ENS name')
+          }
+        }
+      }}
+    </OnChange>
+  </>
+)
+
+export default AddressInput

src/logic/wallets/getWeb3.js

@@ -1,5 +1,6 @@
 // @flow
 import Web3 from 'web3'
+import ENS from 'ethereum-ens'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
 
 export const ETHEREUM_NETWORK = {
@@ -105,6 +106,15 @@ export const getProviderInfo: Function = async (): Promise<ProviderProps> => {
   }
 }
 
+export const getAddressFromENS = async (name: string) => {
+  const ens = new ENS(web3)
+  // window.web3provider = web3
+  window.ens = ens
+  const address = await ens.resolver(name).addr()
+
+  return address
+}
+
 export const getBalanceInEtherOf = async (safeAddress: string) => {
   const funds: String = await web3.eth.getBalance(safeAddress)
 

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx

@@ -9,6 +9,7 @@ import IconButton from '@material-ui/core/IconButton'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import GnoForm from '~/components/forms/GnoForm'
+import AddressInput from '~/components/forms/AddressInput'
 import Col from '~/components/layout/Col'
 import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
@@ -102,7 +103,7 @@ const SendFunds = ({
               <React.Fragment>
                 <Row margin="md">
                   <Col xs={12}>
-                    <Field
+                    <AddressInput
                       name="recipientAddress"
                       component={TextField}
                       type="text"