confirmations tabs expanded tx component

src/routes/safe/components/Balances/dataFetcher.js

@@ -52,6 +52,7 @@ export const generateColumns = () => {
     disablePadding: false,
     label: '',
     custom: true,
+    static: true,
   }
 
   return List([assetColumn, balanceColumn, actions])

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx

@@ -1,50 +1,74 @@
 // @flow
-import React from 'react'
+import React, { useState } from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab'
 import Row from '~/components/layout/Row'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 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 { styles } from './style'
+import { formatDate } from '../columns'
 
-const ExpandedTx = () => (
+type Props = {
-  <Block>
+  classes: Object,
-    <Row>
+  tx: Transaction,
-      <Col xs={6} layout="column">
+}
-        <Block>
-          <Paragraph noMargin>
-            <Bold>TX hash: </Bold>
-            n/a
-          </Paragraph>
-          <Paragraph noMargin>
-            <Bold>TX fee: </Bold>
-            n/a
-          </Paragraph>
-          <Paragraph noMargin>
-            <Bold>TX status: </Bold>
-            n/a
-          </Paragraph>
-          <Paragraph noMargin>
-            <Bold>TX created: </Bold>
-            n/a
-          </Paragraph>
-          <Paragraph noMargin>
-            <Bold>TX submitted: </Bold>
-            n/a
-          </Paragraph>
-        </Block>
-        <Hairline />
-        <Block>
-          <Paragraph noMargin>
-            <Bold>Sent 1.00 ETH to:</Bold>
-            <br />
-            0xbc2BB26a6d821e69A38016f3858561a1D80d4182
-          </Paragraph>
-        </Block>
-      </Col>
-      <Col xs={6}>right</Col>
-    </Row>
-  </Block>
-)
 
-export default ExpandedTx
+const ExpandedTx = ({ classes, tx }: Props) => {
+  const [tabIndex, setTabIndex] = useState<number>(0)
+
+  const handleTabChange = (event, tabClicked) => {
+    setTabIndex(tabClicked)
+  }
+
+  return (
+    <Block>
+      <Row>
+        <Col xs={6} layout="column">
+          <Block className={classes.txDataContainer}>
+            <Paragraph noMargin>
+              <Bold>TX hash: </Bold>
+              n/a
+            </Paragraph>
+            <Paragraph noMargin>
+              <Bold>TX status: </Bold>
+              n/a
+            </Paragraph>
+            <Paragraph noMargin>
+              <Bold>TX created: </Bold>
+              {formatDate(tx.submissionDate)}
+            </Paragraph>
+            {tx.executionDate && (
+              <Paragraph noMargin>
+                <Bold>TX executed: </Bold>
+                {formatDate(tx.executionDate)}
+              </Paragraph>
+            )}
+          </Block>
+          <Hairline />
+          <Block className={classes.txDataContainer}>
+            <Paragraph noMargin>
+              <Bold>Send 1.00 ETH to:</Bold>
+              <br />
+              {tx.recipient}
+            </Paragraph>
+          </Block>
+        </Col>
+        <Col xs={6} className={classes.rightCol}>
+          <Row>
+            <Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
+              <Tab label="Confirmed" />
+              <Tab label="Unconfirmed" />
+            </Tabs>
+          </Row>
+        </Col>
+      </Row>
+    </Block>
+  )
+}
+
+export default withStyles(styles)(ExpandedTx)

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/style.js

@@ -1,8 +1,12 @@
 // @flow
-import { smallFontSize, boldFont, sm } from '~/theme/variables'
+import { md, lg } from '~/theme/variables'
 
 export const styles = () => ({
   txDataContainer: {
-    
+    padding: `${lg} ${md}`,
+  },
+  rightCol: {
+    boxSizing: 'border-box',
+    borderLeft: 'solid 1px #c8ced4',
   },
 })

src/routes/safe/components/TransactionsNew/TxsTable/columns.js

@@ -12,6 +12,7 @@ export const TX_TABLE_DATE_ID = 'date'
 export const TX_TABLE_AMOUNT_ID = 'amount'
 export const TX_TABLE_STATUS_ID = 'status'
 export const TX_TABLE_RAW_TX_ID = 'tx'
+export const TX_TABLE_EXPAND_ICON = 'expand'
 
 const web3 = getWeb3()
 const { toBN, fromWei } = web3.utils
@@ -19,12 +20,13 @@ const { toBN, fromWei } = web3.utils
 type TxData = {
   nonce: number,
   type: string,
-  date: Date,
+  date: string,
   amount: number | string,
   status: string,
+  tx: Transaction,
 }
 
-const formatDate = date => format(date, 'MMM D, YYYY - h:m:s')
+export const formatDate = (date: Date): string => format(date, 'MMM D, YYYY - h:m:s')
 
 export type TransactionRow = SortRow<TxData>
 
@@ -85,5 +87,15 @@ export const generateColumns = () => {
     custom: true,
   }
 
-  return List([nonceColumn, typeColumn, valueColumn, dateColumn, statusColumn])
+  const expandIconColumn: Column = {
+    id: TX_TABLE_EXPAND_ICON,
+    order: false,
+    disablePadding: true,
+    label: '',
+    custom: true,
+    width: 50,
+    static: true,
+  }
+
+  return List([nonceColumn, typeColumn, valueColumn, dateColumn, statusColumn, expandIconColumn])
 }

src/routes/safe/components/TransactionsNew/TxsTable/index.jsx

@@ -2,6 +2,9 @@
 import React, { useState } from 'react'
 import { List } from 'immutable'
 import Collapse from '@material-ui/core/Collapse'
+import IconButton from '@material-ui/core/IconButton'
+import ExpandLess from '@material-ui/icons/ExpandLess'
+import ExpandMore from '@material-ui/icons/ExpandMore'
 import classNames from 'classnames/bind'
 import CallMade from '@material-ui/icons/CallMade'
 import CallReceived from '@material-ui/icons/CallReceived'
@@ -25,6 +28,11 @@ import {
 import { styles } from './style'
 import Status from './Status'
 
+const expandCellStyle = {
+  paddingLeft: 0,
+  paddingRight: 0,
+}
+
 type Props = {
   classes: Object,
   transactions: List<Transaction>,
@@ -54,8 +62,8 @@ const TxsTable = (props: Props) => {
         defaultFixed
       >
         {(sortedData: Array<TransactionRow>) => sortedData.map((row: any, index: number) => (
-          <>
+          <React.Fragment key={index}>
-            <TableRow tabIndex={-1} key={index} className={classes.row} onClick={() => handleTxExpand(row.nonce)}>
+            <TableRow tabIndex={-1} className={classes.row} onClick={() => handleTxExpand(row.nonce)}>
               {autoColumns.map((column: Column) => (
                 <TableCell
                   key={column.id}
@@ -72,6 +80,9 @@ const TxsTable = (props: Props) => {
                   <Status status={row.status} />
                 </Row>
               </TableCell>
+              <TableCell style={expandCellStyle}>
+                <IconButton disableRipple>{expandedTx === row.nonce ? <ExpandLess /> : <ExpandMore />}</IconButton>
+              </TableCell>
             </TableRow>
             <TableCell
               style={{ paddingBottom: 0, paddingTop: 0 }}
@@ -86,7 +97,7 @@ const TxsTable = (props: Props) => {
                 tx={row[TX_TABLE_RAW_TX_ID]}
               />
             </TableCell>
-          </>
+          </React.Fragment>
         ))
         }
       </Table>