diff --git a/src/routes/safe/components/Balances/dataFetcher.js b/src/routes/safe/components/Balances/dataFetcher.js
index a601c553..568a804a 100644
--- a/src/routes/safe/components/Balances/dataFetcher.js
+++ b/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])
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
index 70bbcda9..8a36e3e3 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
+++ b/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 = () => (
-
-
-
-
-
- TX hash:
- n/a
-
-
- TX fee:
- n/a
-
-
- TX status:
- n/a
-
-
- TX created:
- n/a
-
-
- TX submitted:
- n/a
-
-
-
-
-
- Sent 1.00 ETH to:
-
- 0xbc2BB26a6d821e69A38016f3858561a1D80d4182
-
-
-
- right
-
-
-)
+type Props = {
+ classes: Object,
+ tx: Transaction,
+}
-export default ExpandedTx
+const ExpandedTx = ({ classes, tx }: Props) => {
+ const [tabIndex, setTabIndex] = useState(0)
+
+ const handleTabChange = (event, tabClicked) => {
+ setTabIndex(tabClicked)
+ }
+
+ return (
+
+
+
+
+
+ TX hash:
+ n/a
+
+
+ TX status:
+ n/a
+
+
+ TX created:
+ {formatDate(tx.submissionDate)}
+
+ {tx.executionDate && (
+
+ TX executed:
+ {formatDate(tx.executionDate)}
+
+ )}
+
+
+
+
+ Send 1.00 ETH to:
+
+ {tx.recipient}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default withStyles(styles)(ExpandedTx)
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/style.js b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/style.js
index 239ea4ad..c59b9fea 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/style.js
+++ b/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',
},
})
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/columns.js b/src/routes/safe/components/TransactionsNew/TxsTable/columns.js
index 4896467e..2343322c 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/columns.js
+++ b/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
@@ -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])
}
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
index 8af7495c..9e999abb 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
+++ b/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,
@@ -54,8 +62,8 @@ const TxsTable = (props: Props) => {
defaultFixed
>
{(sortedData: Array) => sortedData.map((row: any, index: number) => (
- <>
- handleTxExpand(row.nonce)}>
+
+ handleTxExpand(row.nonce)}>
{autoColumns.map((column: Column) => (
{
+
+ {expandedTx === row.nonce ? : }
+
{
tx={row[TX_TABLE_RAW_TX_ID]}
/>
-
+
))
}