Cherry-pick aa1ba84 in to 7.49.0 (#16126)

OGPoyraz · metamaskbot · web-flow · commit 3b6eed23d4ca · 2025-06-05T16:45:28.000+02:00
This PR cherry-picks aa1ba84 PR: #16117 --------- Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>
diff --git a/app/components/Views/confirmations/components/info/contract-interaction/contract-interaction.tsx b/app/components/Views/confirmations/components/info/contract-interaction/contract-interaction.tsx
@@ -6,10 +6,10 @@ import { SimulationDetails } from '../../../../../UI/SimulationDetails/Simulatio
 import { useConfirmationMetricEvents } from '../../../hooks/metrics/useConfirmationMetricEvents';
 import { use7702TransactionType } from '../../../hooks/7702/use7702TransactionType';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
-import AccountNetworkInfo from '../../rows/account-network-info-row';
+import AccountNetworkInfoRow from '../../rows/account-network-info-row';
 import OriginRow from '../../rows/origin-row';
 import AdvancedDetailsRow from '../../rows/transactions/advanced-details-row/advanced-details-row';
-import GasFeesDetails from '../../rows/transactions/gas-fee-details';
+import GasFeesDetailsRow from '../../rows/transactions/gas-fee-details-row';
 import SwitchAccountTypeInfoRow from '../../rows/switch-account-type-info-row';
 
 const ContractInteraction = () => {
@@ -22,15 +22,15 @@ const ContractInteraction = () => {
 
   return (
     <View>
-      <AccountNetworkInfo />
+      <AccountNetworkInfoRow />
       {isBatchedUpgrade && <SwitchAccountTypeInfoRow />}
       <SimulationDetails
         transaction={transactionMetadata as TransactionMeta}
         enableMetrics={false}
         isTransactionsRedesign
       />
       <OriginRow isSignatureRequest={false} />
-      <GasFeesDetails />
+      <GasFeesDetailsRow />
       <AdvancedDetailsRow />
     </View>
   );
diff --git a/app/components/Views/confirmations/components/info/personal-sign/personal-sign.tsx b/app/components/Views/confirmations/components/info/personal-sign/personal-sign.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
-import AccountNetworkInfo from '../../rows/account-network-info-row';
+import AccountNetworkInfoRow from '../../rows/account-network-info-row';
 import OriginRow from '../../rows/origin-row';
 import Message from './message';
 
@@ -14,7 +14,7 @@ const PersonalSign = () => {
 
   return (
     <>
-      <AccountNetworkInfo />
+      <AccountNetworkInfoRow />
       <OriginRow isSignatureRequest />
       <Message />
     </>
diff --git a/app/components/Views/confirmations/components/info/switch-account-type/switch-account-type.tsx b/app/components/Views/confirmations/components/info/switch-account-type/switch-account-type.tsx
@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { View } from 'react-native';
 
 import { useConfirmationMetricEvents } from '../../../hooks/metrics/useConfirmationMetricEvents';
-import AccountNetworkInfo from '../../rows/account-network-info-row';
+import AccountNetworkInfoRow from '../../rows/account-network-info-row';
 import AdvancedDetailsRow from '../../rows/transactions/advanced-details-row/advanced-details-row';
-import GasFeesDetails from '../../rows/transactions/gas-fee-details';
+import GasFeesDetailsRow from '../../rows/transactions/gas-fee-details-row';
 import SwitchAccountTypeInfoRow from '../../rows/switch-account-type-info-row';
 
 const SwitchAccountType = () => {
@@ -13,9 +13,9 @@ const SwitchAccountType = () => {
 
   return (
     <View>
-      <AccountNetworkInfo />
+      <AccountNetworkInfoRow />
       <SwitchAccountTypeInfoRow />
-      <GasFeesDetails />
+      <GasFeesDetailsRow />
       <AdvancedDetailsRow />
     </View>
   );
diff --git a/app/components/Views/confirmations/components/info/transfer/transfer.tsx b/app/components/Views/confirmations/components/info/transfer/transfer.tsx
@@ -13,10 +13,10 @@ import { useMaxValueRefresher } from '../../../hooks/useMaxValueRefresher';
 import { useTokenAmount } from '../../../hooks/useTokenAmount';
 import { useTransferAssetType } from '../../../hooks/useTransferAssetType';
 import { HeroRow } from '../../rows/transactions/hero-row';
-import FromTo from '../../rows/transactions/from-to';
-import GasFeesDetails from '../../rows/transactions/gas-fee-details';
-import AdvancedDetailsRow from '../../rows/transactions/advanced-details-row/advanced-details-row';
-import NetworkRow from '../../rows/transactions/network-row';
+import { NetworkAndOriginRow } from '../../rows/transactions/network-and-origin-row';
+import FromToRow from '../../rows/transactions/from-to-row';
+import GasFeesDetailsRow from '../../rows/transactions/gas-fee-details-row';
+import AdvancedDetailsRow from '../../rows/transactions/advanced-details-row';
 
 const Transfer = () => {
   // Set navbar as first to prevent Android navigation flickering
@@ -43,16 +43,16 @@ const Transfer = () => {
   return (
     <View>
       <HeroRow />
-      <FromTo />
-      <NetworkRow />
+      <FromToRow />
+      <NetworkAndOriginRow />
       {isDappTransfer && (
         <SimulationDetails
           transaction={transactionMetadata as TransactionMeta}
           enableMetrics
           isTransactionsRedesign
         />
       )}
-      <GasFeesDetails />
+      <GasFeesDetailsRow />
       <AdvancedDetailsRow />
     </View>
   );
diff --git a/app/components/Views/confirmations/components/info/typed-sign-v1/typed-sign-v1.tsx b/app/components/Views/confirmations/components/info/typed-sign-v1/typed-sign-v1.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
-import AccountNetworkInfo from '../../rows/account-network-info-row';
+import AccountNetworkInfoRow from '../../rows/account-network-info-row';
 import OriginRow from '../../rows/origin-row';
 import Message from './message';
 
@@ -14,7 +14,7 @@ const TypedSignV1 = () => {
 
   return (
     <>
-      <AccountNetworkInfo />
+      <AccountNetworkInfoRow />
       <OriginRow isSignatureRequest />
       <Message />
     </>
diff --git a/app/components/Views/confirmations/components/info/typed-sign-v3v4/typed-sign-v3v4.tsx b/app/components/Views/confirmations/components/info/typed-sign-v3v4/typed-sign-v3v4.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import AccountNetworkInfo from '../../rows/account-network-info-row';
+import AccountNetworkInfoRow from '../../rows/account-network-info-row';
 import { InfoSectionOriginAndDetails } from './info-section-origin-and-details';
 import Message from './message';
 import TypedSignV3V4Simulation from './simulation';
 
 const TypedSignV3V4 = () => (
     <>
-      <AccountNetworkInfo />
+      <AccountNetworkInfoRow />
       <TypedSignV3V4Simulation />
       <InfoSectionOriginAndDetails />
       <Message />
diff --git a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/index.ts b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/index.ts
@@ -0,0 +1 @@
+export { default } from './advanced-details-row';
diff --git a/app/components/Views/confirmations/components/rows/transactions/from-to-row/from-to-row.styles.ts b/app/components/Views/confirmations/components/rows/transactions/from-to-row/from-to-row.styles.ts
diff --git a/app/components/Views/confirmations/components/rows/transactions/from-to-row/from-to-row.test.tsx b/app/components/Views/confirmations/components/rows/transactions/from-to-row/from-to-row.test.tsx
@@ -5,7 +5,7 @@ import { TransactionType } from '@metamask/transaction-controller';
 import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
 import { transferConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
 import { useConfirmationMetricEvents } from '../../../../hooks/metrics/useConfirmationMetricEvents';
-import FromTo from './from-to';
+import FromToRow from './from-to-row';
 
 jest.mock('../../../../hooks/metrics/useConfirmationMetricEvents');
 jest.mock('../../../../../../../core/Engine', () => ({
@@ -56,7 +56,7 @@ const erc20TransferState = merge({}, transferConfirmationState, {
   },
 });
 
-describe('FromTo', () => {
+describe('FromToRow', () => {
   const useConfirmationMetricEventsMock = jest.mocked(
     useConfirmationMetricEvents,
   );
@@ -69,7 +69,7 @@ describe('FromTo', () => {
   });
 
   it('displays the correct addresses for native transfer', async () => {
-    const { getByText } = renderWithProvider(<FromTo />, {
+    const { getByText } = renderWithProvider(<FromToRow />, {
       state: nativeTransferState,
     });
 
@@ -78,7 +78,7 @@ describe('FromTo', () => {
   });
 
   it('displays the correct addresses for erc20 transfer', async () => {
-    const { getByText } = renderWithProvider(<FromTo />, {
+    const { getByText } = renderWithProvider(<FromToRow />, {
       state: erc20TransferState,
     });
 
diff --git a/app/components/Views/confirmations/components/rows/transactions/from-to-row/from-to-row.tsx b/app/components/Views/confirmations/components/rows/transactions/from-to-row/from-to-row.tsx
@@ -13,9 +13,9 @@ import Icon, {
 import { NameType } from '../../../../../../UI/Name/Name.types';
 import { useTransferRecipient } from '../../../../hooks/transactions/useTransferRecipient';
 import InfoSection from '../../../UI/info-row/info-section';
-import styleSheet from './from-to.styles';
+import styleSheet from './from-to-row.styles';
 
-const FromTo = () => {
+const FromToRow = () => {
   const { styles } = useStyles(styleSheet, {});
   const transactionMetadata = useTransactionMetadataRequest();
   const transferRecipient = useTransferRecipient();
@@ -61,4 +61,4 @@ const FromTo = () => {
   );
 };
 
-export default FromTo;
+export default FromToRow;
diff --git a/app/components/Views/confirmations/components/rows/transactions/from-to-row/index.ts b/app/components/Views/confirmations/components/rows/transactions/from-to-row/index.ts
@@ -0,0 +1 @@
+export { default } from './from-to-row';
diff --git a/app/components/Views/confirmations/components/rows/transactions/from-to/index.ts b/app/components/Views/confirmations/components/rows/transactions/from-to/index.ts
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.styles.ts b/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.styles.ts
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.test.tsx b/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.test.tsx
@@ -7,7 +7,7 @@ import { stakingDepositConfirmationState } from '../../../../../../../util/test/
 import { NETWORKS_CHAIN_ID } from '../../../../../../../constants/network';
 import { useConfirmationMetricEvents } from '../../../../hooks/metrics/useConfirmationMetricEvents';
 import { TOOLTIP_TYPES } from '../../../../../../../core/Analytics/events/confirmations';
-import GasFeesDetails from './gas-fee-details';
+import GasFeesDetailsRow from './gas-fee-details-row';
 
 jest.mock('../../../gas/gas-speed', () => ({
   GasSpeed: () => null,
@@ -25,7 +25,7 @@ jest.mock('../../../../../../../core/Engine', () => ({
   },
 }));
 
-describe('GasFeesDetails', () => {
+describe('GasFeesDetailsRow', () => {
   const useConfirmationMetricEventsMock = jest.mocked(
     useConfirmationMetricEvents,
   );
@@ -38,7 +38,7 @@ describe('GasFeesDetails', () => {
   });
 
   it('contains required text', async () => {
-    const { getByText } = renderWithProvider(<GasFeesDetails />, {
+    const { getByText } = renderWithProvider(<GasFeesDetailsRow />, {
       state: stakingDepositConfirmationState,
     });
     expect(getByText('Network Fee')).toBeDefined();
@@ -53,7 +53,7 @@ describe('GasFeesDetails', () => {
     clonedStakingDepositConfirmationState.engine.backgroundState.TransactionController.transactions[0].chainId =
       NETWORKS_CHAIN_ID.SEPOLIA;
 
-    const { getByText } = renderWithProvider(<GasFeesDetails />, {
+    const { getByText } = renderWithProvider(<GasFeesDetailsRow />, {
       state: clonedStakingDepositConfirmationState,
     });
     expect(getByText('$0.34')).toBeDefined();
@@ -67,7 +67,7 @@ describe('GasFeesDetails', () => {
       NETWORKS_CHAIN_ID.SEPOLIA;
     clonedStakingDepositConfirmationState.settings.showFiatOnTestnets = false;
 
-    const { queryByText } = renderWithProvider(<GasFeesDetails />, {
+    const { queryByText } = renderWithProvider(<GasFeesDetailsRow />, {
       state: clonedStakingDepositConfirmationState,
     });
     expect(queryByText('$0.34')).toBeNull();
@@ -86,14 +86,14 @@ describe('GasFeesDetails', () => {
         usdConversionRate: number;
       };
 
-    const { queryByText } = renderWithProvider(<GasFeesDetails />, {
+    const { queryByText } = renderWithProvider(<GasFeesDetailsRow />, {
       state: clonedStakingDepositConfirmationState,
     });
     expect(queryByText('$0.34')).toBeNull();
   });
 
   it('tracks tooltip clicked event', async () => {
-    const { getByTestId } = renderWithProvider(<GasFeesDetails />, {
+    const { getByTestId } = renderWithProvider(<GasFeesDetailsRow />, {
       state: stakingDepositConfirmationState,
     });
 
@@ -108,7 +108,7 @@ describe('GasFeesDetails', () => {
   });
 
   it('shows gas speed row', async () => {
-    const { getByText } = renderWithProvider(<GasFeesDetails />, {
+    const { getByText } = renderWithProvider(<GasFeesDetailsRow />, {
       state: stakingDepositConfirmationState,
     });
     expect(getByText('Speed')).toBeDefined();
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.tsx b/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.tsx
@@ -20,7 +20,7 @@ import InfoSection from '../../../UI/info-row/info-section';
 import AlertRow from '../../../UI/info-row/alert-row';
 import { RowAlertKey } from '../../../UI/info-row/alert-row/constants';
 import { GasSpeed } from '../../../gas/gas-speed';
-import styleSheet from './gas-fee-details.styles';
+import styleSheet from './gas-fee-details-row.styles';
 
 
 const EstimationInfo = ({
@@ -71,7 +71,7 @@ const ClickableEstimationInfo = ({
   );
 };
 
-const GasFeesDetails = ({ disableUpdate = false }) => {
+const GasFeesDetailsRow = ({ disableUpdate = false }) => {
   const [gasModalVisible, setGasModalVisible] = useState(false);
   const { styles } = useStyles(styleSheet, {});
   const transactionMetadata = useTransactionMetadataRequest();
@@ -131,4 +131,4 @@ const GasFeesDetails = ({ disableUpdate = false }) => {
   );
 };
 
-export default GasFeesDetails;
+export default GasFeesDetailsRow;
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/index.ts b/app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/index.ts
@@ -0,0 +1 @@
+export { default } from './gas-fee-details-row';
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-details/index.ts b/app/components/Views/confirmations/components/rows/transactions/gas-fee-details/index.ts
diff --git a/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/index.ts b/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/index.ts
@@ -0,0 +1 @@
+export * from './network-and-origin-row';
diff --git a/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/network-and-origin-row.styles.ts b/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/network-and-origin-row.styles.ts
diff --git a/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/network-and-origin-row.test.tsx b/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/network-and-origin-row.test.tsx
@@ -5,7 +5,7 @@ import { Hex } from '@metamask/utils';
 import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
 import { transferConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
 import { MMM_ORIGIN } from '../../../../constants/confirmations';
-import NetworkRow from './network-row';
+import { NetworkAndOriginRow } from './network-and-origin-row';
 
 jest.mock('../../../../hooks/metrics/useConfirmationMetricEvents');
 jest.mock('../../../../../../../core/Engine', () => ({
@@ -78,9 +78,9 @@ const dappOriginTransactionState = merge({}, transferConfirmationState, {
   },
 });
 
-describe('NetworkRow', () => {
+describe('NetworkAndOriginRow', () => {
   it('displays the correct network name', async () => {
-    const { getByText } = renderWithProvider(<NetworkRow />, {
+    const { getByText } = renderWithProvider(<NetworkAndOriginRow />, {
       state: internalTransactionState,
     });
 
@@ -89,7 +89,7 @@ describe('NetworkRow', () => {
   });
 
   it('displays origin info for dapp transactions', async () => {
-    const { getByText } = renderWithProvider(<NetworkRow />, {
+    const { getByText } = renderWithProvider(<NetworkAndOriginRow />, {
       state: dappOriginTransactionState,
     });
 
@@ -99,7 +99,7 @@ describe('NetworkRow', () => {
   });
 
   it('does not display origin info for internal transactions', async () => {
-    const { getByText, queryByText } = renderWithProvider(<NetworkRow />, {
+    const { getByText, queryByText } = renderWithProvider(<NetworkAndOriginRow />, {
       state: internalTransactionState,
     });
 
diff --git a/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/network-and-origin-row.tsx b/app/components/Views/confirmations/components/rows/transactions/network-and-origin-row/network-and-origin-row.tsx
@@ -16,11 +16,11 @@ import { RootState } from '../../../../../../../reducers';
 import InfoSection from '../../../UI/info-row/info-section';
 import InfoRow from '../../../UI/info-row/info-row';
 import { MMM_ORIGIN } from '../../../../constants/confirmations';
-import styleSheet from './network-row.styles';
+import styleSheet from './network-and-origin-row.styles';
 import AvatarNetwork from '../../../../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork/AvatarNetwork';
 import { AvatarSize } from '../../../../../../../component-library/components/Avatars/Avatar/Avatar.types';
 
-const NetworkRow = () => {
+export const NetworkAndOriginRow = () => {
   const { styles } = useStyles(styleSheet, {});
   const transactionMetadata = useTransactionMetadataRequest();
   const chainId = transactionMetadata?.chainId;
@@ -64,5 +64,3 @@ const NetworkRow = () => {
     </InfoSection>
   );
 };
-
-export default NetworkRow;
diff --git a/app/components/Views/confirmations/components/rows/transactions/network-row/index.ts b/app/components/Views/confirmations/components/rows/transactions/network-row/index.ts
diff --git a/app/components/Views/confirmations/external/staking/info/staking-claim/staking-claim.tsx b/app/components/Views/confirmations/external/staking/info/staking-claim/staking-claim.tsx
@@ -13,7 +13,7 @@ import { useTransactionMetadataRequest } from '../../../../hooks/transactions/us
 import InfoSection from '../../../../components/UI/info-row/info-section';
 import StakingContractInteractionDetails from '../../components/staking-contract-interaction-details/staking-contract-interaction-details';
 import { HeroRow } from '../../../../components/rows/transactions/hero-row';
-import GasFeesDetails from '../../../../components/rows/transactions/gas-fee-details';
+import GasFeesDetailsRow from '../../../../components/rows/transactions/gas-fee-details-row';
 
 const StakingClaim = ({
   route,
@@ -55,7 +55,7 @@ const StakingClaim = ({
       <InfoSection>
         <StakingContractInteractionDetails />
       </InfoSection>
-      <GasFeesDetails disableUpdate />
+      <GasFeesDetailsRow disableUpdate />
     </>
   );
 };
diff --git a/app/components/Views/confirmations/external/staking/info/staking-deposit/staking-deposit.tsx b/app/components/Views/confirmations/external/staking/info/staking-deposit/staking-deposit.tsx
@@ -9,7 +9,7 @@ import InfoSectionAccordion from '../../../../components/UI/info-section-accordi
 import StakingContractInteractionDetails from '../../components/staking-contract-interaction-details/staking-contract-interaction-details';
 import StakingDetails from '../../components/staking-details/staking-details';
 import { HeroRow } from '../../../../components/rows/transactions/hero-row';
-import GasFeesDetails from '../../../../components/rows/transactions/gas-fee-details';
+import GasFeesDetailsRow from '../../../../components/rows/transactions/gas-fee-details-row';
 
 const StakingDeposit = () => {
   useNavbar(strings('stake.stake'));
@@ -58,7 +58,7 @@ const StakingDeposit = () => {
     <>
       <HeroRow />
       <StakingDetails />
-      <GasFeesDetails disableUpdate />
+      <GasFeesDetailsRow disableUpdate />
       <InfoSectionAccordion
         onStateChange={handleAdvancedDetailsToggledEvent}
         header={strings('stake.advanced_details')}
diff --git a/app/components/Views/confirmations/external/staking/info/staking-withdrawal/staking-withdrawal.tsx b/app/components/Views/confirmations/external/staking/info/staking-withdrawal/staking-withdrawal.tsx
diff --git a/attribution.txt b/attribution.txt

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from './advanced-details-row';`