1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Add transaction details to TransactionListItem component

This commit is contained in:
Alexander Tseung 2018-08-31 12:37:30 -07:00
parent 5beb34aa52
commit 01e9f03701
3 changed files with 46 additions and 37 deletions

View File

@ -1,24 +1,16 @@
.transaction-list-item {
box-sizing: border-box;
min-height: 74px;
padding: 8px 20px;
border-bottom: 1px solid $geyser;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@media screen and (max-width: $break-small) {
padding: 8px 20px 12px;
}
&:hover {
background: rgba($alto, .2);
}
&__grid {
cursor: pointer;
width: 100%;
padding: 16px 20px;
display: grid;
grid-template-columns: 45px 1fr 1fr 1fr;
grid-template-areas:
@ -26,12 +18,17 @@
"identicon nonce status secondary-amount";
@media screen and (max-width: $break-small) {
padding: 8px 20px 12px;
grid-template-columns: 45px 5fr 3fr;
grid-template-areas:
"nonce nonce nonce"
"identicon action primary-amount"
"identicon status secondary-amount";
}
&:hover {
background: rgba($alto, .2);
}
}
&__identicon {
@ -114,4 +111,10 @@
font-size: .5rem;
}
}
&__details-container {
padding: 8px 16px 16px;
background: #f3f4f7;
width: 100%;
}
}

View File

@ -5,7 +5,7 @@ import TransactionStatus from '../transaction-status'
import TransactionAction from '../transaction-action'
import CurrencyDisplay from '../currency-display'
import TokenCurrencyDisplay from '../token-currency-display'
import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
import TransactionListItemDetails from '../transaction-list-item-details'
import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
import { ETH } from '../../constants/common'
@ -24,17 +24,21 @@ export default class TransactionListItem extends PureComponent {
assetImages: PropTypes.object,
}
state = {
showTransactionDetails: false,
}
handleClick = () => {
const { transaction, history } = this.props
const { id, status, hash, metamaskNetworkId } = transaction
const { id, status } = transaction
const { showTransactionDetails } = this.state
if (status === UNAPPROVED_STATUS) {
history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
} else if (hash) {
const prefix = prefixForNetwork(metamaskNetworkId)
const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
global.platform.openWindow({ url: etherscanUrl })
return
}
this.setState({ showTransactionDetails: !showTransactionDetails })
}
handleRetryClick = event => {
@ -75,6 +79,8 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--primary"
value={value}
prefix="-"
numberOfDecimals={2}
currency={ETH}
/>
)
}
@ -89,8 +95,6 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--secondary"
prefix="-"
value={value}
numberOfDecimals={2}
currency={ETH}
/>
)
}
@ -104,13 +108,14 @@ export default class TransactionListItem extends PureComponent {
assetImages,
} = this.props
const { txParams = {} } = transaction
const { showTransactionDetails } = this.state
return (
<div className="transaction-list-item">
<div
className="transaction-list-item"
className="transaction-list-item__grid"
onClick={this.handleClick}
>
<div className="transaction-list-item__grid">
<Identicon
className="transaction-list-item__identicon"
address={txParams.to}
@ -141,12 +146,12 @@ export default class TransactionListItem extends PureComponent {
{ this.renderSecondaryCurrency() }
</div>
{
showRetry && methodData.done && (
<div
className="transaction-list-item__retry"
onClick={this.handleRetryClick}
>
<span>Taking too long? Increase the gas price on your transaction</span>
showTransactionDetails && (
<div className="transaction-list-item__details-container">
<TransactionListItemDetails
transaction={transaction}
showRetry={showRetry && methodData.done}
/>
</div>
)
}

View File

@ -7,7 +7,7 @@
&__completed-transactions {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
}
&__header {
@ -35,6 +35,7 @@
flex: 1;
display: grid;
grid-template-rows: 35% 1fr;
padding-top: 8px;
}
&__empty-text {