confirmed/unconfirmed labels

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

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={confirmedLabel} />
-              <Tab label="Unconfirmed" />
+              <Tab label={unconfirmedLabel} />
             </Tabs>
           </Row>
         </Col>

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>

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