Update copy in dapp suggested gas fee tooltip to: "Edit to use MetaMask's recommended gas fee based on the latest block." #11952 (#11986)

* Change the [domain] suggested gas fee (i) to Estimated gas fee (i)
Change that line's color from orange to black
Under that line, add Site suggested in italics in gray.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* liinter fixes.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

app/_locales/en/messages.json

@@ -2515,9 +2515,8 @@
   "transactionCreated": {
     "message": "Transaction created with a value of $1 at $2."
   },
-  "transactionDetailDappGasHeading": {
-    "message": "$1 suggested gas fee",
-    "description": "$1 represents a dapp origin"
+  "transactionDetailDappGasMoreInfo": {
+    "message": "Site suggested"
   },
   "transactionDetailDappGasTooltip": {
     "message": "Edit to use MetaMask's recommended gas fee based on the latest block."

ui/components/ui/typography/typography.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {
   COLORS,
   FONT_WEIGHT,
+  FONT_STYLE,
   TEXT_ALIGN,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
@@ -18,6 +19,7 @@ export default function Typography({
   tag,
   children,
   fontWeight = 'normal',
+  fontStyle = 'normal',
   align,
   boxProps = {},
 }) {
@@ -26,6 +28,7 @@ export default function Typography({
     className,
     `typography--${variant}`,
     `typography--weight-${fontWeight}`,
+    `typography--style-${fontStyle}`,
     {
       [`typography--align-${align}`]: Boolean(align),
       [`typography--color-${color}`]: Boolean(color),
@@ -61,6 +64,7 @@ Typography.propTypes = {
     ...Box.propTypes,
   }),
   fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)),
+  fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)),
   tag: PropTypes.oneOf([
     'p',
     'h1',
@@ -73,5 +77,6 @@ Typography.propTypes = {
     'div',
     'dt',
     'dd',
+    'i',
   ]),
 };

ui/components/ui/typography/typography.scss

@@ -26,6 +26,12 @@
     }
   }
 
+  @each $style in design-system.$font-style {
+    &--style-#{$style} {
+      font-style: $style;
+    }
+  }
+
   @each $alignment in design-system.$text-align {
     &--align-#{$alignment} {
       text-align: $alignment;

ui/css/design-system/attributes.scss

@@ -70,3 +70,4 @@ $directions: top, right, bottom, left;
 $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item;
 $text-align: left, right, center, justify, end;
 $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900;
+$font-style: normal, italic, oblique;

ui/helpers/constants/design-system.js

@@ -10,6 +10,7 @@ export const COLORS = {
   UI3: 'ui-3',
   UI4: 'ui-4',
   BLACK: 'black',
+  GRAY: 'gray',
   WHITE: 'white',
   PRIMARY1: 'primary-1',
   PRIMARY2: 'primary-2',
@@ -156,6 +157,12 @@ export const FONT_WEIGHT = {
   900: 900,
 };
 
+export const FONT_STYLE = {
+  ITALIC: 'italic',
+  NORMAL: 'normal',
+  OBLIQUE: 'oblique',
+};
+
 export const SEVERITIES = {
   DANGER: 'danger',
   WARNING: 'warning',

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -9,7 +9,6 @@ import {
   hexToDecimal,
   hexWEIToDecGWEI,
 } from '../../helpers/utils/conversions.util';
-import { getURLHostName } from '../../helpers/utils/util';
 import {
   CONFIRM_TRANSACTION_ROUTE,
   DEFAULT_ROUTE,
@@ -37,7 +36,11 @@ import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
 import LoadingHeartBeat from '../../components/ui/loading-heartbeat';
 import GasTiming from '../../components/app/gas-timing/gas-timing.component';
 
-import { COLORS } from '../../helpers/constants/design-system';
+import {
+  COLORS,
+  FONT_STYLE,
+  TYPOGRAPHY,
+} from '../../helpers/constants/design-system';
 import {
   disconnectGasFeeEstimatePoller,
   getGasFeeEstimatesAndStartPolling,
@@ -45,6 +48,8 @@ import {
   removePollingTokenFromAppState,
 } from '../../store/actions';
 
+import Typography from '../../components/ui/typography/typography';
+
 const renderHeartBeatIfNotInTest = () =>
   process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />;
 
@@ -401,9 +406,7 @@ export default class ConfirmTransactionBase extends Component {
               detailTitle={
                 txData.dappSuggestedGasFees ? (
                   <>
-                    {t('transactionDetailDappGasHeading', [
-                      getURLHostName(txData?.origin),
-                    ])}
+                    {t('transactionDetailGasHeading')}
                     <InfoTooltip
                       contentText={t('transactionDetailDappGasTooltip')}
                       position="top"
@@ -441,9 +444,7 @@ export default class ConfirmTransactionBase extends Component {
                   </>
                 )
               }
-              detailTitleColor={
-                txData.dappSuggestedGasFees ? COLORS.SECONDARY1 : COLORS.BLACK
-              }
+              detailTitleColor={COLORS.BLACK}
               detailText={
                 <div className="confirm-page-container-content__currency-container">
                   {renderHeartBeatIfNotInTest()}
@@ -482,15 +483,28 @@ export default class ConfirmTransactionBase extends Component {
                 </div>,
               ])}
               subTitle={
-                <GasTiming
-                  maxPriorityFeePerGas={hexWEIToDecGWEI(
-                    maxPriorityFeePerGas ||
-                      txData.txParams.maxPriorityFeePerGas,
+                <>
+                  {txData.dappSuggestedGasFees ? (
+                    <Typography
+                      variant={TYPOGRAPHY.H7}
+                      fontStyle={FONT_STYLE.ITALIC}
+                      color={COLORS.GRAY}
+                    >
+                      {t('transactionDetailDappGasMoreInfo')}
+                    </Typography>
+                  ) : (
+                    ''
                   )}
-                  maxFeePerGas={hexWEIToDecGWEI(
-                    maxFeePerGas || txData.txParams.maxFeePerGas,
-                  )}
-                />
+                  <GasTiming
+                    maxPriorityFeePerGas={hexWEIToDecGWEI(
+                      maxPriorityFeePerGas ||
+                        txData.txParams.maxPriorityFeePerGas,
+                    )}
+                    maxFeePerGas={hexWEIToDecGWEI(
+                      maxFeePerGas || txData.txParams.maxFeePerGas,
+                    )}
+                  />
+                </>
               }
             />,
             <TransactionDetailItem