feat: add setting to dismiss prompt to enable smart contract

app/scripts/controllers/preferences-controller.test.ts

@@ -708,6 +708,7 @@ describe('preferences controller', () => {
         hideZeroBalanceTokens: false,
         petnamesEnabled: true,
         shouldShowAggregatedBalancePopover: true,
+        dismissSmartAccountSuggestionEnabled: false,
         featureNotificationsEnabled: false,
         showConfirmationAdvancedDetails: false,
         showMultiRpcModal: false,
@@ -736,6 +737,7 @@ describe('preferences controller', () => {
         petnamesEnabled: true,
         privacyMode: false,
         shouldShowAggregatedBalancePopover: true,
+        dismissSmartAccountSuggestionEnabled: false,
         featureNotificationsEnabled: false,
         showConfirmationAdvancedDetails: true,
         showMultiRpcModal: false,

app/scripts/controllers/preferences-controller.ts

@@ -106,6 +106,7 @@ export type Preferences = {
   };
   tokenNetworkFilter: Record<string, boolean>;
   shouldShowAggregatedBalancePopover: boolean;
+  dismissSmartAccountSuggestionEnabled: boolean;
 };
 
 // Omitting properties that already exist in the PreferencesState, as part of the preferences property.
@@ -200,6 +201,7 @@ export const getDefaultPreferencesControllerState =
       showMultiRpcModal: false,
       privacyMode: false,
       shouldShowAggregatedBalancePopover: true, // by default user should see popover;
+      dismissSmartAccountSuggestionEnabled: false,
       tokenSortConfig: {
         key: 'tokenFiatAmount',
         order: 'dsc',

ui/pages/confirmations/components/confirm/footer/acknowledge/acknowledge.test.tsx

@@ -1,6 +1,8 @@
 import { AuthorizationList } from '@metamask/transaction-controller';
 import React from 'react';
 import { act } from '@testing-library/react';
+import * as ReduxFunctions from 'react-redux';
+
 import configureStore from '../../../../../../store/store';
 import { getMockConfirmStateForTransaction } from '../../../../../../../test/data/confirmations/helper';
 import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction';
@@ -66,4 +68,10 @@ describe('Acknowledge', () => {
     const { container } = render({});
     expect(container).toBeEmptyDOMElement();
   });
+
+  it('does not render if preference dismissSmartAccountSuggestionEnabled is enabled', () => {
+    jest.spyOn(ReduxFunctions, 'useSelector').mockReturnValue(true);
+    const { container } = render({});
+    expect(container).toBeEmptyDOMElement();
+  });
 });

ui/pages/confirmations/components/confirm/footer/acknowledge/acknowledge.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+
 import { useIsUpgradeTransaction } from '../../info/hooks/useIsUpgradeTransaction';
+import { getDismissSmartAccountSuggestionEnabled } from '../../../../../../selectors';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { Checkbox } from '../../../../../../components/component-library';
 import { AlignItems } from '../../../../../../helpers/constants/design-system';
@@ -13,8 +16,11 @@ export function Acknowledge(props: AcknowledgeProps) {
   const t = useI18nContext();
   const isUpgradeTransaction = useIsUpgradeTransaction();
   const { isAcknowledged, onAcknowledgeToggle } = props;
+  const dismissSmartAccountSuggestionEnabled = useSelector(
+    getDismissSmartAccountSuggestionEnabled,
+  );
 
-  if (!isUpgradeTransaction) {
+  if (!isUpgradeTransaction || dismissSmartAccountSuggestionEnabled) {
     return null;
   }
 

ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap

@@ -66,6 +66,74 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-dismiss-smart-account-suggestion-enabled"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+
+          Dismiss "Switch to Smart Account" suggestion
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Turn this on to no longer see the "Switch to Smart Account" suggestion on any account. Smart accounts unlocks faster transactions, lower network fees and more flexibility on payment for those.
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(133, 139, 154);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); left: 3px;"
+              />
+            </div>
+            <input
+              data-testid="settings-page-dismiss-smart-account-suggestion-enabled-toggle"
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
     <div
       class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
       data-testid="advanced-setting-enable-smart-transactions"

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -56,6 +56,8 @@ export default class AdvancedTab extends PureComponent {
     backupUserData: PropTypes.func.isRequired,
     showExtensionInFullSizeView: PropTypes.bool,
     setShowExtensionInFullSizeView: PropTypes.func.isRequired,
+    dismissSmartAccountSuggestionEnabled: PropTypes.bool.isRequired,
+    setDismissSmartAccountSuggestionEnabled: PropTypes.func.isRequired,
   };
 
   state = {
@@ -203,6 +205,46 @@ export default class AdvancedTab extends PureComponent {
     );
   }
 
+  renderToggleDismissSmartAccountSuggestion() {
+    const { t } = this.context;
+    const {
+      dismissSmartAccountSuggestionEnabled,
+      setDismissSmartAccountSuggestionEnabled,
+    } = this.props;
+
+    return (
+      <Box
+        ref={this.settingsRefs[2]}
+        className="settings-page__content-row"
+        data-testid="advanced-setting-dismiss-smart-account-suggestion-enabled"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        gap={4}
+      >
+        <div className="settings-page__content-item">
+          <span> {t('dismissSmartAccountSuggestionEnabledTitle')}</span>
+          <div className="settings-page__content-description">
+            {t('dismissSmartAccountSuggestionEnabledDescription')}
+          </div>
+        </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={dismissSmartAccountSuggestionEnabled}
+            onToggle={(oldValue) => {
+              const newValue = !oldValue;
+              setDismissSmartAccountSuggestionEnabled(newValue);
+            }}
+            offLabel={t('off')}
+            onLabel={t('on')}
+            dataTestId="settings-page-dismiss-smart-account-suggestion-enabled-toggle"
+          />
+        </div>
+      </Box>
+    );
+  }
+
   renderToggleStxOptIn() {
     const { t } = this.context;
     const { smartTransactionsEnabled, setSmartTransactionsEnabled } =
@@ -557,6 +599,7 @@ export default class AdvancedTab extends PureComponent {
         ) : null}
         {this.renderStateLogs()}
         {this.renderResetAccount()}
+        {this.renderToggleDismissSmartAccountSuggestion()}
         {this.renderToggleStxOptIn()}
         {this.renderHexDataOptIn()}
         {this.renderShowConversionInTestnets()}

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -11,6 +11,7 @@ const mockSetAutoLockTimeLimit = jest.fn().mockReturnValue({ type: 'TYPE' });
 const mockSetShowTestNetworks = jest.fn();
 const mockSetShowFiatConversionOnTestnetsPreference = jest.fn();
 const mockSetStxPrefEnabled = jest.fn();
+const mockSetDismissSmartAccountSuggestionEnabled = jest.fn();
 const mockDisplayErrorInSettings = jest.fn();
 
 jest.mock('../../../store/actions.ts', () => {
@@ -20,6 +21,8 @@ jest.mock('../../../store/actions.ts', () => {
     setShowFiatConversionOnTestnetsPreference: () =>
       mockSetShowFiatConversionOnTestnetsPreference,
     setSmartTransactionsPreferenceEnabled: () => mockSetStxPrefEnabled,
+    setDismissSmartAccountSuggestionEnabled: () =>
+      mockSetDismissSmartAccountSuggestionEnabled,
   };
 });
 
@@ -102,7 +105,7 @@ describe('AdvancedTab Component', () => {
   it('should toggle show fiat on test networks', () => {
     const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
 
-    const testShowFiatOnTestnets = queryAllByRole('checkbox')[2];
+    const testShowFiatOnTestnets = queryAllByRole('checkbox')[3];
 
     fireEvent.click(testShowFiatOnTestnets);
 
@@ -112,7 +115,7 @@ describe('AdvancedTab Component', () => {
   it('should toggle show test networks', () => {
     const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
 
-    const testNetworkToggle = queryAllByRole('checkbox')[3];
+    const testNetworkToggle = queryAllByRole('checkbox')[4];
 
     fireEvent.click(testNetworkToggle);
 
@@ -134,6 +137,25 @@ describe('AdvancedTab Component', () => {
     });
   });
 
+  describe('renderToggleDismissSmartAccountSuggestion', () => {
+    it('should render the toggle button for Dismiss Smart Account Suggestion', () => {
+      const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+      const toggleButton = queryByTestId(
+        'advanced-setting-dismiss-smart-account-suggestion-enabled',
+      );
+      expect(toggleButton).toBeInTheDocument();
+    });
+
+    it('should call setSmartTransactionsOptInStatus when the toggle button is clicked', () => {
+      const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+      const toggleButton = queryByTestId(
+        'settings-page-dismiss-smart-account-suggestion-enabled-toggle',
+      );
+      fireEvent.click(toggleButton);
+      expect(mockSetDismissSmartAccountSuggestionEnabled).toHaveBeenCalled();
+    });
+  });
+
   describe('renderStateLogs', () => {
     it('should render the toggle button for state log download', () => {
       const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);

ui/pages/settings/advanced-tab/advanced-tab.container.js

@@ -7,6 +7,7 @@ import {
   backupUserData,
   setAutoLockTimeLimit,
   setDismissSeedBackUpReminder,
+  setDismissSmartAccountSuggestionEnabled,
   setFeatureFlag,
   setShowExtensionInFullSizeView,
   setShowFiatConversionOnTestnetsPreference,
@@ -33,6 +34,7 @@ export const mapStateToProps = (state) => {
     showTestNetworks,
     showExtensionInFullSizeView,
     autoLockTimeLimit = DEFAULT_AUTO_LOCK_TIME_LIMIT,
+    dismissSmartAccountSuggestionEnabled,
   } = getPreferences(state);
 
   return {
@@ -44,6 +46,7 @@ export const mapStateToProps = (state) => {
     smartTransactionsEnabled: getSmartTransactionsPreferenceEnabled(state),
     autoLockTimeLimit,
     dismissSeedBackUpReminder,
+    dismissSmartAccountSuggestionEnabled,
   };
 };
 
@@ -75,6 +78,9 @@ export const mapDispatchToProps = (dispatch) => {
     setDismissSeedBackUpReminder: (value) => {
       return dispatch(setDismissSeedBackUpReminder(value));
     },
+    setDismissSmartAccountSuggestionEnabled: (value) => {
+      return dispatch(setDismissSmartAccountSuggestionEnabled(value));
+    },
   };
 };
 

ui/selectors/selectors.js

@@ -1998,6 +1998,11 @@ export function getShouldShowAggregatedBalancePopover(state) {
   return shouldShowAggregatedBalancePopover;
 }
 
+export function getDismissSmartAccountSuggestionEnabled(state) {
+  const { dismissSmartAccountSuggestionEnabled } = getPreferences(state);
+  return dismissSmartAccountSuggestionEnabled;
+}
+
 export const getConnectedSnapsList = createDeepEqualSelector(
   getSnapsList,
   (snapsData) => {

ui/store/actions.ts

@@ -3262,6 +3262,10 @@ export function setShowExtensionInFullSizeView(value: boolean) {
   return setPreference('showExtensionInFullSizeView', value);
 }
 
+export function setDismissSmartAccountSuggestionEnabled(value: boolean) {
+  return setPreference('setDismissSmartAccountSuggestionEnabled', value);
+}
+
 export function setTokenSortConfig(value: SortCriteria) {
   return setPreference('tokenSortConfig', value, false);
 }