fix: Simulations on signature pages should be displayed only if prefe…

…rence is enabled (#25186)

ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx

@@ -24,6 +24,7 @@ describe('PersonalSignInfo', () => {
 
   it('does not render if required data is not present in the transaction', () => {
     const state = {
+      ...mockState,
       confirm: {
         currentConfirmation: {
           id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
@@ -74,9 +75,13 @@ describe('PersonalSignInfo', () => {
     expect(getByText('Signing in with')).toBeDefined();
   });
 
-  it('display simulation for SIWE request', () => {
+  it('display simulation for SIWE request if preference useTransactionSimulations is enabled', () => {
     const state = {
       ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        useTransactionSimulations: true,
+      },
       confirm: {
         currentConfirmation: signatureRequestSIWE,
       },

ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx

@@ -19,6 +19,7 @@ import {
   sanitizeString,
 } from '../../../../../../helpers/utils/util';
 import { SignatureRequestType } from '../../../../types/confirm';
+import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { isSIWESignatureRequest } from '../../../../utils';
 import { AlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
 
@@ -27,6 +28,9 @@ const PersonalSignInfo: React.FC = () => {
   const currentConfirmation = useSelector(
     currentConfirmationSelector,
   ) as SignatureRequestType;
+  const useTransactionSimulations = useSelector(
+    selectUseTransactionSimulations,
+  );
 
   if (!currentConfirmation?.msgParams) {
     return null;
@@ -37,7 +41,7 @@ const PersonalSignInfo: React.FC = () => {
 
   return (
     <>
-      {isSiweSigReq && (
+      {isSiweSigReq && useTransactionSimulations && (
         <Box
           backgroundColor={BackgroundColor.backgroundDefault}
           borderRadius={BorderRadius.MD}

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx

@@ -64,9 +64,13 @@ describe('TypedSignInfo', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('display simulation details for permit signature', () => {
+  it('display simulation details for permit signature if flag useTransactionSimulations is set', () => {
     const state = {
       ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        useTransactionSimulations: true,
+      },
       confirm: {
         currentConfirmation: permitSignatureMsg,
       },

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx

@@ -18,6 +18,7 @@ import {
 } from '../../../../../../helpers/constants/design-system';
 import { SignatureRequestType } from '../../../../types/confirm';
 import { isPermitSignatureRequest } from '../../../../utils';
+import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
 import { PermitSimulation } from './permit-simulation';
 
@@ -26,6 +27,9 @@ const TypedSignInfo: React.FC = () => {
   const currentConfirmation = useSelector(
     currentConfirmationSelector,
   ) as SignatureRequestType;
+  const useTransactionSimulations = useSelector(
+    selectUseTransactionSimulations,
+  );
 
   if (!currentConfirmation?.msgParams) {
     return null;
@@ -40,7 +44,7 @@ const TypedSignInfo: React.FC = () => {
 
   return (
     <>
-      {isPermit && <PermitSimulation />}
+      {isPermit && useTransactionSimulations && <PermitSimulation />}
       <Box
         backgroundColor={BackgroundColor.backgroundDefault}
         borderRadius={BorderRadius.MD}

ui/pages/confirmations/selectors/preferences.test.ts

@@ -0,0 +1,19 @@
+import { selectUseTransactionSimulations } from './preferences';
+
+describe('preference selectors', () => {
+  describe('getUseTransactionSimulations', () => {
+    it('returns value of useTransactionSimulations from state', () => {
+      const result = selectUseTransactionSimulations({
+        metamask: {
+          useTransactionSimulations: true,
+        },
+      });
+      expect(result).toStrictEqual(true);
+    });
+
+    it('returns undefined if useTransactionSimulations is not set', () => {
+      const result = selectUseTransactionSimulations({ metamask: {} });
+      expect(result).toStrictEqual(undefined);
+    });
+  });
+});

ui/pages/confirmations/selectors/preferences.ts

@@ -0,0 +1,8 @@
+export type RootState = {
+  metamask: {
+    useTransactionSimulations?: boolean;
+  };
+};
+
+export const selectUseTransactionSimulations = (state: RootState) =>
+  state.metamask.useTransactionSimulations;