From ae74c0a8ca46f1fdac6cf8a08e2fce49f1c3e132 Mon Sep 17 00:00:00 2001
From: mmv <mmvsha73@gmail.com>
Date: Fri, 21 Jun 2019 18:44:40 +0400
Subject: [PATCH] confirmed/unconfirmed labels

---
 src/routes/safe/components/Layout.jsx               |  8 +++++++-
 .../TransactionsNew/TxsTable/ExpandedTx/index.jsx   | 13 ++++++++++---
 .../components/TransactionsNew/TxsTable/index.jsx   |  9 ++++++++-
 .../safe/components/TransactionsNew/index.jsx       | 12 ++++++++++--
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx
index 62ee4495..0cfcfd1e 100644
--- a/src/routes/safe/components/Layout.jsx
+++ b/src/routes/safe/components/Layout.jsx
@@ -154,7 +154,13 @@ class Layout extends React.Component<Props, State> {
           />
         )}
         {tabIndex === 1 && (
-          <Transactions transactions={transactions} fetchTransactions={fetchTransactions} safeAddress={address} />
+          <Transactions
+            threshold={safe.threshold}
+            owners={safe.owners}
+            transactions={transactions}
+            fetchTransactions={fetchTransactions}
+            safeAddress={address}
+          />
         )}
         {tabIndex === 2 && (
           <Settings
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
index 8a36e3e3..1c5b9e71 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
@@ -10,16 +10,23 @@ import Bold from '~/components/layout/Bold'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
+import { type Owner } from '~/routes/safe/store/models/owner'
 import { styles } from './style'
 import { formatDate } from '../columns'
 
 type Props = {
   classes: Object,
   tx: Transaction,
+  threshold: number,
+  owners: List<Owner>,
 }
 
-const ExpandedTx = ({ classes, tx }: Props) => {
+const ExpandedTx = ({
+  classes, tx, threshold, owners,
+}: Props) => {
   const [tabIndex, setTabIndex] = useState<number>(0)
+  const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
+  const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
 
   const handleTabChange = (event, tabClicked) => {
     setTabIndex(tabClicked)
@@ -61,8 +68,8 @@ const ExpandedTx = ({ classes, tx }: Props) => {
         <Col xs={6} className={classes.rightCol}>
           <Row>
             <Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
-              <Tab label="Confirmed" />
-              <Tab label="Unconfirmed" />
+              <Tab label={confirmedLabel} />
+              <Tab label={unconfirmedLabel} />
             </Tabs>
           </Row>
         </Col>
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
index 1fe95875..1136952f 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
@@ -14,6 +14,7 @@ import Row from '~/components/layout/Row'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
+import { type Owner } from '~/routes/safe/store/models/owner'
 import ExpandedTxComponent from './ExpandedTx'
 import {
   getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow, TX_TABLE_RAW_TX_ID,
@@ -29,10 +30,14 @@ const expandCellStyle = {
 type Props = {
   classes: Object,
   transactions: List<Transaction>,
+  threshold: number,
+  owners: List<Owner>,
 }
 
 const TxsTable = (props: Props) => {
-  const { classes, transactions } = props
+  const {
+    classes, transactions, threshold, owners,
+  } = props
   const [expandedTx, setExpandedTx] = useState<string | null>(null)
 
   const handleTxExpand = (nonce) => {
@@ -93,6 +98,8 @@ const TxsTable = (props: Props) => {
                   component={ExpandedTxComponent}
                   unmountOnExit
                   tx={row[TX_TABLE_RAW_TX_ID]}
+                  threshold={threshold}
+                  owners={owners}
                 />
               </TableCell>
             </TableRow>
diff --git a/src/routes/safe/components/TransactionsNew/index.jsx b/src/routes/safe/components/TransactionsNew/index.jsx
index 5a56c125..de6addb0 100644
--- a/src/routes/safe/components/TransactionsNew/index.jsx
+++ b/src/routes/safe/components/TransactionsNew/index.jsx
@@ -4,12 +4,14 @@ import { List } from 'immutable'
 import NoTransactions from '~/routes/safe/components/TransactionsNew/NoTransactions'
 import TxsTable from '~/routes/safe/components/TransactionsNew/TxsTable'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
+import { type Owner } from '~/routes/safe/store/models/owner'
 
 type Props = {
   safeAddress: string,
   threshold: number,
   fetchTransactions: Function,
   transactions: List<Transaction>,
+  owners: List<Owner>,
 }
 
 class Transactions extends React.Component<Props, {}> {
@@ -20,11 +22,17 @@ class Transactions extends React.Component<Props, {}> {
   }
 
   render() {
-    const { transactions, safeName, threshold } = this.props
+    const { transactions, owners, threshold } = this.props
     const hasTransactions = transactions.size > 0
 
     return (
-      <React.Fragment>{hasTransactions ? <TxsTable transactions={transactions} /> : <NoTransactions />}</React.Fragment>
+      <React.Fragment>
+        {hasTransactions ? (
+          <TxsTable transactions={transactions} threshold={threshold} owners={owners} />
+        ) : (
+          <NoTransactions />
+        )}
+      </React.Fragment>
     )
   }
 }