submit replacement transaction to cancel existing one

src/components/layout/ButtonLink/index.jsx

@@ -7,7 +7,7 @@ import styles from './index.scss'
 const cx = cn.bind(styles)
 
 type Props = {
-  type: 'button' | 'submit' | 'reset',
+  type?: 'button' | 'submit' | 'reset',
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
   color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',

src/routes/safe/components/Layout.jsx

@@ -168,6 +168,7 @@ class Layout extends React.Component<Props, State> {
             safeAddress={address}
             userAddress={userAddress}
             granted={granted}
+            createTransaction={createTransaction}
           />
         )}
         {tabIndex === 2 && (

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

@@ -3,6 +3,7 @@ import React from 'react'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
 import { withStyles } from '@material-ui/core/styles'
+import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import Modal from '~/components/Modal'
 import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
@@ -11,6 +12,7 @@ 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 { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { styles } from './style'
 
 type Props = {
@@ -19,56 +21,69 @@ type Props = {
   isOpen: boolean,
   createTransaction: Function,
   tx: Transaction,
+  safeAddress: string,
 }
 
 const CancelTxModal = ({
-  onClose, isOpen, classes, createTransaction, tx,
+  onClose, isOpen, classes, createTransaction, tx, safeAddress,
 }: Props) => (
-  <Modal
+  <SharedSnackbarConsumer>
-    title="Cancel Transaction"
+    {({ openSnackbar }) => {
-    description="Cancel Transaction"
+      const sendReplacementTransaction = () => {
-    handleClose={onClose}
+        createTransaction(safeAddress, safeAddress, 0, EMPTY_DATA, openSnackbar)
-    open={isOpen}
+        onClose()
-    // paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
+      }
-  >
+
-    <Row align="center" grow className={classes.heading}>
+      return (
-      <Paragraph weight="bolder" className={classes.headingText} noMargin>
+        <Modal
-        Cancel transaction
+          title="Cancel Transaction"
-      </Paragraph>
+          description="Cancel Transaction"
-      <IconButton onClick={onClose} disableRipple>
+          handleClose={onClose}
-        <Close className={classes.closeIcon} />
+          open={isOpen}
-      </IconButton>
+          // paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
-    </Row>
+        >
-    <Hairline />
+          <Row align="center" grow className={classes.heading}>
-    <Block className={classes.container}>
+            <Paragraph weight="bolder" className={classes.headingText} noMargin>
-      <Row>
+              Cancel transaction
-        <Paragraph>
+            </Paragraph>
-          This action will cancel this transaction. A separate transaction will be performed to submit the cancellation.
+            <IconButton onClick={onClose} disableRipple>
-        </Paragraph>
+              <Close className={classes.closeIcon} />
-        <Paragraph size="sm" color="medium">
+            </IconButton>
-          Transaction nonce:
+          </Row>
-          <br />
+          <Hairline />
-          <Bold className={classes.nonceNumber}>{tx.nonce}</Bold>
+          <Block className={classes.container}>
-        </Paragraph>
+            <Row>
-      </Row>
+              <Paragraph>
-    </Block>
+                This action will cancel this transaction. A separate transaction will be performed to submit the
-    <Row align="center" className={classes.buttonRow}>
+                cancellation.
-      <Button className={classes.button} minWidth={140} minHeight={42} onClick={onClose}>
+              </Paragraph>
-        Exit
+              <Paragraph size="sm" color="medium">
-      </Button>
+                Transaction nonce:
-      <Button
+                <br />
-        type="submit"
+                <Bold className={classes.nonceNumber}>{tx.nonce}</Bold>
-        className={classes.button}
+              </Paragraph>
-        variant="contained"
+            </Row>
-        minWidth={214}
+          </Block>
-        minHeight={42}
+          <Row align="center" className={classes.buttonRow}>
-        color="secondary"
+            <Button className={classes.button} minWidth={140} minHeight={42} onClick={onClose}>
-        data-testid="review-tx-btn"
+              Exit
-      >
+            </Button>
-        Cancel Transaction
+            <Button
-      </Button>
+              type="submit"
-    </Row>
+              className={classes.button}
-  </Modal>
+              variant="contained"
+              minWidth={214}
+              minHeight={42}
+              color="secondary"
+              onClick={sendReplacementTransaction}
+            >
+              Cancel Transaction
+            </Button>
+          </Row>
+        </Modal>
+      )
+    }}
+  </SharedSnackbarConsumer>
 )
 
 export default withStyles(styles)(CancelTxModal)

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

@@ -34,6 +34,8 @@ type Props = {
   owners: List<Owner>,
   granted: boolean,
   userAddress: string,
+  safeAddress: string,
+  createTransaction: Function,
 }
 
 type OpenModal = 'cancelTx' | 'approveTx' | null
@@ -49,7 +51,7 @@ const txStatusToLabel = {
 }
 
 const ExpandedTx = ({
-  classes, tx, threshold, owners, granted, userAddress,
+  classes, tx, threshold, owners, granted, userAddress, safeAddress, createTransaction,
 }: Props) => {
   const [tabIndex, setTabIndex] = useState<number>(0)
   const [openModal, setOpenModal] = useState<OpenModal>(null)
@@ -155,8 +157,8 @@ to:
           </Col>
         </Row>
       </Block>
-      <CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} tx={tx} />
+      <CancelTxModal isOpen={openModal === 'cancelTx'} createTransaction={createTransaction} onClose={closeModal} tx={tx} safeAddress={safeAddress} />
-      <ApproveTxModal isOpen={openModal === 'approveTx'} onClose={closeModal} tx={tx} />
+      <ApproveTxModal isOpen={openModal === 'approveTx'} createTransaction={createTransaction} onClose={closeModal} tx={tx} safeAddress={safeAddress} />
     </>
   )
 }

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

@@ -34,10 +34,19 @@ type Props = {
   owners: List<Owner>,
   userAddress: string,
   granted: boolean,
+  safeAddress: string,
+  createTransaction: Function,
 }
 
 const TxsTable = ({
-  classes, transactions, threshold, owners, granted, userAddress,
+  classes,
+  transactions,
+  threshold,
+  owners,
+  granted,
+  userAddress,
+  safeAddress,
+  createTransaction,
 }: Props) => {
   const [expandedTx, setExpandedTx] = useState<string | null>(null)
 
@@ -103,6 +112,8 @@ const TxsTable = ({
                   owners={owners}
                   granted={granted}
                   userAddress={userAddress}
+                  createTransaction={createTransaction}
+                  safeAddress={safeAddress}
                 />
               </TableCell>
             </TableRow>

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

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react'
+import React, { useEffect } from 'react'
 import { List } from 'immutable'
 import NoTransactions from '~/routes/safe/components/TransactionsNew/NoTransactions'
 import TxsTable from '~/routes/safe/components/TransactionsNew/TxsTable'
@@ -14,41 +14,42 @@ type Props = {
   owners: List<Owner>,
   userAddress: string,
   granted: boolean,
+  createTransaction: Function,
 }
 
-class Transactions extends React.Component<Props, {}> {
+const Transactions = ({
-  componentDidMount() {
+  transactions = List(),
-    const { safeAddress, fetchTransactions } = this.props
+  owners,
-
+  threshold,
+  userAddress,
+  granted,
+  safeAddress,
+  createTransaction,
+  fetchTransactions,
+}: Props) => {
+  useEffect(() => {
     fetchTransactions(safeAddress)
-  }
+  }, [safeAddress])
 
-  render() {
+  const hasTransactions = transactions.size > 0
-    const {
-      transactions, owners, threshold, userAddress, granted,
-    } = this.props
-    const hasTransactions = transactions.size > 0
 
-    return (
+  return (
-      <React.Fragment>
+    <React.Fragment>
-        {hasTransactions ? (
+      {hasTransactions ? (
-          <TxsTable
+        <TxsTable
-            transactions={transactions}
+          transactions={transactions}
-            threshold={threshold}
+          threshold={threshold}
-            owners={owners}
+          owners={owners}
-            userAddress={userAddress}
+          userAddress={userAddress}
-            granted={granted}
+          granted={granted}
-          />
+          safeAddress={safeAddress}
-        ) : (
+          createTransaction={createTransaction}
-          <NoTransactions />
+        />
-        )}
+      ) : (
-      </React.Fragment>
+        <NoTransactions />
-    )
+      )}
-  }
+    </React.Fragment>
-}
+  )
-
-Transactions.defaultProps = {
-  transactions: List(),
 }
 
 export default Transactions