chore: refactor Assets on settings V2 to use createToggleItem (#40750)

## **Description**

Refactors Assets tab toggle items to use the `createToggleItem` factory,
reducing boilerplate and improving consistency.

**Changes:**
- Extended `createToggleItem` factory to support optional
`descriptionKey`
- Converted 3 toggle items to use the factory inline in
`assets-tab.tsx`:
  - `AutodetectTokensToggleItem`
  - `HideZeroBalanceTokensToggleItem`
  - `ShowNetworkTokenToggleItem` (with MetaMetrics tracking)
- Removed standalone component files and their tests

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

1. Uncomment object beneath `Uncomment to view Settings V2 in Hamburger
Menu`
2. Navigate to Settings V2 > Assets
3. Verify all toggle items render correctly
4. Toggle each setting and verify state persists
5. Verify MetaMetrics events fire for "Show native token as main
balance"
6. 
## **Screenshots/Recordings**

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

### **Before**

### **After**

## **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/main/.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/main/.github/guidelines/LABELING_GUIDELINES.md)).

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily a UI refactor that reuses existing selectors/actions; main
risk is subtle behavior/test-id changes affecting settings toggles and
metrics firing.
> 
> **Overview**
> Refactors the Settings V2 *Assets* tab toggles to use the shared
`createToggleItem` factory, inlining the configs in `assets-tab.tsx` and
removing the standalone toggle components/tests for *Autodetect tokens*,
*Hide zero balance tokens*, and *Show native token as main balance*
(including its MetaMetrics tracking).
> 
> Extends `createToggleItem` to make `descriptionKey` optional (and adds
coverage for the no-description case), and updates the Assets tab
snapshot/console baseline to reflect the refactor (including removal of
a wrapper `data-testid` around the hide-zero-balance toggle).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
49dd8e6. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ameliejyc

test/jest/console-baseline-unit.json

@@ -2802,28 +2802,16 @@
       "React: componentWill* lifecycle deprecations": 1,
       "warn: ⚠️ React Router Future Flag": 2
     },
-    "ui/pages/settings-v2/assets-tab/autodetect-tokens-item.test.tsx": {
-      "React: componentWill* lifecycle deprecations": 1,
-      "warn: ⚠️ React Router Future Flag": 2
-    },
     "ui/pages/settings-v2/assets-tab/currency-sub-page.test.tsx": {
       "warn: ⚠️ React Router Future Flag": 2
     },
     "ui/pages/settings-v2/assets-tab/display-nft-media-item.test.tsx": {
       "React: componentWill* lifecycle deprecations": 1,
       "warn: ⚠️ React Router Future Flag": 2
     },
-    "ui/pages/settings-v2/assets-tab/hide-zero-balance-tokens-item.test.tsx": {
-      "React: componentWill* lifecycle deprecations": 1,
-      "warn: ⚠️ React Router Future Flag": 2
-    },
     "ui/pages/settings-v2/assets-tab/local-currency-item.test.tsx": {
       "warn: ⚠️ React Router Future Flag": 2
     },
-    "ui/pages/settings-v2/assets-tab/show-network-token-item.test.tsx": {
-      "React: componentWill* lifecycle deprecations": 1,
-      "warn: ⚠️ React Router Future Flag": 2
-    },
     "ui/pages/settings-v2/preferences-and-display-tab/account-identicon-item.test.tsx": {
       "React: Act warnings (component updates not wrapped)": 4,
       "warn: ⚠️ React Router Future Flag": 2

ui/pages/settings-v2/assets-tab/__snapshots__/assets-tab.test.tsx.snap

@@ -99,9 +99,7 @@ exports[`Assets Tab snapshot matches snapshot 1`] = `
         >
           Hide tokens without balance
         </p>
-        <div
-          data-testid="hide-zero-balance-tokens"
-        >
+        <div>
           <label
             class="toggle-button toggle-button--off"
             tabindex="0"

ui/pages/settings-v2/assets-tab/assets-tab.tsx

@@ -1,12 +1,52 @@
 import React from 'react';
 import { SettingItemConfig } from '../types';
-import { SettingsTab } from '../shared';
+import { SettingsTab, createToggleItem } from '../shared';
+import {
+  getUseTokenDetection,
+  getShouldHideZeroBalanceTokens,
+  getShowNativeTokenAsMainBalance,
+} from '../../../selectors';
+import {
+  setUseTokenDetection,
+  setHideZeroBalanceTokens,
+  setShowNativeTokenAsMainBalancePreference,
+} from '../../../store/actions';
+import { MetaMetricsEventName } from '../../../../shared/constants/metametrics';
 import { LocalCurrencyItem } from './local-currency-item';
-import { ShowNetworkTokenToggleItem } from './show-network-token-item';
-import { HideZeroBalanceTokensToggleItem } from './hide-zero-balance-tokens-item';
 import { DisplayNftMediaToggleItem } from './display-nft-media-item';
 import { AutodetectNftsToggleItem } from './autodetect-nfts-item';
-import { AutodetectTokensToggleItem } from './autodetect-tokens-item';
+
+const ShowNetworkTokenToggleItem = createToggleItem({
+  name: 'ShowNetworkTokenToggleItem',
+  titleKey: 'showNativeTokenAsMainBalance',
+  selector: getShowNativeTokenAsMainBalance,
+  action: setShowNativeTokenAsMainBalancePreference,
+  dataTestId: 'show-native-token-as-main-balance',
+  trackEvent: {
+    event: MetaMetricsEventName.SettingsUpdated,
+    properties: (newValue) => ({
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      show_native_token_as_main_balance: newValue,
+    }),
+  },
+});
+
+const HideZeroBalanceTokensToggleItem = createToggleItem({
+  name: 'HideZeroBalanceTokensToggleItem',
+  titleKey: 'hideZeroBalanceTokens',
+  selector: getShouldHideZeroBalanceTokens,
+  action: setHideZeroBalanceTokens,
+  dataTestId: 'toggle-zero-balance-button',
+});
+
+const AutodetectTokensToggleItem = createToggleItem({
+  name: 'AutodetectTokensToggleItem',
+  titleKey: 'autoDetectTokens',
+  descriptionKey: 'autoDetectTokensDescriptionV2',
+  selector: getUseTokenDetection,
+  action: setUseTokenDetection,
+  dataTestId: 'autodetect-tokens',
+});
 
 /** Registry of setting items for the Assets page. Add new items here */
 const ASSET_SETTING_ITEMS: SettingItemConfig[] = [