add recepient input

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

@@ -10,13 +10,15 @@ import Row from '~/components/layout/Row'
 import GnoForm from '~/components/forms/GnoForm'
 import Link from '~/components/layout/Link'
 import Col from '~/components/layout/Col'
-
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
 import Block from '~/components/layout/Block'
 import Bold from '~/components/layout/Bold'
 import Hairline from '~/components/layout/Hairline'
 import {
   lg, md, sm, secondary, xs,
 } from '~/theme/variables'
+import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
 import { copyToClipboard } from '~/utils/clipboard'
 import ArrowDown from './assets/arrow-down.svg'
 
@@ -65,7 +67,10 @@ type Props = {
 
 const SendFunds = ({
   classes, onClose, safeAddress, etherScanLink, safeName, ethBalance,
-}: Props) => (
+}: Props) => {
+  const handleSubmit = () => {}
+
+  return (
     <React.Fragment>
       <Row align="center" grow className={classes.heading}>
         <Paragraph weight="bolder" className={classes.manage} noMargin>
@@ -98,13 +103,13 @@ const SendFunds = ({
                 <Bold>
                   {ethBalance}
                   {' '}
-ETH
+                  ETH
                 </Bold>
               </Paragraph>
             </Block>
           </Col>
         </Row>
-      <Row>
+        <Row margin="md">
           <Col xs={1}>
             <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
           </Col>
@@ -112,9 +117,26 @@ ETH
             <Hairline />
           </Col>
         </Row>
-      <GnoForm>{() => <Row />}</GnoForm>
+        <GnoForm onSubmit={handleSubmit}>
+          {() => (
+            <Row>
+              <Col xs={12}>
+                <Field
+                  name="address"
+                  component={TextField}
+                  type="text"
+                  validate={composeValidators(required, mustBeEthereumAddress)}
+                  placeholder="Recipient*"
+                  text="Recipient*"
+                  className={classes.addressInput}
+                />
+              </Col>
+            </Row>
+          )}
+        </GnoForm>
       </Block>
     </React.Fragment>
-)
+  )
+}
 
 export default withStyles(styles)(SendFunds)