import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util' import { formatDate } from '../../util' import TransactionActivityLogIcon from './transaction-activity-log-icon' import { CONFIRMED_STATUS } from './transaction-activity-log.constants' import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' export default class TransactionActivityLog extends PureComponent { static contextTypes = { t: PropTypes.func, } static propTypes = { activities: PropTypes.array, className: PropTypes.string, conversionRate: PropTypes.number, inlineRetryIndex: PropTypes.number, inlineCancelIndex: PropTypes.number, nativeCurrency: PropTypes.string, onCancel: PropTypes.func, onRetry: PropTypes.func, primaryTransaction: PropTypes.object, } handleActivityClick = hash => { const { primaryTransaction } = this.props const { metamaskNetworkId } = primaryTransaction const prefix = prefixForNetwork(metamaskNetworkId) const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` global.platform.openWindow({ url: etherscanUrl }) } renderInlineRetry (index, activity) { const { t } = this.context const { inlineRetryIndex, primaryTransaction = {}, onRetry } = this.props const { status } = primaryTransaction const { id } = activity return status !== CONFIRMED_STATUS && index === inlineRetryIndex ? (
onRetry(id)} > { t('speedUpTransaction') }
) : null } renderInlineCancel (index, activity) { const { t } = this.context const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props const { status } = primaryTransaction const { id } = activity return status !== CONFIRMED_STATUS && index === inlineCancelIndex ? (
onCancel(id)} > { t('speedUpCancellation') }
) : null } renderActivity (activity, index) { const { conversionRate, nativeCurrency } = this.props const { eventKey, value, timestamp, hash } = activity const ethValue = index === 0 ? `${getValueFromWeiHex({ value, fromCurrency: nativeCurrency, toCurrency: nativeCurrency, conversionRate, numberOfDecimals: 6, })} ${nativeCurrency}` : getEthConversionFromWeiHex({ value, fromCurrency: nativeCurrency, conversionRate, numberOfDecimals: 3, }) const formattedTimestamp = formatDate(timestamp, 'T \'on\' M/d/y') const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp]) return (
this.handleActivityClick(hash)} > { activityText }
{ this.renderInlineRetry(index, activity) } { this.renderInlineCancel(index, activity) }
) } render () { const { t } = this.context const { className, activities } = this.props return (
{ t('activityLog') }
{ activities.map((activity, index) => this.renderActivity(activity, index)) }
) } }