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,6 +73,7 @@ const ExpandedTx = ({
   }
 
   return (
+    <>
       <Block>
         <Row>
           <Col xs={6} layout="column">
@@ -107,7 +116,7 @@ const ExpandedTx = ({
                   {' '}
                   {tx.symbol}
                   {' '}
-                to:
+to:
                 </Bold>
                 <br />
                 <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
@@ -127,10 +136,12 @@ const ExpandedTx = ({
             </Row>
             <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
             <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
-          <ButtonRow />
+            <ButtonRow onTxApprove={openApproveModal} onTxCancel={openCancelModal} />
           </Col>
         </Row>
       </Block>
+      <CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} />
+    </>
   )
 }