finish the ui for sending tokens

src/components/layout/Hairline/index.js

@@ -14,12 +14,14 @@ const calculateStyleFrom = (color?: string, margin?: Size) => ({
 type Props = {
   margin?: Size,
   color?: string,
+  style?: Object
 }
 
-const Hairline = ({ margin, color }: Props) => {
-  const style = calculateStyleFrom(color, margin)
+const Hairline = ({ margin, color, style }: Props) => {
+  const calculatedStyles = calculateStyleFrom(color, margin)
+  const mergedStyles = { ...calculatedStyles, ...(style || {}) }
 
-  return <div style={style} />
+  return <div style={mergedStyles} />
 }
 
 export default Hairline

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

@@ -55,10 +55,12 @@ const Send = ({
     setActiveScreen('reviewTx')
     setTx(txInfo)
   }
+  const onClickBack = () => setActiveScreen('sendFunds')
 
   useEffect(
     () => () => {
       setActiveScreen('sendFunds')
+      setTx({})
     },
     [isOpen],
   )
@@ -84,6 +86,7 @@ const Send = ({
             tokens={tokens}
             selectedToken={selectedToken}
             onSubmit={handleTxCreation}
+            initialValues={tx}
           />
         )}
         {activeScreen === 'reviewTx' && (
@@ -94,6 +97,7 @@ const Send = ({
             etherScanLink={etherScanLink}
             safeName={safeName}
             ethBalance={ethBalance}
+            onClickBack={onClickBack}
           />
         )}
       </React.Fragment>

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

@@ -9,11 +9,13 @@ 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'
@@ -24,6 +26,7 @@ type Props = {
   safeAddress: string,
   etherScanLink: string,
   safeName: string,
+  onClickBack: Function,
   ethBalance: string,
   tx: Object,
 }
@@ -34,7 +37,7 @@ const openIconStyle = {
 }
 
 const ReviewTx = ({
-  onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx,
+  onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx, onClickBack,
 }: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
@@ -62,7 +65,7 @@ const ReviewTx = ({
           Recipient
         </Paragraph>
       </Row>
-      <Row margin="md">
+      <Row margin="md" align="center">
         <Col xs={1}>
           <Identicon address={tx.recipientAddress} diameter={32} />
         </Col>
@@ -75,11 +78,24 @@ const ReviewTx = ({
           </Paragraph>
         </Col>
       </Row>
+      <Row margin="xs">
+        <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
+          Amount
+        </Paragraph>
+      </Row>
+      <Row margin="md" align="center">
+        <Img src={tx.token.logoUri} height={28} alt={tx.token.name} onError={setImageToPlaceholder} />
+        <Paragraph size="md" noMargin>
+          {tx.amount}
+          {' '}
+          {tx.token.symbol}
+        </Paragraph>
+      </Row>
     </Block>
-    <Hairline />
+    <Hairline style={{ position: 'absolute', bottom: 85 }} />
     <Row align="center" className={classes.buttonRow}>
-      <Button className={classes.button} minWidth={140} onClick={onClose}>
-        Cancel
+      <Button className={classes.button} minWidth={140} onClick={onClickBack}>
+        Back
       </Button>
       <Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary">
         Review

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

@@ -27,5 +27,8 @@ export const styles = () => ({
   buttonRow: {
     height: '84px',
     justifyContent: 'center',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
   },
 })

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

@@ -40,6 +40,7 @@ type Props = {
   selectedToken: string,
   tokens: List<Token>,
   onSubmit: Function,
+  initialValues: Object,
 }
 
 const SendFunds = ({
@@ -51,6 +52,7 @@ const SendFunds = ({
   ethBalance,
   tokens,
   selectedToken,
+  initialValues,
   onSubmit,
 }: Props) => {
   const handleSubmit = (values) => {
@@ -90,7 +92,7 @@ const SendFunds = ({
             <Hairline />
           </Col>
         </Row>
-        <GnoForm onSubmit={handleSubmit} formMutators={formMutators}>
+        <GnoForm onSubmit={handleSubmit} formMutators={formMutators} initialValues={initialValues}>
           {(...args) => {
             const formState = args[2]
             const mutators = args[3]