Merge pull request #285 from gnosis/feature/208-pending-transactions

Feature #208: Show pending state for newly created transactions

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'
@@ -20,6 +21,7 @@ const statusToIcon = {
   cancelled: ErrorIcon,
   awaiting_confirmations: AwaitingIcon,
   awaiting_execution: AwaitingIcon,
+  pending: <CircularProgress size={14} />,
 }
 
 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) => (
+const Status = ({ classes, status }: Props) => {
-  <Block className={`${classes.container} ${classes[status]}`}>
+  const Icon = statusToIcon[status]
-    <Img src={statusToIcon[status]} alt="OK Icon" style={statusIconStyle} />
+
-    <Paragraph noMargin className={classes.statusText}>{statusToLabel[status]}</Paragraph>
+  return (
-  </Block>
+    <Block className={`${classes.container} ${classes[status]}`}>
-)
+      {typeof Icon === 'object' ? (
+        Icon
+      ) : (
+        <Img src={Icon} alt="OK Icon" style={statusIconStyle} />
+      )}
+      <Paragraph noMargin className={classes.statusText}>
+        {statusToLabel[status]}
+      </Paragraph>
+    </Block>
+  )
+}
 
 export default withStyles(styles)(Status)

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',

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

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)
         }

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)
         }

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<Confirmation>,
@@ -29,7 +28,6 @@ export type TransactionProps = {
 }
 
 export const makeTransaction: RecordFactory<TransactionProps> = Record({
-  name: '',
   nonce: 0,
   value: 0,
   confirmations: List([]),