diff options
Diffstat (limited to 'ui/app/components/gas-customization')
9 files changed, 30 insertions, 26 deletions
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js index 7c3142d0d..366ad88c9 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js @@ -17,7 +17,7 @@ export default class AdvancedTabContent extends Component { customGasLimit: PropTypes.number, gasEstimatesLoading: PropTypes.bool, millisecondsRemaining: PropTypes.number, - totalFee: PropTypes.string, + transactionFee: PropTypes.string, timeRemaining: PropTypes.string, gasChartProps: PropTypes.object, insufficientBalance: PropTypes.bool, @@ -40,19 +40,20 @@ export default class AdvancedTabContent extends Component { } gasInputError ({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value }) { + const { t } = this.context let errorText let errorType let isInError = true if (insufficientBalance) { - errorText = 'Insufficient Balance' + errorText = t('insufficientBalance') errorType = 'error' } else if (labelKey === 'gasPrice' && isSpeedUp && value === 0) { - errorText = 'Zero gas price on speed up' + errorText = t('zeroGasPriceOnSpeedUpError') errorType = 'error' } else if (labelKey === 'gasPrice' && !customPriceIsSafe) { - errorText = 'Gas Price Extremely Low' + errorText = t('gasPriceExtremelyLow') errorType = 'warning' } else { isInError = false @@ -103,7 +104,7 @@ export default class AdvancedTabContent extends Component { return <i className="fa fa-info-circle" onClick={onClick} /> } - renderDataSummary (totalFee, timeRemaining) { + renderDataSummary (transactionFee, timeRemaining) { return ( <div className="advanced-tab__transaction-data-summary"> <div className="advanced-tab__transaction-data-summary__titles"> @@ -112,7 +113,7 @@ export default class AdvancedTabContent extends Component { </div> <div className="advanced-tab__transaction-data-summary__container"> <div className="advanced-tab__transaction-data-summary__fee"> - {totalFee} + {transactionFee} </div> <div className="time-remaining">{timeRemaining}</div> </div> @@ -164,6 +165,7 @@ export default class AdvancedTabContent extends Component { } render () { + const { t } = this.context const { updateCustomGasPrice, updateCustomGasLimit, @@ -171,16 +173,16 @@ export default class AdvancedTabContent extends Component { customGasPrice, customGasLimit, insufficientBalance, - totalFee, gasChartProps, gasEstimatesLoading, customPriceIsSafe, isSpeedUp, + transactionFee, } = this.props return ( <div className="advanced-tab"> - { this.renderDataSummary(totalFee, timeRemaining) } + { this.renderDataSummary(transactionFee, timeRemaining) } <div className="advanced-tab__fee-chart"> { this.renderGasEditRows({ customGasPrice, @@ -191,14 +193,14 @@ export default class AdvancedTabContent extends Component { customPriceIsSafe, isSpeedUp, }) } - <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div> + <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div> {!gasEstimatesLoading ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} /> : <Loading /> } <div className="advanced-tab__fee-chart__speed-buttons"> - <span>Slower</span> - <span>Faster</span> + <span>{ t('slower') }</span> + <span>{ t('faster') }</span> </div> </div> </div> diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js index 00242e430..2500ee267 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js @@ -28,7 +28,7 @@ describe('AdvancedTabContent Component', function () { customGasPrice={11} customGasLimit={23456} timeRemaining={21500} - totalFee={'$0.25'} + transactionFee={'$0.25'} insufficientBalance={false} customPriceIsSafe={true} isSpeedUp={false} @@ -315,7 +315,7 @@ describe('AdvancedTabContent Component', function () { }) assert.deepEqual(gasInputError, { isInError: true, - errorText: 'Insufficient Balance', + errorText: 'insufficientBalance', errorType: 'error', }) }) @@ -330,7 +330,7 @@ describe('AdvancedTabContent Component', function () { }) assert.deepEqual(gasInputError, { isInError: true, - errorText: 'Zero gas price on speed up', + errorText: 'zeroGasPriceOnSpeedUpError', errorType: 'error', }) }) @@ -345,7 +345,7 @@ describe('AdvancedTabContent Component', function () { }) assert.deepEqual(gasInputError, { isInError: true, - errorText: 'Gas Price Extremely Low', + errorText: 'gasPriceExtremelyLow', errorType: 'warning', }) }) diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js index 264d038da..05b8f700b 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js @@ -13,12 +13,13 @@ export default class BasicTabContent extends Component { } render () { + const { t } = this.context const { gasPriceButtonGroupProps } = this.props return ( <div className="basic-tab-content"> - <div className="basic-tab-content__title">Estimated Processing Times</div> - <div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div> + <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div> + <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div> {!gasPriceButtonGroupProps.loading ? <GasPriceButtonGroup className="gas-price-button-group--alt" @@ -27,7 +28,7 @@ export default class BasicTabContent extends Component { /> : <Loading /> } - <div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div> + <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div> </div> ) } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js index 25abdd997..47864fcab 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js @@ -1,6 +1,6 @@ import React from 'react' import assert from 'assert' -import { shallow } from 'enzyme' +import shallow from '../../../../../../lib/shallow-with-context' import BasicTabContent from '../basic-tab-content.component' import GasPriceButtonGroup from '../../../gas-price-button-group/' 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 64c2be353..174bd8ea8 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 @@ -74,8 +74,8 @@ export default class GasModalPageContainer extends Component { gasEstimatesLoading, customPriceIsSafe, isSpeedUp, + transactionFee, }) { - const { transactionFee } = this.props return ( <AdvancedTabContent updateCustomGasPrice={convertThenUpdateCustomGasPrice} @@ -133,7 +133,7 @@ export default class GasModalPageContainer extends Component { }) { let tabsToRender = [ { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) }, - { name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) }, + { name: 'advanced', content: this.renderAdvancedTabContent({ transactionFee, ...advancedTabProps }) }, ] if (hideBasic) { diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/index.scss index efba24e02..b9e0f59c4 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/index.scss +++ b/ui/app/components/gas-customization/gas-modal-page-container/index.scss @@ -8,8 +8,6 @@ overflow-y: initial; @media screen and (max-width: $break-small) { - max-width: 344px; - &__content { display: flex; overflow-y: initial; diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js index f068c40d0..1761ad2b0 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js @@ -185,7 +185,7 @@ describe('GasModalPageContainer Component', function () { assert.equal(GP.renderAdvancedTabContent.callCount, 1) assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps) - assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' }) + assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { transactionFee: 'mockTransactionFee', otherProps: 'mockAdvancedTabProps' }) }) it('should call renderInfoRows with the expected props', () => { diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss index c8b31fc83..cb2f3ecf1 100644 --- a/ui/app/components/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss @@ -65,7 +65,10 @@ .gas-price-button-group--small { display: flex; justify-content: stretch; - max-width: 260px; + + @media screen and (max-width: $break-small) { + max-width: 260px; + } &__button-fiat-price { font-size: 13px; diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js index d4c67bbde..c0eaf4852 100644 --- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js +++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js @@ -32,7 +32,7 @@ export default class GasPriceChart extends Component { estimatedTimesMax, updateCustomGasPrice, }) { - const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) + const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax, this.context.t) setTimeout(function () { setTickPosition('y', 0, -5, 8) setTickPosition('y', 1, -3, -5) |