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,11 +21,20 @@ type Props = {
   isOpen: boolean,
   createTransaction: Function,
   tx: Transaction,
+  safeAddress: string,
 }
 
 const CancelTxModal = ({
-  onClose, isOpen, classes, createTransaction, tx,
+  onClose, isOpen, classes, createTransaction, tx, safeAddress,
 }: Props) => (
+  <SharedSnackbarConsumer>
+    {({ openSnackbar }) => {
+      const sendReplacementTransaction = () => {
+        createTransaction(safeAddress, safeAddress, 0, EMPTY_DATA, openSnackbar)
+        onClose()
+      }
+
+      return (
         <Modal
           title="Cancel Transaction"
           description="Cancel Transaction"
@@ -43,7 +54,8 @@ const CancelTxModal = ({
           <Block className={classes.container}>
             <Row>
               <Paragraph>
-          This action will cancel this transaction. A separate transaction will be performed to submit the cancellation.
+                This action will cancel this transaction. A separate transaction will be performed to submit the
+                cancellation.
               </Paragraph>
               <Paragraph size="sm" color="medium">
                 Transaction nonce:
@@ -63,12 +75,15 @@ const CancelTxModal = ({
               minWidth={214}
               minHeight={42}
               color="secondary"
-        data-testid="review-tx-btn"
+              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,19 +14,23 @@ 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 {
-      transactions, owners, threshold, userAddress, granted,
-    } = this.props
   const hasTransactions = transactions.size > 0
 
   return (
@@ -38,17 +42,14 @@ class Transactions extends React.Component<Props, {}> {
           owners={owners}
           userAddress={userAddress}
           granted={granted}
+          safeAddress={safeAddress}
+          createTransaction={createTransaction}
         />
       ) : (
         <NoTransactions />
       )}
     </React.Fragment>
   )
-  }
-}
-
-Transactions.defaultProps = {
-  transactions: List(),
 }
 
 export default Transactions