Bug: toggleTestnet was cyclically called (#401)

* Remove the cyclic calls to toggleTestnet

* add @vueuse/core package

* apply duddino's review

package.json

@@ -72,6 +72,7 @@
         "@noble/hashes": "^1.1.5",
         "@noble/secp256k1": "^1.7.0",
         "@popperjs/core": "^2.11.6",
+        "@vueuse/core": "^11.1.0",
         "base32": "^0.0.7",
         "bech32": "^2.0.0",
         "biginteger": "^1.0.3",

scripts/composables/use_settings.js

@@ -1,5 +1,7 @@
 import { getEventEmitter } from '../event_bus.js';
 import { ref, watch } from 'vue';
+import { watchIgnorable } from '@vueuse/core';
+
 import {
     nDisplayDecimals,
     fAdvancedMode,
@@ -16,8 +18,21 @@ export function useSettings() {
     const debug = ref(rawDebug);
     const isTestnet = ref(cChainParams.current === cChainParams.testnet);
 
+    const { ignoreUpdates: ignoreTestnetWatch } = watchIgnorable(
+        isTestnet,
+        async () => {
+            await toggleTestnet(isTestnet.value);
+            isTestnet.value = cChainParams.current === cChainParams.testnet;
+        }
+    );
+
     getEventEmitter().on('toggle-network', () => {
-        isTestnet.value = cChainParams.current === cChainParams.testnet;
+        // At the moment the only emitter of this event is the function toggleTestnet
+        // Therefore we can safely ignore the watch.
+        // TODO: change as we finish the VUE rewriting
+        ignoreTestnetWatch(() => {
+            isTestnet.value = cChainParams.current === cChainParams.testnet;
+        });
     });
 
     getEventEmitter().on('toggle-debug', () => {
@@ -28,11 +43,6 @@ export function useSettings() {
         toggleDebug(debug.value);
     });
 
-    watch(isTestnet, async () => {
-        await toggleTestnet(isTestnet.value);
-        isTestnet.value = cChainParams.current === cChainParams.testnet;
-    });
-
     getEventEmitter().on('advanced-mode', (fAdvancedMode) => {
         advancedMode.value = fAdvancedMode;
     });