confirmations tabs expanded tx component
This commit is contained in:
mmv
parent
4ee254c9ab
commit
974f13cba1
|
|
@ -52,6 +52,7 @@ export const generateColumns = () => {
|
|||
disablePadding: false,
|
||||
label: '',
|
||||
custom: true,
|
||||
static: true,
|
||||
}
|
||||
|
||||
return List([assetColumn, balanceColumn, actions])
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
classes: Object,
|
||||
tx: Transaction,
|
||||
}
|
||||
|
||||
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>
|
||||
<Block className={classes.txDataContainer}>
|
||||
<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
|
||||
{formatDate(tx.submissionDate)}
|
||||
</Paragraph>
|
||||
{tx.executionDate && (
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX submitted: </Bold>
|
||||
n/a
|
||||
<Bold>TX executed: </Bold>
|
||||
{formatDate(tx.executionDate)}
|
||||
</Paragraph>
|
||||
)}
|
||||
</Block>
|
||||
<Hairline />
|
||||
<Block>
|
||||
<Block className={classes.txDataContainer}>
|
||||
<Paragraph noMargin>
|
||||
<Bold>Sent 1.00 ETH to:</Bold>
|
||||
<Bold>Send 1.00 ETH to:</Bold>
|
||||
<br />
|
||||
0xbc2BB26a6d821e69A38016f3858561a1D80d4182
|
||||
{tx.recipient}
|
||||
</Paragraph>
|
||||
</Block>
|
||||
</Col>
|
||||
<Col xs={6}>right</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 ExpandedTx
|
||||
export default withStyles(styles)(ExpandedTx)
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<>
|
||||
<TableRow tabIndex={-1} key={index} className={classes.row} onClick={() => handleTxExpand(row.nonce)}>
|
||||
<React.Fragment key={index}>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue