pass whole tx to modals

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

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react'
+import React, { useState } from 'react'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
 import { withStyles } from '@material-ui/core/styles'
@@ -12,6 +12,7 @@ import Row from '~/components/layout/Row'
 import Bold from '~/components/layout/Bold'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph'
+import { type Transaction } from '~/routes/safe/store/models/transaction'
 import { styles } from './style'
 
 type Props = {
@@ -19,62 +20,72 @@ type Props = {
   classes: Object,
   isOpen: boolean,
   createTransaction: Function,
+  tx: Transaction,
   nonce: string,
 }
 
 const ApproveTxModal = ({
-  onClose, isOpen, classes, createTransaction, nonce,
-}: Props) => (
-  <Modal
-    title="Approve Transaction"
-    description="Approve Transaction"
-    handleClose={onClose}
-    open={isOpen}
-    // paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
-  >
-    <Row align="center" grow className={classes.heading}>
-      <Paragraph weight="bolder" className={classes.headingText} noMargin>
-        Approve transaction
-      </Paragraph>
-      <IconButton onClick={onClose} disableRipple>
-        <Close className={classes.closeIcon} />
-      </IconButton>
-    </Row>
-    <Hairline />
-    <Block className={classes.container}>
-      <Row>
-        <Paragraph>
-          This action will approve this transaction. A separate transaction will be performed to submit the approval.
+  onClose, isOpen, classes, createTransaction, tx,
+}: Props) => {
+  const [shouldExecuteTx, setShouldExecuteTx] = useState<boolean>(false)
+
+  const handleExecuteCheckbox = () => setShouldExecuteTx(prevShouldExecute => !prevShouldExecute)
+
+  return (
+    <Modal
+      title="Approve Transaction"
+      description="Approve Transaction"
+      handleClose={onClose}
+      open={isOpen}
+      // paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
+    >
+      <Row align="center" grow className={classes.heading}>
+        <Paragraph weight="bolder" className={classes.headingText} noMargin>
+          Approve transaction
         </Paragraph>
-        <Paragraph size="sm" color="medium">
-          Transaction nonce:
-          <br />
-          <Bold className={classes.nonceNumber}>{nonce}</Bold>
-        </Paragraph>
-        <Paragraph color="error">
-          Approving transaction does not execute it immediately. If you want to approve and execute the transaction
-          right away, click on checkbox below.
-        </Paragraph>
-        <FormControlLabel control={<Checkbox checked={false} color="primary" />} label="Execute transaction" />
+        <IconButton onClick={onClose} disableRipple>
+          <Close className={classes.closeIcon} />
+        </IconButton>
       </Row>
-    </Block>
-    <Row align="center" className={classes.buttonRow}>
-      <Button className={classes.button} minWidth={140} minHeight={42} onClick={onClose}>
-        Exit
-      </Button>
-      <Button
-        type="submit"
-        className={classes.button}
-        variant="contained"
-        minWidth={214}
-        minHeight={42}
-        color="primary"
-        data-testid="review-tx-btn"
-      >
-        Approve Transaction
-      </Button>
-    </Row>
-  </Modal>
-)
+      <Hairline />
+      <Block className={classes.container}>
+        <Row>
+          <Paragraph>
+            This action will approve this transaction. A separate transaction will be performed to submit the approval.
+          </Paragraph>
+          <Paragraph size="sm" color="medium">
+            Transaction nonce:
+            <br />
+            <Bold className={classes.nonceNumber}>{tx.nonce}</Bold>
+          </Paragraph>
+          <Paragraph color="error">
+            Approving transaction does not execute it immediately. If you want to approve and execute the transaction
+            right away, click on checkbox below.
+          </Paragraph>
+          <FormControlLabel
+            control={<Checkbox onChange={handleExecuteCheckbox} checked={shouldExecuteTx} color="primary" />}
+            label="Execute transaction"
+          />
+        </Row>
+      </Block>
+      <Row align="center" className={classes.buttonRow}>
+        <Button className={classes.button} minWidth={140} minHeight={42} onClick={onClose}>
+          Exit
+        </Button>
+        <Button
+          type="submit"
+          className={classes.button}
+          variant="contained"
+          minWidth={214}
+          minHeight={42}
+          color="primary"
+          data-testid="review-tx-btn"
+        >
+          Approve Transaction
+        </Button>
+      </Row>
+    </Modal>
+  )
+}
 
 export default withStyles(styles)(ApproveTxModal)

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

@@ -10,6 +10,7 @@ import Row from '~/components/layout/Row'
 import Bold from '~/components/layout/Bold'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph'
+import { type Transaction } from '~/routes/safe/store/models/transaction'
 import { styles } from './style'
 
 type Props = {
@@ -17,11 +18,11 @@ type Props = {
   classes: Object,
   isOpen: boolean,
   createTransaction: Function,
-  nonce: string,
+  tx: Transaction,
 }
 
 const CancelTxModal = ({
-  onClose, isOpen, classes, createTransaction, nonce,
+  onClose, isOpen, classes, createTransaction, tx,
 }: Props) => (
   <Modal
     title="Cancel Transaction"
@@ -47,7 +48,7 @@ const CancelTxModal = ({
         <Paragraph size="sm" color="medium">
           Transaction nonce:
           <br />
-          <Bold className={classes.nonceNumber}>{nonce}</Bold>
+          <Bold className={classes.nonceNumber}>{tx.nonce}</Bold>
         </Paragraph>
       </Row>
     </Block>

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

@@ -117,7 +117,7 @@ const ExpandedTx = ({
                   {' '}
                   {tx.symbol}
                   {' '}
-to:
+                  to:
                 </Bold>
                 <br />
                 <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
@@ -141,8 +141,8 @@ to:
           </Col>
         </Row>
       </Block>
-      <CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} nonce={tx.nonce} />
-      <ApproveTxModal isOpen={openModal === 'approveTx'} onClose={closeModal} nonce={tx.nonce} />
+      <CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} tx={tx} />
+      <ApproveTxModal isOpen={openModal === 'approveTx'} onClose={closeModal} tx={tx} />
     </>
   )
 }