fix: implement proper view navigation stack
All checks were successful
check / check (push) Successful in 13s

The popup UI had no navigation stack — all back buttons were hardcoded
to specific destinations. This meant navigating Main → Address →
Transaction → Settings → Back would go to Main instead of Transaction.

Changes:
- Add viewStack array to persisted state (survives popup close/reopen)
- Add pushCurrentView(), goBack(), clearViewStack() helpers in helpers.js
- goBack() pops the stack and shows the previous view; falls back to
  Main if the stack is empty; re-renders the wallet list when returning
  to the Main view
- All ctx.show*() wrappers in index.js now push the current view before
  navigating forward
- All back buttons across every view now use goBack() instead of
  hardcoded destinations
- Direct showView() calls for forward navigation (Send, Export Private
  Key) push before switching
- Stack is cleared on reset-to-root actions: adding a wallet, deleting
  the last wallet
- After wallet deletion with remaining wallets, stack is reset to
  [main] and settings is re-shown
- After transaction completion (Done button), stack is reset to the
  appropriate address context

Closes #134
This commit is contained in:
user
2026-03-01 13:23:15 -08:00
parent 39db06c83d
commit 0ab202e998
16 changed files with 158 additions and 52 deletions

View File

@@ -10,7 +10,14 @@ const {
} = require("../shared/state");
const { refreshPrices } = require("../shared/prices");
const { refreshBalances } = require("../shared/balances");
const { $, showView } = require("./views/helpers");
const {
$,
showView,
setRenderMain,
pushCurrentView,
goBack,
clearViewStack,
} = require("./views/helpers");
const { applyTheme } = require("./theme");
const home = require("./views/home");
@@ -58,15 +65,42 @@ async function doRefreshAndRender() {
const ctx = {
renderWalletList,
doRefreshAndRender,
showAddWalletView: () => addWallet.show(),
showAddressDetail: () => addressDetail.show(),
showAddressToken: () => addressToken.show(),
showAddTokenView: () => addToken.show(),
showConfirmTx: (txInfo) => confirmTx.show(txInfo),
showReceive: () => receive.show(),
showTransactionDetail: (tx) => transactionDetail.show(tx),
showSettingsView: () => settings.show(),
showSettingsAddTokenView: () => settingsAddToken.show(),
showAddWalletView: () => {
pushCurrentView();
addWallet.show();
},
showAddressDetail: () => {
pushCurrentView();
addressDetail.show();
},
showAddressToken: () => {
pushCurrentView();
addressToken.show();
},
showAddTokenView: () => {
pushCurrentView();
addToken.show();
},
showConfirmTx: (txInfo) => {
pushCurrentView();
confirmTx.show(txInfo);
},
showReceive: () => {
pushCurrentView();
receive.show();
},
showTransactionDetail: (tx) => {
pushCurrentView();
transactionDetail.show(tx);
},
showSettingsView: () => {
pushCurrentView();
settings.show();
},
showSettingsAddTokenView: () => {
pushCurrentView();
settingsAddToken.show();
},
};
// Views that can be fully re-rendered from persisted state.
@@ -220,13 +254,15 @@ async function init() {
.getElementById("view-settings")
.classList.contains("hidden")
) {
renderWalletList();
showView("main");
goBack();
return;
}
pushCurrentView();
settings.show();
});
setRenderMain(renderWalletList);
welcome.init(ctx);
addWallet.init(ctx);
home.init(ctx);

View File

@@ -1,4 +1,4 @@
const { $, showView, showFlash } = require("./helpers");
const { $, showFlash, goBack } = require("./helpers");
const { getTopTokens } = require("../../shared/tokenList");
const { state, saveState } = require("../../shared/state");
const { lookupTokenInfo } = require("../../shared/balances");
@@ -59,7 +59,12 @@ function init(ctx) {
});
await saveState();
ctx.doRefreshAndRender();
ctx.showAddressDetail();
// Pop the stack (back to address detail) and re-render it
// so the newly added token is visible immediately.
if (state.viewStack.length > 0) {
state.viewStack.pop();
}
require("./addressDetail").show();
} catch (e) {
const detail = e.shortMessage || e.message || String(e);
log.errorf("Token lookup failed for", contractAddr, detail);
@@ -69,7 +74,9 @@ function init(ctx) {
}
});
$("btn-add-token-back").addEventListener("click", ctx.showAddressDetail);
$("btn-add-token-back").addEventListener("click", () => {
goBack();
});
}
module.exports = { init, show };

View File

@@ -1,4 +1,4 @@
const { $, showView, showFlash } = require("./helpers");
const { $, showView, showFlash, goBack, clearViewStack } = require("./helpers");
const {
generateMnemonic,
hdWalletFromMnemonic,
@@ -143,6 +143,7 @@ async function importMnemonic(ctx) {
state.wallets.push(wallet);
state.hasWallet = true;
await saveState();
clearViewStack();
ctx.renderWalletList();
showView("main");
@@ -198,6 +199,7 @@ async function importPrivateKey(ctx) {
});
state.hasWallet = true;
await saveState();
clearViewStack();
ctx.renderWalletList();
showView("main");
@@ -249,6 +251,7 @@ async function importXprvKey(ctx) {
state.wallets.push(wallet);
state.hasWallet = true;
await saveState();
clearViewStack();
ctx.renderWalletList();
showView("main");
@@ -297,12 +300,7 @@ function init(ctx) {
// Back button
$("btn-add-wallet-back").addEventListener("click", () => {
if (!state.hasWallet) {
showView("welcome");
} else {
ctx.renderWalletList();
showView("main");
}
goBack();
});
}

View File

@@ -10,6 +10,8 @@ const {
truncateMiddle,
renderAddressHtml,
attachCopyHandlers,
goBack,
pushCurrentView,
} = require("./helpers");
const { state, currentAddress, saveState } = require("../../shared/state");
const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
@@ -247,8 +249,7 @@ function init(_ctx) {
ctx = _ctx;
$("btn-address-back").addEventListener("click", () => {
ctx.renderWalletList();
showView("main");
goBack();
});
$("btn-send").addEventListener("click", () => {
@@ -266,6 +267,7 @@ function init(_ctx) {
$("send-token-static").classList.add("hidden");
updateSendBalance();
resetSendValidation();
pushCurrentView();
showView("send");
});
@@ -295,6 +297,7 @@ function init(_ctx) {
$("btn-export-privkey").addEventListener("click", () => {
moreDropdown.classList.add("hidden");
moreBtn.classList.remove("bg-fg", "text-bg");
pushCurrentView();
const wallet = state.wallets[state.selectedWallet];
const addr = wallet.addresses[state.selectedAddress];
const blockieEl = $("export-privkey-jazzicon");
@@ -367,7 +370,7 @@ function init(_ctx) {
$("btn-export-privkey-back").addEventListener("click", () => {
$("export-privkey-value").textContent = "";
$("export-privkey-password").value = "";
show();
goBack();
});
}

View File

@@ -13,6 +13,8 @@ const {
balanceLine,
renderAddressHtml,
attachCopyHandlers,
goBack,
pushCurrentView,
} = require("./helpers");
const { state, currentAddress, saveState } = require("../../shared/state");
const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
@@ -331,7 +333,7 @@ function init(_ctx) {
});
$("btn-address-token-back").addEventListener("click", () => {
ctx.showAddressDetail();
goBack();
});
$("btn-address-token-send").addEventListener("click", () => {
@@ -365,6 +367,7 @@ function init(_ctx) {
attachCopyHandlers($("send-token-static"));
updateSendBalance();
resetSendValidation();
pushCurrentView();
showView("send");
});

View File

@@ -20,6 +20,7 @@ const {
escapeHtml,
renderAddressHtml,
attachCopyHandlers,
goBack,
} = require("./helpers");
const { state, currentNetwork } = require("../../shared/state");
const { getSignerForAddress } = require("../../shared/wallet");
@@ -355,7 +356,7 @@ function init(ctx) {
});
$("btn-confirm-back").addEventListener("click", () => {
showView("send");
goBack();
});
}

View File

@@ -1,4 +1,4 @@
const { $, showView, showFlash } = require("./helpers");
const { $, showView, showFlash, goBack, clearViewStack } = require("./helpers");
const { state, saveState } = require("../../shared/state");
const { decryptWithPassword } = require("../../shared/vault");
@@ -21,7 +21,7 @@ function init(_ctx) {
$("btn-delete-wallet-back").addEventListener("click", () => {
deleteWalletIndex = null;
ctx.showSettingsView();
goBack();
});
$("btn-delete-wallet-confirm").addEventListener("click", async () => {
@@ -77,6 +77,7 @@ function init(_ctx) {
state.selectedWallet = null;
state.selectedAddress = null;
state.activeAddress = null;
clearViewStack();
await saveState();
showView("welcome");
} else {
@@ -86,8 +87,14 @@ function init(_ctx) {
state.activeAddress =
state.wallets[0].addresses[0]?.address || null;
await saveState();
// Reset stack to [main] so Settings back goes home.
// Use require() lazily to avoid circular dependency
// (settings.js requires deleteWallet.js).
clearViewStack();
state.viewStack.push("main");
ctx.renderWalletList();
ctx.showSettingsView();
const settings = require("./settings");
settings.show();
showFlash("Wallet deleted.");
}
});

View File

@@ -75,6 +75,43 @@ function showView(name) {
}
}
// Callback to re-render the main/home view when navigating back to it.
// Set once by index.js via setRenderMain().
let _renderMain = null;
function setRenderMain(fn) {
_renderMain = fn;
}
// Push the current view onto the navigation stack so goBack() can
// return to it. Call this before any forward navigation.
function pushCurrentView() {
if (state.currentView) {
state.viewStack.push(state.currentView);
}
}
// Pop the navigation stack and show the previous view. If the stack
// is empty, fall back to the main (home) view.
function goBack() {
let target;
if (state.viewStack.length > 0) {
target = state.viewStack.pop();
} else {
target = "main";
}
if (target === "main" && _renderMain) {
_renderMain();
}
showView(target);
}
// Clear the entire navigation stack (used when resetting to root,
// e.g. after adding or deleting a wallet).
function clearViewStack() {
state.viewStack = [];
}
let flashTimer = null;
function clearFlash() {
@@ -380,6 +417,10 @@ module.exports = {
showError,
hideError,
showView,
setRenderMain,
pushCurrentView,
goBack,
clearViewStack,
showFlash,
flashCopyFeedback,
balanceLine,

View File

@@ -12,6 +12,7 @@ const {
truncateMiddle,
renderAddressHtml,
attachCopyHandlers,
pushCurrentView,
} = require("./helpers");
const { state, saveState, currentAddress } = require("../../shared/state");
const {
@@ -381,6 +382,7 @@ function init(ctx) {
renderSendTokenSelect(addr);
updateSendBalance();
resetSendValidation();
pushCurrentView();
showView("send");
});

View File

@@ -6,6 +6,7 @@ const {
formatAddressHtml,
addressTitle,
attachCopyHandlers,
goBack,
} = require("./helpers");
const { state, currentAddress, currentNetwork } = require("../../shared/state");
const QRCode = require("qrcode");
@@ -67,11 +68,7 @@ function init(ctx) {
});
$("btn-receive-back").addEventListener("click", () => {
if (state.selectedToken) {
ctx.showAddressToken();
} else {
ctx.showAddressDetail();
}
goBack();
});
}

View File

@@ -7,6 +7,7 @@ const {
escapeHtml,
renderAddressHtml,
attachCopyHandlers,
goBack,
} = require("./helpers");
const { state, currentAddress } = require("../../shared/state");
let ctx;
@@ -250,11 +251,7 @@ function init(_ctx) {
$("btn-send-back").addEventListener("click", () => {
$("send-token").classList.remove("hidden");
$("send-token-static").classList.add("hidden");
if (state.selectedToken) {
ctx.showAddressToken();
} else {
ctx.showAddressDetail();
}
goBack();
});
}

View File

@@ -1,4 +1,11 @@
const { $, showView, showFlash, escapeHtml } = require("./helpers");
const {
$,
showView,
showFlash,
escapeHtml,
goBack,
pushCurrentView,
} = require("./helpers");
const { applyTheme } = require("../theme");
const { state, saveState, currentNetwork } = require("../../shared/state");
const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
@@ -86,6 +93,7 @@ function renderWalletListSettings() {
container.querySelectorAll(".btn-delete-wallet").forEach((btn) => {
btn.addEventListener("click", () => {
const idx = parseInt(btn.dataset.idx, 10);
pushCurrentView();
deleteWallet.show(idx);
});
});
@@ -282,8 +290,7 @@ function init(ctx) {
);
$("btn-settings-back").addEventListener("click", () => {
ctx.renderWalletList();
showView("main");
goBack();
});
}

View File

@@ -1,4 +1,4 @@
const { $, showView, showFlash } = require("./helpers");
const { $, showView, showFlash, goBack } = require("./helpers");
const { getTopTokens } = require("../../shared/tokenList");
const { state, saveState } = require("../../shared/state");
const { lookupTokenInfo } = require("../../shared/balances");
@@ -84,7 +84,7 @@ function init(_ctx) {
ctx = _ctx;
$("btn-settings-addtoken-back").addEventListener("click", () => {
ctx.showSettingsView();
goBack();
});
$("btn-settings-addtoken-select").addEventListener("click", async () => {

View File

@@ -14,6 +14,7 @@ const {
attachCopyHandlers,
copyableHtml,
etherscanLinkHtml,
goBack,
} = require("./helpers");
const { state, currentNetwork } = require("../../shared/state");
const { formatEther, formatUnits } = require("ethers");
@@ -350,11 +351,7 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
function init(_ctx) {
ctx = _ctx;
$("btn-tx-back").addEventListener("click", () => {
if (state.selectedToken) {
ctx.showAddressToken();
} else {
ctx.showAddressDetail();
}
goBack();
});
}

View File

@@ -9,6 +9,7 @@ const {
attachCopyHandlers,
copyableHtml,
etherscanLinkHtml,
clearViewStack,
} = require("./helpers");
const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
const { state, saveState, currentNetwork } = require("../../shared/state");
@@ -221,10 +222,16 @@ function navigateBack() {
window.close();
return;
}
// After a completed transaction, reset the navigation stack
// and go directly to the address view (token or detail).
// Use require() lazily to call show() without the ctx push wrapper.
clearViewStack();
state.viewStack.push("main");
if (state.selectedToken) {
ctx.showAddressToken();
state.viewStack.push("address");
require("./addressToken").show();
} else {
ctx.showAddressDetail();
require("./addressDetail").show();
}
}

View File

@@ -38,6 +38,7 @@ const state = {
selectedAddress: null,
selectedToken: null,
viewData: {},
viewStack: [],
};
// Return the network configuration for the currently selected network.
@@ -72,6 +73,7 @@ async function saveState() {
selectedAddress: state.selectedAddress,
selectedToken: state.selectedToken,
viewData: state.viewData,
viewStack: state.viewStack,
};
await storageApi.set({ autistmask: persisted });
}
@@ -133,6 +135,7 @@ async function loadState() {
saved.selectedAddress !== undefined ? saved.selectedAddress : null;
state.selectedToken = saved.selectedToken || null;
state.viewData = saved.viewData || {};
state.viewStack = Array.isArray(saved.viewStack) ? saved.viewStack : [];
}
}