A Metamask fork with Infura removed and default networks editable
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.
 
 
 
 
 
ciphermask/ui/app/components/transaction-activity-log/transaction-activity-log.co...

130 lines
4.0 KiB

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
? (
<div
className="transaction-activity-log__action-link"
onClick={() => onRetry(id)}
>
{ t('speedUpTransaction') }
</div>
) : 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
? (
<div
className="transaction-activity-log__action-link"
onClick={() => onCancel(id)}
>
{ t('speedUpCancellation') }
</div>
) : 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 (
<div
key={index}
className="transaction-activity-log__activity"
>
<TransactionActivityLogIcon
className="transaction-activity-log__activity-icon"
eventKey={eventKey}
/>
<div className="transaction-activity-log__entry-container">
<div
className="transaction-activity-log__activity-text"
title={activityText}
onClick={() => this.handleActivityClick(hash)}
>
{ activityText }
</div>
{ this.renderInlineRetry(index, activity) }
{ this.renderInlineCancel(index, activity) }
</div>
</div>
)
}
render () {
const { t } = this.context
const { className, activities } = this.props
return (
<div className={classnames('transaction-activity-log', className)}>
<div className="transaction-activity-log__title">
{ t('activityLog') }
</div>
<div className="transaction-activity-log__activities-container">
{ activities.map((activity, index) => this.renderActivity(activity, index)) }
</div>
</div>
)
}
}