m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Split advanced-tab-content.component.js render() method into smaller pieces; add translations to the same file.

Browse Source
This commit is contained in:
Dan Miller 2018-08-07 12:27:42 -02:30
parent 342dc95410
commit d55a2615a4
3 changed files with 63 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/_locales/en/messages.json
View File

@ -439,6 +439,9 @@
"failed": {
"message": "Failed"
},
"feeChartTitle": {
"message": "Live Transaction Fee Predictions"
},
"fiat": {
"message": "Fiat",
"description": "Exchange type"
@ -493,6 +496,9 @@
"gasPrice": {
"message": "Gas Price (GWEI)"
},
"gasPriceNoDenom": {
"message": "Gas Price"
},
"gasPriceCalculation": {
"message": "We calculate the suggested gas prices based on network success rates."
},
@ -773,6 +779,9 @@
"newTotal": {
"message": "New Total"
},
"newTransactionFee": {
"message": "New Transaction Fee"
},
"next": {
"message": "Next"
},
@ -1274,6 +1283,9 @@
"transactionNumber": {
"message": "Transaction Number"
},
"transactionTime": {
"message": "Transaction Time"
},
"transfer": {
"message": "Transfer"
},

81
ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
View File

@ -18,6 +18,7 @@ export default class AdvancedTabContent extends Component {
customGasPrice: PropTypes.number,
customGasLimit: PropTypes.number,
millisecondsRemaining: PropTypes.number,
totalFee: PropTypes.string,
}
gasInput (value, onChange, min, precision, showGWEI) {
@ -40,6 +41,46 @@ export default class AdvancedTabContent extends Component {
return <i className="fa info-circle" onClick={onClick} />
}
renderDataSummary (totalFee, millisecondsRemaining) {
return (
<div className="advanced-tab__transaction-data-summary">
<div className="advanced-tab__transaction-data-summary__titles">
<span>{ this.context.t('newTransactionFee') }</span>
<span>~{ this.context.t('transactionTime') }</span>
</div>
<div className="advanced-tab__transaction-data-summary__container">
<div className="advanced-tab__transaction-data-summary__fee">
{totalFee}
</div>
<TimeRemaining
milliseconds={millisecondsRemaining}
/>
</div>
</div>
)
}
renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
return (
<div className="advanced-tab__gas-edit-rows">
<div className="advanced-tab__gas-edit-row">
<div className="advanced-tab__gas-edit-row__label">
{ this.context.t('gasPriceNoDenom') }
{ this.infoButton(() => {}) }
</div>
{ this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
</div>
<div className="advanced-tab__gas-edit-row">
<div className="advanced-tab__gas-edit-row__label">
{ this.context.t('gasLimit') }
{ this.infoButton(() => {}) }
</div>
{ this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
</div>
</div>
)
}
render () {
const {
updateCustomGasPrice,
@ -47,26 +88,14 @@ export default class AdvancedTabContent extends Component {
millisecondsRemaining,
customGasPrice,
customGasLimit,
totalFee,
} = this.props
return (
<div className="advanced-tab">
<div className="advanced-tab__transaction-data-summary">
<div className="advanced-tab__transaction-data-summary__titles">
<span>New Transaction Fee</span>
<span>~Transaction Time</span>
</div>
<div className="advanced-tab__transaction-data-summary__container">
<div className="advanced-tab__transaction-data-summary__fee">
$0.30
</div>
<TimeRemaining
milliseconds={millisecondsRemaining}
/>
</div>
</div>
{ this.renderDataSummary(totalFee, millisecondsRemaining) }
<div className="advanced-tab__fee-chart-title">
Live Transaction Fee Predictions
{ this.context.t('feeChartTitle') }
</div>
<div className="advanced-tab__fee-chart" />
<div className="advanced-tab__slider-container">
@ -83,22 +112,12 @@ export default class AdvancedTabContent extends Component {
coloredStart={{}}
/>
</div>
<div className="advanced-tab__gas-edit-rows">
<div className="advanced-tab__gas-edit-row">
<div className="advanced-tab__gas-edit-row__label">
Gas Price
{ this.infoButton(() => {}) }
</div>
{ this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
</div>
<div className="advanced-tab__gas-edit-row">
<div className="advanced-tab__gas-edit-row__label">
Gas Limit
{ this.infoButton(() => {}) }
</div>
{ this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
</div>
</div>
{ this.renderGasEditRows(
customGasPrice,
updateCustomGasPrice,
customGasLimit,
updateCustomGasLimit
) }
</div>
)
}

1
ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
View File

@ -40,6 +40,7 @@ export default class GasModalPageContainer extends Component {
customGasPrice={customGasPrice}
customGasLimit={customGasLimit}
millisecondsRemaining={91000}
totalFee={'$0.30'}
/>
)
}