aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/transaction-activity-log/transaction-activity-log.component.js')
-rw-r--r--ui/app/components/transaction-activity-log/transaction-activity-log.component.js91
1 files changed, 91 insertions, 0 deletions
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
new file mode 100644
index 000000000..c4cf57d14
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getActivities } from './transaction-activity-log.util'
+import Card from '../card'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
+import { ETH } from '../../constants/common'
+import { formatDate } from '../../util'
+
+export default class TransactionActivityLog extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ transaction: PropTypes.object,
+ className: PropTypes.string,
+ conversionRate: PropTypes.number,
+ }
+
+ state = {
+ activities: [],
+ }
+
+ componentDidMount () {
+ this.setActivites()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { transaction: { history: prevHistory = [] } = {} } = prevProps
+ const { transaction: { history = [] } = {} } = this.props
+
+ if (prevHistory.length !== history.length) {
+ this.setActivites()
+ }
+ }
+
+ setActivites () {
+ const activities = getActivities(this.props.transaction)
+ this.setState({ activities })
+ }
+
+ renderActivity (activity, index) {
+ const { conversionRate } = this.props
+ const { eventKey, value, timestamp } = activity
+ const ethValue = index === 0
+ ? `${getValueFromWeiHex({
+ value,
+ toCurrency: ETH,
+ conversionRate,
+ numberOfDecimals: 6,
+ })} ${ETH}`
+ : getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+ const formattedTimestamp = formatDate(timestamp)
+ const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
+
+ return (
+ <div
+ key={index}
+ className="transaction-activity-log__activity"
+ >
+ <div className="transaction-activity-log__activity-icon" />
+ <div
+ className="transaction-activity-log__activity-text"
+ title={activityText}
+ >
+ { activityText }
+ </div>
+ </div>
+ )
+ }
+
+ render () {
+ const { t } = this.context
+ const { className } = this.props
+ const { activities } = this.state
+
+ return (
+ <div className={classnames('transaction-activity-log', className)}>
+ <Card
+ title={t('activityLog')}
+ className="transaction-activity-log__card"
+ >
+ <div className="transaction-activity-log__activities-container">
+ { activities.map((activity, index) => this.renderActivity(activity, index)) }
+ </div>
+ </Card>
+ </div>
+ )
+ }
+}