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,37 +1,34 @@
.transaction-list-item { .transaction-list-item {
box-sizing: border-box; box-sizing: border-box;
min-height: 74px; min-height: 74px;
padding: 8px 20px;
border-bottom: 1px solid $geyser; border-bottom: 1px solid $geyser;
cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@media screen and (max-width: $break-small) {
padding: 8px 20px 12px;
}
&:hover {
background: rgba($alto, .2);
}
&__grid { &__grid {
cursor: pointer;
width: 100%; width: 100%;
padding: 16px 20px;
display: grid; display: grid;
grid-template-columns: 45px 1fr 1fr 1fr; grid-template-columns: 45px 1fr 1fr 1fr;
grid-template-areas: grid-template-areas:
"identicon action status primary-amount" "identicon action status primary-amount"
"identicon nonce status secondary-amount"; "identicon nonce status secondary-amount";
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
grid-template-columns: 45px 5fr 3fr; padding: 8px 20px 12px;
grid-template-areas: grid-template-columns: 45px 5fr 3fr;
"nonce nonce nonce" grid-template-areas:
"identicon action primary-amount" "nonce nonce nonce"
"identicon status secondary-amount"; "identicon action primary-amount"
} "identicon status secondary-amount";
}
&:hover {
background: rgba($alto, .2);
}
} }
&__identicon { &__identicon {
@ -114,4 +111,10 @@
font-size: .5rem; 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 TransactionAction from '../transaction-action'
import CurrencyDisplay from '../currency-display' import CurrencyDisplay from '../currency-display'
import TokenCurrencyDisplay from '../token-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 { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions' import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
import { ETH } from '../../constants/common' import { ETH } from '../../constants/common'
@ -24,17 +24,21 @@ export default class TransactionListItem extends PureComponent {
assetImages: PropTypes.object, assetImages: PropTypes.object,
} }
state = {
showTransactionDetails: false,
}
handleClick = () => { handleClick = () => {
const { transaction, history } = this.props const { transaction, history } = this.props
const { id, status, hash, metamaskNetworkId } = transaction const { id, status } = transaction
const { showTransactionDetails } = this.state
if (status === UNAPPROVED_STATUS) { if (status === UNAPPROVED_STATUS) {
history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`) history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
} else if (hash) { return
const prefix = prefixForNetwork(metamaskNetworkId)
const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
global.platform.openWindow({ url: etherscanUrl })
} }
this.setState({ showTransactionDetails: !showTransactionDetails })
} }
handleRetryClick = event => { handleRetryClick = event => {
@ -75,6 +79,8 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--primary" className="transaction-list-item__amount transaction-list-item__amount--primary"
value={value} value={value}
prefix="-" 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" className="transaction-list-item__amount transaction-list-item__amount--secondary"
prefix="-" prefix="-"
value={value} value={value}
numberOfDecimals={2}
currency={ETH}
/> />
) )
} }
@ -104,13 +108,14 @@ export default class TransactionListItem extends PureComponent {
assetImages, assetImages,
} = this.props } = this.props
const { txParams = {} } = transaction const { txParams = {} } = transaction
const { showTransactionDetails } = this.state
return ( return (
<div <div className="transaction-list-item">
className="transaction-list-item" <div
onClick={this.handleClick} className="transaction-list-item__grid"
> onClick={this.handleClick}
<div className="transaction-list-item__grid"> >
<Identicon <Identicon
className="transaction-list-item__identicon" className="transaction-list-item__identicon"
address={txParams.to} address={txParams.to}
@ -141,12 +146,12 @@ export default class TransactionListItem extends PureComponent {
{ this.renderSecondaryCurrency() } { this.renderSecondaryCurrency() }
</div> </div>
{ {
showRetry && methodData.done && ( showTransactionDetails && (
<div <div className="transaction-list-item__details-container">
className="transaction-list-item__retry" <TransactionListItemDetails
onClick={this.handleRetryClick} transaction={transaction}
> showRetry={showRetry && methodData.done}
<span>Taking too long? Increase the gas price on your transaction</span> />
</div> </div>
) )
} }

View File

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