aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
blob: 51a202df1c9949eb1d5970957b824344ce7b735b (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
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import PageContainer from '../../page-container'
import { Tabs, Tab } from '../../tabs'

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

  static propTypes = {
    hideModal: PropTypes.func,
  }

  state = {}

  renderBasicTabContent () {
    return (
      <div className="basic-tab"/>
    )
  }

  renderAdvancedTabContent () {
    return (
      <div className="advanced-tab"/>
    )
  }

  renderInfoRow (className, totalLabelKey, fiatTotal, cryptoTotal) {
    return (
      <div className={className}>
        <div className="total-info">
          <span className="total-label">{`${this.context.t(totalLabelKey)}:`}</span><span className="total-value">{fiatTotal}</span>
        </div>
        <div className="sum-info">
          <span className="sum-label">{`${this.context.t('amountPlusTxFee')}`}</span><span className="sum-value">{cryptoTotal}</span>
        </div>
      </div>
    )
  }

  renderTabContent (mainTabContent) {
    return (
      <div className="gas-modal-content">
        { mainTabContent() }
        { this.renderInfoRow('info-row--fade', 'originalTotal', '$20.02 USD', '0.06685 ETH') }
        { this.renderInfoRow('info-row', 'newTotal', '$20.02 USD', '0.06685 ETH') }
      </div>
    )
  }

  renderTabs () {
    return (
      <Tabs>
        <Tab name={this.context.t('basic')}>
          { this.renderTabContent(this.renderBasicTabContent) }
        </Tab>
        <Tab name={this.context.t('advanced')}>
          { this.renderTabContent(this.renderAdvancedTabContent) }
        </Tab>
      </Tabs>
    )
  }

  render () {
    const { hideModal } = this.props

    return (
      <PageContainer
        title={this.context.t('customGas')}
        subtitle={this.context.t('customGasSubTitle')}
        tabsComponent={this.renderTabs()}
        disabled={false}
        onCancel={() => hideModal()}
        onClose={() => hideModal()}
      />
    )
  }
}