import React, { Component } from 'react' import PropTypes from 'prop-types' import PageContainer from '../../page-container' import { Tabs, Tab } from '../../tabs' import AdvancedTabContent from './advanced-tab-content' import BasicTabContent from './basic-tab-content' export default class GasModalPageContainer extends Component { static contextTypes = { t: PropTypes.func, } static propTypes = { hideModal: PropTypes.func, hideBasic: PropTypes.bool, updateCustomGasPrice: PropTypes.func, updateCustomGasLimit: PropTypes.func, customGasPrice: PropTypes.number, customGasLimit: PropTypes.number, fetchBasicGasAndTimeEstimates: PropTypes.func, fetchGasEstimates: PropTypes.func, gasPriceButtonGroupProps: PropTypes.object, infoRowProps: PropTypes.shape({ originalTotalFiat: PropTypes.string, originalTotalEth: PropTypes.string, newTotalFiat: PropTypes.string, newTotalEth: PropTypes.string, }), onSubmit: PropTypes.func, customModalGasPriceInHex: PropTypes.string, customModalGasLimitInHex: PropTypes.string, cancelAndClose: PropTypes.func, transactionFee: PropTypes.string, blockTime: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), } state = {} componentDidMount () { const promise = this.props.hideBasic ? Promise.resolve(this.props.blockTime) : this.props.fetchBasicGasAndTimeEstimates() .then(basicEstimates => basicEstimates.blockTime) promise .then(blockTime => { this.props.fetchGasEstimates(blockTime) }) } renderBasicTabContent (gasPriceButtonGroupProps) { return ( ) } renderAdvancedTabContent ({ convertThenUpdateCustomGasPrice, convertThenUpdateCustomGasLimit, customGasPrice, customGasLimit, newTotalFiat, gasChartProps, currentTimeEstimate, insufficientBalance, gasEstimatesLoading, }) { const { transactionFee } = this.props return ( ) } renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) { return (
{this.context.t('sendAmount')} {sendAmount}
{this.context.t('transactionFee')} {transactionFee}
{this.context.t('newTotal')} {newTotalEth}
{newTotalFiat}
) } renderTabs ({ originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth, sendAmount, transactionFee, }, { gasPriceButtonGroupProps, hideBasic, ...advancedTabProps }) { let tabsToRender = [ { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) }, { name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) }, ] if (hideBasic) { tabsToRender = tabsToRender.slice(1) } return ( {tabsToRender.map(({ name, content }, i) =>
{ content } { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
)}
) } render () { const { cancelAndClose, infoRowProps, onSubmit, customModalGasPriceInHex, customModalGasLimitInHex, ...tabProps } = this.props return (
cancelAndClose()} onClose={() => cancelAndClose()} onSubmit={() => { onSubmit(customModalGasLimitInHex, customModalGasPriceInHex) }} submitText={this.context.t('save')} headerCloseText={'Close'} hideCancel={true} />
) } }