From e0c70551ee9bdbfe2adfe48f49a8dddb6f3c5d21 Mon Sep 17 00:00:00 2001
From: mmv <mmvsha73@gmail.com>
Date: Mon, 29 Apr 2019 19:20:07 +0400
Subject: [PATCH] create sendModal component

---
 src/components/layout/Button/index.jsx        |  6 +--
 .../{AssetTableCell.js => AssetTableCell.jsx} |  0
 .../safe/components/Balances/Send/index.jsx   | 19 -------
 .../components/Balances/SendModal/index.jsx   | 50 +++++++++++++++++++
 .../screens/ChooseTxType/index.jsx}           | 13 +++--
 .../SendModal/screens/SendFunds/index.jsx     | 47 +++++++++++++++++
 .../safe/components/Balances/Tokens/index.jsx |  3 +-
 src/routes/safe/components/Balances/index.jsx | 12 +----
 src/routes/safe/components/Balances/style.js  |  4 --
 9 files changed, 114 insertions(+), 40 deletions(-)
 rename src/routes/safe/components/Balances/AssetTableCell/{AssetTableCell.js => AssetTableCell.jsx} (100%)
 delete mode 100644 src/routes/safe/components/Balances/Send/index.jsx
 create mode 100644 src/routes/safe/components/Balances/SendModal/index.jsx
 rename src/routes/safe/components/Balances/{Send/screens/ChooseTxType/index.js => SendModal/screens/ChooseTxType/index.jsx} (82%)
 create mode 100644 src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx

diff --git a/src/components/layout/Button/index.jsx b/src/components/layout/Button/index.jsx
index c7a08e5d..41808b76 100644
--- a/src/components/layout/Button/index.jsx
+++ b/src/components/layout/Button/index.jsx
@@ -14,13 +14,13 @@ type Props = {
   minHeight?: number,
 }
 
-const calculateStyleBased = ({ minWidth, minHeight }) => ({
+const calculateStyleBased = (minWidth, minHeight) => ({
   minWidth: minWidth && `${minWidth}px`,
   minHeight: minHeight && `${minHeight}px`,
 })
 
-const GnoButton = (props: Props) => {
-  const style = calculateStyleBased(props)
+const GnoButton = ({ minWidth, minHeight, ...props }: Props) => {
+  const style = calculateStyleBased(minWidth, minHeight)
 
   return <Button style={style} {...props} />
 }
diff --git a/src/routes/safe/components/Balances/AssetTableCell/AssetTableCell.js b/src/routes/safe/components/Balances/AssetTableCell/AssetTableCell.jsx
similarity index 100%
rename from src/routes/safe/components/Balances/AssetTableCell/AssetTableCell.js
rename to src/routes/safe/components/Balances/AssetTableCell/AssetTableCell.jsx
diff --git a/src/routes/safe/components/Balances/Send/index.jsx b/src/routes/safe/components/Balances/Send/index.jsx
deleted file mode 100644
index 07dbc5a0..00000000
--- a/src/routes/safe/components/Balances/Send/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// @flow
-import React, { useState } from 'react'
-import ChooseTxType from './screens/ChooseTxType'
-
-type Props = {
-  onClose: () => void,
-}
-
-const Send = ({ onClose }: Props) => {
-  const [activeScreen, setActiveScreen] = useState('chooseTxType')
-
-  return (
-    <React.Fragment>
-      {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
-    </React.Fragment>
-  )
-}
-
-export default Send
diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx
new file mode 100644
index 00000000..edc14f24
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@@ -0,0 +1,50 @@
+// @flow
+import React, { useState, useEffect } from 'react'
+import cn from 'classnames'
+import { withStyles } from '@material-ui/core/styles'
+import Modal from '~/components/Modal'
+import ChooseTxType from './screens/ChooseTxType'
+import SendFunds from './screens/SendFunds'
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  isOpen: boolean,
+}
+type ActiveScreen = 'chooseTxType' | 'sendFunds'
+
+const styles = () => ({
+  smallerModalWindow: {
+    height: 'auto',
+    position: 'static',
+  },
+})
+
+const Send = ({ onClose, isOpen, classes }: Props) => {
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('chooseTxType')
+  const smallerModalSize = activeScreen === 'chooseTxType'
+
+  useEffect(
+    () => () => {
+      setActiveScreen('chooseTxType')
+    },
+    [isOpen],
+  )
+
+  return (
+    <Modal
+      title="Send Tokens"
+      description="Send Tokens Form"
+      handleClose={onClose}
+      open={isOpen}
+      paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
+    >
+      <React.Fragment>
+        {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
+        {activeScreen === 'sendFunds' && <SendFunds onClose={onClose} setActiveScreen={setActiveScreen} />}
+      </React.Fragment>
+    </Modal>
+  )
+}
+
+export default withStyles(styles)(Send)
diff --git a/src/routes/safe/components/Balances/Send/screens/ChooseTxType/index.js b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx
similarity index 82%
rename from src/routes/safe/components/Balances/Send/screens/ChooseTxType/index.js
rename to src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx
index c9708ae0..1ab6145a 100644
--- a/src/routes/safe/components/Balances/Send/screens/ChooseTxType/index.js
+++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx
@@ -35,9 +35,10 @@ const styles = () => ({
 type Props = {
   onClose: () => void,
   classes: Object,
+  setActiveScreen: Function,
 }
 
-const Send = ({ classes, onClose }: Props) => (
+const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
       <Paragraph className={classes.manage} noMargin>
@@ -50,7 +51,13 @@ const Send = ({ classes, onClose }: Props) => (
     <Hairline />
     <Row align="center">
       <Col layout="column" middle="xs" className={classes.buttonColumn}>
-        <Button color="primary" minWidth={260} minHeight={52} onClick={onClose} variant="contained">
+        <Button
+          color="primary"
+          minWidth={260}
+          minHeight={52}
+          onClick={() => setActiveScreen('sendFunds')}
+          variant="contained"
+        >
           SEND FUNDS
         </Button>
         <Button
@@ -68,4 +75,4 @@ const Send = ({ classes, onClose }: Props) => (
   </React.Fragment>
 )
 
-export default withStyles(styles)(Send)
+export default withStyles(styles)(ChooseTxType)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
new file mode 100644
index 00000000..f0682179
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
@@ -0,0 +1,47 @@
+// @flow
+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 Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import Hairline from '~/components/layout/Hairline'
+import { lg, sm } from '~/theme/variables'
+
+const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  manage: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+})
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  setActiveScreen: Function,
+}
+
+const Send = ({ classes, onClose, setActiveScreen }: Props) => (
+  <React.Fragment>
+    <Row align="center" grow className={classes.heading}>
+      <Paragraph className={classes.manage} noMargin>
+        Send Funds
+      </Paragraph>
+      <IconButton onClick={onClose} disableRipple>
+        <Close className={classes.closeIcon} />
+      </IconButton>
+    </Row>
+    <Hairline />
+  </React.Fragment>
+)
+
+export default withStyles(styles)(Send)
diff --git a/src/routes/safe/components/Balances/Tokens/index.jsx b/src/routes/safe/components/Balances/Tokens/index.jsx
index a929563c..a3e6f0fc 100644
--- a/src/routes/safe/components/Balances/Tokens/index.jsx
+++ b/src/routes/safe/components/Balances/Tokens/index.jsx
@@ -21,9 +21,10 @@ type Props = Actions & {
   safeAddress: string,
   activeTokens: List<Token>,
 }
+type ActiveScreen = 'tokenList' | 'addCustomToken'
 
 const Tokens = (props: Props) => {
-  const [activeScreen, setActiveScreen] = useState<string>('tokenList')
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('tokenList')
   const {
     onClose,
     classes,
diff --git a/src/routes/safe/components/Balances/index.jsx b/src/routes/safe/components/Balances/index.jsx
index ca95a55d..6797d22d 100644
--- a/src/routes/safe/components/Balances/index.jsx
+++ b/src/routes/safe/components/Balances/index.jsx
@@ -21,7 +21,7 @@ import {
 } from './dataFetcher'
 import AssetTableCell from './AssetTableCell'
 import Tokens from './Tokens'
-import Send from './Send'
+import SendModal from './SendModal'
 import Receive from './Receive'
 import { styles } from './style'
 
@@ -159,15 +159,7 @@ class Balances extends React.Component<Props, State> {
           ))
           }
         </Table>
-        <Modal
-          title="Send Tokens"
-          description="Send Tokens Form"
-          handleClose={this.onHide('Send')}
-          open={showSend}
-          paperClassName={classes.sendModal}
-        >
-          <Send onClose={this.onHide('Send')} />
-        </Modal>
+        <SendModal onClose={this.onHide('Send')} isOpen={showSend} />
         <Modal
           title="Receive Tokens"
           description="Receive Tokens Form"
diff --git a/src/routes/safe/components/Balances/style.js b/src/routes/safe/components/Balances/style.js
index a3a40531..ff073921 100644
--- a/src/routes/safe/components/Balances/style.js
+++ b/src/routes/safe/components/Balances/style.js
@@ -48,8 +48,4 @@ export const styles = (theme: Object) => ({
       cursor: 'pointer',
     },
   },
-  sendModal: {
-    height: 'auto',
-    position: 'static',
-  },
 })