From d98a768b516be1c542e87b550340fb5667cbfb2e Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Tue, 2 Jul 2019 19:13:46 +0400 Subject: [PATCH] approve & cancel tx modals wip --- .../components/Balances/SendModal/index.jsx | 2 +- .../ExpandedTx/CancelTxModal/index.jsx | 43 ++++++ .../ExpandedTx/CancelTxModal/style.js | 32 ++++ .../TxsTable/ExpandedTx/index.jsx | 137 ++++++++++-------- 4 files changed, 150 insertions(+), 64 deletions(-) create mode 100644 src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx create mode 100644 src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/style.js 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 && } + + + + + + ) }