review tx screen wip

src/components/layout/Hairline/index.js

@@ -5,6 +5,7 @@ import { border } from '~/theme/variables'
 
 const calculateStyleFrom = (color?: string, margin?: Size) => ({
   width: '100%',
+  minHeight: '1px',
   height: '1px',
   backgroundColor: color || border,
   margin: `${getSize(margin)} 0px`,

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

@@ -1,5 +1,5 @@
 // @flow
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
 import { type Token } from '~/logic/tokens/store/model/token'
 import cn from 'classnames'
@@ -56,13 +56,12 @@ const Send = ({
     setTx(txInfo)
   }
 
-  // Uncomment when we add custom txs
-  // useEffect(
-  //   () => () => {
-  //     setActiveScreen('chooseTxType')
-  //   },
-  //   [isOpen],
-  // )
+  useEffect(
+    () => () => {
+      setActiveScreen('sendFunds')
+    },
+    [isOpen],
+  )
 
   return (
     <Modal
@@ -87,7 +86,16 @@ const Send = ({
             onSubmit={handleTxCreation}
           />
         )}
-        {activeScreen === 'reviewTx' && <ReviewTx tx={tx} />}
+        {activeScreen === 'reviewTx' && (
+          <ReviewTx
+            tx={tx}
+            onClose={onClose}
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            safeName={safeName}
+            ethBalance={ethBalance}
+          />
+        )}
       </React.Fragment>
     </Modal>
   )

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

@@ -1,12 +1,91 @@
 // @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 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 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 ArrowDown from '../assets/arrow-down.svg'
+import { secondary } from '~/theme/variables'
+import { styles } from './style'
 
-const ReviewTx = () => {
-  return (
-    <div>
-      YO! Wanna review tx?
-    </div>
-  )
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  safeAddress: string,
+  etherScanLink: string,
+  safeName: string,
+  ethBalance: string,
+  tx: Object,
 }
 
-export default ReviewTx
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
+const ReviewTx = ({
+  onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx,
+}: Props) => (
+  <React.Fragment>
+    <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">
+        <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>
+    </Block>
+    <Hairline />
+    <Row align="center" className={classes.buttonRow}>
+      <Button className={classes.button} minWidth={140} onClick={onClose}>
+        Cancel
+      </Button>
+      <Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary">
+        Review
+      </Button>
+    </Row>
+  </React.Fragment>
+)
+
+export default withStyles(styles)(ReviewTx)

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

@@ -0,0 +1,31 @@
+// @flow
+import { lg, md, sm } from '~/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: '#a2a8ba',
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  headingText: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+  },
+})

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

@@ -26,8 +26,8 @@ import {
   greaterThan,
 } from '~/components/forms/validator'
 import TokenSelectField from '~/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField'
-import SafeInfo from '~/routes/safe/components/Balances/SendModal/screens/SendFunds/SafeInfo'
-import ArrowDown from './assets/arrow-down.svg'
+import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
+import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 
 type Props = {
@@ -74,6 +74,7 @@ const SendFunds = ({
         <Paragraph weight="bolder" className={classes.manage} noMargin>
           Send Funds
         </Paragraph>
+        <Paragraph className={classes.annotation}>1 of 2</Paragraph>
         <IconButton onClick={onClose} disableRipple>
           <Close className={classes.closeIcon} />
         </IconButton>

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

@@ -4,10 +4,16 @@ import { lg, md, sm } from '~/theme/variables'
 export const styles = () => ({
   heading: {
     padding: `${sm} ${lg}`,
-    justifyContent: 'space-between',
+    justifyContent: 'flex-start',
     boxSizing: 'border-box',
     maxHeight: '75px',
   },
+  annotation: {
+    letterSpacing: '-1px',
+    color: '#a2a8ba',
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
   manage: {
     fontSize: '24px',
   },