Add ledger account index in advanced settings

index.template.html

@@ -421,9 +421,9 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
                         <label data-i18n="settingsToggleAdvancedMode" class="custom-control-label" for="advancedModeToggler">Advanced Mode</label>
                         <p style="opacity: 0.6; margin-top: 5px;"><i class="fa-solid fa-triangle-exclamation" style="margin-right: 5px;"></i><span data-i18n="settingsToggleAdvancedModeSubtext">This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!</p>
                       </div>
-
+		      <div id="AdvancedSettings">
+		      </div>
                     </div>
-
                     <div id="settingsDisplay" class="d-none settingsContent">
                       <span data-i18n="display" class="header-title">Display</span>
 

scripts/composables/use_settings.js

@@ -1,11 +1,25 @@
 import { getEventEmitter } from '../event_bus.js';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { nDisplayDecimals, fAdvancedMode } from '../settings.js';
+import { defineStore } from 'pinia';
+import { Database } from '../database.js';
 
-export function useSettings() {
+export const useSettings = defineStore('settings', () => {
     const advancedMode = ref(fAdvancedMode);
     const displayDecimals = ref(0);
     const autoLockWallet = ref(false);
+    const accountIndex = ref(0);
+    (async () => {
+        const database = await Database.getInstance();
+        const settings = await database.getSettings();
+        accountIndex.value = settings?.accountIndex ?? 0;
+        watch(accountIndex, async () => {
+            const database = await Database.getInstance();
+            const settings = await database.getSettings();
+            settings.accountIndex = accountIndex.value;
+            await database.setSettings(settings);
+        });
+    })();
 
     getEventEmitter().on('advanced-mode', (fAdvancedMode) => {
         advancedMode.value = fAdvancedMode;
@@ -16,9 +30,13 @@ export function useSettings() {
     getEventEmitter().on('auto-lock-wallet', (fAutoLockWallet) => {
         autoLockWallet.value = fAutoLockWallet;
     });
+    getEventEmitter().on('account-index', (accountIndex) => {
+        accountIndex.value = accountIndex;
+    });
     return {
         advancedMode,
         displayDecimals,
         autoLockWallet,
+        accountIndex,
     };
-}
+});

scripts/composables/use_wallet.js

@@ -25,8 +25,8 @@ export const useWallet = defineStore('wallet', () => {
     const loadFromDisk = () => wallet.loadFromDisk();
     const hasShield = ref(wallet.hasShield());
 
-    const setMasterKey = async ({ mk, extsk }) => {
-        wallet.setMasterKey({ mk, extsk });
+    const setMasterKey = async ({ mk, extsk, nAccount }) => {
+        wallet.setMasterKey({ mk, extsk, nAccount });
         isImported.value = wallet.isLoaded();
         isHardwareWallet.value = wallet.isHardwareWallet();
         isHD.value = wallet.isHD();

scripts/dashboard/Dashboard.vue

@@ -47,7 +47,7 @@ const needsToEncrypt = computed(() => {
     }
 });
 const showTransferMenu = ref(false);
-const { advancedMode, displayDecimals, autoLockWallet } = useSettings();
+const settings = useSettings();
 const showExportModal = ref(false);
 const showEncryptModal = ref(false);
 const keyToBackup = ref('');
@@ -83,7 +83,9 @@ async function importWallet({ type, secret, password = '' }) {
             createAlert('warning', ALERTS.WALLET_FIREFOX_UNSUPPORTED, 7500);
             return false;
         }
-        parsedSecret = new ParsedSecret(await HardwareWalletMasterKey.create());
+        parsedSecret = new ParsedSecret(
+            await HardwareWalletMasterKey.create(settings.accountIndex)
+        );
 
         createAlert(
             'info',
@@ -96,7 +98,7 @@ async function importWallet({ type, secret, password = '' }) {
         parsedSecret = await ParsedSecret.parse(
             secret,
             password,
-            advancedMode.value
+            settings.advancedMode
         );
     }
     if (parsedSecret) {
@@ -332,7 +334,7 @@ async function send(address, amount, useShieldInputs) {
         console.error(e);
         createAlert('warning', e);
     } finally {
-        if (autoLockWallet.value) {
+        if (settings.autoLockWallet) {
             if (wallet.isEncrypted) {
                 lockWallet();
             } else {
@@ -464,7 +466,7 @@ defineExpose({
         <div class="row m-0">
             <Login
                 v-show="!wallet.isImported"
-                :advancedMode="advancedMode"
+                :advancedMode="settings.advancedMode"
                 @import-wallet="importWallet"
             />
 
@@ -888,7 +890,7 @@ defineExpose({
                         :isHardwareWallet="wallet.isHardwareWallet"
                         :currency="currency"
                         :price="price"
-                        :displayDecimals="displayDecimals"
+                        :displayDecimals="settings.displayDecimals"
                         :shieldEnabled="wallet.hasShield"
                         @send="showTransferMenu = true"
                         @exportPrivKeyOpen="showExportModal = true"

scripts/global.js

@@ -26,6 +26,7 @@ import { loadDebug, debugLog, DebugTopics } from './debug.js';
 import Stake from './stake/Stake.vue';
 import { createPinia } from 'pinia';
 import { cOracle } from './prices.js';
+import AdvancedSettings from './settings/AdvancedSettings.vue';
 
 /** A flag showing if base MPW is fully loaded or not */
 export let fIsLoaded = false;
@@ -44,6 +45,7 @@ const pinia = createPinia();
 
 export const dashboard = createApp(Dashboard).use(pinia).mount('#DashboardTab');
 createApp(Stake).use(pinia).mount('#StakingTab');
+createApp(AdvancedSettings).use(pinia).mount('#AdvancedSettings');
 
 export async function start() {
     doms = {

scripts/settings.js

@@ -96,6 +96,10 @@ export class Settings {
      * @type {boolean} Whether auto lock feature is enabled or disabled
      */
     autoLockWallet;
+
+    /* @type {number} Account index for ledger wallets */
+    accountIndex = 0;
+
     constructor({
         analytics,
         explorer,
@@ -107,6 +111,7 @@ export class Settings {
         advancedMode = false,
         coldAddress = '',
         autoLockWallet = false,
+        accountIndex = 0,
     } = {}) {
         this.analytics = analytics;
         this.explorer = explorer;
@@ -117,6 +122,7 @@ export class Settings {
         this.displayDecimals = displayDecimals;
         this.advancedMode = advancedMode;
         this.autoLockWallet = autoLockWallet;
+        this.accountIndex = accountIndex;
         // DEPRECATED: Read-only below here, for migration only
         this.coldAddress = coldAddress;
     }

scripts/settings/AdvancedSettings.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { useSettings } from '../composables/use_settings';
+import { ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+const settings = useSettings();
+const { accountIndex, advancedMode } = storeToRefs(settings);
+const accountIndexStr = ref(settings.accountIndex.toString());
+watch(advancedMode, (advancedMode) => {
+    if (!advancedMode) {
+        accountIndex.value = 0;
+    }
+});
+watch(accountIndex, () => {
+    accountIndexStr.value = settings.accountIndex.toString();
+});
+watch(accountIndexStr, () => {
+    accountIndexStr.value = accountIndexStr.value
+        .toString()
+        .replace(/[^0-9]/, '');
+    const accountIndex = Number.parseInt(accountIndexStr.value);
+    if (accountIndex > 255) {
+        accountIndexStr.value = '255';
+    }
+});
+function setAccountIndex() {
+    accountIndex.value = Number.parseInt(accountIndexStr.value) || 0;
+}
+</script>
+
+<template>
+    <div v-if="settings.advancedMode">
+        <hr />
+        <div style="display: flex">
+            <label style="" for="accountIndex">
+                Choose a custom account index for ledger wallets.
+            </label>
+            <input
+                id="accountIndex"
+                v-model="accountIndexStr"
+                @change="setAccountIndex()"
+                min="0"
+                max="255"
+            />
+        </div>
+    </div>
+</template>

scripts/stake/Stake.vue

@@ -17,7 +17,8 @@ import { ALERTS } from '../i18n';
 const wallet = useWallet();
 const { balance, coldBalance, price, currency, isViewOnly } =
     storeToRefs(wallet);
-const { advancedMode, displayDecimals } = useSettings();
+const settings = useSettings();
+const { advancedMode, displayDecimals } = storeToRefs(settings);
 const showUnstake = ref(false);
 const showStake = ref(false);
 const coldStakingAddress = ref('');