Feature #388: Use adbk list in new transactions

package.json

@@ -33,6 +33,7 @@
     "@gnosis.pm/util-contracts": "2.0.4",
     "@material-ui/core": "4.8.0",
     "@material-ui/icons": "4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.39",
     "@portis/web3": "^2.0.0-beta.45",
     "@testing-library/jest-dom": "4.2.4",
     "@toruslabs/torus-embed": "0.2.10",

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

@@ -0,0 +1,155 @@
+// @flow
+import React, { useState, useEffect } from 'react'
+import {
+  withStyles,
+} from '@material-ui/core/styles'
+import { useSelector } from 'react-redux'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import TextField from '@material-ui/core/TextField'
+import makeStyles from '@material-ui/core/styles/makeStyles'
+import { styles } from './style'
+import { getAddressBookListSelector } from '~/logic/addressBook/store/selectors'
+import { mustBeEthereumAddress, mustBeEthereumContractAddress } from '~/components/forms/validator'
+import Identicon from '~/components/Identicon'
+
+
+type Props = {
+  classes: Object,
+  fieldMutator: Function,
+  setSelectedEntry: Function,
+  isCustomTx?: boolean,
+  recipientAddress?: string,
+  pristine: boolean,
+}
+
+
+const textFieldLabelStyle = makeStyles(() => ({
+  root: {
+    overflow: 'hidden',
+    borderRadius: 4,
+    fontSize: '15px',
+    width: '500px',
+  },
+}))
+
+const textFieldInputStyle = makeStyles(() => ({
+  root: {
+    fontSize: '14px',
+    width: '420px',
+  },
+}))
+
+const AddressBookInput = ({
+  classes, fieldMutator, isCustomTx, recipientAddress, setSelectedEntry, pristine,
+}: Props) => {
+  const addressBook = useSelector(getAddressBookListSelector)
+  const [addressInput, setAddressInput] = useState(recipientAddress)
+  const [isValidForm, setIsValidForm] = useState(true)
+  const [validationText, setValidationText] = useState(true)
+  const [inputTouched, setInputTouched] = useState(false)
+  const [blurred, setBlurred] = useState(pristine)
+
+  useEffect(() => {
+    const validate = async () => {
+      if (inputTouched && !addressInput) {
+        setIsValidForm(false)
+        setValidationText('Required')
+      } else if (addressInput) {
+        let isValidText = mustBeEthereumAddress(addressInput)
+        if (isCustomTx && isValidText === undefined) {
+          isValidText = await mustBeEthereumContractAddress(addressInput)
+        }
+        setIsValidForm(isValidText === undefined)
+        setValidationText(isValidText)
+        fieldMutator(addressInput)
+      }
+    }
+    validate()
+  }, [addressInput])
+
+  const labelStyling = textFieldLabelStyle()
+  const txInputStyling = textFieldInputStyle()
+
+  return (
+    <>
+      <Autocomplete
+        id="free-solo-demo"
+        freeSolo
+        open={!blurred}
+        onClose={() => setBlurred(true)}
+        role="listbox"
+        options={addressBook.toArray()}
+        style={{ display: 'flex', flexGrow: 1 }}
+        closeIcon={null}
+        filterOptions={(optionsArray, { inputValue }) => optionsArray.filter((item) => {
+          const inputLowerCase = inputValue.toLowerCase()
+          const foundName = item.name.toLowerCase()
+            .includes(inputLowerCase)
+          const foundAddress = item.address.toLowerCase().includes(inputLowerCase)
+          return foundName || foundAddress
+        })}
+        getOptionLabel={(adbkEntry) => adbkEntry.address || ''}
+        onOpen={() => {
+          setSelectedEntry(null)
+          setBlurred(false)
+        }}
+        defaultValue={{ address: recipientAddress }}
+        onChange={(event, value) => {
+          let address = ''
+          let name = ''
+          if (value) {
+            address = value.address
+            name = value.name
+          }
+          setAddressInput(address)
+          setSelectedEntry({ address, name })
+          fieldMutator(address)
+        }}
+        renderOption={(adbkEntry) => {
+          const { name, address } = adbkEntry
+          return (
+            <div className={classes.itemOptionList}>
+              <div className={classes.identicon}>
+                <Identicon address={address} diameter={32} />
+              </div>
+              <div className={classes.adbkEntryName}>
+                <span>{name}</span>
+                <span>{address}</span>
+              </div>
+            </div>
+          )
+        }}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label={!isValidForm ? validationText : 'Recipient'}
+            error={!isValidForm}
+            fullWidth
+            autoFocus={!blurred}
+            variant="filled"
+            id="filled-error-helper-text"
+            onChange={(event) => {
+              setInputTouched(true)
+              setAddressInput(event.target.value)
+            }}
+            InputProps={
+              {
+                ...params.InputProps,
+                classes: {
+                  ...txInputStyling,
+                },
+              }
+            }
+            InputLabelProps={{
+              shrink: true,
+              required: true,
+              classes: labelStyling,
+            }}
+          />
+        )}
+      />
+    </>
+  )
+}
+
+export default withStyles(styles)(AddressBookInput)

src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.js

@@ -0,0 +1,24 @@
+// @flow
+
+export const styles = () => ({
+  itemOptionList: {
+    display: 'flex',
+  },
+
+  adbkEntryName: {
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: '14px',
+  },
+  identicon: {
+    display: 'flex',
+    padding: '5px',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+
+  root: {
+    fontSize: '14px',
+    backgroundColor: 'red',
+  },
+})

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

@@ -7,7 +7,6 @@ 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 ScanQRModal from '~/components/ScanQRModal'
@@ -19,13 +18,18 @@ import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import TextareaField from '~/components/forms/TextareaField'
 import {
-  composeValidators, mustBeFloat, maxValue, mustBeEthereumContractAddress,
+  composeValidators, mustBeFloat, maxValue,
 } from '~/components/forms/validator'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import QRIcon from '~/assets/icons/qrcode.svg'
 import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 import { sm } from '~/theme/variables'
+import AddressBookInput from '~/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
+import Identicon from '~/components/Identicon'
+import CopyBtn from '~/components/CopyBtn'
+import EtherscanBtn from '~/components/EtherscanBtn'
+
 
 type Props = {
   onClose: () => void,
@@ -47,6 +51,18 @@ const SendCustomTx = ({
   initialValues,
 }: Props) => {
   const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
+  const [selectedEntry, setSelectedEntry] = useState<Object | null>({
+    address: '',
+    name: '',
+  })
+  const [pristine, setPristine] = useState<boolean>(true)
+
+  React.useMemo(() => {
+    if (selectedEntry === null && pristine) {
+      setPristine(false)
+    }
+  }, [selectedEntry, pristine])
+
   const handleSubmit = (values: Object) => {
     if (values.data || values.value) {
       onSubmit(values)
@@ -109,31 +125,68 @@ const SendCustomTx = ({
                     <Hairline />
                   </Col>
                 </Row>
-                <Row margin="md">
-                  <Col xs={11}>
-                    <AddressInput
-                      name="recipientAddress"
-                      component={TextField}
-                      placeholder="Recipient*"
-                      text="Recipient*"
-                      className={classes.addressInput}
-                      fieldMutator={mutators.setRecipient}
-                      validators={[mustBeEthereumContractAddress]}
-                    />
-                  </Col>
-                  <Col xs={1} center="xs" middle="xs" className={classes}>
-                    <Img
-                      src={QRIcon}
-                      className={classes.qrCodeBtn}
-                      role="button"
-                      height={20}
-                      alt="Scan QR"
-                      onClick={() => {
-                        openQrModal()
-                      }}
-                    />
-                  </Col>
-                </Row>
+                { selectedEntry && selectedEntry.address ? (
+                  <div
+                    role="listbox"
+                    tabIndex="0"
+                    onClick={() => setSelectedEntry(null)}
+                    onKeyDown={(e) => {
+                      if (e.keyCode !== 9) {
+                        setSelectedEntry(null)
+                      }
+                    }}
+                  >
+                    <Row margin="xs">
+                      <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
+                        Recipient
+                      </Paragraph>
+                    </Row>
+                    <Row margin="md" align="center">
+                      <Col xs={1}>
+                        <Identicon address={selectedEntry.address} diameter={32} />
+                      </Col>
+                      <Col xs={11} layout="column">
+                        <Block justify="left">
+                          <Block>
+                            <Paragraph weight="bolder" className={classes.address} noMargin onClick={() => setSelectedEntry(null)}>
+                              {selectedEntry.name}
+                            </Paragraph>
+                            <Paragraph weight="bolder" className={classes.address} noMargin onClick={() => setSelectedEntry(null)}>
+                              {selectedEntry.address}
+                            </Paragraph>
+                          </Block>
+                          <CopyBtn content={selectedEntry.address} />
+                          <EtherscanBtn type="address" value={selectedEntry.address} />
+                        </Block>
+                      </Col>
+                    </Row>
+                  </div>
+                ) : (
+                  <>
+                    <Row margin="md">
+                      <Col xs={11}>
+                        <AddressBookInput
+                          pristine={pristine}
+                          fieldMutator={mutators.setRecipient}
+                          setSelectedEntry={setSelectedEntry}
+                          isCustomTx
+                        />
+                      </Col>
+                      <Col xs={1} center="xs" middle="xs" className={classes}>
+                        <Img
+                          src={QRIcon}
+                          className={classes.qrCodeBtn}
+                          role="button"
+                          height={20}
+                          alt="Scan QR"
+                          onClick={() => {
+                            openQrModal()
+                          }}
+                        />
+                      </Col>
+                    </Row>
+                  </>
+                )}
                 <Row margin="xs">
                   <Col between="lg">
                     <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
@@ -183,6 +236,7 @@ const SendCustomTx = ({
                   color="primary"
                   data-testid="review-tx-btn"
                   className={classes.submitButton}
+                  disabled={!selectedEntry || !selectedEntry.address}
                 >
                   Review
                 </Button>