@ -2,9 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types' ;
import PropTypes from 'prop-types' ;
import { ENVIRONMENT _TYPE _NOTIFICATION } from '../../../shared/constants/app' ;
import { ENVIRONMENT _TYPE _NOTIFICATION } from '../../../shared/constants/app' ;
import { getEnvironmentType } from '../../../app/scripts/lib/util' ;
import { getEnvironmentType } from '../../../app/scripts/lib/util' ;
import ConfirmPageContainer , {
import ConfirmPageContainer from '../../components/app/confirm-page-container' ;
ConfirmDetailRow ,
} from '../../components/app/confirm-page-container' ;
import { isBalanceSufficient } from '../send/send.utils' ;
import { isBalanceSufficient } from '../send/send.utils' ;
import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util' ;
import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util' ;
import { addHexes , hexToDecimal } from '../../helpers/utils/conversions.util' ;
import { addHexes , hexToDecimal } from '../../helpers/utils/conversions.util' ;
@ -22,15 +20,12 @@ import {
import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display' ;
import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display' ;
import { PRIMARY , SECONDARY } from '../../helpers/constants/common' ;
import { PRIMARY , SECONDARY } from '../../helpers/constants/common' ;
import AdvancedGasInputs from '../../components/app/gas-customization/advanced-gas-inputs' ;
import TextField from '../../components/ui/text-field' ;
import TextField from '../../components/ui/text-field' ;
import AdvancedGasControls from '../../components/app/advanced-gas-controls' ;
import {
import {
TRANSACTION _TYPES ,
TRANSACTION _TYPES ,
TRANSACTION _STATUSES ,
TRANSACTION _STATUSES ,
} from '../../../shared/constants/transaction' ;
} from '../../../shared/constants/transaction' ;
import { getTransactionTypeTitle } from '../../helpers/utils/transactions.util' ;
import { getTransactionTypeTitle } from '../../helpers/utils/transactions.util' ;
import ErrorMessage from '../../components/ui/error-message' ;
import { toBuffer } from '../../../shared/modules/buffer-utils' ;
import { toBuffer } from '../../../shared/modules/buffer-utils' ;
import TransactionDetail from '../../components/app/transaction-detail/transaction-detail.component' ;
import TransactionDetail from '../../components/app/transaction-detail/transaction-detail.component' ;
@ -72,7 +67,6 @@ export default class ConfirmTransactionBase extends Component {
updateCustomNonce : PropTypes . func ,
updateCustomNonce : PropTypes . func ,
assetImage : PropTypes . string ,
assetImage : PropTypes . string ,
sendTransaction : PropTypes . func ,
sendTransaction : PropTypes . func ,
showCustomizeGasModal : PropTypes . func ,
showTransactionConfirmedModal : PropTypes . func ,
showTransactionConfirmedModal : PropTypes . func ,
showRejectTransactionsConfirmationModal : PropTypes . func ,
showRejectTransactionsConfirmationModal : PropTypes . func ,
toAddress : PropTypes . string ,
toAddress : PropTypes . string ,
@ -85,26 +79,17 @@ export default class ConfirmTransactionBase extends Component {
txData : PropTypes . object ,
txData : PropTypes . object ,
unapprovedTxCount : PropTypes . number ,
unapprovedTxCount : PropTypes . number ,
currentNetworkUnapprovedTxs : PropTypes . object ,
currentNetworkUnapprovedTxs : PropTypes . object ,
updateGasAndCalculate : PropTypes . func ,
customGas : PropTypes . object ,
customGas : PropTypes . object ,
// Component props
// Component props
actionKey : PropTypes . string ,
actionKey : PropTypes . string ,
contentComponent : PropTypes . node ,
contentComponent : PropTypes . node ,
dataComponent : PropTypes . node ,
dataComponent : PropTypes . node ,
primaryTotalTextOverride : PropTypes . oneOfType ( [
PropTypes . string ,
PropTypes . node ,
] ) ,
secondaryTotalTextOverride : PropTypes . string ,
hideData : PropTypes . bool ,
hideData : PropTypes . bool ,
hideSubtitle : PropTypes . bool ,
hideSubtitle : PropTypes . bool ,
identiconAddress : PropTypes . string ,
identiconAddress : PropTypes . string ,
onEdit : PropTypes . func ,
onEdit : PropTypes . func ,
subtitleComponent : PropTypes . node ,
subtitleComponent : PropTypes . node ,
title : PropTypes . string ,
title : PropTypes . string ,
advancedInlineGasShown : PropTypes . bool ,
insufficientBalance : PropTypes . bool ,
hideFiatConversion : PropTypes . bool ,
type : PropTypes . string ,
type : PropTypes . string ,
getNextNonce : PropTypes . func ,
getNextNonce : PropTypes . func ,
nextNonce : PropTypes . number ,
nextNonce : PropTypes . number ,
@ -112,10 +97,11 @@ export default class ConfirmTransactionBase extends Component {
hideSenderToRecipient : PropTypes . bool ,
hideSenderToRecipient : PropTypes . bool ,
showAccountInHeader : PropTypes . bool ,
showAccountInHeader : PropTypes . bool ,
mostRecentOverviewPage : PropTypes . string . isRequired ,
mostRecentOverviewPage : PropTypes . string . isRequired ,
isMainnet : PropTypes . bool ,
isEthGasPrice : PropTypes . bool ,
isEthGasPrice : PropTypes . bool ,
noGasPrice : PropTypes . bool ,
noGasPrice : PropTypes . bool ,
setDefaultHomeActiveTabName : PropTypes . func ,
setDefaultHomeActiveTabName : PropTypes . func ,
primaryTotalTextOverride : PropTypes . string ,
secondaryTotalTextOverride : PropTypes . string ,
} ;
} ;
state = {
state = {
@ -248,7 +234,6 @@ export default class ConfirmTransactionBase extends Component {
handleEditGas ( ) {
handleEditGas ( ) {
const {
const {
showCustomizeGasModal ,
actionKey ,
actionKey ,
txData : { origin } ,
txData : { origin } ,
methodData = { } ,
methodData = { } ,
@ -270,16 +255,10 @@ export default class ConfirmTransactionBase extends Component {
} ,
} ,
} ) ;
} ) ;
if ( process . env . SHOW _EIP _1559 _UI ) {
this . setState ( { editingGas : true } ) ;
this . setState ( { editingGas : true } ) ;
} else {
showCustomizeGasModal ( ) ;
}
}
}
// TODO: rename this 'handleCloseEditGas' later when we remove the
handleCloseEditGas ( ) {
// SHOW_EIP_1559_UI flag/branch
handleCloseNewGasPopover ( ) {
this . setState ( { editingGas : false } ) ;
this . setState ( { editingGas : false } ) ;
}
}
@ -292,16 +271,8 @@ export default class ConfirmTransactionBase extends Component {
useNonceField ,
useNonceField ,
customNonceValue ,
customNonceValue ,
updateCustomNonce ,
updateCustomNonce ,
advancedInlineGasShown ,
customGas ,
insufficientBalance ,
updateGasAndCalculate ,
hideFiatConversion ,
nextNonce ,
nextNonce ,
getNextNonce ,
getNextNonce ,
isMainnet ,
isEthGasPrice ,
noGasPrice ,
txData ,
txData ,
} = this . props ;
} = this . props ;
const { t } = this . context ;
const { t } = this . context ;
@ -314,27 +285,6 @@ export default class ConfirmTransactionBase extends Component {
}
}
} ;
} ;
const notMainnetOrTest = ! ( isMainnet || process . env . IN _TEST ) ;
const gasPriceFetchFailure = isEthGasPrice || noGasPrice ;
const inlineGasControls = process . env . SHOW _EIP _1559 _UI ? (
< AdvancedGasControls / >
) : (
< AdvancedGasInputs
updateCustomGasPrice = { ( newGasPrice ) =>
updateGasAndCalculate ( { ... customGas , gasPrice : newGasPrice } )
}
updateCustomGasLimit = { ( newGasLimit ) =>
updateGasAndCalculate ( { ... customGas , gasLimit : newGasLimit } )
}
customGasPrice = { customGas . gasPrice }
customGasLimit = { customGas . gasLimit }
insufficientBalance = { insufficientBalance }
customPriceIsSafe
isSpeedUp = { false }
/ >
) ;
const nonceField = useNonceField ? (
const nonceField = useNonceField ? (
< div >
< div >
< div className = "confirm-detail-row" >
< div className = "confirm-detail-row" >
@ -365,180 +315,126 @@ export default class ConfirmTransactionBase extends Component {
< / d i v >
< / d i v >
) : null ;
) : null ;
const showInlineControls = process . env . SHOW _EIP _1559 _UI
? advancedInlineGasShown
: advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure ;
const showGasEditButton = process . env . SHOW _EIP _1559 _UI
? ! showInlineControls
: ! ( notMainnetOrTest || gasPriceFetchFailure ) ;
if ( process . env . SHOW _EIP _1559 _UI ) {
return (
< div className = "confirm-page-container-content__details" >
< TransactionDetail
onEdit = { ( ) => this . handleEditGas ( ) }
rows = { [
< TransactionDetailItem
key = "gas-item"
detailTitle = {
txData . dappSuggestedGasFees ? (
< >
{ t ( 'transactionDetailDappGasHeading' , [
getRequestingOrigin ( ) ,
] ) }
< InfoTooltip
contentText = { t ( 'transactionDetailDappGasTooltip' ) }
position = "top"
iconFillColor = "#f66a0a"
>
< i className = "fa fa-info-circle" / >
< / I n f o T o o l t i p >
< / >
) : (
< >
{ t ( 'transactionDetailGasHeading' ) }
< InfoTooltip
contentText = {
< >
< p > { t ( 'transactionDetailGasTooltipIntro' ) } < / p >
< p > { t ( 'transactionDetailGasTooltipExplanation' ) } < / p >
< p >
< a
href = "https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
target = "_blank"
rel = "noopener noreferrer"
>
{ t ( 'transactionDetailGasTooltipConversion' ) }
< / a >
< / p >
< / >
}
position = "top"
>
< i className = "fa fa-info-circle" / >
< / I n f o T o o l t i p >
< / >
)
}
detailTitleColor = {
txData . dappSuggestedGasFees ? COLORS . SECONDARY1 : COLORS . BLACK
}
detailText = {
< UserPreferencedCurrencyDisplay
type = { PRIMARY }
value = { hexMinimumTransactionFee }
hideLabel = { false }
/ >
}
detailTotal = {
< UserPreferencedCurrencyDisplay
type = { SECONDARY }
value = { hexMinimumTransactionFee }
hideLabel
/ >
}
subText = { t ( 'editGasSubTextFee' , [
< UserPreferencedCurrencyDisplay
key = "gas-subtext"
type = { SECONDARY }
value = { getHexGasTotal ( {
gasPrice : txData . txParams . maxFeePerGas ,
gasLimit : txData . txParams . gas ,
} ) }
hideLabel
/ > ,
] ) }
subTitle = {
< GasTiming
maxPriorityFeePerGas = { txData . txParams . maxPriorityFeePerGas }
maxFeePerGas = { txData . txParams . maxFeePerGas }
/ >
}
/ > ,
< TransactionDetailItem
key = "total-item"
detailTitle = { t ( 'total' ) }
detailText = {
< UserPreferencedCurrencyDisplay
type = { PRIMARY }
value = { hexTransactionTotal }
hideLabel = { false }
/ >
}
detailTotal = {
< UserPreferencedCurrencyDisplay
type = { SECONDARY }
value = { hexTransactionTotal }
hideLabel
/ >
}
subTitle = { t ( 'transactionDetailGasTotalSubtitle' ) }
subText = { t ( 'editGasSubTextAmount' , [
< UserPreferencedCurrencyDisplay
key = "gas-total-subtext"
type = { SECONDARY }
value = { addHexes (
txData . txParams . value ,
getHexGasTotal ( {
gasPrice : txData . txParams . maxFeePerGas ,
gasLimit : txData . txParams . gas ,
} ) ,
) }
hideLabel
/ > ,
] ) }
/ > ,
] }
/ >
{ nonceField }
< / d i v >
) ;
}
return (
return (
< div className = "confirm-page-container-content__details" >
< div className = "confirm-page-container-content__details" >
< div className = "confirm-page-container-content__gas-fee" >
< TransactionDetail
< ConfirmDetailRow
onEdit = { ( ) => this . handleEditGas ( ) }
label = { t ( 'gasFee' ) }
rows = { [
value = { hexMinimumTransactionFee }
< TransactionDetailItem
headerText = { showGasEditButton ? t ( 'edit' ) : '' }
key = "gas-item"
headerTextClassName = {
detailTitle = {
showGasEditButton ? 'confirm-detail-row__header-text--edit' : ''
txData . dappSuggestedGasFees ? (
}
< >
onHeaderClick = {
{ t ( 'transactionDetailDappGasHeading' , [
showGasEditButton ? ( ) => this . handleEditGas ( ) : null
getRequestingOrigin ( ) ,
}
] ) }
secondaryText = {
< InfoTooltip
hideFiatConversion ? t ( 'noConversionRateAvailable' ) : ''
contentText = { t ( 'transactionDetailDappGasTooltip' ) }
}
position = "top"
/ >
iconFillColor = "#f66a0a"
{ showInlineControls ? inlineGasControls : null }
>
{ noGasPrice ? (
< i className = "fa fa-info-circle" / >
< div className = "confirm-page-container-content__error-container" >
< / I n f o T o o l t i p >
< ErrorMessage errorKey = { GAS _PRICE _FETCH _FAILURE _ERROR _KEY } / >
< / >
< / d i v >
) : (
) : null }
< >
< / d i v >
{ t ( 'transactionDetailGasHeading' ) }
< div
< InfoTooltip
className = {
contentText = {
useNonceField ? 'confirm-page-container-content__gas-fee' : null
< >
}
< p > { t ( 'transactionDetailGasTooltipIntro' ) } < / p >
>
< p > { t ( 'transactionDetailGasTooltipExplanation' ) } < / p >
< ConfirmDetailRow
< p >
label = { t ( 'total' ) }
< a
value = { hexTransactionTotal }
href = "https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
primaryText = { primaryTotalTextOverride }
target = "_blank"
secondaryText = {
rel = "noopener noreferrer"
hideFiatConversion
>
? t ( 'noConversionRateAvailable' )
{ t ( 'transactionDetailGasTooltipConversion' ) }
: secondaryTotalTextOverride
< / a >
}
< / p >
headerText = { t ( 'amountGasFee' ) }
< / >
headerTextClassName = "confirm-detail-row__header-text--total"
}
primaryValueTextColor = "#2f9ae0"
position = "top"
/ >
>
< / d i v >
< i className = "fa fa-info-circle" / >
< / I n f o T o o l t i p >
< / >
)
}
detailTitleColor = {
txData . dappSuggestedGasFees ? COLORS . SECONDARY1 : COLORS . BLACK
}
detailText = {
< UserPreferencedCurrencyDisplay
type = { PRIMARY }
value = { hexMinimumTransactionFee }
hideLabel = { false }
/ >
}
detailTotal = {
< UserPreferencedCurrencyDisplay
type = { SECONDARY }
value = { hexMinimumTransactionFee }
hideLabel
/ >
}
subText = { t ( 'editGasSubTextFee' , [
< UserPreferencedCurrencyDisplay
key = "gas-subtext"
type = { SECONDARY }
value = { getHexGasTotal ( {
gasPrice : txData . txParams . maxFeePerGas ,
gasLimit : txData . txParams . gas ,
} ) }
hideLabel
/ > ,
] ) }
subTitle = {
< GasTiming
maxPriorityFeePerGas = { txData . txParams . maxPriorityFeePerGas }
maxFeePerGas = { txData . txParams . maxFeePerGas }
/ >
}
/ > ,
< TransactionDetailItem
key = "total-item"
detailTitle = { primaryTotalTextOverride || t ( 'total' ) }
detailText = {
< UserPreferencedCurrencyDisplay
type = { PRIMARY }
value = { hexTransactionTotal }
hideLabel = { false }
/ >
}
detailTotal = {
< UserPreferencedCurrencyDisplay
type = { SECONDARY }
value = { hexTransactionTotal }
hideLabel
/ >
}
subTitle = {
secondaryTotalTextOverride ||
t ( 'transactionDetailGasTotalSubtitle' )
}
subText = { t ( 'editGasSubTextAmount' , [
< UserPreferencedCurrencyDisplay
key = "gas-total-subtext"
type = { SECONDARY }
value = { addHexes (
txData . txParams . value ,
getHexGasTotal ( {
gasPrice : txData . txParams . maxFeePerGas ,
gasLimit : txData . txParams . gas ,
} ) ,
) }
hideLabel
/ > ,
] ) }
/ > ,
] }
/ >
{ nonceField }
{ nonceField }
< / d i v >
< / d i v >
) ;
) ;
@ -924,7 +820,7 @@ export default class ConfirmTransactionBase extends Component {
origin = { txData . origin }
origin = { txData . origin }
ethGasPriceWarning = { ethGasPriceWarning }
ethGasPriceWarning = { ethGasPriceWarning }
editingGas = { editingGas }
editingGas = { editingGas }
handleCloseEditGas = { ( ) => this . handleCloseNewGasPopover ( ) }
handleCloseEditGas = { ( ) => this . handleCloseEditGas ( ) }
currentTransaction = { txData }
currentTransaction = { txData }
/ >
/ >
) ;
) ;