diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx
index f8e20a50..b20bb25f 100644
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/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'
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx
new file mode 100644
index 00000000..c7a698e2
--- /dev/null
+++ b/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) => (
+
+
+
+ Cancel transaction
+
+
+
+
+
+
+
+)
+
+export default withStyles(styles)(CancelTxModal)
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/style.js b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/style.js
new file mode 100644
index 00000000..5e062d96
--- /dev/null
+++ b/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',
+ },
+})
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
index 10ee3b5a..24a5fa78 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
+++ b/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,
}
+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(0)
+ const [openModal, setOpenModal] = useState(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,72 +73,75 @@ const ExpandedTx = ({
}
return (
-
-
-
-
-
- TX hash:
- {tx.executionTxHash ? (
-
- {shortVersionOf(tx.executionTxHash, 4)}
+ <>
+
+
+
+
+
+ TX hash:
+ {tx.executionTxHash ? (
+
+ {shortVersionOf(tx.executionTxHash, 4)}
+
+
+ ) : (
+ 'n/a'
+ )}
+
+
+ TX status:
+
+ {txStatusToLabel[txStatus]}
+
+
+
+ TX created:
+ {formatDate(tx.submissionDate)}
+
+ {tx.executionDate && (
+
+ TX executed:
+ {formatDate(tx.executionDate)}
+
+ )}
+
+
+
+
+
+ Send
+ {' '}
+ {fromWei(toBN(tx.value), 'ether')}
+ {' '}
+ {tx.symbol}
+ {' '}
+to:
+
+
+
+ {shortVersionOf(tx.recipient, 4)}
- ) : (
- 'n/a'
- )}
-
-
- TX status:
-
- {txStatusToLabel[txStatus]}
-
-
-
- TX created:
- {formatDate(tx.submissionDate)}
-
- {tx.executionDate && (
-
- TX executed:
- {formatDate(tx.executionDate)}
- )}
-
-
-
-
-
- Send
- {' '}
- {fromWei(toBN(tx.value), 'ether')}
- {' '}
- {tx.symbol}
- {' '}
- to:
-
-
-
- {shortVersionOf(tx.recipient, 4)}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {tabIndex === 0 && }
- {tabIndex === 1 && }
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {tabIndex === 0 && }
+ {tabIndex === 1 && }
+
+
+
+
+
+
)
}