aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
blob: 62ebb512d55f92d687448b70aa2fe117fb18c9bc (plain) (blame)
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ButtonGroup from '../../button-group'
import Button from '../../button'

const GAS_OBJECT_PROPTYPES_SHAPE = {
  label: PropTypes.string,
  feeInPrimaryCurrency: PropTypes.string,
  feeInSecondaryCurrency: PropTypes.string,
  timeEstimate: PropTypes.string,
  priceInHexWei: PropTypes.string,
}

export default class GasPriceButtonGroup extends Component {
  static contextTypes = {
    t: PropTypes.func,
  }

  static propTypes = {
    buttonDataLoading: PropTypes.bool,
    className: PropTypes.string,
    defaultActiveButtonIndex: PropTypes.number,
    gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)),
    handleGasPriceSelection: PropTypes.func,
    newActiveButtonIndex: PropTypes.number,
    noButtonActiveByDefault: PropTypes.bool,
    showCheck: PropTypes.bool,
  }

  renderButtonContent ({
    labelKey,
    feeInPrimaryCurrency,
    feeInSecondaryCurrency,
    timeEstimate,
  }, {
    className,
    showCheck,
  }) {
    return (<div>
      { labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
      { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
      { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
      { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
      { showCheck && <i className="fa fa-check fa-2x" /> }
    </div>)
  }

  renderButton ({
    priceInHexWei,
    ...renderableGasInfo
  }, {
    buttonDataLoading,
    handleGasPriceSelection,
    ...buttonContentPropsAndFlags
  }, index) {
    return (
      <Button
        onClick={() => handleGasPriceSelection(priceInHexWei)}
        key={`gas-price-button-${index}`}
      >
        {this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
      </Button>
    )
  }

  render () {
    const {
      gasButtonInfo,
      defaultActiveButtonIndex = 1,
      newActiveButtonIndex,
      noButtonActiveByDefault = false,
      buttonDataLoading,
      ...buttonPropsAndFlags
    } = this.props

    return (
      !buttonDataLoading
        ? <ButtonGroup
          className={buttonPropsAndFlags.className}
          defaultActiveButtonIndex={defaultActiveButtonIndex}
          newActiveButtonIndex={newActiveButtonIndex}
          noButtonActiveByDefault={noButtonActiveByDefault}
        >
          { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
        </ButtonGroup>
        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
    )
  }
}