fix: Cherry-pick Support dynamic native token name on gas component (#…

…28048) (#28071)

Cherry-pick #28048

<!--
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**

Uses the multinetwork ticker.

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28048?quickstart=1)

## **Related issues**

Fixes: #28001

## **Manual testing steps**

See original ticket linked above.

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

<img width="472" alt="Screenshot 2024-10-23 at 16 16 19"
src="https://github.com/user-attachments/assets/636f475e-808f-42d1-8651-d71bdb51b145">


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.


<!--
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?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28071?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.

test/integration/confirmations/transactions/contract-deployment.test.tsx

@@ -283,7 +283,7 @@ describe('Contract Deployment Confirmation', () => {
     expect(editGasFeesRow).toHaveTextContent(tEn('networkFee') as string);
 
     const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
-    expect(firstGasField).toHaveTextContent('0.0001 ETH');
+    expect(firstGasField).toHaveTextContent('0.0001 SepoliaETH');
     const editGasFeeNativeCurrency =
       within(editGasFeesRow).getByTestId('native-currency');
     expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
@@ -371,7 +371,7 @@ describe('Contract Deployment Confirmation', () => {
     const maxFee = screen.getByTestId('gas-fee-details-max-fee');
     expect(gasFeesSection).toContainElement(maxFee);
     expect(maxFee).toHaveTextContent(tEn('maxFee') as string);
-    expect(maxFee).toHaveTextContent('0.0023 ETH');
+    expect(maxFee).toHaveTextContent('0.0023 SepoliaETH');
     expect(maxFee).toHaveTextContent('$7.72');
 
     const nonceSection = screen.getByTestId('advanced-details-nonce-section');

test/integration/confirmations/transactions/contract-interaction.test.tsx

@@ -301,7 +301,7 @@ describe('Contract Interaction Confirmation', () => {
     expect(editGasFeesRow).toHaveTextContent(tEn('networkFee') as string);
 
     const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
-    expect(firstGasField).toHaveTextContent('0.0001 ETH');
+    expect(firstGasField).toHaveTextContent('0.0001 SepoliaETH');
     const editGasFeeNativeCurrency =
       within(editGasFeesRow).getByTestId('native-currency');
     expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
@@ -402,7 +402,7 @@ describe('Contract Interaction Confirmation', () => {
     const maxFee = screen.getByTestId('gas-fee-details-max-fee');
     expect(gasFeesSection).toContainElement(maxFee);
     expect(maxFee).toHaveTextContent(tEn('maxFee') as string);
-    expect(maxFee).toHaveTextContent('0.0023 ETH');
+    expect(maxFee).toHaveTextContent('0.0023 SepoliaETH');
     expect(maxFee).toHaveTextContent('$7.72');
 
     const nonceSection = screen.getByTestId('advanced-details-nonce-section');

ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts

@@ -22,13 +22,13 @@ describe('useFeeCalculations', () => {
     expect(result.current).toMatchInlineSnapshot(`
       {
         "estimatedFeeFiat": "$0.00",
-        "estimatedFeeNative": "0 WEI",
+        "estimatedFeeNative": "0 ETH",
         "l1FeeFiat": "",
         "l1FeeNative": "",
         "l2FeeFiat": "",
         "l2FeeNative": "",
         "maxFeeFiat": "$0.00",
-        "maxFeeNative": "0 WEI",
+        "maxFeeNative": "0 ETH",
       }
     `);
   });

ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts

@@ -8,7 +8,6 @@ import {
   addHexes,
   decGWEIToHexWEI,
   decimalToHex,
-  getEthConversionFromWeiHex,
   getValueFromWeiHex,
   multiplyHexes,
 } from '../../../../../../../shared/modules/conversion.utils';
@@ -17,6 +16,7 @@ import { getConversionRate } from '../../../../../../ducks/metamask/metamask';
 import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter';
 import { useGasFeeEstimates } from '../../../../../../hooks/useGasFeeEstimates';
 import { getCurrentCurrency } from '../../../../../../selectors';
+import { getMultichainNetwork } from '../../../../../../selectors/multichain';
 import { HEX_ZERO } from '../shared/constants';
 import { useEIP1559TxFees } from './useEIP1559TxFees';
 import { useSupportsEIP1559 } from './useSupportsEIP1559';
@@ -33,14 +33,18 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
   const conversionRate = useSelector(getConversionRate);
   const fiatFormatter = useFiatFormatter();
 
+  const multichainNetwork = useSelector(getMultichainNetwork);
+  const ticker = multichainNetwork?.network?.ticker;
+
   const getFeesFromHex = useCallback(
     (hexFee: string) => {
-      const nativeCurrencyFee =
-        getEthConversionFromWeiHex({
+      const nativeCurrencyFee = `${
+        getValueFromWeiHex({
           value: hexFee,
           fromCurrency: EtherDenomination.GWEI,
           numberOfDecimals: 4,
-        }) || `0 ${EtherDenomination.ETH}`;
+        }) || 0
+      } ${ticker}`;
 
       const currentCurrencyFee = fiatFormatter(
         Number(