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": { "failed": {
"message": "Failed" "message": "Failed"
}, },
"feeChartTitle": {
"message": "Live Transaction Fee Predictions"
},
"fiat": { "fiat": {
"message": "Fiat", "message": "Fiat",
"description": "Exchange type" "description": "Exchange type"
@ -493,6 +496,9 @@
"gasPrice": { "gasPrice": {
"message": "Gas Price (GWEI)" "message": "Gas Price (GWEI)"
}, },
"gasPriceNoDenom": {
"message": "Gas Price"
},
"gasPriceCalculation": { "gasPriceCalculation": {
"message": "We calculate the suggested gas prices based on network success rates." "message": "We calculate the suggested gas prices based on network success rates."
}, },
@ -773,6 +779,9 @@
"newTotal": { "newTotal": {
"message": "New Total" "message": "New Total"
}, },
"newTransactionFee": {
"message": "New Transaction Fee"
},
"next": { "next": {
"message": "Next" "message": "Next"
}, },
@ -1274,6 +1283,9 @@
"transactionNumber": { "transactionNumber": {
"message": "Transaction Number" "message": "Transaction Number"
}, },
"transactionTime": {
"message": "Transaction Time"
},
"transfer": { "transfer": {
"message": "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, customGasPrice: PropTypes.number,
customGasLimit: PropTypes.number, customGasLimit: PropTypes.number,
millisecondsRemaining: PropTypes.number, millisecondsRemaining: PropTypes.number,
totalFee: PropTypes.string,
} }
gasInput (value, onChange, min, precision, showGWEI) { gasInput (value, onChange, min, precision, showGWEI) {
@ -40,6 +41,46 @@ export default class AdvancedTabContent extends Component {
return <i className="fa info-circle" onClick={onClick} /> 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 () { render () {
const { const {
updateCustomGasPrice, updateCustomGasPrice,
@ -47,26 +88,14 @@ export default class AdvancedTabContent extends Component {
millisecondsRemaining, millisecondsRemaining,
customGasPrice, customGasPrice,
customGasLimit, customGasLimit,
totalFee,
} = this.props } = this.props
return ( return (
<div className="advanced-tab"> <div className="advanced-tab">
<div className="advanced-tab__transaction-data-summary"> { this.renderDataSummary(totalFee, millisecondsRemaining) }
<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>
<div className="advanced-tab__fee-chart-title"> <div className="advanced-tab__fee-chart-title">
Live Transaction Fee Predictions { this.context.t('feeChartTitle') }
</div> </div>
<div className="advanced-tab__fee-chart" /> <div className="advanced-tab__fee-chart" />
<div className="advanced-tab__slider-container"> <div className="advanced-tab__slider-container">
@ -83,22 +112,12 @@ export default class AdvancedTabContent extends Component {
coloredStart={{}} coloredStart={{}}
/> />
</div> </div>
<div className="advanced-tab__gas-edit-rows"> { this.renderGasEditRows(
<div className="advanced-tab__gas-edit-row"> customGasPrice,
<div className="advanced-tab__gas-edit-row__label"> updateCustomGasPrice,
Gas Price customGasLimit,
{ this.infoButton(() => {}) } updateCustomGasLimit
</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>
</div> </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} customGasPrice={customGasPrice}
customGasLimit={customGasLimit} customGasLimit={customGasLimit}
millisecondsRemaining={91000} millisecondsRemaining={91000}
totalFee={'$0.30'}
/> />
) )
} }