Add basic custom tx review

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

@@ -9,6 +9,7 @@ import ChooseTxType from './screens/ChooseTxType'
 import SendFunds from './screens/SendFunds'
 import ReviewTx from './screens/ReviewTx'
 import SendCustomTx from './screens/SendCustomTx'
+import ReviewCustomTx from './screens/ReviewCustomTx'
 
 type Props = {
   onClose: () => void,
@@ -38,6 +39,9 @@ type TxStateType =
 const styles = () => ({
   scalableModalWindow: {
     height: 'auto',
+  },
+  scalableStaticModalWindow: {
+    height: 'auto',
     position: 'static',
   },
 })
@@ -63,7 +67,8 @@ const Send = ({
     setTx({})
   }, [isOpen])
 
-  const scalableModalSize = activeScreen === 'chooseTxType' || activeScreen === 'sendCustomTx'
+  const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx'
+  const scalableStaticModalSize = activeScreen === 'chooseTxType'
 
   const handleTxCreation = (txInfo) => {
     setActiveScreen('reviewTx')
@@ -81,7 +86,10 @@ const Send = ({
       description="Send Tokens Form"
       handleClose={onClose}
       open={isOpen}
-      paperClassName={cn(scalableModalSize && classes.scalableModalWindow)}
+      paperClassName={cn(
+        scalableStaticModalSize && classes.scalableStaticModalWindow,
+        scalableModalSize && classes.scalableModalWindow,
+      )}
     >
       <>
         {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
@@ -121,6 +129,18 @@ const Send = ({
             initialValues={tx}
           />
         )}
+        {activeScreen === 'reviewCustomTx' && (
+          <ReviewCustomTx
+            tx={tx}
+            onClose={onClose}
+            setActiveScreen={setActiveScreen}
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            safeName={safeName}
+            ethBalance={ethBalance}
+            createTransaction={createTransaction}
+          />
+        )}
       </>
     </Modal>
   )

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

@@ -0,0 +1,144 @@
+// @flow
+import React from 'react'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import { withStyles } from '@material-ui/core/styles'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import Link from '~/components/layout/Link'
+import Col from '~/components/layout/Col'
+import Button from '~/components/layout/Button'
+import Img from '~/components/layout/Img'
+import Block from '~/components/layout/Block'
+import Identicon from '~/components/Identicon'
+import { copyToClipboard } from '~/utils/clipboard'
+import Hairline from '~/components/layout/Hairline'
+import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
+import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import ArrowDown from '../assets/arrow-down.svg'
+import { secondary } from '~/theme/variables'
+import { styles } from './style'
+
+type Props = {
+  onClose: () => void,
+  setActiveScreen: Function,
+  classes: Object,
+  safeAddress: string,
+  etherScanLink: string,
+  safeName: string,
+  ethBalance: string,
+  tx: Object,
+}
+
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
+const ReviewCustomTx = ({
+  onClose,
+  setActiveScreen,
+  classes,
+  safeAddress,
+  etherScanLink,
+  safeName,
+  ethBalance,
+  tx,
+}: Props) => (
+  <SharedSnackbarConsumer>
+    {() => {
+      const submitTx = async () => {
+
+      }
+
+      return (
+        <>
+          <Row align="center" grow className={classes.heading}>
+            <Paragraph weight="bolder" className={classes.headingText} noMargin>
+              Send Funds
+            </Paragraph>
+            <Paragraph className={classes.annotation}>2 of 2</Paragraph>
+            <IconButton onClick={onClose} disableRipple>
+              <Close className={classes.closeIcon} />
+            </IconButton>
+          </Row>
+          <Hairline />
+          <Block className={classes.container}>
+            <SafeInfo
+              safeAddress={safeAddress}
+              etherScanLink={etherScanLink}
+              safeName={safeName}
+              ethBalance={ethBalance}
+            />
+            <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>
+            <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={tx.recipientAddress} diameter={32} />
+              </Col>
+              <Col xs={11} layout="column">
+                <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
+                  {tx.recipientAddress}
+                  <Link to={etherScanLink} target="_blank">
+                    <OpenInNew style={openIconStyle} />
+                  </Link>
+                </Paragraph>
+              </Col>
+            </Row>
+            <Row margin="xs">
+              <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
+                Value
+              </Paragraph>
+            </Row>
+            <Row margin="md" align="center">
+              <Img src="tx.token.logoUri" height={28} alt="Ether" onError={setImageToPlaceholder} />
+              <Paragraph size="md" noMargin className={classes.value}>
+                {tx.value}
+                {'ETH'}
+              </Paragraph>
+            </Row>
+            <Row margin="md" align="center">
+              <Col className={classes.outerData}>
+                <Row size="md" noMargin className={classes.data}>
+                  {tx.data}
+                </Row>
+              </Col>
+            </Row>
+          </Block>
+          <Hairline />
+          <Row align="center" className={classes.buttonRow}>
+            <Button minWidth={140} minHeight={42} onClick={() => setActiveScreen('sendCustomTx')}>
+              Back
+            </Button>
+            <Button
+              type="submit"
+              onClick={submitTx}
+              variant="contained"
+              minWidth={140}
+              minHeight={42}
+              color="primary"
+              data-testid="submit-tx-btn"
+            >
+              SUBMIT
+            </Button>
+          </Row>
+        </>
+      )
+    }}
+  </SharedSnackbarConsumer>
+)
+
+export default withStyles(styles)(ReviewCustomTx)

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

@@ -0,0 +1,51 @@
+// @flow
+import {
+  lg, md, sm, secondaryText, border,
+} from '~/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: secondaryText,
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  headingText: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+  },
+  value: {
+    marginLeft: sm,
+  },
+  outerData: {
+    borderRadius: '5px',
+    border: `1px solid ${border}`,
+    padding: '11px',
+  },
+  data: {
+    wordBreak: 'break-all',
+    overflow: 'auto',
+    fontSize: '14px',
+    fontFamily: 'Averta',
+    maxHeight: '100px',
+    letterSpacing: 'normal',
+    fontStretch: 'normal',
+    lineHeight: '1.43',
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+  },
+})