You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.8 KiB
88 lines
2.8 KiB
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import SenderToRecipient from '../sender-to-recipient'
|
|
import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
|
|
import TransactionActivityLog from '../transaction-activity-log'
|
|
import TransactionBreakdown from '../transaction-breakdown'
|
|
import Button from '../button'
|
|
import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
|
|
|
|
export default class TransactionListItemDetails extends PureComponent {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
}
|
|
|
|
static propTypes = {
|
|
onRetry: PropTypes.func,
|
|
showRetry: PropTypes.bool,
|
|
transaction: PropTypes.object,
|
|
}
|
|
|
|
handleEtherscanClick = () => {
|
|
const { hash, metamaskNetworkId } = this.props.transaction
|
|
|
|
const prefix = prefixForNetwork(metamaskNetworkId)
|
|
const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
|
|
global.platform.openWindow({ url: etherscanUrl })
|
|
this.setState({ showTransactionDetails: true })
|
|
}
|
|
|
|
handleRetry = event => {
|
|
const { onRetry } = this.props
|
|
|
|
event.stopPropagation()
|
|
onRetry()
|
|
}
|
|
|
|
render () {
|
|
const { t } = this.context
|
|
const { transaction, showRetry } = this.props
|
|
const { txParams: { to, from } = {} } = transaction
|
|
|
|
return (
|
|
<div className="transaction-list-item-details">
|
|
<div className="transaction-list-item-details__header">
|
|
<div>Details</div>
|
|
<div className="transaction-list-item-details__header-buttons">
|
|
{
|
|
showRetry && (
|
|
<Button
|
|
type="raised"
|
|
onClick={this.handleRetry}
|
|
className="transaction-list-item-details__header-button"
|
|
>
|
|
{ t('speedUp') }
|
|
</Button>
|
|
)
|
|
}
|
|
<Button
|
|
type="raised"
|
|
onClick={this.handleEtherscanClick}
|
|
className="transaction-list-item-details__header-button"
|
|
>
|
|
<img src="/images/arrow-popout.svg" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="transaction-list-item-details__sender-to-recipient-container">
|
|
<SenderToRecipient
|
|
variant={CARDS_VARIANT}
|
|
addressOnly
|
|
recipientAddress={to}
|
|
senderAddress={from}
|
|
/>
|
|
</div>
|
|
<div className="transaction-list-item-details__cards-container">
|
|
<TransactionBreakdown
|
|
transaction={transaction}
|
|
className="transaction-list-item-details__transaction-breakdown"
|
|
/>
|
|
<TransactionActivityLog
|
|
transaction={transaction}
|
|
className="transaction-list-item-details__transaction-activity-log"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|