diff options
author | Dan J Miller <danjm.com@gmail.com> | 2018-12-13 01:08:11 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-13 01:08:11 +0800 |
commit | 970bdebb863388b862c51ff46fb7b83875080746 (patch) | |
tree | f0531c748a4717e689d0b5e5c2207a2b77803ec7 | |
parent | ea5eb855e874edfad1824febe8a2180d694b5a99 (diff) | |
parent | 66f7102c060f89d08e5997de4c318267e9b1357c (diff) | |
download | tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.tar tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.tar.gz tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.tar.bz2 tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.tar.lz tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.tar.xz tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.tar.zst tangerine-wallet-browser-970bdebb863388b862c51ff46fb7b83875080746.zip |
Merge pull request #5919 from MetaMask/gas-customization-fixes
Fix some styling and translations in the gas customization modal
10 files changed, 60 insertions, 26 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 400633c8c..ed757ca18 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -44,6 +44,9 @@ "accept": { "message": "Accept" }, + "acceleratingATransaction": { + "message": "* 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." + }, "accessingYourCamera": { "message": "Accessing your camera..." }, @@ -212,6 +215,9 @@ "confirm": { "message": "Confirm" }, + "confirmationTime": { + "message": "Confirmation time (sec)" + }, "confirmed": { "message": "Confirmed" }, @@ -436,6 +442,9 @@ "etherscanView": { "message": "View account on Etherscan" }, + "estimatedProcessingTimes": { + "message": "Estimated Processing Times" + }, "exchangeRate": { "message": "Exchange Rate" }, @@ -454,6 +463,9 @@ "fast": { "message": "Fast" }, + "faster": { + "message": "Faster" + }, "fastest": { "message": "Fastest" }, @@ -514,6 +526,9 @@ "gasPrice": { "message": "Gas Price (GWEI)" }, + "gasPriceExtremelyLow": { + "message": "Gas Price Extremely Low" + }, "gasPriceNoDenom": { "message": "Gas Price" }, @@ -615,6 +630,9 @@ "initialTransactionConfirmed": { "message": "Your initial transaction was confirmed by the network. Click OK to go back." }, + "insufficientBalance": { + "message": "Insufficient balance." + }, "insufficientFunds": { "message": "Insufficient funds." }, @@ -680,6 +698,9 @@ "limit": { "message": "Limit" }, + "liveGasPricePredictions": { + "message": "Live Gas Price Predictions" + }, "loading": { "message": "Loading..." }, @@ -1044,6 +1065,9 @@ "slow": { "message": "Slow" }, + "slower": { + "message": "Slower" + }, "saveAsCsvFile": { "message": "Save as CSV File" }, @@ -1123,6 +1147,9 @@ "selectAnAccountHelp": { "message": "Select the account to view in MetaMask" }, + "selectAHigherGasFee": { + "message": "Select a higher gas fee to accelerate the processing of your transaction.*" + }, "selectHdPath": { "message": "Select HD Path" }, @@ -1452,5 +1479,8 @@ }, "yourPrivateSeedPhrase": { "message": "Your private seed phrase" + }, + "zeroGasPriceOnSpeedUpError": { + "message":"Zero gas price on speed up" } } 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) |