diff options
Diffstat (limited to 'ui/app/components/pages')
4 files changed, 89 insertions, 5 deletions
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js index 6bc415781..8d404aaca 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -11,6 +11,7 @@ import { import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../../constants/transactions' import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display' import { PRIMARY, SECONDARY } from '../../../constants/common' +import AdvancedGasInputs from '../../gas-customization/advanced-gas-inputs' export default class ConfirmTransactionBase extends Component { static contextTypes = { @@ -81,6 +82,11 @@ export default class ConfirmTransactionBase extends Component { titleComponent: PropTypes.node, valid: PropTypes.bool, warning: PropTypes.string, + advancedInlineGasShown: PropTypes.bool, + gasPrice: PropTypes.number, + gasLimit: PropTypes.number, + insufficientBalance: PropTypes.bool, + convertThenUpdateGasAndCalculate: PropTypes.func, } state = { @@ -165,6 +171,11 @@ export default class ConfirmTransactionBase extends Component { hexTransactionFee, hexTransactionTotal, hideDetails, + advancedInlineGasShown, + gasPrice, + gasLimit, + insufficientBalance, + convertThenUpdateGasAndCalculate, } = this.props if (hideDetails) { @@ -182,6 +193,18 @@ export default class ConfirmTransactionBase extends Component { headerTextClassName="confirm-detail-row__header-text--edit" onHeaderClick={() => this.handleEditGas()} /> + {advancedInlineGasShown + ? <AdvancedGasInputs + updateCustomGasPrice={newGasPrice => convertThenUpdateGasAndCalculate({ gasPrice: newGasPrice, gasLimit })} + updateCustomGasLimit={newGasLimit => convertThenUpdateGasAndCalculate({ gasLimit: newGasLimit, gasPrice })} + customGasPrice={gasPrice} + customGasLimit={gasLimit} + insufficientBalance={insufficientBalance} + customPriceIsSafe={true} + isSpeedUp={false} + /> + : null + } </div> <div> <ConfirmDetailRow diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js index 1e2270432..98cde4b03 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -14,11 +14,17 @@ import { GAS_LIMIT_TOO_LOW_ERROR_KEY, } from '../../../constants/error-keys' import { getHexGasTotal } from '../../../helpers/confirm-transaction/util' -import { isBalanceSufficient } from '../../send/send.utils' +import { + convertGasPriceForInputs, + convertGasLimitForInputs, + decimalToHex, + decGWEIToHexWEI, +} from '../../../helpers/conversions.util' +import { isBalanceSufficient, calcGasTotal } from '../../send/send.utils' import { conversionGreaterThan } from '../../../conversion-util' import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants' import { addressSlicer, valuesFor } from '../../../util' -import { getMetaMaskAccounts } from '../../../selectors' +import { getMetaMaskAccounts, getAdvancedInlineGasShown } from '../../../selectors' const casedContractMap = Object.keys(contractMap).reduce((acc, base) => { return { @@ -47,7 +53,13 @@ const mapStateToProps = (state, props) => { nonce, } = confirmTransaction const { txParams = {}, lastGasPrice, id: transactionId } = txData - const { from: fromAddress, to: txParamsToAddress } = txParams + const { + from: fromAddress, + to: txParamsToAddress, + gasPrice, + gas: gasLimit, + value: amount, + } = txParams const accounts = getMetaMaskAccounts(state) const { conversionRate, @@ -84,6 +96,13 @@ const mapStateToProps = (state, props) => { ) const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length + const insufficientBalance = !isBalanceSufficient({ + amount, + gasTotal: calcGasTotal(gasLimit, gasPrice), + balance, + conversionRate, + }) + return { balance, fromAddress, @@ -113,9 +132,13 @@ const mapStateToProps = (state, props) => { unapprovedTxCount, currentNetworkUnapprovedTxs, customGas: { - gasLimit: customGasLimit || txData.gasPrice, - gasPrice: customGasPrice || txData.gasLimit, + gasLimit: customGasLimit || gasPrice, + gasPrice: customGasPrice || gasLimit, }, + advancedInlineGasShown: getAdvancedInlineGasShown(state), + gasPrice: convertGasPriceForInputs(gasPrice), + gasLimit: convertGasLimitForInputs(gasLimit), + insufficientBalance, } } @@ -132,6 +155,12 @@ const mapDispatchToProps = dispatch => { updateGasAndCalculate: ({ gasLimit, gasPrice }) => { return dispatch(updateGasAndCalculate({ gasLimit, gasPrice })) }, + convertThenUpdateGasAndCalculate: ({ gasLimit, gasPrice }) => { + return dispatch(updateGasAndCalculate({ + gasLimit: decimalToHex(gasLimit), + gasPrice: decGWEIToHexWEI(gasPrice), + })) + }, showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => { return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount })) }, diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js index ce1f72407..1c02b2507 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js @@ -59,6 +59,8 @@ export default class SettingsTab extends PureComponent { nativeCurrency: PropTypes.string, useNativeCurrencyAsPrimaryCurrency: PropTypes.bool, setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func, + setAdvancedInlineGasFeatureFlag: PropTypes.func, + advancedInlineGas: PropTypes.bool, } state = { @@ -412,6 +414,32 @@ export default class SettingsTab extends PureComponent { ) } + renderAdvancedGasInputInline () { + const { t } = this.context + const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props + + return ( + <div className="settings-page__content-row"> + <div className="settings-page__content-item"> + <span>{ t('showAdvancedGasInline') }</span> + <div className="settings-page__content-description"> + { t('showAdvancedGasInlineDescription') } + </div> + </div> + <div className="settings-page__content-item"> + <div className="settings-page__content-item-col"> + <ToggleButton + value={advancedInlineGas} + onToggle={value => setAdvancedInlineGasFeatureFlag(!value)} + activeLabel="" + inactiveLabel="" + /> + </div> + </div> + </div> + ) + } + renderUsePrimaryCurrencyOptions () { const { t } = this.context const { @@ -508,6 +536,7 @@ export default class SettingsTab extends PureComponent { { this.renderClearApproval() } { this.renderPrivacyOptIn() } { this.renderHexDataOptIn() } + { this.renderAdvancedGasInputInline() } { this.renderBlockieOptIn() } </div> ) diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js index 92f645438..49da0db12 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js @@ -25,6 +25,7 @@ const mapStateToProps = state => { featureFlags: { sendHexData, privacyMode, + advancedInlineGas, } = {}, provider = {}, currentLocale, @@ -39,6 +40,7 @@ const mapStateToProps = state => { nativeCurrency, useBlockie, sendHexData, + advancedInlineGas, privacyMode, provider, useNativeCurrencyAsPrimaryCurrency, @@ -54,6 +56,7 @@ const mapDispatchToProps = dispatch => { setUseBlockie: value => dispatch(setUseBlockie(value)), updateCurrentLocale: key => dispatch(updateCurrentLocale(key)), setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)), + setAdvancedInlineGasFeatureFlag: shouldShow => dispatch(setFeatureFlag('advancedInlineGas', shouldShow)), setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)), showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })), setUseNativeCurrencyAsPrimaryCurrencyPreference: value => { |