diff options
| author | Dan J Miller <danjm.com@gmail.com> | 2019-02-06 08:24:28 +0800 |
|---|---|---|
| committer | Dan Finlay <542863+danfinlay@users.noreply.github.com> | 2019-02-06 08:24:28 +0800 |
| commit | 38b91f63a21d1563cf88307e280f52836df005db (patch) | |
| tree | 4632fe335ab9ff05df98f6739891a00a5229d90c /ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js | |
| parent | c28fa312503b7c868bfcfceb42b3a79c0f25d492 (diff) | |
| download | tangerine-wallet-browser-38b91f63a21d1563cf88307e280f52836df005db.tar.gz tangerine-wallet-browser-38b91f63a21d1563cf88307e280f52836df005db.tar.zst tangerine-wallet-browser-38b91f63a21d1563cf88307e280f52836df005db.zip | |
Add togglable advanced gas controls on send and confirm screens (#6112)
* Extract advanced gas input controls to their own component
* Add advanced inline gas toggle to settings
* Add optional advanced inline gas to send send screen
* Adds optional advanced gas inputs to the confirm screen
* Add info modals for advanced gas inputs.
* Fix translation of advance gas toggle description.
* Lint and unit test fixes for inline-advanced-gas-inputs
* Increase margin above advanced options button on send screen
* Move methods from constructor to property syntax in advanced-gas-inputs.component
Diffstat (limited to 'ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js')
| -rw-r--r-- | ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js | 85 |
1 files changed, 63 insertions, 22 deletions
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js index 8d305dd4f..50337e0bf 100644 --- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper/' import GasFeeDisplay from './gas-fee-display/gas-fee-display.component' import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group' +import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs' export default class SendGasRow extends Component { @@ -13,54 +14,94 @@ export default class SendGasRow extends Component { gasLoadingError: PropTypes.bool, gasTotal: PropTypes.string, showCustomizeGasModal: PropTypes.func, + setGasPrice: PropTypes.func, + setGasLimit: PropTypes.func, gasPriceButtonGroupProps: PropTypes.object, gasButtonGroupShown: PropTypes.bool, + advancedInlineGasShown: PropTypes.bool, resetGasButtons: PropTypes.func, + gasPrice: PropTypes.number, + gasLimit: PropTypes.number, + insufficientBalance: PropTypes.bool, } static contextTypes = { t: PropTypes.func, } - render () { + renderAdvancedOptionsButton () { + const { showCustomizeGasModal } = this.props + return <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}> + { this.context.t('advancedOptions') } + </div> + } + + renderContent () { const { conversionRate, convertedCurrency, gasLoadingError, gasTotal, - gasFeeError, showCustomizeGasModal, gasPriceButtonGroupProps, gasButtonGroupShown, + advancedInlineGasShown, resetGasButtons, + setGasPrice, + setGasLimit, + gasPrice, + gasLimit, + insufficientBalance, } = this.props + const gasPriceButtonGroup = <div> + <GasPriceButtonGroup + className="gas-price-button-group--small" + showCheck={false} + {...gasPriceButtonGroupProps} + /> + { this.renderAdvancedOptionsButton() } + </div> + const gasFeeDisplay = <GasFeeDisplay + conversionRate={conversionRate} + convertedCurrency={convertedCurrency} + gasLoadingError={gasLoadingError} + gasTotal={gasTotal} + onReset={resetGasButtons} + onClick={() => showCustomizeGasModal()} + /> + const advancedGasInputs = <div> + <AdvancedGasInputs + updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)} + updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)} + customGasPrice={gasPrice} + customGasLimit={gasLimit} + insufficientBalance={insufficientBalance} + customPriceIsSafe={true} + isSpeedUp={false} + /> + { this.renderAdvancedOptionsButton() } + </div> + + if (advancedInlineGasShown) { + return advancedGasInputs + } else if (gasButtonGroupShown) { + return gasPriceButtonGroup + } else { + return gasFeeDisplay + } + } + + render () { + const { gasFeeError } = this.props + return ( <SendRowWrapper label={`${this.context.t('transactionFee')}:`} showError={gasFeeError} errorType={'gasFee'} > - {gasButtonGroupShown - ? <div> - <GasPriceButtonGroup - className="gas-price-button-group--small" - showCheck={false} - {...gasPriceButtonGroupProps} - /> - <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}> - { this.context.t('advancedOptions') } - </div> - </div> - : <GasFeeDisplay - conversionRate={conversionRate} - convertedCurrency={convertedCurrency} - gasLoadingError={gasLoadingError} - gasTotal={gasTotal} - onReset={resetGasButtons} - onClick={() => showCustomizeGasModal()} - />} - + { this.renderContent() } </SendRowWrapper> ) } |