Fix 455 (#473)

* Fix private mode on non-private wallets

* Add e2e tests

* Fix eslint warning

* Commit this

* Now it works please

---------

Co-authored-by: Alessandro Rezzi <alessandrorezzi2000@gmail.com>

cypress/e2e/private_mode.cy.js

@@ -0,0 +1,34 @@
+describe('public/private mode tests', () => {
+    beforeEach(() => {
+        cy.clearDb();
+        cy.visit('/');
+        cy.waitForLoading().should('be.visible');
+        cy.playback('GET', /(xpub|address|getshielddata)/, {
+            matching: { ignores: ['hostname', 'port'] },
+        }).as('sync');
+        cy.setExplorer(0);
+        cy.setNode(1);
+        cy.goToTab('dashboard');
+        cy.importWallet(
+            'hawk crash art bottom rookie surprise grit giant fitness entire course spray'
+        );
+        cy.encryptWallet('123456');
+
+        cy.waitForSync();
+        cy.togglePrivateMode();
+    });
+
+    it('switches back to public mode when not available', () => {
+        // We should be in private mode here
+        cy.get('[data-testid="shieldModePrefix"]').should('exist');
+        cy.deleteWallet();
+        // When importing a non shield capable wallet, we should be in public mode
+        cy.importWallet('DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb');
+        cy.get('[data-testid="shieldModePrefix"]').should('not.exist');
+    });
+
+    it('remembers private mode', () => {
+        cy.visit('/');
+        cy.get('[data-testid="shieldModePrefix"]').should('exist');
+    });
+});

cypress/support/commands.js

@@ -82,3 +82,18 @@ Cypress.Commands.add('setExplorer', (explorerNameOrIndex) => {
     cy.goToTab('settings');
     cy.get('#explorer').select(explorerNameOrIndex);
 });
+Cypress.Commands.add('setNode', (nodeNameOrIndex) => {
+    cy.goToTab('settings');
+    cy.get('#node').select(nodeNameOrIndex);
+});
+
+Cypress.Commands.add('togglePrivateMode', () => {
+    cy.goToTab('dashboard');
+    cy.get('#publicPrivateText').click();
+});
+
+Cypress.Commands.add('waitForSync', () => {
+    cy.contains('[data-testid="alerts"]', 'Sync Finished!', {
+        timeout: 1000 * 60 * 5,
+    });
+});

scripts/alerts/Alerts.vue

@@ -52,6 +52,7 @@ watch(alerts, () => {
         <div
             v-for="alert of foldedAlerts.filter((a) => a.value.show)"
             :key="alert.value.original"
+            data-testid="alerts"
         >
             <Alert
                 :message="alert.value.message"

scripts/composables/use_wallet.js

@@ -1,6 +1,6 @@
 import { getEventEmitter } from '../event_bus.js';
 import { hasEncryptedWallet, wallet } from '../wallet.js';
-import { ref, watch } from 'vue';
+import { ref, computed } from 'vue';
 import { fPublicMode, strCurrency, togglePublicMode } from '../settings.js';
 import { cOracle } from '../prices.js';
 import { ledgerSignTransaction } from '../ledger.js';
@@ -23,29 +23,6 @@ export const useWallet = defineStore('wallet', () => {
     // For now we'll just import the existing one
     // const wallet = new Wallet();
 
-    // Public/Private Mode will be loaded from disk after 'import-wallet' is emitted
-    const publicMode = ref(true);
-    watch(publicMode, (publicMode) => {
-        doms.domNavbar.classList.toggle('active', !publicMode);
-        doms.domLightBackground.style.opacity = publicMode ? '1' : '0';
-        // Depending on our Receive type, flip to the opposite type.
-        // i.e: from `address` to `shield`, `shield contact` to `address`, etc
-        // This reduces steps for someone trying to grab their opposite-type address, which is the primary reason to mode-toggle.
-        const arrFlipTypes = [
-            RECEIVE_TYPES.CONTACT,
-            RECEIVE_TYPES.ADDRESS,
-            RECEIVE_TYPES.SHIELD,
-        ];
-        if (arrFlipTypes.includes(cReceiveType)) {
-            guiToggleReceiveType(
-                publicMode ? RECEIVE_TYPES.ADDRESS : RECEIVE_TYPES.SHIELD
-            );
-        }
-
-        // Save the mode state to DB
-        togglePublicMode(publicMode);
-    });
-
     const isImported = ref(wallet.isLoaded());
     const isViewOnly = ref(wallet.isViewOnly());
     const isSynced = ref(wallet.isSynced);
@@ -120,6 +97,40 @@ export const useWallet = defineStore('wallet', () => {
             return res;
         }
     );
+
+    const _publicMode = ref(true);
+    // Public/Private Mode will be loaded from disk after 'import-wallet' is emitted
+    const publicMode = computed({
+        get() {
+            // If the wallet is not shield capable, always return true
+            if (!hasShield.value) return true;
+            return _publicMode.value;
+        },
+
+        set(newValue) {
+            _publicMode.value = newValue;
+            const publicMode = _publicMode.value;
+            doms.domNavbar.classList.toggle('active', !publicMode);
+            doms.domLightBackground.style.opacity = publicMode ? '1' : '0';
+            // Depending on our Receive type, flip to the opposite type.
+            // i.e: from `address` to `shield`, `shield contact` to `address`, etc
+            // This reduces steps for someone trying to grab their opposite-type address, which is the primary reason to mode-toggle.
+            const arrFlipTypes = [
+                RECEIVE_TYPES.CONTACT,
+                RECEIVE_TYPES.ADDRESS,
+                RECEIVE_TYPES.SHIELD,
+            ];
+            if (arrFlipTypes.includes(cReceiveType)) {
+                guiToggleReceiveType(
+                    publicMode ? RECEIVE_TYPES.ADDRESS : RECEIVE_TYPES.SHIELD
+                );
+            }
+
+            // Save the mode state to DB
+            togglePublicMode(publicMode);
+        },
+    });
+
     const isCreatingTransaction = () => createAndSendTransaction.isLocked();
 
     getEventEmitter().on('toggle-network', async () => {

scripts/dashboard/WalletBalance.vue

@@ -376,7 +376,10 @@ function restoreWallet() {
                         <span
                             class="dcWallet-pivxTicker"
                             style="position: relative; left: 4px"
-                            >&nbsp;<span v-if="!publicMode">S-</span
+                            >&nbsp;<span
+                                data-testid="shieldModePrefix"
+                                v-if="!publicMode"
+                                >S-</span
                             >{{ ticker }}&nbsp;</span
                         >
                     </span>