submit replacement transaction to cancel existing one

2019-07-03 18:15:04 +04:00 · 2019-07-03 18:15:04 +04:00 · fd74fd3b9a
parent 9801e68343
commit fd74fd3b9a
6 changed files with 112 additions and 82 deletions
--- a/src/components/layout/ButtonLink/index.jsx
+++ b/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',
--- a/src/routes/safe/components/Layout.jsx
+++ b/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 && (
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx
+++ b/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
-    title="Cancel Transaction"
-    description="Cancel Transaction"
-    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 />
-    <Block className={classes.container}>
-      <Row>
-        <Paragraph>
-          This action will cancel this transaction. A separate transaction will be performed to submit the cancellation.
-        </Paragraph>
-        <Paragraph size="sm" color="medium">
-          Transaction nonce:
-          <br />
-          <Bold className={classes.nonceNumber}>{tx.nonce}</Bold>
-        </Paragraph>
-      </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="secondary"
-        data-testid="review-tx-btn"
-      >
-        Cancel Transaction
-      </Button>
-    </Row>
-  </Modal>
+  <SharedSnackbarConsumer>
+    {({ openSnackbar }) => {
+      const sendReplacementTransaction = () => {
+        createTransaction(safeAddress, safeAddress, 0, EMPTY_DATA, openSnackbar)
+        onClose()
+      }
+
+      return (
+        <Modal
+          title="Cancel Transaction"
+          description="Cancel Transaction"
+          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 />
+          <Block className={classes.container}>
+            <Row>
+              <Paragraph>
+                This action will cancel this transaction. A separate transaction will be performed to submit the
+                cancellation.
+              </Paragraph>
+              <Paragraph size="sm" color="medium">
+                Transaction nonce:
+                <br />
+                <Bold className={classes.nonceNumber}>{tx.nonce}</Bold>
+              </Paragraph>
+            </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="secondary"
+              onClick={sendReplacementTransaction}
+            >
+              Cancel Transaction
+            </Button>
+          </Row>
+        </Modal>
+      )
+    }}
+  </SharedSnackbarConsumer>
 )

 export default withStyles(styles)(CancelTxModal)
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
+++ b/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} />
-      <ApproveTxModal isOpen={openModal === 'approveTx'} onClose={closeModal} tx={tx} />
+      <CancelTxModal isOpen={openModal === 'cancelTx'} createTransaction={createTransaction} onClose={closeModal} tx={tx} safeAddress={safeAddress} />
+      <ApproveTxModal isOpen={openModal === 'approveTx'} createTransaction={createTransaction} onClose={closeModal} tx={tx} safeAddress={safeAddress} />
    </>
  )
 }
--- a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
+++ b/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>
--- a/src/routes/safe/components/TransactionsNew/index.jsx
+++ b/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, {}> {
-  componentDidMount() {
-    const { safeAddress, fetchTransactions } = this.props
-
+const Transactions = ({
+  transactions = List(),
+  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
+  const hasTransactions = transactions.size > 0

-    return (
-      <React.Fragment>
-        {hasTransactions ? (
-          <TxsTable
-            transactions={transactions}
-            threshold={threshold}
-            owners={owners}
-            userAddress={userAddress}
-            granted={granted}
-          />
-        ) : (
-          <NoTransactions />
-        )}
-      </React.Fragment>
-    )
-  }
-}
-
-Transactions.defaultProps = {
-  transactions: List(),
+  return (
+    <React.Fragment>
+      {hasTransactions ? (
+        <TxsTable
+          transactions={transactions}
+          threshold={threshold}
+          owners={owners}
+          userAddress={userAddress}
+          granted={granted}
+          safeAddress={safeAddress}
+          createTransaction={createTransaction}
+        />
+      ) : (
+        <NoTransactions />
+      )}
+    </React.Fragment>
+  )
 }

 export default Transactions