expanding tx in txs table

src/components/Footer/index.jsx

@@ -9,7 +9,7 @@ import styles from './index.scss'
 const Footer = () => (
   <Block className={styles.footer}>
     <Link to={WELCOME_ADDRESS}>
-      <Paragraph size="sm" color="primary" noMargin>Welcome</Paragraph>
+      <Paragraph size="sm" color="primary" noMargin>Add Safe</Paragraph>
     </Link>
     <Link to={SAFELIST_ADDRESS}>
       <Paragraph size="sm" color="primary" noMargin>Safe List</Paragraph>

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

@@ -0,0 +1,6 @@
+// @flow
+import React from 'react'
+
+const ExpandedTx = () => <div>Yo I'm expanded</div>
+
+export default ExpandedTx

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

@@ -25,9 +25,9 @@ type TxData = {
 
 const formatDate = date => format(date, 'MMM D, YYYY - h:m:s')
 
-export type BalanceRow = SortRow<TxData>
+export type TransactionRow = SortRow<TxData>
 
-export const getTxTableData = (transactions: List<Transaction>): List<BalanceRow> => {
+export const getTxTableData = (transactions: List<Transaction>): List<TransactionRow> => {
   const rows = transactions.map((tx: Transaction) => ({
     [TX_TABLE_NONCE_ID]: tx.nonce,
     [TX_TABLE_TYPE_ID]: 'Outgoing transfer',

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

@@ -1,8 +1,8 @@
 // @flow
-import * as React from 'react'
+import React, { useState } from 'react'
 import { List } from 'immutable'
+import Collapse from '@material-ui/core/Collapse'
 import classNames from 'classnames/bind'
-import { type Token } from '~/logic/tokens/store/model/token'
 import CallMade from '@material-ui/icons/CallMade'
 import CallReceived from '@material-ui/icons/CallReceived'
 import Button from '@material-ui/core/Button'
@@ -10,6 +10,7 @@ import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import { withStyles } from '@material-ui/core/styles'
 import Col from '~/components/layout/Col'
+import { type Token } from '~/logic/tokens/store/model/token'
 import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
@@ -17,51 +18,54 @@ import Modal from '~/components/Modal'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
+import ExpandedTxComponent from './ExpandedTx'
 import {
-  getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type BalanceRow,
+  getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow,
 } from './columns'
 import { styles } from './style'
 import Status from './Status'
 
-type State = {
+type State = {}
-
-}
 
 type Props = {
   classes: Object,
   transactions: List<Transaction>,
 }
 
-type Action = 'Token' | 'Send' | 'Receive'
+const TxsTable = (props: Props) => {
+  const { classes, transactions } = props
+  const [expandedTx, setExpandedTx] = useState(null)
 
-class Balances extends React.Component<Props, State> {
+  const handleTxExpand = (nonce) => {
-  state = {}
+    setExpandedTx(prevTx => (prevTx === nonce ? null : nonce))
+  }
 
-  render() {
+  const columns = generateColumns()
-    const {
+  const autoColumns = columns.filter(c => !c.custom)
-      classes,
+  const filteredData = getTxTableData(transactions)
-      transactions,
-    } = this.props
 
-    const columns = generateColumns()
+  return (
-    const autoColumns = columns.filter(c => !c.custom)
+    <Block className={classes.container}>
-    const filteredData = getTxTableData(transactions)
+      <Table
-
+        label="Transactions"
-    return (
+        defaultOrderBy={TX_TABLE_NONCE_ID}
-      <Block className={classes.container}>
+        defaultOrder="desc"
-        <Table
+        columns={columns}
-          label="Transactions"
+        data={filteredData}
-          defaultOrderBy={TX_TABLE_NONCE_ID}
+        size={filteredData.size}
-          defaultOrder="desc"
+        defaultFixed
-          columns={columns}
+      >
-          data={filteredData}
+        {(sortedData: Array<TransactionRow>) => sortedData.map((row: any, index: number) => (
-          size={filteredData.size}
+          <>
-          defaultFixed
+            <TableRow tabIndex={-1} key={index} className={classes.row} onClick={() => handleTxExpand(row.nonce)}>
-        >
-          {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
-            <TableRow tabIndex={-1} key={index} className={classes.row}>
               {autoColumns.map((column: Column) => (
-                <TableCell key={column.id} className={classes.cell} style={cellWidth(column.width)} align={column.align} component="td">
+                <TableCell
+                  key={column.id}
+                  className={classes.cell}
+                  style={cellWidth(column.width)}
+                  align={column.align}
+                  component="td"
+                >
                   {row[column.id]}
                 </TableCell>
               ))}
@@ -71,12 +75,13 @@ class Balances extends React.Component<Props, State> {
                 </Row>
               </TableCell>
             </TableRow>
-          ))
+            <Collapse in={expandedTx === row.nonce} timeout="auto" component={ExpandedTxComponent} unmountOnExit />
-          }
+          </>
-        </Table>
+        ))
-      </Block>
+        }
-    )
+      </Table>
-  }
+    </Block>
+  )
 }
 
-export default withStyles(styles)(Balances)
+export default withStyles(styles)(TxsTable)