When gas fees suggested by dapp is too high, show warning color and icon (#19088)

* When gas fees suggested by dapp is too high, show warning color and icon

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

tests

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

Fix tests

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

set a default for high gas fees

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

Fix test cases where transaction is undefined.

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

Fix locale error

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

Fix error where dappSuggestedGasFees is null

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

Fix icon for site suggested

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

Fix unit tests snapshot

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

* Fix QA Comments

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

* lint:fix

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

* Fix unit tests

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

* Fix PR comments

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

* Lint fix

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

* Fix PR comment. - call setEstimateUsed only once.

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

* use constants for Priority levels.

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

---------

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

app/_locales/en/messages.json

@@ -1024,6 +1024,12 @@
     "message": "$1 has suggested this price.",
     "description": "$1 is url for the dapp that has suggested gas settings"
   },
+  "dappSuggestedHigh": {
+    "message": "Site suggested"
+  },
+  "dappSuggestedHighShortLabel": {
+    "message": "Site (high)"
+  },
   "dappSuggestedShortLabel": {
     "message": "Site"
   },

shared/constants/gas.ts

@@ -55,6 +55,7 @@ export enum PriorityLevels {
   high = 'high',
   custom = 'custom',
   dAppSuggested = 'dappSuggested',
+  dappSuggestedHigh = 'dappSuggestedHigh',
 }
 
 /**

ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js

@@ -25,6 +25,8 @@ const getTitleAndIcon = (priorityLevel, editGasMode) => {
   let title = priorityLevel;
   if (priorityLevel === PriorityLevels.dAppSuggested) {
     title = 'dappSuggestedShortLabel';
+  } else if (priorityLevel === PriorityLevels.dappSuggestedHigh) {
+    title = 'dappSuggestedHighShortLabel';
   } else if (priorityLevel === PriorityLevels.tenPercentIncreased) {
     icon = null;
     title = 'tenPercentIncreased';

ui/components/app/gas-details-item/gas-details-item.js

@@ -21,6 +21,7 @@ import TransactionDetailItem from '../transaction-detail-item/transaction-detail
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
 import { hexWEIToDecGWEI } from '../../../../shared/modules/conversion.utils';
 import { useDraftTransactionWithTxParams } from '../../../hooks/useDraftTransactionWithTxParams';
+import { PriorityLevels } from '../../../../shared/constants/gas';
 import GasDetailsItemTitle from './gas-details-item-title';
 
 const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
@@ -94,13 +95,17 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
             key="editGasSubTextFeeLabel"
             display="inline-flex"
             className={classNames('gas-details-item__gasfee-label', {
-              'gas-details-item__gas-fee-warning': estimateUsed === 'high',
+              'gas-details-item__gas-fee-warning':
+                estimateUsed === PriorityLevels.high ||
+                estimateUsed === PriorityLevels.dappSuggestedHigh,
             })}
           >
             <LoadingHeartBeat estimateUsed={estimateUsed} />
             <Box marginRight={1}>
               <strong>
-                {estimateUsed === 'high' && '⚠ '}
+                {(estimateUsed === PriorityLevels.high ||
+                  estimateUsed === PriorityLevels.dappSuggestedHigh) &&
+                  '⚠ '}
                 {t('editGasSubTextFeeLabel')}
               </strong>
             </Box>

ui/components/app/gas-details-item/gas-details-item.test.js

@@ -33,6 +33,7 @@ const render = ({ contextProps } = {}) => {
         useNativeCurrencyAsPrimaryCurrency: true,
       },
       gasFeeEstimates: mockEstimates[GasEstimateTypes.feeMarket],
+      ...contextProps,
     },
   });
 
@@ -74,6 +75,32 @@ describe('GasDetailsItem', () => {
     });
   });
 
+  it('should show warning icon if dapp estimates are high', async () => {
+    render({
+      contextProps: {
+        gasFeeEstimates: {
+          high: {
+            suggestedMaxPriorityFeePerGas: '1',
+          },
+        },
+        transaction: {
+          txParams: {
+            gas: '0x52081',
+            maxFeePerGas: '0x38D7EA4C68000',
+          },
+          userFeeLevel: 'medium',
+          dappSuggestedGasFees: {
+            maxPriorityFeePerGas: '0x38D7EA4C68000',
+            maxFeePerGas: '0x38D7EA4C68000',
+          },
+        },
+      },
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('⚠ Max fee:')).toBeInTheDocument();
+    });
+  });
+
   it('should not show warning icon if estimates are not high', async () => {
     render({
       contextProps: { transaction: { txParams: {}, userFeeLevel: 'low' } },

ui/helpers/constants/gas.js

@@ -37,6 +37,7 @@ export const PRIORITY_LEVEL_ICON_MAP = {
   medium: '🦊',
   high: '🦍',
   dappSuggested: '🌐',
+  dappSuggestedHigh: '🌐',
   swapSuggested: '🔄',
   custom: '⚙️',
 };

ui/hooks/gasFeeInput/useGasFeeInputs.js

@@ -17,6 +17,8 @@ import { useGasFeeEstimates } from '../useGasFeeEstimates';
 
 import { editGasModeIsSpeedUpOrCancel } from '../../helpers/utils/gas';
 import { hexToDecimal } from '../../../shared/modules/conversion.utils';
+import { Numeric } from '../../../shared/modules/Numeric';
+import { EtherDenomination } from '../../../shared/constants/common';
 import { useGasFeeErrors } from './useGasFeeErrors';
 import { useGasPriceInput } from './useGasPriceInput';
 import { useMaxFeePerGasInput } from './useMaxFeePerGasInput';
@@ -96,6 +98,8 @@ export function useGasFeeInputs(
   minimumGasLimit = '0x5208',
   editGasMode = EditGasModes.modifyInPlace,
 ) {
+  const GAS_LIMIT_TOO_HIGH_IN_ETH = '1';
+
   const initialRetryTxMeta = {
     txParams: _transaction?.txParams,
     id: _transaction?.id,
@@ -165,9 +169,24 @@ export function useGasFeeInputs(
   useEffect(() => {
     if (supportsEIP1559) {
       if (transaction?.userFeeLevel) {
-        setEstimateUsed(transaction?.userFeeLevel);
         setInternalEstimateToUse(transaction?.userFeeLevel);
       }
+
+      const maximumGas = new Numeric(transaction?.txParams?.gas ?? '0x0', 16)
+        .times(new Numeric(transaction?.txParams?.maxFeePerGas ?? '0x0', 16))
+        .toPrefixedHexString();
+
+      const fee = new Numeric(maximumGas, 16, EtherDenomination.WEI)
+        .toDenomination(EtherDenomination.ETH)
+        .toBase(10)
+        .toString();
+
+      if (Number(fee) > Number(GAS_LIMIT_TOO_HIGH_IN_ETH)) {
+        setEstimateUsed(PriorityLevels.dappSuggestedHigh);
+      } else if (transaction?.userFeeLevel) {
+        setEstimateUsed(transaction?.userFeeLevel);
+      }
+
       setGasLimit(Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')));
     }
   }, [