Merge branch 'develop' of github.com:MetaMask/metamask-extension into…

… nofitications-integration-tests
MetaMask · Oct 24, 2024 · 8604e4c · 8604e4c
2 parents a4775c4 + 2ae9236
commit 8604e4c
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 30 deletions.
diff --git a/test/integration/confirmations/transactions/contract-deployment.test.tsx b/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');

diff --git a/test/integration/confirmations/transactions/contract-interaction.test.tsx b/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');

diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts b/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",
       }
     `);
   });

diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts b/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(

diff --git a/...onfirm/info/hooks/use-token-image.test.ts → ...onfirm/info/hooks/useTokenDetails.test.ts b/...onfirm/info/hooks/use-token-image.test.ts → ...onfirm/info/hooks/useTokenDetails.test.ts
@@ -2,9 +2,9 @@ import { TransactionMeta } from '@metamask/transaction-controller';
 import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer';
 import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers';
-import { useTokenImage } from './use-token-image';
+import { useTokenDetails } from './useTokenDetails';
 
-describe('useTokenImage', () => {
+describe('useTokenDetails', () => {
   it('returns iconUrl from selected token if it exists', () => {
     const transactionMeta = genUnapprovedTokenTransferConfirmation(
       {},
@@ -19,11 +19,14 @@ describe('useTokenImage', () => {
     };
 
     const { result } = renderHookWithProvider(
-      () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+      () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
       mockState,
     );
 
-    expect(result.current).toEqual({ tokenImage: 'iconUrl' });
+    expect(result.current).toEqual({
+      tokenImage: 'iconUrl',
+      tokenSymbol: 'symbol',
+    });
   });
 
   it('returns selected token image if no iconUrl is included', () => {
@@ -39,11 +42,14 @@ describe('useTokenImage', () => {
     };
 
     const { result } = renderHookWithProvider(
-      () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+      () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
       mockState,
     );
 
-    expect(result.current).toEqual({ tokenImage: 'image' });
+    expect(result.current).toEqual({
+      tokenImage: 'image',
+      tokenSymbol: 'symbol',
+    });
   });
 
   it('returns token list icon url if no image is included in the token', () => {
@@ -58,7 +64,7 @@ describe('useTokenImage', () => {
     };
 
     const { result } = renderHookWithProvider(
-      () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+      () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
       {
         ...mockState,
         metamask: {
@@ -72,7 +78,10 @@ describe('useTokenImage', () => {
       },
     );
 
-    expect(result.current).toEqual({ tokenImage: 'tokenListIconUrl' });
+    expect(result.current).toEqual({
+      tokenImage: 'tokenListIconUrl',
+      tokenSymbol: 'symbol',
+    });
   });
 
   it('returns undefined if no image is found', () => {
@@ -87,10 +96,13 @@ describe('useTokenImage', () => {
     };
 
     const { result } = renderHookWithProvider(
-      () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+      () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
       mockState,
     );
 
-    expect(result.current).toEqual({ tokenImage: undefined });
+    expect(result.current).toEqual({
+      tokenImage: undefined,
+      tokenSymbol: 'symbol',
+    });
   });
 });
diff --git a/...nts/confirm/info/hooks/use-token-image.ts → ...nts/confirm/info/hooks/useTokenDetails.ts b/...nts/confirm/info/hooks/use-token-image.ts → ...nts/confirm/info/hooks/useTokenDetails.ts
@@ -1,20 +1,27 @@
 import { TokenListMap } from '@metamask/assets-controllers';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { useSelector } from 'react-redux';
+import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { getTokenList } from '../../../../../../selectors';
 import { SelectedToken } from '../shared/selected-token';
 
-export const useTokenImage = (
+export const useTokenDetails = (
   transactionMeta: TransactionMeta,
   selectedToken: SelectedToken,
 ) => {
+  const t = useI18nContext();
+
   const tokenList = useSelector(getTokenList) as TokenListMap;
 
-  // TODO: Add support for NFT images in one of the following tasks
   const tokenImage =
     selectedToken?.iconUrl ||
     selectedToken?.image ||
     tokenList[transactionMeta?.txParams?.to as string]?.iconUrl;
 
-  return { tokenImage };
+  const tokenSymbol =
+    selectedToken?.symbol ||
+    tokenList[transactionMeta?.txParams?.to as string]?.symbol ||
+    t('unknown');
+
+  return { tokenImage, tokenSymbol };
 };
diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx
@@ -16,22 +16,23 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../../../../helpers/constants/design-system';
-import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { getWatchedToken } from '../../../../../../../selectors';
 import { MultichainState } from '../../../../../../../selectors/multichain';
 import { useConfirmContext } from '../../../../../context/confirm';
-import { useTokenImage } from '../../hooks/use-token-image';
+import { useTokenDetails } from '../../hooks/useTokenDetails';
 import { useTokenValues } from '../../hooks/use-token-values';
 import { ConfirmLoader } from '../confirm-loader/confirm-loader';
 
 const SendHeading = () => {
-  const t = useI18nContext();
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
   const selectedToken = useSelector((state: MultichainState) =>
     getWatchedToken(transactionMeta)(state),
   );
-  const { tokenImage } = useTokenImage(transactionMeta, selectedToken);
+  const { tokenImage, tokenSymbol } = useTokenDetails(
+    transactionMeta,
+    selectedToken,
+  );
   const { decodedTransferValue, fiatDisplayValue, pending } =
     useTokenValues(transactionMeta);
 
@@ -57,9 +58,7 @@ const SendHeading = () => {
         variant={TextVariant.headingLg}
         color={TextColor.inherit}
         marginTop={3}
-      >{`${decodedTransferValue || ''} ${
-        selectedToken?.symbol || t('unknown')
-      }`}</Text>
+      >{`${decodedTransferValue || ''} ${tokenSymbol}`}</Text>
       {fiatDisplayValue && (
         <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
           {fiatDisplayValue}