diff options
Diffstat (limited to 'ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js')
-rw-r--r-- | ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js | 63 |
1 files changed, 35 insertions, 28 deletions
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js index 41fe901fa..07e55a1f0 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js @@ -24,8 +24,9 @@ export default class GasModalPageContainer extends Component { newTotalEth: PropTypes.string, }), onSubmit: PropTypes.func, - customGasPriceInHex: PropTypes.string, - customGasLimitInHex: PropTypes.string, + customModalGasPriceInHex: PropTypes.string, + customModalGasLimitInHex: PropTypes.string, + cancelAndClose: PropTypes.func, } state = {} @@ -51,32 +52,34 @@ export default class GasModalPageContainer extends Component { updateCustomGasLimit={convertThenUpdateCustomGasLimit} customGasPrice={customGasPrice} customGasLimit={customGasLimit} - millisecondsRemaining={91000} + timeRemaining={'1 min 31 sec'} totalFee={newTotalFiat} /> ) } - renderInfoRow (className, totalLabelKey, fiatTotal, cryptoTotal) { - return ( - <div className={className}> - <div className={`${className}__total-info`}> - <span className={`${className}__total-info__total-label`}>{`${this.context.t(totalLabelKey)}:`}</span> - <span className={`${className}__total-info__total-value`}>{fiatTotal}</span> - </div> - <div className={`${className}__sum-info`}> - <span className={`${className}__sum-info__sum-label`}>{`${this.context.t('amountPlusTxFee')}`}</span> - <span className={`${className}__sum-info__sum-value`}>{cryptoTotal}</span> - </div> - </div> - ) - } + renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) { + const baseClassName = 'gas-modal-content__info-row' - renderInfoRows (originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) { return ( <div> - { this.renderInfoRow('gas-modal-content__info-row--fade', 'originalTotal', originalTotalFiat, originalTotalEth) } - { this.renderInfoRow('gas-modal-content__info-row', 'newTotal', newTotalFiat, newTotalEth) } + <div className={baseClassName}> + <div className={`${baseClassName}__send-info`}> + <span className={`${baseClassName}__send-info__label`}>{`Send Amount`}</span> + <span className={`${baseClassName}__send-info__value`}>{sendAmount}</span> + </div> + <div className={`${baseClassName}__transaction-info`}> + <span className={`${baseClassName}__transaction-info__label`}>{`Transaction Fee`}</span> + <span className={`${baseClassName}__transaction-info__value`}>{transactionFee}</span> + </div> + <div className={`${baseClassName}__total-info`}> + <span className={`${baseClassName}__total-info__label`}>{`New Total`}</span> + <span className={`${baseClassName}__total-info__value`}>{newTotalEth}</span> + </div> + <div className={`${baseClassName}__fiat-total-info`}> + <span className={`${baseClassName}__fiat-total-info__value`}>{newTotalFiat}</span> + </div> + </div> </div> ) } @@ -86,6 +89,8 @@ export default class GasModalPageContainer extends Component { originalTotalEth, newTotalFiat, newTotalEth, + sendAmount, + transactionFee, }, { gasPriceButtonGroupProps, @@ -106,7 +111,7 @@ export default class GasModalPageContainer extends Component { {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}> <div className="gas-modal-content"> { content } - { this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) } + { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) } </div> </Tab> )} @@ -116,11 +121,11 @@ export default class GasModalPageContainer extends Component { render () { const { - hideModal, + cancelAndClose, infoRowProps, onSubmit, - customGasPriceInHex, - customGasLimitInHex, + customModalGasPriceInHex, + customModalGasLimitInHex, ...tabProps } = this.props @@ -131,13 +136,15 @@ export default class GasModalPageContainer extends Component { subtitle={this.context.t('customGasSubTitle')} tabsComponent={this.renderTabs(infoRowProps, tabProps)} disabled={false} - onCancel={() => hideModal()} - onClose={() => hideModal()} + onCancel={() => cancelAndClose()} + onClose={() => cancelAndClose()} onSubmit={() => { - onSubmit(customGasLimitInHex, customGasPriceInHex) - hideModal() + onSubmit(customModalGasLimitInHex, customModalGasPriceInHex) + cancelAndClose() }} submitText={this.context.t('save')} + headerCloseText={'Close'} + hideCancel={true} /> </div> ) |