approve & cancel tx modals wip

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

@@ -1,9 +1,9 @@
 // @flow
 import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
-import { type Token } from '~/logic/tokens/store/model/token'
 import cn from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
+import { type Token } from '~/logic/tokens/store/model/token'
 import Modal from '~/components/Modal'
 import ChooseTxType from './screens/ChooseTxType'
 import SendFunds from './screens/SendFunds'

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx

@@ -0,0 +1,43 @@
+// @flow
+import React from 'react'
+import { List } from 'immutable'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import cn from 'classnames'
+import { withStyles } from '@material-ui/core/styles'
+import Modal from '~/components/Modal'
+import Hairline from '~/components/layout/Hairline'
+import Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import { styles } from './style'
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  isOpen: boolean,
+  createTransaction: Function,
+}
+
+const CancelTxModal = ({
+  onClose, isOpen, classes, createTransaction,
+}: Props) => (
+  <Modal
+    title="Cancel Transaction"
+    description="CancelTransaction"
+    handleClose={onClose}
+    open={isOpen}
+    // paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
+  >
+    <Row align="center" grow className={classes.heading}>
+      <Paragraph weight="bolder" className={classes.headingText} noMargin>
+          Cancel transaction
+      </Paragraph>
+      <IconButton onClick={onClose} disableRipple>
+        <Close className={classes.closeIcon} />
+      </IconButton>
+    </Row>
+    <Hairline />
+  </Modal>
+)
+
+export default withStyles(styles)(CancelTxModal)

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/style.js

@@ -0,0 +1,32 @@
+// @flow
+import { lg, md, sm } from '~/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  headingText: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
+  smallerModalWindow: {
+    height: 'auto',
+    position: 'static',
+  },
+})

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx

@@ -19,6 +19,7 @@ import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { secondary } from '~/theme/variables'
 import OwnersList from './OwnersList'
 import ButtonRow from './ButtonRow'
+import CancelTxModal from './CancelTxModal'
 import { styles } from './style'
 import { formatDate } from '../columns'
 
@@ -32,6 +33,8 @@ type Props = {
   owners: List<Owner>,
 }
 
+type OpenModal = 'cancelTx' | 'approveTx' | null
+
 const openIconStyle = {
   height: '13px',
   color: secondary,
@@ -46,6 +49,11 @@ const ExpandedTx = ({
   classes, tx, threshold, owners,
 }: Props) => {
   const [tabIndex, setTabIndex] = useState<number>(0)
+  const [openModal, setOpenModal] = useState<OpenModal>(null)
+  const openApproveModal = () => setOpenModal('approveTx')
+  const openCancelModal = () => setOpenModal('cancelTx')
+  const closeModal = () => setOpenModal(null)
+
   const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
   const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
   const txStatus = tx.isExecuted ? 'success' : 'awaiting_confirmations'
@@ -65,72 +73,75 @@ const ExpandedTx = ({
   }
 
   return (
-    <Block>
-      <Row>
-        <Col xs={6} layout="column">
-          <Block className={classes.txDataContainer}>
-            <Paragraph noMargin>
-              <Bold>TX hash: </Bold>
-              {tx.executionTxHash ? (
-                <a href={openTxInEtherScan(tx.executionTxHash, 'rinkeby')} target="_blank" rel="noopener noreferrer">
-                  {shortVersionOf(tx.executionTxHash, 4)}
+    <>
+      <Block>
+        <Row>
+          <Col xs={6} layout="column">
+            <Block className={classes.txDataContainer}>
+              <Paragraph noMargin>
+                <Bold>TX hash: </Bold>
+                {tx.executionTxHash ? (
+                  <a href={openTxInEtherScan(tx.executionTxHash, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+                    {shortVersionOf(tx.executionTxHash, 4)}
+                    <OpenInNew style={openIconStyle} />
+                  </a>
+                ) : (
+                  'n/a'
+                )}
+              </Paragraph>
+              <Paragraph noMargin>
+                <Bold>TX status: </Bold>
+                <Span className={classes[txStatus]} style={{ fontWeight: 'bold' }}>
+                  {txStatusToLabel[txStatus]}
+                </Span>
+              </Paragraph>
+              <Paragraph noMargin>
+                <Bold>TX created: </Bold>
+                {formatDate(tx.submissionDate)}
+              </Paragraph>
+              {tx.executionDate && (
+                <Paragraph noMargin>
+                  <Bold>TX executed: </Bold>
+                  {formatDate(tx.executionDate)}
+                </Paragraph>
+              )}
+            </Block>
+            <Hairline />
+            <Block className={classes.txDataContainer}>
+              <Paragraph noMargin>
+                <Bold>
+                  Send
+                  {' '}
+                  {fromWei(toBN(tx.value), 'ether')}
+                  {' '}
+                  {tx.symbol}
+                  {' '}
+to:
+                </Bold>
+                <br />
+                <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+                  {shortVersionOf(tx.recipient, 4)}
                   <OpenInNew style={openIconStyle} />
                 </a>
-              ) : (
-                'n/a'
-              )}
-            </Paragraph>
-            <Paragraph noMargin>
-              <Bold>TX status: </Bold>
-              <Span className={classes[txStatus]} style={{ fontWeight: 'bold' }}>
-                {txStatusToLabel[txStatus]}
-              </Span>
-            </Paragraph>
-            <Paragraph noMargin>
-              <Bold>TX created: </Bold>
-              {formatDate(tx.submissionDate)}
-            </Paragraph>
-            {tx.executionDate && (
-              <Paragraph noMargin>
-                <Bold>TX executed: </Bold>
-                {formatDate(tx.executionDate)}
               </Paragraph>
-            )}
-          </Block>
-          <Hairline />
-          <Block className={classes.txDataContainer}>
-            <Paragraph noMargin>
-              <Bold>
-                Send
-                {' '}
-                {fromWei(toBN(tx.value), 'ether')}
-                {' '}
-                {tx.symbol}
-                {' '}
-                to:
-              </Bold>
-              <br />
-              <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
-                {shortVersionOf(tx.recipient, 4)}
-                <OpenInNew style={openIconStyle} />
-              </a>
-            </Paragraph>
-          </Block>
-        </Col>
-        <Col xs={6} className={classes.rightCol} layout="block">
-          <Row>
-            <Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
-              <Tab label={confirmedLabel} />
-              <Tab label={unconfirmedLabel} />
-            </Tabs>
-            <Hairline color="#c8ced4" />
-          </Row>
-          <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
-          <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
-          <ButtonRow />
-        </Col>
-      </Row>
-    </Block>
+            </Block>
+          </Col>
+          <Col xs={6} className={classes.rightCol} layout="block">
+            <Row>
+              <Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
+                <Tab label={confirmedLabel} />
+                <Tab label={unconfirmedLabel} />
+              </Tabs>
+              <Hairline color="#c8ced4" />
+            </Row>
+            <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
+            <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
+            <ButtonRow onTxApprove={openApproveModal} onTxCancel={openCancelModal} />
+          </Col>
+        </Row>
+      </Block>
+      <CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} />
+    </>
   )
 }