feat: adds the experimental toggle for Solana (#28190)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR sdds a new experimental toggle for Solana accounts. Everything
is code fenced for Flask build.

![Screenshot 2024-10-31 at 11 50
38](https://github.com/user-attachments/assets/8e6a290c-b22d-42a7-8602-ac61410ebdb4)


## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

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

@@ -853,4 +853,19 @@ describe('preferences controller', () => {
       );
     });
   });
+
+  describe('setSolanaSupportEnabled', () => {
+    const { controller } = setupController({});
+    it('has the default value as false', () => {
+      expect(controller.state.solanaSupportEnabled).toStrictEqual(false);
+    });
+
+    it('sets the solanaSupportEnabled property in state to true and then false', () => {
+      controller.setSolanaSupportEnabled(true);
+      expect(controller.state.solanaSupportEnabled).toStrictEqual(true);
+
+      controller.setSolanaSupportEnabled(false);
+      expect(controller.state.solanaSupportEnabled).toStrictEqual(false);
+    });
+  });
 });

app/scripts/controllers/preferences-controller.ts

@@ -140,6 +140,7 @@ export type PreferencesControllerState = Omit<
   useRequestQueue: boolean;
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   watchEthereumAccountEnabled: boolean;
+  solanaSupportEnabled: boolean;
   ///: END:ONLY_INCLUDE_IF
   bitcoinSupportEnabled: boolean;
   bitcoinTestnetSupportEnabled: boolean;
@@ -184,6 +185,9 @@ export const getDefaultPreferencesControllerState =
     openSeaEnabled: true,
     securityAlertsEnabled: true,
     watchEthereumAccountEnabled: false,
+    ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+    solanaSupportEnabled: false,
+    ///: END:ONLY_INCLUDE_IF
     bitcoinSupportEnabled: false,
     bitcoinTestnetSupportEnabled: false,
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -340,6 +344,10 @@ const controllerMetadata = {
     persist: true,
     anonymous: false,
   },
+  solanaSupportEnabled: {
+    persist: true,
+    anonymous: false,
+  },
   bitcoinSupportEnabled: {
     persist: true,
     anonymous: false,
@@ -669,6 +677,18 @@ export class PreferencesController extends BaseController<
       state.watchEthereumAccountEnabled = watchEthereumAccountEnabled;
     });
   }
+
+  /**
+   * Setter for the `solanaSupportEnabled` property.
+   *
+   * @param solanaSupportEnabled - Whether or not the user wants to
+   * enable the "Add a new Solana account" button.
+   */
+  setSolanaSupportEnabled(solanaSupportEnabled: boolean): void {
+    this.update((state) => {
+      state.solanaSupportEnabled = solanaSupportEnabled;
+    });
+  }
   ///: END:ONLY_INCLUDE_IF
 
   /**

app/scripts/metamask-controller.js

@@ -3315,6 +3315,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController.setWatchEthereumAccountEnabled.bind(
           preferencesController,
         ),
+      setSolanaSupportEnabled:
+        preferencesController.setSolanaSupportEnabled.bind(
+          preferencesController,
+        ),
       ///: END:ONLY_INCLUDE_IF
       setBitcoinSupportEnabled:
         preferencesController.setBitcoinSupportEnabled.bind(

shared/constants/metametrics.ts

@@ -607,6 +607,7 @@ export enum MetaMetricsEventName {
   BridgeLinkClicked = 'Bridge Link Clicked',
   BitcoinSupportToggled = 'Bitcoin Support Toggled',
   BitcoinTestnetSupportToggled = 'Bitcoin Testnet Support Toggled',
+  SolanaSupportToggled = 'Solana Support Toggled',
   CurrentCurrency = 'Current Currency',
   DappViewed = 'Dapp Viewed',
   DecryptionApproved = 'Decryption Approved',

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

@@ -36,6 +36,10 @@ import { SurveyUrl } from '../../../../shared/constants/urls';
 type ExperimentalTabProps = {
   watchAccountEnabled: boolean;
   setWatchAccountEnabled: (value: boolean) => void;
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  solanaSupportEnabled: boolean;
+  setSolanaSupportEnabled: (value: boolean) => void;
+  ///: END:ONLY_INCLUDE_IF
   bitcoinSupportEnabled: boolean;
   setBitcoinSupportEnabled: (value: boolean) => void;
   bitcoinTestnetSupportEnabled: boolean;
@@ -369,6 +373,44 @@ export default class ExperimentalTab extends PureComponent<ExperimentalTabProps>
       </>
     );
   }
+
+  renderSolanaSupport() {
+    const { t, trackEvent } = this.context;
+    const { solanaSupportEnabled, setSolanaSupportEnabled } = this.props;
+
+    return (
+      <>
+        <Text
+          variant={TextVariant.headingSm}
+          as="h4"
+          color={TextColor.textAlternative}
+          marginBottom={2}
+          fontWeight={FontWeight.Bold}
+        >
+          {t('solanaSupportSectionTitle')}
+        </Text>
+        {this.renderToggleSection({
+          title: t('solanaSupportToggleTitle'),
+          description: t('solanaSupportToggleDescription'),
+          toggleValue: solanaSupportEnabled,
+          toggleCallback: (value) => {
+            trackEvent({
+              event: MetaMetricsEventName.SolanaSupportToggled,
+              category: MetaMetricsEventCategory.Settings,
+              properties: {
+                enabled: !value,
+              },
+            });
+            setSolanaSupportEnabled(!value);
+          },
+          toggleContainerDataTestId: 'solana-support-toggle-div',
+          toggleDataTestId: 'solana-support-toggle',
+          toggleOffLabel: t('off'),
+          toggleOnLabel: t('on'),
+        })}
+      </>
+    );
+  }
   ///: END:ONLY_INCLUDE_IF
 
   render() {
@@ -398,6 +440,11 @@ export default class ExperimentalTab extends PureComponent<ExperimentalTabProps>
           this.renderBitcoinSupport()
           ///: END:ONLY_INCLUDE_IF
         }
+        {
+          ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+          this.renderSolanaSupport()
+          ///: END:ONLY_INCLUDE_IF
+        }
       </div>
     );
   }

ui/pages/settings/experimental-tab/experimental-tab.container.ts

@@ -13,8 +13,14 @@ import {
   setRedesignedConfirmationsEnabled,
   setRedesignedTransactionsEnabled,
   setWatchEthereumAccountEnabled,
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  setSolanaSupportEnabled,
+  ///: END:ONLY_INCLUDE_IF
 } from '../../../store/actions';
 import {
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  getIsSolanaSupportEnabled,
+  ///: END:ONLY_INCLUDE_IF
   getIsBitcoinSupportEnabled,
   getIsBitcoinTestnetSupportEnabled,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -37,6 +43,9 @@ const mapStateToProps = (state: MetaMaskReduxState) => {
   const petnamesEnabled = getPetnamesEnabled(state);
   const featureNotificationsEnabled = getFeatureNotificationsEnabled(state);
   return {
+    ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+    solanaSupportEnabled: getIsSolanaSupportEnabled(state),
+    ///: END:ONLY_INCLUDE_IF
     watchAccountEnabled: getIsWatchEthereumAccountEnabled(state),
     bitcoinSupportEnabled: getIsBitcoinSupportEnabled(state),
     bitcoinTestnetSupportEnabled: getIsBitcoinTestnetSupportEnabled(state),
@@ -55,6 +64,9 @@ const mapDispatchToProps = (dispatch: MetaMaskReduxDispatch) => {
   return {
     setWatchAccountEnabled: (value: boolean) =>
       setWatchEthereumAccountEnabled(value),
+    ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+    setSolanaSupportEnabled: (value: boolean) => setSolanaSupportEnabled(value),
+    ///: END:ONLY_INCLUDE_IF
     setBitcoinSupportEnabled: (value: boolean) =>
       setBitcoinSupportEnabled(value),
     setBitcoinTestnetSupportEnabled: (value: boolean) =>

ui/pages/settings/experimental-tab/experimental-tab.test.js

@@ -30,7 +30,7 @@ describe('ExperimentalTab', () => {
     const { getAllByRole } = render();
     const toggle = getAllByRole('checkbox');
 
-    expect(toggle).toHaveLength(8);
+    expect(toggle).toHaveLength(9);
   });
 
   it('enables add account snap', async () => {
@@ -108,4 +108,21 @@ describe('ExperimentalTab', () => {
       expect(setBitcoinSupportEnabled).toHaveBeenNthCalledWith(1, true);
     });
   });
+
+  it('enables the experimental solana account feature', async () => {
+    const setSolanaSupportEnabled = jest.fn();
+    const { getByTestId } = render(
+      {},
+      {
+        setSolanaSupportEnabled,
+        solanaSupportEnabled: false,
+      },
+    );
+    const toggle = getByTestId('solana-support-toggle');
+
+    fireEvent.click(toggle);
+    await waitFor(() => {
+      expect(setSolanaSupportEnabled).toHaveBeenNthCalledWith(1, true);
+    });
+  });
 });

ui/selectors/selectors.js

@@ -2364,6 +2364,18 @@ export function getIsBitcoinSupportEnabled(state) {
   return state.metamask.bitcoinSupportEnabled;
 }
 
+///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+/**
+ * Get the state of the `solanaSupportEnabled` flag.
+ *
+ * @param {*} state
+ * @returns The state of the `solanaSupportEnabled` flag.
+ */
+export function getIsSolanaSupportEnabled(state) {
+  return state.metamask.solanaSupportEnabled;
+}
+///: END:ONLY_INCLUDE_IF
+
 /**
  * Get the state of the `bitcoinTestnetSupportEnabled` flag.
  *

ui/store/actions.ts

@@ -5002,6 +5002,16 @@ export async function setBitcoinTestnetSupportEnabled(value: boolean) {
   }
 }
 
+///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+export async function setSolanaSupportEnabled(value: boolean) {
+  try {
+    await submitRequestToBackground('setSolanaSupportEnabled', [value]);
+  } catch (error) {
+    logErrorWithMessage(error);
+  }
+}
+///: END:ONLY_INCLUDE_IF
+
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 export async function setAddSnapAccountEnabled(value: boolean): Promise<void> {
   try {