diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx index 2c5882c5..8ab1c99d 100644 --- a/src/components/Footer/index.jsx +++ b/src/components/Footer/index.jsx @@ -9,7 +9,7 @@ import styles from './index.scss' const Footer = () => ( - Welcome + Add Safe Safe List diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx new file mode 100644 index 00000000..19f95a5b --- /dev/null +++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx @@ -0,0 +1,6 @@ +// @flow +import React from 'react' + +const ExpandedTx = () =>
Yo I'm expanded
+ +export default ExpandedTx diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/columns.js b/src/routes/safe/components/TransactionsNew/TxsTable/columns.js index 5eeb41fa..b4c0fc14 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/columns.js +++ b/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 +export type TransactionRow = SortRow -export const getTxTableData = (transactions: List): List => { +export const getTxTableData = (transactions: List): List => { const rows = transactions.map((tx: Transaction) => ({ [TX_TABLE_NONCE_ID]: tx.nonce, [TX_TABLE_TYPE_ID]: 'Outgoing transfer', diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx index 2c455389..2c906247 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx +++ b/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, } -type Action = 'Token' | 'Send' | 'Receive' +const TxsTable = (props: Props) => { + const { classes, transactions } = props + const [expandedTx, setExpandedTx] = useState(null) -class Balances extends React.Component { - state = {} + const handleTxExpand = (nonce) => { + setExpandedTx(prevTx => (prevTx === nonce ? null : nonce)) + } - render() { - const { - classes, - transactions, - } = this.props + const columns = generateColumns() + const autoColumns = columns.filter(c => !c.custom) + const filteredData = getTxTableData(transactions) - const columns = generateColumns() - const autoColumns = columns.filter(c => !c.custom) - const filteredData = getTxTableData(transactions) - - return ( - - - {(sortedData: Array) => sortedData.map((row: any, index: number) => ( - + return ( + +
+ {(sortedData: Array) => sortedData.map((row: any, index: number) => ( + <> + handleTxExpand(row.nonce)}> {autoColumns.map((column: Column) => ( - + {row[column.id]} ))} @@ -71,12 +75,13 @@ class Balances extends React.Component { - )) - } -
-
- ) - } + + + )) + } + +
+ ) } -export default withStyles(styles)(Balances) +export default withStyles(styles)(TxsTable)