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,56 +67,76 @@ type Props = {
 
 const SendFunds = ({
   classes, onClose, safeAddress, etherScanLink, safeName, ethBalance,
-}: Props) => (
+}: Props) => {
-  <React.Fragment>
+  const handleSubmit = () => {}
-    <Row align="center" grow className={classes.heading}>
+
-      <Paragraph weight="bolder" className={classes.manage} noMargin>
+  return (
-        Send Funds
+    <React.Fragment>
-      </Paragraph>
+      <Row align="center" grow className={classes.heading}>
-      <IconButton onClick={onClose} disableRipple>
+        <Paragraph weight="bolder" className={classes.manage} noMargin>
-        <Close className={classes.closeIcon} />
+          Send Funds
-      </IconButton>
+        </Paragraph>
-    </Row>
+        <IconButton onClick={onClose} disableRipple>
-    <Hairline />
+          <Close className={classes.closeIcon} />
-    <Block className={classes.formContainer}>
+        </IconButton>
-      <Row margin="md">
+      </Row>
-        <Col xs={1}>
+      <Hairline />
-          <Identicon address={safeAddress} diameter={32} />
+      <Block className={classes.formContainer}>
-        </Col>
+        <Row margin="md">
-        <Col xs={11} layout="column">
+          <Col xs={1}>
-          <Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}>
+            <Identicon address={safeAddress} diameter={32} />
-            {safeName}
+          </Col>
-          </Paragraph>
+          <Col xs={11} layout="column">
-          <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
+            <Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}>
-            {safeAddress}
+              {safeName}
-            <Link to={etherScanLink} target="_blank">
-              <OpenInNew style={openIconStyle} />
-            </Link>
-          </Paragraph>
-          <Block className={classes.balanceContainer}>
-            <Paragraph noMargin>
-              Balance:
-              {' '}
-              <Bold>
-                {ethBalance}
-                {' '}
-ETH
-              </Bold>
             </Paragraph>
-          </Block>
+            <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
-        </Col>
+              {safeAddress}
-      </Row>
+              <Link to={etherScanLink} target="_blank">
-      <Row>
+                <OpenInNew style={openIconStyle} />
-        <Col xs={1}>
+              </Link>
-          <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
+            </Paragraph>
-        </Col>
+            <Block className={classes.balanceContainer}>
-        <Col xs={11} center="xs" layout="column">
+              <Paragraph noMargin>
-          <Hairline />
+                Balance:
-        </Col>
+                {' '}
-      </Row>
+                <Bold>
-      <GnoForm>{() => <Row />}</GnoForm>
+                  {ethBalance}
-    </Block>
+                  {' '}
-  </React.Fragment>
+                  ETH
-)
+                </Bold>
+              </Paragraph>
+            </Block>
+          </Col>
+        </Row>
+        <Row margin="md">
+          <Col xs={1}>
+            <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
+          </Col>
+          <Col xs={11} center="xs" layout="column">
+            <Hairline />
+          </Col>
+        </Row>
+        <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)