small refactor to make the send funds component smaller

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

@@ -0,0 +1,77 @@
+// @flow
+import React from 'react'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import { withStyles } from '@material-ui/core/styles'
+import Row from '~/components/layout/Row'
+import Col from '~/components/layout/Col'
+import Paragraph from '~/components/layout/Paragraph'
+import Link from '~/components/layout/Link'
+import Bold from '~/components/layout/Bold'
+import Block from '~/components/layout/Block'
+import Identicon from '~/components/Identicon'
+import { copyToClipboard } from '~/utils/clipboard'
+import { secondary, xs } from '~/theme/variables'
+
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
+const styles = () => ({
+  balanceContainer: {
+    fontSize: '12px',
+    lineHeight: 1.08,
+    letterSpacing: -0.5,
+    backgroundColor: '#eae9ef',
+    width: 'fit-content',
+    padding: '6px',
+    marginTop: xs,
+    borderRadius: '3px',
+  },
+})
+
+type Props = {
+  classes: Object,
+  safeAddress: string,
+  etherScanLink: string,
+  safeName: string,
+  ethBalance: string,
+}
+
+const SafeInfo = (props: Props) => {
+  const {
+    safeAddress, safeName, etherScanLink, ethBalance, classes,
+  } = props
+
+  return (
+    <Row margin="md">
+      <Col xs={1}>
+        <Identicon address={safeAddress} diameter={32} />
+      </Col>
+      <Col xs={11} layout="column">
+        <Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}>
+          {safeName}
+        </Paragraph>
+        <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
+          {safeAddress}
+          <Link to={etherScanLink} target="_blank">
+            <OpenInNew style={openIconStyle} />
+          </Link>
+        </Paragraph>
+        <Block className={classes.balanceContainer}>
+          <Paragraph noMargin>
+            Balance:
+            {' '}
+            <Bold>
+              {ethBalance}
+              {' '}
+              ETH
+            </Bold>
+          </Paragraph>
+        </Block>
+      </Col>
+    </Row>
+  )
+}
+
+export default withStyles(styles)(SafeInfo)

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

@@ -5,61 +5,21 @@ import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import IconButton from '@material-ui/core/IconButton'
-import OpenInNew from '@material-ui/icons/OpenInNew'
-import Identicon from '~/components/Identicon'
 import Paragraph from '~/components/layout/Paragraph'
 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 Block from '~/components/layout/Block'
-import Bold from '~/components/layout/Bold'
 import Hairline from '~/components/layout/Hairline'
 import ButtonLink from '~/components/layout/ButtonLink'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
-import {
-  lg, md, sm, secondary, xs,
-} from '~/theme/variables'
 import { type Token } from '~/logic/tokens/store/model/token'
 import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
 import TokenSelectField from '~/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField'
-import { copyToClipboard } from '~/utils/clipboard'
+import SafeInfo from '~/routes/safe/components/Balances/SendModal/screens/SendFunds/SafeInfo'
 import ArrowDown from './assets/arrow-down.svg'
-
-const styles = () => ({
-  heading: {
-    padding: `${sm} ${lg}`,
-    justifyContent: 'space-between',
-    boxSizing: 'border-box',
-    maxHeight: '75px',
-  },
-  manage: {
-    fontSize: '24px',
-  },
-  closeIcon: {
-    height: '35px',
-    width: '35px',
-  },
-  formContainer: {
-    padding: `${md} ${lg}`,
-  },
-  balanceContainer: {
-    fontSize: '12px',
-    lineHeight: 1.08,
-    letterSpacing: -0.5,
-    backgroundColor: '#eae9ef',
-    width: 'fit-content',
-    padding: '6px',
-    marginTop: xs,
-    borderRadius: '3px',
-  },
-})
-
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
+import { styles } from './style'
 
 type Props = {
   onClose: () => void,
@@ -98,33 +58,7 @@ const SendFunds = ({
       </Row>
       <Hairline />
       <Block className={classes.formContainer}>
-        <Row margin="md">
-          <Col xs={1}>
-            <Identicon address={safeAddress} diameter={32} />
-          </Col>
-          <Col xs={11} layout="column">
-            <Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}>
-              {safeName}
-            </Paragraph>
-            <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
-              {safeAddress}
-              <Link to={etherScanLink} target="_blank">
-                <OpenInNew style={openIconStyle} />
-              </Link>
-            </Paragraph>
-            <Block className={classes.balanceContainer}>
-              <Paragraph noMargin>
-                Balance:
-                {' '}
-                <Bold>
-                  {ethBalance}
-                  {' '}
-ETH
-                </Bold>
-              </Paragraph>
-            </Block>
-          </Col>
-        </Row>
+        <SafeInfo safeAddress={safeAddress} etherScanLink={etherScanLink} safeName={safeName} ethBalance={ethBalance} />
         <Row margin="md">
           <Col xs={1}>
             <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
@@ -179,13 +113,11 @@ ETH
                       placeholder="Amount*"
                       text="Amount*"
                       className={classes.addressInput}
-                      inputAdornment={token && {
-                        endAdornment: (
-                          <InputAdornment position="end">
-                            {token.symbol}
-                          </InputAdornment>
-                        ),
-                      }}
+                      inputAdornment={
+                        token && {
+                          endAdornment: <InputAdornment position="end">{token.symbol}</InputAdornment>,
+                        }
+                      }
                     />
                   </Col>
                 </Row>

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

@@ -0,0 +1,21 @@
+// @flow
+import { lg, md, sm } from '~/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  manage: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  formContainer: {
+    padding: `${md} ${lg}`,
+  },
+})