diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3400fcbe0..73f8d3f1b 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -689,6 +689,14 @@
"editGasPriceTooltip": {
"message": "This network requires a “Gas price” field when submitting a transaction. Gas price is the amount you will pay pay per unit of gas."
},
+ "editGasSubTextAmount": {
+ "message": "Max amount: $1",
+ "description": "$1 represents a dollar amount"
+ },
+ "editGasSubTextFee": {
+ "message": "Max fee: $1",
+ "description": "$1 represents a dollar amount"
+ },
"editGasTitle": {
"message": "Edit priority"
},
diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index e986278f7..6dc00c6ef 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -31,4 +31,8 @@
&__subtitle {
flex-grow: 1;
}
+
+ &__subtext {
+ text-align: end;
+ }
}
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index 4b59ecef3..bfb446bd0 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -46,16 +46,19 @@ export default function TransactionDetailItem({
- {subTitle && (
-
- {subTitle}
-
- )}
-
+
+ {subTitle}
+
+
+
{subText}
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 3bff20537..d77759f7f 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -6,6 +6,8 @@ import ConfirmPageContainer, {
ConfirmDetailRow,
} from '../../components/app/confirm-page-container';
import { isBalanceSufficient } from '../send/send.utils';
+import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util';
+import { addHexes, hexToDecimal } from '../../helpers/utils/conversions.util';
import {
CONFIRM_TRANSACTION_ROUTE,
DEFAULT_ROUTE,
@@ -19,7 +21,7 @@ import {
} from '../../helpers/constants/error-keys';
import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display';
import { PRIMARY, SECONDARY } from '../../helpers/constants/common';
-import { hexToDecimal } from '../../helpers/utils/conversions.util';
+
import AdvancedGasInputs from '../../components/app/gas-customization/advanced-gas-inputs';
import TextField from '../../components/ui/text-field';
import AdvancedGasControls from '../../components/app/advanced-gas-controls';
@@ -416,6 +418,17 @@ export default class ConfirmTransactionBase extends Component {
hideLabel
/>
}
+ subText={t('editGasSubTextFee', [
+ ,
+ ])}
/>,
}
subTitle={t('transactionDetailGasTotalSubtitle')}
+ subText={t('editGasSubTextAmount', [
+ ,
+ ])}
/>,
]}
/>