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 { formatDate } from '../../util' import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' import { CONFIRM_TRANSACTION_ROUTE } from '../../routes' import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions' import { hexToDecimal } from '../../helpers/conversions.util' export default class TransactionListItem extends PureComponent { static propTypes = { history: PropTypes.object, transaction: PropTypes.object, ethTransactionAmount: PropTypes.string, fiatDisplayValue: PropTypes.string, methodData: PropTypes.object, showRetry: PropTypes.bool, retryTransaction: PropTypes.func, setSelectedToken: PropTypes.func, } 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}`)) } render () { const { transaction, ethTransactionAmount, fiatDisplayValue, methodData, showRetry, } = this.props const { txParams = {} } = transaction const nonce = hexToDecimal(txParams.nonce) const nonceAndDateText = `#${nonce} - ${formatDate(transaction.time)}` const fiatDisplayText = `-${fiatDisplayValue}` const ethDisplayText = `-${ethTransactionAmount} ETH` return (
{ nonceAndDateText }
{ fiatDisplayText }
{ ethDisplayText }
{ showRetry && !methodData.isFetching && (
Taking too long? Increase the gas price on your transaction
) }
) } }