diff --git a/src/routes/safe/components/Transactions/TxsTable/Status/index.jsx b/src/routes/safe/components/Transactions/TxsTable/Status/index.jsx index 84f48f86..e5ccd96a 100644 --- a/src/routes/safe/components/Transactions/TxsTable/Status/index.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/Status/index.jsx @@ -1,6 +1,7 @@ // @flow import * as React from 'react' import { withStyles } from '@material-ui/core/styles' +import CircularProgress from '@material-ui/core/CircularProgress' import Block from '~/components/layout/Block' import Paragraph from '~/components/layout/Paragraph/' import Img from '~/components/layout/Img' @@ -12,14 +13,15 @@ import { styles } from './style' type Props = { classes: Object, - status: TransactionStatus, -} + status: TransactionStatus +}; const statusToIcon = { success: OkIcon, cancelled: ErrorIcon, awaiting_confirmations: AwaitingIcon, awaiting_execution: AwaitingIcon, + pending: , } const statusToLabel = { @@ -27,6 +29,7 @@ const statusToLabel = { cancelled: 'Cancelled', awaiting_confirmations: 'Awaiting', awaiting_execution: 'Awaiting', + pending: 'Pending', } const statusIconStyle = { @@ -34,11 +37,21 @@ const statusIconStyle = { width: '14px', } -const Status = ({ classes, status }: Props) => ( - - OK Icon - {statusToLabel[status]} - -) +const Status = ({ classes, status }: Props) => { + const Icon = statusToIcon[status] + + return ( + + {typeof Icon === 'object' ? ( + Icon + ) : ( + OK Icon + )} + + {statusToLabel[status]} + + + ) +} export default withStyles(styles)(Status) diff --git a/src/routes/safe/components/Transactions/TxsTable/Status/style.js b/src/routes/safe/components/Transactions/TxsTable/Status/style.js index 10ffb27b..8de70a09 100644 --- a/src/routes/safe/components/Transactions/TxsTable/Status/style.js +++ b/src/routes/safe/components/Transactions/TxsTable/Status/style.js @@ -29,6 +29,10 @@ export const styles = () => ({ backgroundColor: '#dfebff', color: disabled, }, + pending: { + backgroundColor: '#fff3e2', + color: '#e8673c', + }, statusText: { marginLeft: 'auto', textTransform: 'uppercase', diff --git a/src/routes/safe/container/selector.js b/src/routes/safe/container/selector.js index 259035d0..33ba0af4 100644 --- a/src/routes/safe/container/selector.js +++ b/src/routes/safe/container/selector.js @@ -41,6 +41,8 @@ const getTxStatus = (tx: Transaction, safe: Safe): TransactionStatus => { txStatus = 'cancelled' } else if (tx.confirmations.size === safe.threshold) { txStatus = 'awaiting_execution' + } else if (!tx.confirmations.size) { + txStatus = 'pending' } return txStatus diff --git a/src/routes/safe/store/actions/createTransaction.js b/src/routes/safe/store/actions/createTransaction.js index 04ff30d1..b62c9432 100644 --- a/src/routes/safe/store/actions/createTransaction.js +++ b/src/routes/safe/store/actions/createTransaction.js @@ -85,6 +85,7 @@ const createTransaction = ( from, isExecution ? TX_TYPE_EXECUTION : TX_TYPE_CONFIRMATION, ) + dispatch(fetchTransactions(safeAddress)) } catch (err) { console.error(err) } diff --git a/src/routes/safe/store/actions/processTransaction.js b/src/routes/safe/store/actions/processTransaction.js index e3425387..2d1c038d 100644 --- a/src/routes/safe/store/actions/processTransaction.js +++ b/src/routes/safe/store/actions/processTransaction.js @@ -121,6 +121,7 @@ const processTransaction = ( from, shouldExecute ? TX_TYPE_EXECUTION : TX_TYPE_CONFIRMATION, ) + dispatch(fetchTransactions(safeAddress)) } catch (err) { console.error(err) } diff --git a/src/routes/safe/store/models/transaction.js b/src/routes/safe/store/models/transaction.js index c0b598da..ca2493a0 100644 --- a/src/routes/safe/store/models/transaction.js +++ b/src/routes/safe/store/models/transaction.js @@ -3,10 +3,9 @@ import { List, Record } from 'immutable' import type { RecordFactory, RecordOf } from 'immutable' import { type Confirmation } from '~/routes/safe/store/models/confirmation' -export type TransactionStatus = 'awaiting_confirmations' | 'success' | 'cancelled' | 'awaiting_execution' +export type TransactionStatus = 'awaiting_confirmations' | 'success' | 'cancelled' | 'awaiting_execution' | 'pending' export type TransactionProps = { - name: string, nonce: number, value: string, confirmations: List, @@ -29,7 +28,6 @@ export type TransactionProps = { } export const makeTransaction: RecordFactory = Record({ - name: '', nonce: 0, value: 0, confirmations: List([]),