send funds modal wip

src/routes/safe/components/Balances/AssetTableCell/index.js

@@ -1,5 +0,0 @@
-// @flow
-
-import AssetTableCell from './AssetTableCell'
-
-export default AssetTableCell

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

@@ -1,5 +1,5 @@
 // @flow
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import cn from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import Modal from '~/components/Modal'
@@ -10,6 +10,9 @@ type Props = {
   onClose: () => void,
   classes: Object,
   isOpen: boolean,
+  safeAddress: string,
+  etherScanLink: string,
+  safeName: string,
 }
 type ActiveScreen = 'chooseTxType' | 'sendFunds'
 
@@ -20,16 +23,19 @@ const styles = () => ({
   },
 })
 
-const Send = ({ onClose, isOpen, classes }: Props) => {
+const Send = ({
-  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('chooseTxType')
+  onClose, isOpen, classes, safeAddress, etherScanLink, safeName,
+}: Props) => {
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('sendFunds')
   const smallerModalSize = activeScreen === 'chooseTxType'
 
-  useEffect(
+  // Uncomment when we add custom txs
-    () => () => {
+  // useEffect(
-      setActiveScreen('chooseTxType')
+  //   () => () => {
-    },
+  //     setActiveScreen('chooseTxType')
-    [isOpen],
+  //   },
-  )
+  //   [isOpen],
+  // )
 
   return (
     <Modal
@@ -41,7 +47,15 @@ const Send = ({ onClose, isOpen, classes }: Props) => {
     >
       <React.Fragment>
         {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
-        {activeScreen === 'sendFunds' && <SendFunds onClose={onClose} setActiveScreen={setActiveScreen} />}
+        {activeScreen === 'sendFunds' && (
+          <SendFunds
+            onClose={onClose}
+            setActiveScreen={setActiveScreen}
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            safeName={safeName}
+          />
+        )}
       </React.Fragment>
     </Modal>
   )

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

@@ -41,7 +41,7 @@ type Props = {
 const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} noMargin>
+      <Paragraph weight="bolder" className={classes.manage} noMargin>
         Send
       </Paragraph>
       <IconButton onClick={onClose} disableRipple>

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

@@ -3,10 +3,16 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 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 Link from '~/components/layout/Link'
+import Col from '~/components/layout/Col'
+import Block from '~/components/layout/Block'
 import Hairline from '~/components/layout/Hairline'
-import { lg, sm } from '~/theme/variables'
+import { lg, sm, secondary } from '~/theme/variables'
+import { copyToClipboard } from '~/utils/clipboard'
 
 const styles = () => ({
   heading: {
@@ -24,16 +30,25 @@ const styles = () => ({
   },
 })
 
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
 type Props = {
   onClose: () => void,
   classes: Object,
-  setActiveScreen: Function,
+  safeAddress: string,
+  etherScanLink: string,
+  safeName: string,
 }
 
-const Send = ({ classes, onClose, setActiveScreen }: Props) => (
+const Send = ({
+  classes, onClose, safeAddress, etherScanLink, safeName,
+}: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} noMargin>
+      <Paragraph weight="bolder" className={classes.manage} noMargin>
         Send Funds
       </Paragraph>
       <IconButton onClick={onClose} disableRipple>
@@ -41,6 +56,20 @@ const Send = ({ classes, onClose, setActiveScreen }: Props) => (
       </IconButton>
     </Row>
     <Hairline />
+    <Row>
+      <Col layout="column" middle="xs">
+        <Identicon address={safeAddress} diameter={32} />
+      </Col>
+      <Col layout="column">
+        <Paragraph weight="bolder">{safeName}</Paragraph>
+        <Paragraph weight="bolder" onClick={copyToClipboard}>
+          {safeAddress}
+          <Link to={etherScanLink} target="_blank">
+            <OpenInNew style={openIconStyle} />
+          </Link>
+        </Paragraph>
+      </Col>
+    </Row>
   </React.Fragment>
 )
 

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

@@ -159,7 +159,13 @@ class Balances extends React.Component<Props, State> {
           ))
           }
         </Table>
-        <SendModal onClose={this.onHide('Send')} isOpen={showSend} />
+        <SendModal
+          onClose={this.onHide('Send')}
+          isOpen={showSend}
+          etherScanLink={etherScanLink}
+          safeAddress={safeAddress}
+          safeName={safeName}
+        />
         <Modal
           title="Receive Tokens"
           description="Receive Tokens Form"