From 3183e3b62695dc020955ce6aecf6400c2b6a64d4 Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Wed, 20 Nov 2019 14:01:49 +0400
Subject: [PATCH] Show newly created tx as pending one

---
 .../Transactions/TxsTable/Status/index.jsx    | 29 ++++++++++++++-----
 .../Transactions/TxsTable/Status/style.js     |  4 +++
 src/routes/safe/container/selector.js         |  2 ++
 .../safe/store/actions/createTransaction.js   |  1 +
 .../safe/store/actions/processTransaction.js  |  1 +
 src/routes/safe/store/models/transaction.js   |  4 +--
 6 files changed, 30 insertions(+), 11 deletions(-)

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: <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) => (
-  <Block className={`${classes.container} ${classes[status]}`}>
-    <Img src={statusToIcon[status]} alt="OK Icon" style={statusIconStyle} />
-    <Paragraph noMargin className={classes.statusText}>{statusToLabel[status]}</Paragraph>
-  </Block>
-)
+const Status = ({ classes, status }: Props) => {
+  const Icon = statusToIcon[status]
+
+  return (
+    <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)
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<Confirmation>,
@@ -29,7 +28,6 @@ export type TransactionProps = {
 }
 
 export const makeTransaction: RecordFactory<TransactionProps> = Record({
-  name: '',
   nonce: 0,
   value: 0,
   confirmations: List([]),