ui/app/components/transaction-action/transaction-action.component.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { getTransactionActionKey } from '../../helpers/transactions.util'
import { camelCaseToCapitalize } from '../../helpers/common.util'

export default class TransactionAction extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
  }

  static propTypes = {
    className: PropTypes.string,
    transaction: PropTypes.object,
    methodData: PropTypes.object,
  }

  state = {
    transactionAction: '',
  }

  componentDidMount () {
    this.getTransactionAction()
  }

  componentDidUpdate () {
    this.getTransactionAction()
  }

  async getTransactionAction () {
    const { transactionAction } = this.state
    const { transaction, methodData } = this.props
    const { data, done } = methodData
    const { name } = data

    if (!done || transactionAction) {
      return
    }

    const actionKey = await getTransactionActionKey(transaction, data)
    const action = actionKey
      ? this.context.t(actionKey)
      : camelCaseToCapitalize(name)

    this.setState({ transactionAction: action })
  }

  render () {
    const { className, methodData: { done } } = this.props
    const { transactionAction } = this.state

    return (
      <div className={classnames('transaction-action', className)}>
        { (done && transactionAction) || '--' }
      </div>
    )
  }
}