import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Identicon from '../identicon' 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 { CONFIRM_TRANSACTION_ROUTE } from '../../routes' import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions' import { ETH } from '../../constants/common' export default class TransactionListItem extends PureComponent { static propTypes = { history: PropTypes.object, transaction: PropTypes.object, value: PropTypes.string, methodData: PropTypes.object, showRetry: PropTypes.bool, retryTransaction: PropTypes.func, setSelectedToken: PropTypes.func, nonceAndDate: PropTypes.string, token: PropTypes.object, } handleClick = () => { const { transaction, history } = this.props const { id, status, hash, metamaskNetworkId } = transaction 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 }) } } handleRetryClick = event => { event.stopPropagation() const { transaction: { txParams: { to } = {} }, methodData: { name } = {}, setSelectedToken, } = this.props if (name === TOKEN_METHOD_TRANSFER) { setSelectedToken(to) } this.resubmit() } resubmit () { const { transaction: { id }, retryTransaction, history } = this.props retryTransaction(id) .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)) } renderPrimaryCurrency () { const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props return token ? ( ) : ( ) } renderSecondaryCurrency () { const { token, value } = this.props return token ? null : ( ) } render () { const { transaction, methodData, showRetry, nonceAndDate, } = this.props const { txParams = {} } = transaction return (
{ nonceAndDate }
{ this.renderPrimaryCurrency() } { this.renderSecondaryCurrency() }
{ showRetry && !methodData.isFetching && (
Taking too long? Increase the gas price on your transaction
) }
) } }