feat: codefence Account Watcher for flask (#27543)

## **Description**

This PR puts the Account Watcher feature under the Flask codefence,
restricting it to only be included in Flask builds.

## **Manual testing steps**

1. Build the extension in Flask mode
2. Verify the account watcher feature is present
3. Build the extension in non-Flask mode 
4. Verify the account watcher feature is not present

## **Screenshots/Recordings**

The option to "Watch Ethereum Accounts (Beta)" should **NOT** be present
on the _Main_ build


https://github.com/user-attachments/assets/e9cd21fa-e8fb-4c63-b888-48178df8730a

The option to "Watch Ethereum Accounts (Beta)" should **BE PRESENT** on
the _Flask_ build


https://github.com/user-attachments/assets/b641141e-878e-4f96-b41b-f14745de6ced

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

app/scripts/controllers/preferences-controller.ts

@@ -124,7 +124,9 @@ export type PreferencesControllerState = {
   useRequestQueue: boolean;
   openSeaEnabled: boolean;
   securityAlertsEnabled: boolean;
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   watchEthereumAccountEnabled: boolean;
+  ///: END:ONLY_INCLUDE_IF
   bitcoinSupportEnabled: boolean;
   bitcoinTestnetSupportEnabled: boolean;
   addSnapAccountEnabled: boolean;
@@ -429,6 +431,7 @@ export default class PreferencesController {
   }
   ///: END:ONLY_INCLUDE_IF
 
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   /**
    * Setter for the `watchEthereumAccountEnabled` property.
    *
@@ -440,6 +443,7 @@ export default class PreferencesController {
       watchEthereumAccountEnabled,
     });
   }
+  ///: END:ONLY_INCLUDE_IF
 
   /**
    * Setter for the `bitcoinSupportEnabled` property.

app/scripts/lib/snap-keyring/account-watcher-snap.ts

@@ -1,3 +1,4 @@
+// BEGIN:ONLY_INCLUDE_IF(build-flask)
 import { SnapId } from '@metamask/snaps-sdk';
 import AccountWatcherSnap from '@metamask/account-watcher/dist/preinstalled-snap.json';
 
@@ -6,3 +7,4 @@ export const ACCOUNT_WATCHER_SNAP_ID: SnapId =
 
 export const ACCOUNT_WATCHER_NAME: string =
   AccountWatcherSnap.manifest.proposedName;
+// END:ONLY_INCLUDE_IF

app/scripts/metamask-controller.js

@@ -3275,10 +3275,12 @@ export default class MetamaskController extends EventEmitter {
           preferencesController,
         ),
       ///: END:ONLY_INCLUDE_IF
+      ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
       setWatchEthereumAccountEnabled:
         preferencesController.setWatchEthereumAccountEnabled.bind(
           preferencesController,
         ),
+      ///: END:ONLY_INCLUDE_IF
       setBitcoinSupportEnabled:
         preferencesController.setBitcoinSupportEnabled.bind(
           preferencesController,

app/scripts/snaps/preinstalled-snaps.ts

@@ -1,8 +1,8 @@
 import type { PreinstalledSnap } from '@metamask/snaps-controllers';
 import MessageSigningSnap from '@metamask/message-signing-snap/dist/preinstalled-snap.json';
 import EnsResolverSnap from '@metamask/ens-resolver-snap/dist/preinstalled-snap.json';
-import AccountWatcherSnap from '@metamask/account-watcher/dist/preinstalled-snap.json';
 ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+import AccountWatcherSnap from '@metamask/account-watcher/dist/preinstalled-snap.json';
 import BitcoinWalletSnap from '@metamask/bitcoin-wallet-snap/dist/preinstalled-snap.json';
 import PreinstalledExampleSnap from '@metamask/preinstalled-example-snap/dist/preinstalled-snap.json';
 ///: END:ONLY_INCLUDE_IF
@@ -11,8 +11,8 @@ import PreinstalledExampleSnap from '@metamask/preinstalled-example-snap/dist/pr
 const PREINSTALLED_SNAPS = Object.freeze<PreinstalledSnap[]>([
   MessageSigningSnap as PreinstalledSnap,
   EnsResolverSnap as PreinstalledSnap,
-  AccountWatcherSnap as PreinstalledSnap,
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  AccountWatcherSnap as PreinstalledSnap,
   BitcoinWalletSnap as unknown as PreinstalledSnap,
   PreinstalledExampleSnap as unknown as PreinstalledSnap,
   ///: END:ONLY_INCLUDE_IF

shared/constants/metametrics.ts

@@ -637,7 +637,9 @@ export enum MetaMetricsEventName {
   WalletSetupCanceled = 'Wallet Setup Canceled',
   WalletSetupFailed = 'Wallet Setup Failed',
   WalletCreated = 'Wallet Created',
+  // BEGIN:ONLY_INCLUDE_IF(build-flask)
   WatchEthereumAccountsToggled = 'Watch Ethereum Accounts Toggled',
+  // END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   DeeplinkClicked = 'Deeplink Clicked',
   ConnectCustodialAccountClicked = 'Connect Custodial Account Clicked',

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -59,14 +59,14 @@ import {
   getIsAddSnapAccountEnabled,
   ///: END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  getIsWatchEthereumAccountEnabled,
   getIsBitcoinSupportEnabled,
   getIsBitcoinTestnetSupportEnabled,
   ///: END:ONLY_INCLUDE_IF
   getMetaMaskAccountsOrdered,
   getOriginOfCurrentTab,
   getSelectedInternalAccount,
   getUpdatedAndSortedAccounts,
-  getIsWatchEthereumAccountEnabled,
 } from '../../../selectors';
 import { setSelectedAccount } from '../../../store/actions';
 import {
@@ -86,6 +86,12 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 import { getAccountLabel } from '../../../helpers/utils/accounts';
 ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+import {
+  ACCOUNT_WATCHER_NAME,
+  ACCOUNT_WATCHER_SNAP_ID,
+  // TODO: Remove restricted import
+  // eslint-disable-next-line import/no-restricted-paths
+} from '../../../../app/scripts/lib/snap-keyring/account-watcher-snap';
 import {
   hasCreatedBtcMainnetAccount,
   hasCreatedBtcTestnetAccount,
@@ -97,12 +103,6 @@ import {
   AccountConnections,
   MergedInternalAccount,
 } from '../../../selectors/selectors.types';
-import {
-  ACCOUNT_WATCHER_NAME,
-  ACCOUNT_WATCHER_SNAP_ID,
-  // TODO: Remove restricted import
-  // eslint-disable-next-line import/no-restricted-paths
-} from '../../../../app/scripts/lib/snap-keyring/account-watcher-snap';
 import { HiddenAccountList } from './hidden-account-list';
 
 const ACTION_MODES = {
@@ -112,9 +112,9 @@ const ACTION_MODES = {
   MENU: 'menu',
   // Displays the add account form controls
   ADD: 'add',
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   // Displays the add account form controls (for watch-only account)
   ADD_WATCH_ONLY: 'add-watch-only',
-  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   // Displays the add account form controls (for bitcoin account)
   ADD_BITCOIN: 'add-bitcoin',
   // Same but for testnet
@@ -138,9 +138,9 @@ export const getActionTitle = (
   switch (actionMode) {
     case ACTION_MODES.ADD:
     case ACTION_MODES.MENU:
-    case ACTION_MODES.ADD_WATCH_ONLY:
       return t('addAccount');
     ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+    case ACTION_MODES.ADD_WATCH_ONLY:
     case ACTION_MODES.ADD_BITCOIN:
       return t('addAccount');
     case ACTION_MODES.ADD_BITCOIN_TESTNET:
@@ -231,6 +231,7 @@ export const AccountListMenu = ({
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   const addSnapAccountEnabled = useSelector(getIsAddSnapAccountEnabled);
   ///: END:ONLY_INCLUDE_IF
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   const isAddWatchEthereumAccountEnabled = useSelector(
     getIsWatchEthereumAccountEnabled,
   );
@@ -248,7 +249,7 @@ export const AccountListMenu = ({
     onClose();
     history.push(`/snaps/view/${encodeURIComponent(ACCOUNT_WATCHER_SNAP_ID)}`);
   }, [trackEvent, onClose, history]);
-  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+
   const bitcoinSupportEnabled = useSelector(getIsBitcoinSupportEnabled);
   const bitcoinTestnetSupportEnabled = useSelector(
     getIsBitcoinTestnetSupportEnabled,
@@ -550,19 +551,23 @@ export const AccountListMenu = ({
               </Box>
               ///: END:ONLY_INCLUDE_IF
             }
-            {isAddWatchEthereumAccountEnabled && (
-              <Box marginTop={4}>
-                <ButtonLink
-                  disabled={!isAddWatchEthereumAccountEnabled}
-                  size={ButtonLinkSize.Sm}
-                  startIconName={IconName.Eye}
-                  onClick={handleAddWatchAccount}
-                  data-testid="multichain-account-menu-popover-add-watch-only-account"
-                >
-                  {t('addEthereumWatchOnlyAccount')}
-                </ButtonLink>
-              </Box>
-            )}
+            {
+              ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+              isAddWatchEthereumAccountEnabled && (
+                <Box marginTop={4}>
+                  <ButtonLink
+                    disabled={!isAddWatchEthereumAccountEnabled}
+                    size={ButtonLinkSize.Sm}
+                    startIconName={IconName.Eye}
+                    onClick={handleAddWatchAccount}
+                    data-testid="multichain-account-menu-popover-add-watch-only-account"
+                  >
+                    {t('addEthereumWatchOnlyAccount')}
+                  </ButtonLink>
+                </Box>
+              )
+              ///: END:ONLY_INCLUDE_IF
+            }
           </Box>
         ) : null}
         {actionMode === ACTION_MODES.LIST ? (

ui/pages/settings/experimental-tab/experimental-tab.component.tsx

@@ -263,6 +263,7 @@ export default class ExperimentalTab extends PureComponent<ExperimentalTabProps>
     });
   }
 
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   renderWatchAccountToggle() {
     const { t, trackEvent } = this.context;
     const { watchAccountEnabled, setWatchAccountEnabled } = this.props;
@@ -297,7 +298,6 @@ export default class ExperimentalTab extends PureComponent<ExperimentalTabProps>
     });
   }
 
-  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   // We're only setting the code fences here since
   // we should remove it for the feature release
   renderBitcoinSupport() {
@@ -385,12 +385,15 @@ export default class ExperimentalTab extends PureComponent<ExperimentalTabProps>
           this.renderKeyringSnapsToggle()
           ///: END:ONLY_INCLUDE_IF
         }
-        {this.renderWatchAccountToggle()}
+        {
+          ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+          this.renderWatchAccountToggle()
+          ///: END:ONLY_INCLUDE_IF
+        }
         {
           ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
           // We're only setting the code fences here since
           // we should remove it for the feature release
-
           /* Section: Bitcoin Accounts */
           this.renderBitcoinSupport()
           ///: END:ONLY_INCLUDE_IF