confirmed/unconfirmed labels
This commit is contained in:
parent
a83f35656d
commit
ae74c0a8ca
|
@ -154,7 +154,13 @@ class Layout extends React.Component<Props, State> {
|
|||
/>
|
||||
)}
|
||||
{tabIndex === 1 && (
|
||||
<Transactions transactions={transactions} fetchTransactions={fetchTransactions} safeAddress={address} />
|
||||
<Transactions
|
||||
threshold={safe.threshold}
|
||||
owners={safe.owners}
|
||||
transactions={transactions}
|
||||
fetchTransactions={fetchTransactions}
|
||||
safeAddress={address}
|
||||
/>
|
||||
)}
|
||||
{tabIndex === 2 && (
|
||||
<Settings
|
||||
|
|
|
@ -10,16 +10,23 @@ 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 { type Owner } from '~/routes/safe/store/models/owner'
|
||||
import { styles } from './style'
|
||||
import { formatDate } from '../columns'
|
||||
|
||||
type Props = {
|
||||
classes: Object,
|
||||
tx: Transaction,
|
||||
threshold: number,
|
||||
owners: List<Owner>,
|
||||
}
|
||||
|
||||
const ExpandedTx = ({ classes, tx }: Props) => {
|
||||
const ExpandedTx = ({
|
||||
classes, tx, threshold, owners,
|
||||
}: Props) => {
|
||||
const [tabIndex, setTabIndex] = useState<number>(0)
|
||||
const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
|
||||
const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
|
||||
|
||||
const handleTabChange = (event, tabClicked) => {
|
||||
setTabIndex(tabClicked)
|
||||
|
@ -61,8 +68,8 @@ const ExpandedTx = ({ classes, tx }: Props) => {
|
|||
<Col xs={6} className={classes.rightCol}>
|
||||
<Row>
|
||||
<Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
|
||||
<Tab label="Confirmed" />
|
||||
<Tab label="Unconfirmed" />
|
||||
<Tab label={confirmedLabel} />
|
||||
<Tab label={unconfirmedLabel} />
|
||||
</Tabs>
|
||||
</Row>
|
||||
</Col>
|
||||
|
|
|
@ -14,6 +14,7 @@ import Row from '~/components/layout/Row'
|
|||
import { type Column, cellWidth } from '~/components/Table/TableHead'
|
||||
import Table from '~/components/Table'
|
||||
import { type Transaction } from '~/routes/safe/store/models/transaction'
|
||||
import { type Owner } from '~/routes/safe/store/models/owner'
|
||||
import ExpandedTxComponent from './ExpandedTx'
|
||||
import {
|
||||
getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow, TX_TABLE_RAW_TX_ID,
|
||||
|
@ -29,10 +30,14 @@ const expandCellStyle = {
|
|||
type Props = {
|
||||
classes: Object,
|
||||
transactions: List<Transaction>,
|
||||
threshold: number,
|
||||
owners: List<Owner>,
|
||||
}
|
||||
|
||||
const TxsTable = (props: Props) => {
|
||||
const { classes, transactions } = props
|
||||
const {
|
||||
classes, transactions, threshold, owners,
|
||||
} = props
|
||||
const [expandedTx, setExpandedTx] = useState<string | null>(null)
|
||||
|
||||
const handleTxExpand = (nonce) => {
|
||||
|
@ -93,6 +98,8 @@ const TxsTable = (props: Props) => {
|
|||
component={ExpandedTxComponent}
|
||||
unmountOnExit
|
||||
tx={row[TX_TABLE_RAW_TX_ID]}
|
||||
threshold={threshold}
|
||||
owners={owners}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
|
@ -4,12 +4,14 @@ import { List } from 'immutable'
|
|||
import NoTransactions from '~/routes/safe/components/TransactionsNew/NoTransactions'
|
||||
import TxsTable from '~/routes/safe/components/TransactionsNew/TxsTable'
|
||||
import { type Transaction } from '~/routes/safe/store/models/transaction'
|
||||
import { type Owner } from '~/routes/safe/store/models/owner'
|
||||
|
||||
type Props = {
|
||||
safeAddress: string,
|
||||
threshold: number,
|
||||
fetchTransactions: Function,
|
||||
transactions: List<Transaction>,
|
||||
owners: List<Owner>,
|
||||
}
|
||||
|
||||
class Transactions extends React.Component<Props, {}> {
|
||||
|
@ -20,11 +22,17 @@ class Transactions extends React.Component<Props, {}> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { transactions, safeName, threshold } = this.props
|
||||
const { transactions, owners, threshold } = this.props
|
||||
const hasTransactions = transactions.size > 0
|
||||
|
||||
return (
|
||||
<React.Fragment>{hasTransactions ? <TxsTable transactions={transactions} /> : <NoTransactions />}</React.Fragment>
|
||||
<React.Fragment>
|
||||
{hasTransactions ? (
|
||||
<TxsTable transactions={transactions} threshold={threshold} owners={owners} />
|
||||
) : (
|
||||
<NoTransactions />
|
||||
)}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue