frontend: improve restart in testnet

The testnet toggle was not active in testnet. Changing this
settings require an app restart, this was only communicated by
an inline message and could be easily missed.

This commit improves the UX by:
- changing the toggle to a normal settings item
- showing activate / deactivate instructions
- adding a blocking view that calls to restart the app

Author: thisconnect

frontends/web/src/locales/en/app.json

@@ -1844,6 +1844,18 @@
       "title": "Unlock test wallet"
     }
   },
+  "testnet": {
+    "activate": {
+      "description": "Restart the app in testnet mode to explore and test features.",
+      "prompt": "Please close the app and start again to enter testnet mode",
+      "title": "Start testnet mode"
+    },
+    "deactivate": {
+      "description": "Restart app to exit testnet mode.",
+      "prompt": "Please close the app to exit testnet mode",
+      "title": "Exit testnet mode"
+    }
+  },
   "transaction": {
     "confirmation": "Confirmations",
     "details": {

frontends/web/src/routes/settings/advanced-settings.tsx

@@ -98,7 +98,7 @@ export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSetting
                 <EnableCoinControlSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} />
                 <EnableAuthSetting backendConfig={backendConfig} onChangeConfig={setConfig} />
                 <EnableTorProxySetting proxyConfig={proxyConfig} onChangeConfig={setConfig} />
-                <RestartInTestnetSetting backendConfig={backendConfig} onChangeConfig={setConfig} />
+                <RestartInTestnetSetting onChangeConfig={setConfig} />
                 <UnlockSoftwareKeystore deviceIDs={deviceIDs}/>
                 <ConnectFullNodeSetting />
                 <ExportLogSetting />

frontends/web/src/routes/settings/components/advanced-settings/restart-in-testnet-setting.tsx

@@ -15,55 +15,92 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, Dispatch } from 'react';
-import { useState } from 'react';
+import { Dispatch, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import type { TConfig } from '@/routes/settings/advanced-settings';
+import { AppContext } from '@/contexts/AppContext';
 import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
-import { Toggle } from '@/components/toggle/toggle';
-import { TConfig, TBackendConfig } from '@/routes/settings/advanced-settings';
-import { Message } from '@/components/message/message';
+import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
+import { PointToBitBox02 } from '@/components/icon';
+import { Button } from '@/components/forms';
 import { setConfig } from '@/utils/config';
-import styles from './enable-tor-proxy-setting.module.css';
+import { UseBackButton } from '@/hooks/backbutton';
 
 type TProps = {
-  backendConfig?: TBackendConfig;
   onChangeConfig: Dispatch<TConfig>;
 }
 
-export const RestartInTestnetSetting = ({ backendConfig, onChangeConfig }: TProps) => {
+export const RestartInTestnetSetting = ({ onChangeConfig }: TProps) => {
   const { t } = useTranslation();
   const [showRestartMessage, setShowRestartMessage] = useState(false);
+  const { isTesting } = useContext(AppContext);
 
-
-  const handleToggleRestartInTestnet = async (e: ChangeEvent<HTMLInputElement>) => {
-    setShowRestartMessage(e.target.checked);
+  const handleRestart = async () => {
+    setShowRestartMessage(true);
     const config = await setConfig({
       backend: {
-        'startInTestnet': e.target.checked
+        startInTestnet: !isTesting
       },
-    }) as TConfig;
+    });
     onChangeConfig(config);
   };
-  return (
-    <>
-      { showRestartMessage ? (
-        <Message type="warning">
-          {t('settings.restart')}
-        </Message>
-      ) : null }
+
+  const handleReset = async () => {
+    setShowRestartMessage(false);
+    if (!isTesting) {
+      const config = await setConfig({
+        backend: {
+          startInTestnet: false
+        },
+      });
+      onChangeConfig(config);
+    }
+  };
+
+  if (showRestartMessage) {
+    return (
+      <View fullscreen textCenter verticallyCentered>
+        <UseBackButton handler={() => {
+          handleReset();
+          return false;
+        }} />
+        <ViewHeader title={
+          isTesting
+            ? t('testnet.deactivate.title')
+            : t('testnet.activate.title')
+        }>
+          {isTesting
+            ? t('testnet.deactivate.prompt')
+            : t('testnet.activate.prompt')
+          }
+        </ViewHeader>
+        <ViewContent minHeight="260px">
+          <PointToBitBox02 />
+        </ViewContent>
+        <ViewButtons>
+          <Button secondary onClick={handleReset}>
+            {t('dialog.cancel')}
+          </Button>
+        </ViewButtons>
+      </View>
+    );
+  }
+
+  if (isTesting) {
+    return (
       <SettingsItem
-        className={styles.settingItem}
-        settingName={t('settings.expert.restartInTestnet')}
-        secondaryText={t('newSettings.advancedSettings.restartInTestnet.description')}
-        extraComponent={
-          backendConfig !== undefined ? (
-            <Toggle
-              checked={backendConfig?.startInTestnet || false}
-              onChange={handleToggleRestartInTestnet}
-            />
-          ) : null
-        }
+        settingName={t('testnet.deactivate.title')}
+        secondaryText={t('testnet.deactivate.description')}
+        onClick={handleRestart}
       />
-    </>
+    );
+  }
+
+  return (
+    <SettingsItem
+      settingName={t('testnet.activate.title')}
+      secondaryText={t('testnet.activate.description')}
+      onClick={handleRestart}
+    />
   );
 };