fix: Remove emojis from gas modals (MetaMask#23907)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to drop emoji usage on gas modals and speed row.

It also adds filtering of `high` option in fee levels if they are same
with `medium`.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Remove emojis from gas options

## **Related issues**

Fixes: MetaMask/MetaMask-planning#6446

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<img width="542" height="1078" alt="Screenshot 2025-12-11 at 00 50 28"
src="https://github.com/user-attachments/assets/260a534e-78b5-4897-b581-7077320497a8"
/>

### **After**

<img width="586" height="1122" alt="Screenshot 2025-12-11 at 00 50 13"
src="https://github.com/user-attachments/assets/62f3ed56-419c-4a0b-ad43-d419fa963ed3"
/>

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Removes emojis from gas options/speed and skips the High option when
its fees match Medium for fee market estimates.
> 
> - **UI (gas options/speed)**
> - Remove emojis from `GasOption` and `GasSpeed` displays; adjust
styles (`leftSection` spacing) and keep selection indicator/value
display.
> - **Types/Constants**
>   - Drop `GasOptionIcon` enum and `GasOption.emoji` field.
> - **Logic**
> - In `useGasFeeEstimateLevelOptions`, omit `High` when its
`maxFeePerGas` and `maxPriorityFeePerGas` equal `Medium` (FeeMarket).
> - **Tests**
> - Update tests to remove emoji assertions; add test ensuring `High` is
excluded when equal to `Medium`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
feaba63. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: OGPoyraz

app/components/Views/confirmations/components/gas/gas-option/gas-option.styles.ts

@@ -35,11 +35,7 @@ const styleSheet = (params: { theme: Theme }) => {
     leftSection: {
       flexDirection: 'row',
       alignItems: 'center',
-    },
-    emoji: {
-      fontSize: 24,
-      marginRight: 12,
-      marginLeft: 6,
+      marginLeft: 8,
     },
     optionTextContainer: {
       justifyContent: 'center',

app/components/Views/confirmations/components/gas/gas-option/gas-option.test.tsx

@@ -4,7 +4,6 @@ import { noop } from 'lodash';
 import { GasOption } from './gas-option';
 
 const mockGasOption = {
-  emoji: '🚀',
   estimatedTime: '',
   isSelected: false,
   key: 'fast',
@@ -21,7 +20,6 @@ describe('GasOption', () => {
     );
 
     expect(getByTestId('gas-option-fast')).toBeOnTheScreen();
-    expect(getByText('🚀')).toBeOnTheScreen();
     expect(getByText('Test gas option')).toBeOnTheScreen();
     expect(getByText('< 0.0001')).toBeOnTheScreen();
     expect(getByText('0.05')).toBeOnTheScreen();

app/components/Views/confirmations/components/gas/gas-option/gas-option.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, TouchableOpacity, Text as RNText } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 
 import { useStyles } from '../../../../../../component-library/hooks';
 import Text, {
@@ -9,16 +9,8 @@ import { type GasOption as GasOptionType } from '../../../types/gas';
 import styleSheet from './gas-option.styles';
 
 export const GasOption = ({ option }: { option: GasOptionType }) => {
-  const {
-    onSelect,
-    name,
-    estimatedTime,
-    valueInFiat,
-    value,
-    emoji,
-    isSelected,
-    key,
-  } = option;
+  const { onSelect, name, estimatedTime, valueInFiat, value, isSelected, key } =
+    option;
 
   const { styles } = useStyles(styleSheet, {});
 
@@ -33,7 +25,6 @@ export const GasOption = ({ option }: { option: GasOptionType }) => {
         onPress={() => onSelect()}
       >
         <View style={styles.leftSection}>
-          <RNText style={styles.emoji}>{emoji}</RNText>
           <View style={styles.optionTextContainer}>
             <Text variant={TextVariant.BodyMDMedium} style={styles.optionName}>
               {name}

app/components/Views/confirmations/components/gas/gas-speed/gas-speed.test.tsx

@@ -30,33 +30,10 @@ describe('GasSpeed', () => {
     jest.clearAllMocks();
   });
 
-  it('renders null when transaction metadata has no userFeeLevel', () => {
-    const stateWithoutUserFeeLevel = merge({}, transferTransactionStateMock, {
-      engine: {
-        backgroundState: {
-          TransactionController: {
-            transactions: [
-              {
-                id: '56f60ff0-2bef-11f0-80ce-2f66f7fbd577',
-                userFeeLevel: undefined,
-              },
-            ],
-          },
-        },
-      },
-    });
-
-    const { queryByText } = renderWithProvider(<GasSpeed />, {
-      state: stateWithoutUserFeeLevel,
-    });
-
-    expect(queryByText(/🐢|🦊|🦍|🌐|⚙️/)).toBeNull();
-  });
-
   it.each([
-    [GasFeeEstimateLevel.Low, 'Low', /🐢.*Low.*~ 30 sec/],
-    [GasFeeEstimateLevel.Medium, 'Medium', /🦊.*Market.*~ 20 sec/],
-    [GasFeeEstimateLevel.High, 'High', /🦍.*Aggressive.*~ 10 sec/],
+    [GasFeeEstimateLevel.Low, 'Low', /.*Low.*~ 30 sec/],
+    [GasFeeEstimateLevel.Medium, 'Medium', /.*Market.*~ 20 sec/],
+    [GasFeeEstimateLevel.High, 'High', /.*Aggressive.*~ 10 sec/],
   ])(
     'renders correct content for %s gas fee estimate level',
     (userFeeLevel, _levelName, expectedPattern) => {
@@ -104,7 +81,7 @@ describe('GasSpeed', () => {
       state: stateWithDappSuggested,
     });
 
-    expect(getByText('🌐 Site suggested')).toBeTruthy();
+    expect(getByText('Site suggested')).toBeTruthy();
   });
 
   it('renders correct content for CUSTOM user fee level', () => {
@@ -126,7 +103,7 @@ describe('GasSpeed', () => {
       state: stateWithCustom,
     });
 
-    expect(getByText('⚙️ Advanced')).toBeTruthy();
+    expect(getByText('Advanced')).toBeTruthy();
   });
 
   it('does not show estimated time for gas price estimate when Medium level is selected', () => {
@@ -151,7 +128,7 @@ describe('GasSpeed', () => {
       state: stateWithGasPriceEstimate,
     });
 
-    expect(getByText('🦊 Market')).toBeTruthy();
+    expect(getByText('Market')).toBeTruthy();
     expect(queryByText(/sec/)).toBeNull();
   });
 
@@ -177,7 +154,7 @@ describe('GasSpeed', () => {
       state: stateWithFeeMarketEstimate,
     });
 
-    expect(getByText(/🦍.*Aggressive.*~ 10 sec/)).toBeTruthy();
+    expect(getByText(/.*Aggressive.*~ 10 sec/)).toBeTruthy();
   });
 
   it('handles unknown user fee level by defaulting to advanced', () => {
@@ -199,7 +176,7 @@ describe('GasSpeed', () => {
       state: stateWithUnknownFeeLevel,
     });
 
-    expect(getByText('⚙️ Advanced')).toBeTruthy();
+    expect(getByText('Advanced')).toBeTruthy();
   });
 
   it('calls useGasFeeEstimates with correct networkClientId', () => {

app/components/Views/confirmations/components/gas/gas-speed/gas-speed.tsx

@@ -9,26 +9,9 @@ import {
 import Text from '../../../../../../component-library/components/Texts/Text/Text';
 import { strings } from '../../../../../../../locales/i18n';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
-import { GasOptionIcon } from '../../../constants/gas';
 import { useGasFeeEstimates } from '../../../hooks/gas/useGasFeeEstimates';
 import { toHumanSeconds } from '../../../utils/time';
 
-const getEmoji = (userFeeLevel: UserFeeLevel | GasFeeEstimateLevel) => {
-  switch (userFeeLevel) {
-    case GasFeeEstimateLevel.Low:
-      return GasOptionIcon.LOW;
-    case GasFeeEstimateLevel.Medium:
-      return GasOptionIcon.MEDIUM;
-    case GasFeeEstimateLevel.High:
-      return GasOptionIcon.HIGH;
-    case UserFeeLevel.DAPP_SUGGESTED:
-      return GasOptionIcon.SITE_SUGGESTED;
-    case UserFeeLevel.CUSTOM:
-    default:
-      return GasOptionIcon.ADVANCED;
-  }
-};
-
 const getText = (userFeeLevel: UserFeeLevel | GasFeeEstimateLevel) => {
   switch (userFeeLevel) {
     case UserFeeLevel.DAPP_SUGGESTED:
@@ -86,14 +69,12 @@ export const GasSpeed = () => {
     transactionMeta.gasFeeEstimates?.type === GasFeeEstimateType.GasPrice &&
     userFeeLevel === GasFeeEstimateLevel.Medium;
 
-  const emoji = getEmoji(userFeeLevel);
   const text = getText(userFeeLevel);
   const estimatedTime = getEstimatedTime(
     userFeeLevel,
     networkGasFeeEstimates,
     isGasPriceEstimateSelected,
   );
 
-  // Intentionally no space between text and estimated time
-  return <Text>{`${emoji} ${text}${estimatedTime}`}</Text>;
+  return <Text>{`${text}${estimatedTime}`}</Text>;
 };

app/components/Views/confirmations/components/modals/estimates-modal/estimates-modal.test.tsx

@@ -10,7 +10,6 @@ jest.mock('../../../hooks/gas/useGasOptions', () => ({
     return {
       options: [
         {
-          emoji: '🚀',
           estimatedTime: '',
           isSelected: false,
           key: 'fast',
@@ -44,9 +43,7 @@ describe('EstimatesModal', () => {
     // Header
     expect(getByText('Edit network fee')).toBeOnTheScreen();
 
-    // Gas option expected to be rendered
     expect(getByTestId('gas-option-fast')).toBeOnTheScreen();
-    expect(getByText('🚀')).toBeOnTheScreen();
     expect(getByText('Test gas option')).toBeOnTheScreen();
     expect(getByText('< 0.0001')).toBeOnTheScreen();
     expect(getByText('0.05')).toBeOnTheScreen();

app/components/Views/confirmations/constants/gas.ts

@@ -4,13 +4,4 @@ export enum GasModalType {
   ADVANCED_GAS_PRICE = 'advancedGasPriceModal',
 }
 
-export enum GasOptionIcon {
-  ADVANCED = '⚙️',
-  GAS_PRICE = '⛓️',
-  HIGH = '🦍',
-  LOW = '🐢',
-  MEDIUM = '🦊',
-  SITE_SUGGESTED = '🌐',
-}
-
 export const EMPTY_VALUE_STRING = '--';

app/components/Views/confirmations/hooks/gas/useAdvancedGasFeeOption.ts

@@ -9,11 +9,7 @@ import {
 import { strings } from '../../../../../../locales/i18n';
 import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
 import { useFeeCalculations } from './useFeeCalculations';
-import {
-  EMPTY_VALUE_STRING,
-  GasModalType,
-  GasOptionIcon,
-} from '../../constants/gas';
+import { EMPTY_VALUE_STRING, GasModalType } from '../../constants/gas';
 import { type GasOption } from '../../types/gas';
 
 const HEX_ZERO = '0x0';
@@ -118,7 +114,6 @@ export const useAdvancedGasFeeOption = ({
   const memoizedGasOption = useMemo(
     () => [
       {
-        emoji: GasOptionIcon.ADVANCED,
         estimatedTime: '',
         isSelected: isAdvancedGasFeeSelected,
         key: 'advanced',

app/components/Views/confirmations/hooks/gas/useDappSuggestedGasFeeOption.ts

@@ -7,7 +7,7 @@ import {
 import { strings } from '../../../../../../locales/i18n';
 import { updateTransactionGasFees } from '../../../../../util/transaction-controller';
 import { type GasOption } from '../../types/gas';
-import { EMPTY_VALUE_STRING, GasOptionIcon } from '../../constants/gas';
+import { EMPTY_VALUE_STRING } from '../../constants/gas';
 import { MMM_ORIGIN } from '../../constants/confirmations';
 import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
 import { useFeeCalculations } from './useFeeCalculations';
@@ -71,7 +71,6 @@ export const useDappSuggestedGasFeeOption = ({
       });
 
     options.push({
-      emoji: GasOptionIcon.SITE_SUGGESTED,
       estimatedTime: undefined,
       isSelected: isDappSuggestedGasFeeSelected,
       key: 'site_suggested',

app/components/Views/confirmations/hooks/gas/useGasFeeEstimateLevelOptions.test.ts

@@ -176,31 +176,25 @@ describe('useGasFeeEstimateLevelOptions', () => {
 
     expect(result.current.length).toEqual(3);
 
-    // Check low option
     const lowOption = result.current.find((option) => option.key === 'low');
     expect(lowOption).toBeDefined();
     expect(lowOption?.isSelected).toEqual(false);
     expect(lowOption?.value).toEqual('5');
     expect(lowOption?.valueInFiat).toEqual('$5');
-    expect(lowOption?.emoji).toEqual('🐢');
 
-    // Check medium option
     const mediumOption = result.current.find(
       (option) => option.key === 'medium',
     );
     expect(mediumOption).toBeDefined();
     expect(mediumOption?.isSelected).toEqual(false);
     expect(mediumOption?.value).toEqual('10');
     expect(mediumOption?.valueInFiat).toEqual('$10');
-    expect(mediumOption?.emoji).toEqual('🦊');
 
-    // Check high option
     const highOption = result.current.find((option) => option.key === 'high');
     expect(highOption).toBeDefined();
     expect(highOption?.isSelected).toEqual(true);
     expect(highOption?.value).toEqual('15');
     expect(highOption?.valueInFiat).toEqual('$15');
-    expect(highOption?.emoji).toEqual('🦍');
 
     expect(mockCalculateGasEstimate).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -507,4 +501,86 @@ describe('useGasFeeEstimateLevelOptions', () => {
     });
     expect(mockHandleCloseModals).toHaveBeenCalled();
   });
+
+  it('excludes high option when medium and high have identical fees for FeeMarket estimates', () => {
+    const mockHandleCloseModals = jest.fn();
+
+    const transactionWithFeeMarketEstimates = {
+      ...simpleSendTransaction,
+      id: 'test-id',
+      userFeeLevel: 'medium',
+      txParams: {
+        ...simpleSendTransaction.txParams,
+        type: TransactionEnvelopeType.feeMarket,
+      },
+      gasFeeEstimates: {
+        type: GasFeeEstimateType.FeeMarket,
+        low: {
+          maxFeePerGas: '0x1',
+          maxPriorityFeePerGas: '0x1',
+        },
+        medium: {
+          maxFeePerGas: '0x2',
+          maxPriorityFeePerGas: '0x2',
+        },
+        high: {
+          maxFeePerGas: '0x2',
+          maxPriorityFeePerGas: '0x2',
+        },
+      },
+    } as unknown as TransactionMeta;
+
+    mockUseTransactionMetadataRequest.mockReturnValue(
+      transactionWithFeeMarketEstimates,
+    );
+
+    mockUseGasFeeEstimates.mockReturnValue({
+      gasFeeEstimates: {
+        low: {
+          minWaitTimeEstimate: 60000,
+          maxWaitTimeEstimate: 120000,
+          suggestedMaxPriorityFeePerGas: '1',
+        },
+        medium: {
+          minWaitTimeEstimate: 30000,
+          maxWaitTimeEstimate: 60000,
+          suggestedMaxPriorityFeePerGas: '2',
+        },
+        high: {
+          minWaitTimeEstimate: 15000,
+          maxWaitTimeEstimate: 30000,
+          suggestedMaxPriorityFeePerGas: '2',
+        },
+      } as unknown as GasFeeEstimates,
+    });
+
+    mockCalculateGasEstimate.mockImplementation(({ feePerGas }) => {
+      const value = feePerGas === '0x1' ? '5' : '10';
+      const valueInFiat = feePerGas === '0x1' ? '$5' : '$10';
+
+      return {
+        currentCurrencyFee: valueInFiat,
+        preciseNativeCurrencyFee: value,
+      };
+    });
+
+    const { result } = renderHook(() =>
+      useGasFeeEstimateLevelOptions({
+        handleCloseModals: mockHandleCloseModals,
+      }),
+    );
+
+    expect(result.current.length).toEqual(2);
+
+    const lowOption = result.current.find((option) => option.key === 'low');
+    expect(lowOption).toBeDefined();
+
+    const mediumOption = result.current.find(
+      (option) => option.key === 'medium',
+    );
+    expect(mediumOption).toBeDefined();
+
+    const highOption = result.current.find((option) => option.key === 'high');
+    expect(highOption).toBeUndefined();
+  });
 });