Force-toggle testnets visibility in network switcher (#3793)

This PR moves the testnet visibility setting to the preference service,
and sets a migration to enable it on all existing and new installs.

## Testing
- [ ] On a new install, check testnets shows up by default on network
switcher
- [ ] On existing install, after update testnets should show up

Latest build:
[extension-builds-3793](https://github.com/tahowallet/extension/suites/35160394180/artifacts/2686423977)
(as of Tue, 04 Mar 2025 05:05:23 GMT).

Author: Shadowfiend

background/redux-slices/ui.ts

@@ -1,7 +1,7 @@
 import { createSlice, createSelector } from "@reduxjs/toolkit"
 import Emittery from "emittery"
 import { AddressOnNetwork } from "../accounts"
-import { ETHEREUM } from "../constants"
+import { ETHEREUM, TEST_NETWORK_BY_CHAIN_ID } from "../constants"
 import { AnalyticsEvent, OneTimeAnalyticsEvent } from "../lib/posthog"
 import { EVMNetwork } from "../networks"
 import { AnalyticsPreferences, DismissableItem } from "../services/preferences"
@@ -11,11 +11,12 @@ import { AccountState, addAddressNetwork } from "./accounts"
 import { createBackgroundAsyncThunk } from "./utils"
 import { UNIXTime } from "../types"
 import { DEFAULT_AUTOLOCK_INTERVAL } from "../services/preferences/defaults"
+import type { RootState } from "."
 
 export const defaultSettings = {
   hideDust: false,
   defaultWallet: false,
-  showTestNetworks: false,
+  showTestNetworks: true,
   showNotifications: undefined,
   collectAnalytics: false,
   showAnalyticsNotification: false,
@@ -77,6 +78,7 @@ export type Events = {
   updateAnalyticsPreferences: Partial<AnalyticsPreferences>
   addCustomNetworkResponse: [string, boolean]
   updateAutoLockInterval: number
+  toggleShowTestNetworks: boolean
 }
 
 export const emitter = new Emittery<Events>()
@@ -392,6 +394,22 @@ export const setSelectedNetwork = createBackgroundAsyncThunk(
   },
 )
 
+export const toggleShowTestNetworks = createBackgroundAsyncThunk(
+  "ui/toggleShowTestNetworks",
+  async (value: boolean, { dispatch, getState }) => {
+    const state = getState() as RootState
+
+    const currentNetwork = state.ui.selectedAccount.network
+
+    // If user is on one of the built-in test networks, don't leave them stranded
+    if (TEST_NETWORK_BY_CHAIN_ID.has(currentNetwork.chainID)) {
+      dispatch(setSelectedNetwork(ETHEREUM))
+    }
+
+    await emitter.emit("toggleShowTestNetworks", value)
+  },
+)
+
 export const refreshBackgroundPage = createBackgroundAsyncThunk(
   "ui/refreshBackgroundPage",
   async () => {

background/services/preferences/db.ts

@@ -65,6 +65,7 @@ export type Preferences = {
   analytics: AnalyticsPreferences
   autoLockInterval: UNIXTime
   shouldShowNotifications: boolean
+  showTestNetworks: boolean
 }
 
 /**
@@ -439,6 +440,19 @@ export class PreferenceDatabase extends Dexie {
         }),
     )
 
+    this.version(22).upgrade((tx) =>
+      tx
+        .table("preferences")
+        .toCollection()
+        .modify((storedPreferences: Omit<Preferences, "showTestNetworks">) => {
+          const update: Partial<Preferences> = {
+            showTestNetworks: true,
+          }
+
+          Object.assign(storedPreferences, update)
+        }),
+    )
+
     // This is the old version for populate
     // https://dexie.org/docs/Dexie/Dexie.on.populate-(old-version)
     // The this does not behave according the new docs, but works
@@ -468,6 +482,16 @@ export class PreferenceDatabase extends Dexie {
       })
   }
 
+  async setShowTestNetworks(newValue: boolean): Promise<void> {
+    await this.preferences
+      .toCollection()
+      .modify((storedPreferences: Preferences) => {
+        const update: Partial<Preferences> = { showTestNetworks: newValue }
+
+        Object.assign(storedPreferences, update)
+      })
+  }
+
   async setShouldShowNotifications(newValue: boolean): Promise<void> {
     await this.preferences
       .toCollection()

background/services/preferences/defaults.ts

@@ -35,6 +35,7 @@ const defaultPreferences = {
   },
   autoLockInterval: DEFAULT_AUTOLOCK_INTERVAL,
   shouldShowNotifications: false,
+  showTestNetworks: true,
 }
 
 export default defaultPreferences

background/services/preferences/index.ts

@@ -109,6 +109,7 @@ interface Events extends ServiceLifecycleEvents {
   initializeSelectedAccount: AddressOnNetwork
   initializeShownDismissableItems: DismissableItem[]
   initializeNotificationsPreferences: boolean
+  initializeShowTestNetworks: boolean
   updateAnalyticsPreferences: AnalyticsPreferences
   addressBookEntryModified: AddressBookEntry
   updatedSignerSettings: AccountSignerSettings[]
@@ -162,6 +163,11 @@ export default class PreferenceService extends BaseService<Events> {
       "initializeNotificationsPreferences",
       await this.getShouldShowNotificationsPreferences(),
     )
+
+    this.emitter.emit(
+      "initializeShowTestNetworks",
+      await this.getShowTestNetworks(),
+    )
   }
 
   protected override async internalStopService(): Promise<void> {
@@ -290,6 +296,14 @@ export default class PreferenceService extends BaseService<Events> {
     return (await this.db.getPreferences())?.currency
   }
 
+  async setShowTestNetworks(value: boolean): Promise<void> {
+    await this.db.setShowTestNetworks(value)
+  }
+
+  async getShowTestNetworks(): Promise<boolean> {
+    return (await this.db.getPreferences()).showTestNetworks
+  }
+
   async getTokenListPreferences(): Promise<TokenListPreferences> {
     return (await this.db.getPreferences())?.tokenLists
   }

background/services/redux/index.ts

@@ -82,6 +82,7 @@ import {
   dismissableItemMarkedAsShown,
   MezoClaimStatus,
   updateCampaignState,
+  toggleTestNetworks,
 } from "../../redux-slices/ui"
 import {
   estimatedFeesPerGas,
@@ -1354,16 +1355,25 @@ export default class ReduxService extends BaseService<never> {
       },
     )
 
+    this.preferenceService.emitter.on(
+      "initializeShowTestNetworks",
+      async (showTestNetworks: boolean) => {
+        await this.store.dispatch(toggleTestNetworks(showTestNetworks))
+      },
+    )
+
+    uiSliceEmitter.on("toggleShowTestNetworks", async (value) => {
+      await this.preferenceService.setShowTestNetworks(value)
+      await this.store.dispatch(toggleTestNetworks(value))
+    })
+
     this.preferenceService.emitter.on(
       "initializeSelectedAccount",
       async (dbAddressNetwork: AddressOnNetwork) => {
         if (dbAddressNetwork) {
           // Wait until chain service starts and populates supported networks
           await this.chainService.started()
-          // TBD: naming the normal reducer and async thunks
-          // Initialize redux from the db
-          // !!! Important: this action belongs to a regular reducer.
-          // NOT to be confused with the setNewCurrentAddress asyncThunk
+
           const { address, network } = dbAddressNetwork
           let supportedNetwork = this.chainService.supportedNetworks.find(
             (net) => sameNetwork(network, net),

ui/pages/Settings.tsx

@@ -8,8 +8,8 @@ import {
   selectShowNotifications,
   setShouldShowNotifications,
   selectShowTestNetworks,
-  toggleTestNetworks,
   toggleHideBanners,
+  toggleShowTestNetworks,
   selectHideBanners,
   selectShowUnverifiedAssets,
   toggleShowUnverifiedAssets,
@@ -186,8 +186,8 @@ export default function Settings(): ReactElement {
       )
   }
 
-  const toggleShowTestNetworks = (defaultWalletValue: boolean) => {
-    dispatch(toggleTestNetworks(defaultWalletValue))
+  const toggleShowTestnets = (defaultWalletValue: boolean) => {
+    dispatch(toggleShowTestNetworks(defaultWalletValue))
   }
 
   const toggleShowUnverified = (toggleValue: boolean) => {
@@ -243,7 +243,7 @@ export default function Settings(): ReactElement {
     title: t("settings.enableTestNetworks"),
     component: () => (
       <SharedToggleButton
-        onChange={(toggleValue) => toggleShowTestNetworks(toggleValue)}
+        onChange={(toggleValue) => toggleShowTestnets(toggleValue)}
         value={showTestNetworks}
       />
     ),