Refactor modal window handling

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

@@ -220,6 +220,7 @@ class Balances extends React.Component<Props, State> {
           tokens={activeTokens}
           selectedToken={sendFunds.selectedToken}
           createTransaction={createTransaction}
+          activeScreenType="sendFunds"
         />
         <Modal
           title="Receive Tokens"

src/routes/safe/components/Layout.jsx

@@ -14,6 +14,9 @@ import Button from '~/components/layout/Button'
 import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Img from '~/components/layout/Img'
+import Modal from '~/components/Modal'
+import SendModal from './Balances/SendModal'
+import Receive from './Balances/Receive'
 import NoSafe from '~/components/NoSafe'
 import { type SelectorProps } from '~/routes/safe/container/selector'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
@@ -43,6 +46,12 @@ type Props = SelectorProps &
   Actions & {
     classes: Object,
     granted: boolean,
+    sendFunds: Object,
+    showReceive: boolean,
+    onShow: Function,
+    onHide: Function,
+    showSendFunds: Function,
+    hideSendFunds: Function
   }
 
 const openIconStyle = {
@@ -119,6 +128,12 @@ class Layout extends React.Component<Props, State> {
       updateSafe,
       transactions,
       userAddress,
+      sendFunds,
+      showReceive,
+      onShow,
+      onHide,
+      showSendFunds,
+      hideSendFunds,
     } = this.props
     const { tabIndex } = this.state
 
@@ -156,7 +171,7 @@ class Layout extends React.Component<Props, State> {
                 size="small"
                 color="primary"
                 className={classes.receive}
-                onClick={() => {}}
+                onClick={onShow('Receive')}
                 rounded
               >
                 <Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
@@ -168,7 +183,7 @@ class Layout extends React.Component<Props, State> {
                   size="small"
                   color="primary"
                   className={classes.send}
-                  onClick={() => {}}
+                  onClick={() => showSendFunds('Ether')}
                   rounded
                   testId="balance-send-btn"
                 >

src/routes/safe/container/index.jsx

@@ -6,6 +6,13 @@ import Layout from '~/routes/safe/components/Layout'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 
+type State = {
+  showReceive: boolean,
+  sendFunds: Object,
+}
+
+type Action = 'Send' | 'Receive'
+
 export type Props = Actions &
   SelectorProps & {
     granted: boolean,
@@ -13,7 +20,15 @@ export type Props = Actions &
 
 const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 5000
 
-class SafeView extends React.Component<Props> {
+class SafeView extends React.Component<Props, State> {
+  state = {
+    sendFunds: {
+      isOpen: false,
+      selectedToken: undefined,
+    },
+    showReceive: false,
+  }
+
   intervalId: IntervalID
 
   componentDidMount() {
@@ -44,6 +59,32 @@ class SafeView extends React.Component<Props> {
     clearInterval(this.intervalId)
   }
 
+  onShow = (action: Action) => () => {
+    this.setState(() => ({ [`show${action}`]: true }))
+  }
+
+  onHide = (action: Action) => () => {
+    this.setState(() => ({ [`show${action}`]: false }))
+  }
+
+  showSendFunds = (token: Token) => {
+    this.setState({
+      sendFunds: {
+        isOpen: true,
+        selectedToken: token,
+      },
+    })
+  }
+
+  hideSendFunds = () => {
+    this.setState({
+      sendFunds: {
+        isOpen: false,
+        selectedToken: undefined,
+      },
+    })
+  }
+
   checkForUpdates() {
     const {
       safeUrl, activeTokens, fetchTokenBalances,
@@ -53,6 +94,7 @@ class SafeView extends React.Component<Props> {
   }
 
   render() {
+    const { sendFunds, showReceive } = this.state
     const {
       safe,
       provider,
@@ -83,6 +125,12 @@ class SafeView extends React.Component<Props> {
           fetchTransactions={fetchTransactions}
           updateSafe={updateSafe}
           transactions={transactions}
+          sendFunds={sendFunds}
+          showReceive={showReceive}
+          onShow={this.onShow}
+          onHide={this.onHide}
+          showSendFunds={this.showSendFunds}
+          hideSendFunds={this.hideSendFunds}
         />
       </Page>
     )