From 45a7d8b449b125d20a1addaaea57c0d7baa89453 Mon Sep 17 00:00:00 2001
From: Andrea Scartabelli <andrea.scartabelli@gmail.com>
Date: Wed, 7 Feb 2024 16:56:35 +0100
Subject: [PATCH] Allow the web wallet to be served in a sub folder

Resolves #1362
---
 web-wallet/CHANGELOG.md                       |  2 +
 web-wallet/README.md                          |  4 +-
 .../lib/components/AppAnchor/AppAnchor.svelte | 17 ++++
 .../AppAnchorButton/AppAnchorButton.svelte    | 15 ++++
 .../OperationResult/OperationResult.svelte    |  6 +-
 .../src/lib/components/Send/Send.svelte       |  4 +-
 .../src/lib/components/Stake/Stake.svelte     |  4 +-
 .../Transactions/Transactions.svelte          | 13 +--
 .../components/__tests__/AppAnchor.spec.js    | 83 +++++++++++++++++++
 .../__tests__/AppAnchorButton.spec.js         | 67 +++++++++++++++
 .../components/__tests__/Transactions.spec.js |  7 +-
 .../__snapshots__/AppAnchor.spec.js.snap      | 13 +++
 .../AppAnchorButton.spec.js.snap              | 17 ++++
 .../OperationResult.spec.js.snap              | 12 ++-
 .../__snapshots__/Transactions.spec.js.snap   | 10 ++-
 web-wallet/src/lib/components/index.js        |  2 +
 .../dusk/components/Wizard/WizardStep.svelte  |  8 +-
 .../navigation/__tests__/addBasePath.spec.js  | 26 ++++++
 .../src/lib/navigation/__tests__/goto.spec.js | 51 ++++++++++++
 .../lib/navigation/__tests__/redirect.spec.js | 51 ++++++++++++
 web-wallet/src/lib/navigation/addBasePath.js  | 13 +++
 web-wallet/src/lib/navigation/goto.js         |  8 ++
 web-wallet/src/lib/navigation/index.js        |  3 +
 web-wallet/src/lib/navigation/redirect.js     | 12 +++
 web-wallet/src/routes/(app)/+layout.js        |  2 +-
 .../src/routes/(app)/__tests__/layout.spec.js |  4 +-
 .../src/routes/(app)/dashboard/+layout.svelte |  4 +-
 .../__snapshots__/layout.spec.js.snap         |  9 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 14 +++-
 .../__tests__/__snapshots__/page.spec.js.snap |  3 +-
 .../src/routes/(app)/settings/+page.svelte    |  8 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  6 +-
 .../(app)/settings/__tests__/page.spec.js     |  4 +-
 .../src/routes/(welcome)/login/+page.svelte   |  9 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  9 +-
 .../(welcome)/login/__tests__/page.spec.js    |  4 +-
 .../src/routes/(welcome)/setup/+page.svelte   |  8 +-
 .../(welcome)/setup/TermsOfService.svelte     | 14 ++--
 .../__tests__/__snapshots__/page.spec.js.snap |  9 +-
 .../(welcome)/setup/create/+page.svelte       |  2 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  4 +-
 .../(welcome)/setup/restore/+page.svelte      |  2 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  4 +-
 web-wallet/src/routes/+page.js                |  2 +-
 web-wallet/src/routes/__tests__/page.spec.js  | 32 +++++++
 web-wallet/svelte.config.js                   |  7 +-
 web-wallet/vite-setup.js                      |  6 ++
 47 files changed, 537 insertions(+), 77 deletions(-)
 create mode 100644 web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte
 create mode 100644 web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte
 create mode 100644 web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
 create mode 100644 web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js
 create mode 100644 web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
 create mode 100644 web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
 create mode 100644 web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js
 create mode 100644 web-wallet/src/lib/navigation/__tests__/goto.spec.js
 create mode 100644 web-wallet/src/lib/navigation/__tests__/redirect.spec.js
 create mode 100644 web-wallet/src/lib/navigation/addBasePath.js
 create mode 100644 web-wallet/src/lib/navigation/goto.js
 create mode 100644 web-wallet/src/lib/navigation/index.js
 create mode 100644 web-wallet/src/lib/navigation/redirect.js
 create mode 100644 web-wallet/src/routes/__tests__/page.spec.js

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index e0bff246e3..34276608df 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `fiatPrice` optional property to Balance component [#1331](https://github.com/dusk-network/rusk/pull/1331)
 - Add ability to revert words when entering the mnemonic phrase [#1333](https://github.com/dusk-network/rusk/pull/1333)
 - Add missing error handling when querying the quote API [#1344](https://github.com/dusk-network/rusk/pull/1334)
+- Add `VITE_BASE_PATH` env variable [#1366](https://github.com/dusk-network/rusk/pull/1366)
+- Add possibility to serve the web wallet from a sub folder [#1366](https://github.com/dusk-network/rusk/pull/1366)
 
 ### Changed
 
diff --git a/web-wallet/README.md b/web-wallet/README.md
index 6df2b7eeba..ec97e6e461 100644
--- a/web-wallet/README.md
+++ b/web-wallet/README.md
@@ -30,6 +30,8 @@ The application defines these variables by reading a local `.env` file containin
 N.B. the current `0.1.2` version of the library has no option to pick the network and uses the `LOCAL_NODE` only. The current testnet address is set in that variable in the example below:
 
 ```
+# can be empty string, must start with a slash otherwise, must not end with a slash
+VITE_BASE_PATH=""
 VITE_CONTRACT_STAKE_DISABLED=false
 VITE_CONTRACT_TRANSFER_DISABLED=false
 VITE_CURRENT_NODE=${VITE_LOCAL_NODE}
@@ -67,4 +69,4 @@ To run a local node different steps are needed, so please read the [related sect
 
 ## Running a local Rusk node
 
-To run a local node, follow the instructions outlined in the [Rusk's readme](https://github.com/dusk-network/rusk).
\ No newline at end of file
+To run a local node, follow the instructions outlined in the [Rusk's readme](https://github.com/dusk-network/rusk).
diff --git a/web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte b/web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte
new file mode 100644
index 0000000000..ec34dbd65b
--- /dev/null
+++ b/web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte
@@ -0,0 +1,17 @@
+<svelte:options immutable={true}/>
+
+<script>
+	import { Anchor } from "$lib/dusk/components";
+	import { addBasePath } from "$lib/navigation";
+
+	/** @type {string} */
+	export let href;
+</script>
+
+<Anchor
+	{...$$restProps}
+	href={addBasePath(href)}
+	on:click
+>
+	<slot/>
+</Anchor>
diff --git a/web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte b/web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte
new file mode 100644
index 0000000000..58cb058ec8
--- /dev/null
+++ b/web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte
@@ -0,0 +1,15 @@
+<svelte:options immutable={true}/>
+
+<script>
+	import { AnchorButton } from "$lib/dusk/components";
+	import { addBasePath } from "$lib/navigation";
+
+	/** @type {string} */
+	export let href;
+</script>
+
+<AnchorButton
+	{...$$restProps}
+	href={addBasePath(href)}
+	on:click
+/>
diff --git a/web-wallet/src/lib/components/OperationResult/OperationResult.svelte b/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
index 395ef7c424..a0159c4c4d 100644
--- a/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
+++ b/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
@@ -2,13 +2,13 @@
 
 <script>
 	import {
-		AnchorButton,
 		ErrorDetails,
 		Icon,
 		Throbber
 	} from "$lib/dusk/components";
 	import { mdiCheckDecagramOutline, mdiCloseThick } from "@mdi/js";
 	import { makeClassName } from "$lib/dusk/string";
+	import { AppAnchorButton } from "$lib/components";
 
 	/** @type {string|undefined} */
 	export let className = undefined;
@@ -49,7 +49,7 @@
 		/>
 		<span>{successMessage}</span>
 		<slot name="success-content" {result}/>
-		<AnchorButton
+		<AppAnchorButton
 			href="/dashboard"
 			on:click={handleGoHomeClick}
 			variant="tertiary"
@@ -65,7 +65,7 @@
 			summary={errorMessage}
 		/>
 		<slot name="error-content"/>
-		<AnchorButton
+		<AppAnchorButton
 			href="/dashboard"
 			on:click={handleGoHomeClick}
 			variant="tertiary"
diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
index ff95721803..647955ba3f 100644
--- a/web-wallet/src/lib/components/Send/Send.svelte
+++ b/web-wallet/src/lib/components/Send/Send.svelte
@@ -9,7 +9,6 @@
 	import { luxToDusk } from "$lib/dusk/currency";
 	import { logo } from "$lib/dusk/icons";
 	import {
-		AnchorButton,
 		Badge,
 		Button,
 		Icon,
@@ -18,6 +17,7 @@
 		WizardStep
 	} from "$lib/dusk/components";
 	import {
+		AppAnchorButton,
 		ContractStatusesList,
 		GasFee,
 		GasSettings,
@@ -224,7 +224,7 @@
 			>
 				<svelte:fragment slot="success-content" let:result={hash}>
 					{#if hash}
-						<AnchorButton
+						<AppAnchorButton
 							href={`https://explorer.dusk.network/transactions/transaction?id=${hash}`}
 							on:click={resetOperation}
 							text="VIEW ON BLOCK EXPLORER"
diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
index 6875afa540..1bad718fb7 100644
--- a/web-wallet/src/lib/components/Stake/Stake.svelte
+++ b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -9,7 +9,6 @@
 	import { luxToDusk } from "$lib/dusk/currency";
 	import { logo } from "$lib/dusk/icons";
 	import {
-		AnchorButton,
 		Badge,
 		Button,
 		Icon,
@@ -18,6 +17,7 @@
 		WizardStep
 	} from "$lib/dusk/components";
 	import {
+		AppAnchorButton,
 		ContractStatusesList,
 		GasFee,
 		GasSettings,
@@ -212,7 +212,7 @@
 			>
 				<svelte:fragment slot="success-content" let:result={hash}>
 					{#if hash}
-						<AnchorButton
+						<AppAnchorButton
 							href={`https://explorer.dusk.network/transactions/transaction?id=${hash}`}
 							on:click={resetOperation}
 							text="VIEW ON BLOCK EXPLORER"
diff --git a/web-wallet/src/lib/components/Transactions/Transactions.svelte b/web-wallet/src/lib/components/Transactions/Transactions.svelte
index a12a0eae64..4729b9de42 100644
--- a/web-wallet/src/lib/components/Transactions/Transactions.svelte
+++ b/web-wallet/src/lib/components/Transactions/Transactions.svelte
@@ -5,8 +5,6 @@
 	import { fade } from "svelte/transition";
 	import { logo } from "$lib/dusk/icons";
 	import {
-		Anchor,
-		AnchorButton,
 		Badge,
 		ErrorDetails,
 		Icon,
@@ -16,6 +14,9 @@
 	import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
 	import { sortByHeightDesc } from "$lib/transactions";
 
+	import AppAnchor from "../AppAnchor/AppAnchor.svelte";
+	import AppAnchorButton from "../AppAnchorButton/AppAnchorButton.svelte";
+
 	/** @type {String} */
 	export let language;
 
@@ -65,7 +66,7 @@
 						<dt class="transactions-list__term">Hash</dt>
 						<dd class="transactions-list__datum transactions-list__datum--hash">
 							<samp>
-								<Anchor
+								<AppAnchor
 									href="https://explorer.dusk.network/transactions/transaction?id={transaction.id}"
 									rel="noopener noreferrer"
 									target="_blank"
@@ -74,7 +75,7 @@
 										transaction.id,
 										calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
 									)}
-								</Anchor>
+								</AppAnchor>
 							</samp>
 						</dd>
 						{#if transaction.tx_type}
@@ -127,14 +128,14 @@
 
 	<footer class="transactions__footer">
 		{#if limit}
-			<AnchorButton
+			<AppAnchorButton
 				className="transactions__footer-button"
 				href="/dashboard/transactions"
 				text="View all transactions"
 				variant="tertiary"
 			/>
 		{:else}
-			<AnchorButton
+			<AppAnchorButton
 				className="transactions__footer-button"
 				href="/dashboard"
 				text="Back"
diff --git a/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
new file mode 100644
index 0000000000..26d5aa6bde
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
@@ -0,0 +1,83 @@
+import {
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import {
+	cleanup,
+	fireEvent,
+	render
+} from "@testing-library/svelte";
+import { base } from "$app/paths";
+
+import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
+
+import { AppAnchor } from "..";
+
+describe("AppAnchor", () => {
+	const baseProps = {
+		className: "foo bar",
+		href: "/setup",
+		id: "some-id"
+	};
+	const baseOptions = {
+		props: baseProps,
+		target: document.body
+	};
+
+	afterEach(cleanup);
+
+	it("should render an `Anchor` with the base path prepended to the `href` attribute, if the `href` represents an absolute URL", () => {
+		const renderA = renderWithSimpleContent(AppAnchor, baseOptions);
+		const anchorA = renderA.getByRole("link");
+
+		expect(renderA.container.firstChild).toMatchSnapshot();
+		expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
+		expect(anchorA).toHaveClass("foo bar");
+		expect(anchorA).toHaveAttribute("id", baseProps.id);
+
+		cleanup();
+
+		const renderB = renderWithSimpleContent(
+			AppAnchor,
+			{ ...baseOptions, props: { ...baseProps, href: "/" } }
+		);
+		const anchorB = renderB.getByRole("link");
+
+		expect(anchorB).toHaveAttribute("href", `${base}/`);
+		expect(anchorB).toHaveClass("foo bar");
+		expect(anchorB).toHaveAttribute("id", baseProps.id);
+	});
+
+	it("should leave the `Anchor` as it is if the `href` points to a relative path", () => {
+		const { getByRole } = renderWithSimpleContent(
+			AppAnchor,
+			{ ...baseOptions, props: { ...baseProps, href: "foo/bar" } }
+		);
+
+		expect(getByRole("link")).toHaveAttribute("href", "foo/bar");
+	});
+
+	it("should leave the `Anchor` as it is if the `href` points to an external URL", () => {
+		const href = "http://example.com";
+		const { getByRole } = renderWithSimpleContent(
+			AppAnchor,
+			{ ...baseOptions, props: { ...baseProps, href } }
+		);
+
+		expect(getByRole("link")).toHaveAttribute("href", href);
+	});
+
+	it("should forward the `onclick` event to the `Anchor`", async () => {
+		const handler = vi.fn();
+		const { component, getByRole } = render(AppAnchor, { ...baseProps, href: "#" });
+
+		component.$on("click", handler);
+
+		await fireEvent.click(getByRole("link"));
+
+		expect(handler).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js b/web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js
new file mode 100644
index 0000000000..8f9d7d6e4c
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js
@@ -0,0 +1,67 @@
+import {
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import {
+	cleanup,
+	fireEvent,
+	render
+} from "@testing-library/svelte";
+import { base } from "$app/paths";
+
+import { AppAnchorButton } from "..";
+
+describe("AppAnchorButton", () => {
+	const baseProps = {
+		className: "foo bar",
+		href: "/setup",
+		id: "some-id"
+	};
+
+	afterEach(cleanup);
+
+	it("should render an `AnchorButton` with the base path prepended to the `href` attribute, if the `href` represents an absolute URL", () => {
+		const { container, getByRole, rerender } = render(AppAnchorButton, baseProps);
+		const anchorA = getByRole("link");
+
+		expect(container.firstChild).toMatchSnapshot();
+		expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
+		expect(anchorA).toHaveClass("foo bar");
+		expect(anchorA).toHaveAttribute("id", baseProps.id);
+
+		rerender({ ...baseProps, href: "/" });
+
+		const anchorB = getByRole("link");
+
+		expect(anchorB).toHaveAttribute("href", `${base}/`);
+		expect(anchorB).toHaveClass("foo bar");
+		expect(anchorB).toHaveAttribute("id", baseProps.id);
+	});
+
+	it("should leave the `AnchorButton` as it is if the `href` points to a relative path", () => {
+		const { getByRole } = render(AppAnchorButton, { ...baseProps, href: "foo/bar" });
+
+		expect(getByRole("link")).toHaveAttribute("href", "foo/bar");
+	});
+
+	it("should leave the `AnchorButton` as it is if the `href` points to an external URL", () => {
+		const href = "http://example.com";
+		const { getByRole } = render(AppAnchorButton, { ...baseProps, href });
+
+		expect(getByRole("link")).toHaveAttribute("href", href);
+	});
+
+	it("should forward the `onclick` event to the `AnchorButton`", async () => {
+		const handler = vi.fn();
+		const { component, getByRole } = render(AppAnchorButton, { ...baseProps, href: "#" });
+
+		component.$on("click", handler);
+
+		await fireEvent.click(getByRole("link"));
+
+		expect(handler).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/web-wallet/src/lib/components/__tests__/Transactions.spec.js b/web-wallet/src/lib/components/__tests__/Transactions.spec.js
index 4fb6a4f45e..8322519302 100644
--- a/web-wallet/src/lib/components/__tests__/Transactions.spec.js
+++ b/web-wallet/src/lib/components/__tests__/Transactions.spec.js
@@ -1,8 +1,9 @@
 import { cleanup, render } from "@testing-library/svelte";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { get } from "svelte/store";
-import { settingsStore } from "$lib/stores";
+import { base } from "$app/paths";
 
+import { settingsStore } from "$lib/stores";
 import { transactions } from "$lib/mock-data";
 import { sortByHeightDesc } from "$lib/transactions";
 import { createFeeFormatter, createTransferFormatter } from "$lib/dusk/currency";
@@ -145,7 +146,7 @@ describe("Transactions", () => {
 		const viewAllTransactionAnchor = getByRole("link", { name: "View all transactions" });
 
 		expect(viewAllTransactionAnchor).toBeInTheDocument();
-		expect(viewAllTransactionAnchor).toHaveAttribute("href", "/dashboard/transactions");
+		expect(viewAllTransactionAnchor).toHaveAttribute("href", `${base}/dashboard/transactions`);
 	});
 
 	it("displays the \"Back\" CTA if no limit is supplied", async () => {
@@ -158,7 +159,7 @@ describe("Transactions", () => {
 		const viewAllTransactionAnchor = getByRole("link", { name: "Back" });
 
 		expect(viewAllTransactionAnchor).toBeInTheDocument();
-		expect(viewAllTransactionAnchor).toHaveAttribute("href", "/dashboard");
+		expect(viewAllTransactionAnchor).toHaveAttribute("href", `${base}/dashboard`);
 	});
 
 	it("handles error state when items are rejected", async () => {
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
new file mode 100644
index 0000000000..7831817d37
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppAnchor > should render an \`Anchor\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
+<a
+  class="dusk-anchor foo bar"
+  href="/some-base-path/setup"
+  id="some-id"
+>
+  <span>
+    some text
+  </span>
+</a>
+`;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
new file mode 100644
index 0000000000..0e9235d24e
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppAnchorButton > should render an \`AnchorButton\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal foo bar"
+    href="/some-base-path/setup"
+    id="some-id"
+  >
+    
+  </a>
+  <!--&lt;Anchor&gt;-->
+  <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
+</div>
+`;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
index f8de0a8f34..412609a5c4 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
@@ -41,7 +41,7 @@ exports[`OperationResult > should accept a custom message for the failure state
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -52,6 +52,7 @@ exports[`OperationResult > should accept a custom message for the failure state
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
 
@@ -116,7 +117,7 @@ exports[`OperationResult > should accept a custom message for the successful sta
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -127,6 +128,7 @@ exports[`OperationResult > should accept a custom message for the successful sta
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
 
@@ -206,7 +208,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -217,6 +219,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
 
@@ -246,7 +249,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -257,5 +260,6 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
index bf7301029e..2087f3a980 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
@@ -42,6 +42,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
                 tg874534tddsghdtst54hdfh795h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -148,6 +149,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
                 tg874534tddsghdtst54hdfh794h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -228,6 +230,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
                 tg874534tddsghdtst54hdfh793h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -294,7 +297,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -305,6 +308,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </footer>
     </article>
     <!--&lt;Transactions&gt;-->
@@ -354,6 +358,7 @@ exports[`Transactions > renders transactions correctly when items are fulfilled
                 tg874534tddsghdtst54hdfh795h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -446,7 +451,7 @@ exports[`Transactions > renders transactions correctly when items are fulfilled
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -457,6 +462,7 @@ exports[`Transactions > renders transactions correctly when items are fulfilled
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </footer>
     </article>
     <!--&lt;Transactions&gt;-->
diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js
index 2db42aaf18..9354b4b530 100644
--- a/web-wallet/src/lib/components/index.js
+++ b/web-wallet/src/lib/components/index.js
@@ -1,4 +1,6 @@
 export { default as AddressPicker } from "./AddressPicker/AddressPicker.svelte";
+export { default as AppAnchor } from "./AppAnchor/AppAnchor.svelte";
+export { default as AppAnchorButton } from "./AppAnchorButton/AppAnchorButton.svelte";
 export { default as Balance } from "./Balance/Balance.svelte";
 export { default as ContractOperations } from "./ContractOperations/ContractOperations.svelte";
 export { default as ContractStatusesList } from "./ContractStatusesList/ContractStatusesList.svelte";
diff --git a/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte b/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
index 8595efb157..eeee3a6188 100644
--- a/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
+++ b/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
@@ -1,8 +1,10 @@
 <script>
 	import { getContext } from "svelte";
-	import { AnchorButton, Button, Stepper } from "$lib/dusk/components";
+	import { Button, Stepper } from "$lib/dusk/components";
 	import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 
+	import { AppAnchorButton } from "$lib/components";
+
 	/** @type {Number} */
 	export let step;
 	export let key;
@@ -88,7 +90,7 @@
 			<div class="dusk-wizard__step-navigation">
 				{#if !hideBackButton}
 					{#if backButton?.isAnchor}
-						<AnchorButton
+						<AppAnchorButton
 							{...getButtonProps(backButton, "Back", mdiArrowLeft)}
 							href={backButton?.href ?? "#"}
 						/>
@@ -101,7 +103,7 @@
 				{/if}
 
 				{#if nextButton?.isAnchor}
-					<AnchorButton
+					<AppAnchorButton
 						{...getButtonProps(nextButton, "Next", mdiArrowRight, true)}
 						href={nextButton?.href ?? "#"}
 					/>
diff --git a/web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js b/web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js
new file mode 100644
index 0000000000..79e6f3a2f3
--- /dev/null
+++ b/web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js
@@ -0,0 +1,26 @@
+import {
+	describe,
+	expect,
+	it
+} from "vitest";
+import { base } from "$app/paths";
+
+import { addBasePath } from "..";
+
+describe("addBasePath", () => {
+	it("should add the base path to the received path if the received one is an absolute path", () => {
+		expect(addBasePath("/")).toBe(`${base}/`);
+		expect(addBasePath("/some-path")).toBe(`${base}/some-path`);
+	});
+
+	it("should add nothing if the received path is a relative one or a complete string URL", () => {
+		expect(addBasePath("foo/bar")).toBe("foo/bar");
+		expect(addBasePath("http://example.com/")).toBe("http://example.com/");
+	});
+
+	it("should add nothing if the received path is a URL object", () => {
+		const url = new URL("http://www.example.com/");
+
+		expect(addBasePath(url)).toBe(url);
+	});
+});
diff --git a/web-wallet/src/lib/navigation/__tests__/goto.spec.js b/web-wallet/src/lib/navigation/__tests__/goto.spec.js
new file mode 100644
index 0000000000..77ad99ebe9
--- /dev/null
+++ b/web-wallet/src/lib/navigation/__tests__/goto.spec.js
@@ -0,0 +1,51 @@
+import {
+	afterAll,
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import * as appNavigation from "$app/navigation";
+import { base } from "$app/paths";
+
+import { goto } from "..";
+
+describe("goto", () => {
+	const gotoSpy = vi.spyOn(appNavigation, "goto");
+
+	afterEach(() => {
+		gotoSpy.mockClear();
+	});
+
+	afterAll(() => {
+		gotoSpy.mockRestore();
+	});
+
+	it("should add the defined base path to Svelte's `goto` calls for absolute paths", async () => {
+		await goto("/");
+		await goto("/foo/path");
+
+		expect(gotoSpy).toHaveBeenCalledTimes(2);
+		expect(gotoSpy).toHaveBeenNthCalledWith(1, `${base}/`);
+		expect(gotoSpy).toHaveBeenNthCalledWith(2, `${base}/foo/path`);
+	});
+
+	it("should add nothing for relative paths and complete string URLs", async () => {
+		await goto("foo/bar");
+		await goto("http://example.com/");
+
+		expect(gotoSpy).toHaveBeenCalledTimes(2);
+		expect(gotoSpy).toHaveBeenNthCalledWith(1, "foo/bar");
+		expect(gotoSpy).toHaveBeenNthCalledWith(2, "http://example.com/");
+	});
+
+	it("should do nothing if the received path is an URL object", async () => {
+		const url = new URL("http://www.example.com/");
+
+		await goto(url);
+
+		expect(gotoSpy).toHaveBeenCalledTimes(1);
+		expect(gotoSpy).toHaveBeenCalledWith(url);
+	});
+});
diff --git a/web-wallet/src/lib/navigation/__tests__/redirect.spec.js b/web-wallet/src/lib/navigation/__tests__/redirect.spec.js
new file mode 100644
index 0000000000..86827b7266
--- /dev/null
+++ b/web-wallet/src/lib/navigation/__tests__/redirect.spec.js
@@ -0,0 +1,51 @@
+import {
+	afterAll,
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import * as SvelteKit from "@sveltejs/kit";
+import { base } from "$app/paths";
+
+import { redirect } from "..";
+
+describe("redirect", () => {
+	const redirectSpy = vi.spyOn(SvelteKit, "redirect");
+
+	afterEach(() => {
+		redirectSpy.mockClear();
+	});
+
+	afterAll(() => {
+		redirectSpy.mockRestore();
+	});
+
+	it("should add the defined base path to SvelteKit's `redirect` calls for absolute paths", () => {
+		redirect(300, "/");
+		redirect(301, "/foo/path");
+
+		expect(redirectSpy).toHaveBeenCalledTimes(2);
+		expect(redirectSpy).toHaveBeenNthCalledWith(1, 300, `${base}/`);
+		expect(redirectSpy).toHaveBeenNthCalledWith(2, 301, `${base}/foo/path`);
+	});
+
+	it("should add nothing for relative paths and complete string URLs", async () => {
+		redirect(300, "foo/bar");
+		redirect(300, "http://example.com/");
+
+		expect(redirectSpy).toHaveBeenCalledTimes(2);
+		expect(redirectSpy).toHaveBeenNthCalledWith(1, 300, "foo/bar");
+		expect(redirectSpy).toHaveBeenNthCalledWith(2, 300, "http://example.com/");
+	});
+
+	it("should do nothing if the received path is an URL object", async () => {
+		const url = new URL("http://www.example.com/");
+
+		redirect(300, url);
+
+		expect(redirectSpy).toHaveBeenCalledTimes(1);
+		expect(redirectSpy).toHaveBeenCalledWith(300, url);
+	});
+});
diff --git a/web-wallet/src/lib/navigation/addBasePath.js b/web-wallet/src/lib/navigation/addBasePath.js
new file mode 100644
index 0000000000..0846da4ce4
--- /dev/null
+++ b/web-wallet/src/lib/navigation/addBasePath.js
@@ -0,0 +1,13 @@
+import { base } from "$app/paths";
+
+/**
+ * @template {string | URL} T
+ * @param {T} path
+ */
+const addBasePath = path => (
+	path instanceof URL
+		? path
+		: path.startsWith("/") ? `${base}${path}` : path
+);
+
+export default addBasePath;
diff --git a/web-wallet/src/lib/navigation/goto.js b/web-wallet/src/lib/navigation/goto.js
new file mode 100644
index 0000000000..5bb95d3d33
--- /dev/null
+++ b/web-wallet/src/lib/navigation/goto.js
@@ -0,0 +1,8 @@
+import { goto as svelteGoto } from "$app/navigation";
+
+import addBasePath from "./addBasePath";
+
+/** @type {(...args: Parameters<svelteGoto>) => ReturnType<svelteGoto>} */
+const goto = (url, ...rest) => svelteGoto(addBasePath(url), ...rest);
+
+export default goto;
diff --git a/web-wallet/src/lib/navigation/index.js b/web-wallet/src/lib/navigation/index.js
new file mode 100644
index 0000000000..1f7bf3c3d8
--- /dev/null
+++ b/web-wallet/src/lib/navigation/index.js
@@ -0,0 +1,3 @@
+export { default as addBasePath } from "./addBasePath";
+export { default as goto } from "./goto";
+export { default as redirect } from "./redirect";
diff --git a/web-wallet/src/lib/navigation/redirect.js b/web-wallet/src/lib/navigation/redirect.js
new file mode 100644
index 0000000000..71e7a09b7c
--- /dev/null
+++ b/web-wallet/src/lib/navigation/redirect.js
@@ -0,0 +1,12 @@
+import { redirect as svelteKitRedirect } from "@sveltejs/kit";
+
+import addBasePath from "./addBasePath";
+
+/**
+ * @param {Parameters<svelteKitRedirect>[0]} status
+ * @param {Parameters<svelteKitRedirect>[1]} path
+ * @returns {ReturnType<svelteKitRedirect>}
+ */
+const redirect = (status, path) => svelteKitRedirect(status, addBasePath(path));
+
+export default redirect;
diff --git a/web-wallet/src/routes/(app)/+layout.js b/web-wallet/src/routes/(app)/+layout.js
index 7e9ef023a8..c4b073527b 100644
--- a/web-wallet/src/routes/(app)/+layout.js
+++ b/web-wallet/src/routes/(app)/+layout.js
@@ -1,4 +1,4 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from "$lib/navigation";
 import { get } from "svelte/store";
 
 import walletStore from "$lib/stores/walletStore";
diff --git a/web-wallet/src/routes/(app)/__tests__/layout.spec.js b/web-wallet/src/routes/(app)/__tests__/layout.spec.js
index 3805888cbd..fbc9665787 100644
--- a/web-wallet/src/routes/(app)/__tests__/layout.spec.js
+++ b/web-wallet/src/routes/(app)/__tests__/layout.spec.js
@@ -6,15 +6,15 @@ import {
 	it,
 	vi
 } from "vitest";
-import * as SvelteKit from "@sveltejs/kit";
 import { Wallet } from "@dusk-network/dusk-wallet-js";
 
+import * as navigation from "$lib/navigation";
 import { walletStore } from "$lib/stores";
 
 import { load } from "../+layout";
 
 describe("App layout.js", () => {
-	const redirectSpy = vi.spyOn(SvelteKit, "redirect");
+	const redirectSpy = vi.spyOn(navigation, "redirect");
 
 	afterEach(() => {
 		redirectSpy.mockClear();
diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
index 8f36782b2b..67d960c572 100644
--- a/web-wallet/src/routes/(app)/dashboard/+layout.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -7,13 +7,13 @@
 		mdiTimerSand
 	} from "@mdi/js";
 	import {
-		AnchorButton,
 		Button,
 		CircularIcon,
 		Icon,
 		ProgressBar
 	} from "$lib/dusk/components";
 	import { settingsStore, walletStore } from "$lib/stores";
+	import { AppAnchorButton } from "$lib/components";
 
 	$: ({ network } = $settingsStore);
 	$: ({ isSyncing, error } = $walletStore);
@@ -82,7 +82,7 @@
 						variant="quaternary"
 					/>
 				{/if}
-				<AnchorButton
+				<AppAnchorButton
 					variant="quaternary"
 					className="footer__anchor-button"
 					icon={{ path: mdiCogOutline, size: "large" }}
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index ce224e2496..b103c66e92 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -61,7 +61,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal dusk-icon-button footer__anchor-button"
             data-tooltip-id="main-tooltip"
             data-tooltip-text="Settings"
-            href="/settings"
+            href="/some-base-path/settings"
           >
             <svg
               class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
@@ -80,6 +80,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
       </nav>
     </footer>
@@ -174,7 +175,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal dusk-icon-button footer__anchor-button"
             data-tooltip-id="main-tooltip"
             data-tooltip-text="Settings"
-            href="/settings"
+            href="/some-base-path/settings"
           >
             <svg
               class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
@@ -193,6 +194,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
       </nav>
     </footer>
@@ -273,7 +275,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal dusk-icon-button footer__anchor-button"
             data-tooltip-id="main-tooltip"
             data-tooltip-text="Settings"
-            href="/settings"
+            href="/some-base-path/settings"
           >
             <svg
               class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
@@ -292,6 +294,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
       </nav>
     </footer>
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
index d8705268f9..7c0b82b580 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
@@ -398,7 +398,7 @@ exports[`Dashboard > should render a card when there is an error getting transac
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -409,6 +409,7 @@ exports[`Dashboard > should render a card when there is an error getting transac
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </footer>
     </article>
     <!--&lt;Transactions&gt;-->
@@ -817,7 +818,7 @@ exports[`Dashboard > should render the dashboard page and show a throbber while
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -828,6 +829,7 @@ exports[`Dashboard > should render the dashboard page and show a throbber while
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </footer>
     </article>
     <!--&lt;Transactions&gt;-->
@@ -1233,6 +1235,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh795h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1339,6 +1342,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh794h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1419,6 +1423,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh793h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1499,6 +1504,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh792h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1605,6 +1611,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh791h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1671,7 +1678,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -1682,6 +1689,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </footer>
     </article>
     <!--&lt;Transactions&gt;-->
diff --git a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
index 3d3dbe8c74..da604f5168 100644
--- a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
@@ -109,7 +109,7 @@ exports[`Dashboard > should render the transactions page 1`] = `
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled transactions__footer-button"
-          href="/dashboard"
+          href="/some-base-path/dashboard"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -133,6 +133,7 @@ exports[`Dashboard > should render the transactions page 1`] = `
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </footer>
     </article>
     <!--&lt;Transactions&gt;-->
diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
index 43f55a2912..fc7615e697 100644
--- a/web-wallet/src/routes/(app)/settings/+page.svelte
+++ b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -10,9 +10,8 @@
 		mdiWalletOutline
 	} from "@mdi/js";
 	import { mapWith, rename } from "lamb";
-	import { goto } from "$app/navigation";
+
 	import {
-		AnchorButton,
 		Badge,
 		Button,
 		ErrorDetails,
@@ -20,8 +19,9 @@
 		Select,
 		Switch
 	} from "$lib/dusk/components";
-	import { GasControls } from "$lib/components";
+	import { AppAnchorButton, GasControls } from "$lib/components";
 	import { currencies } from "$lib/dusk/currency";
+	import { goto } from "$lib/navigation";
 	import { settingsStore, walletStore } from "$lib/stores";
 
 	const resetWallet = () => walletStore.clearLocalData().then(() => {
@@ -221,7 +221,7 @@
 </section>
 
 <div class="settings-actions">
-	<AnchorButton
+	<AppAnchorButton
 		href="/dashboard"
 		variant="tertiary"
 		icon={{ path: mdiArrowLeft }}
diff --git a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
index d35e09b0fc..8e0719e83f 100644
--- a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
@@ -665,7 +665,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     <a
       aria-disabled="false"
       class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-      href="/dashboard"
+      href="/some-base-path/dashboard"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -689,6 +689,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     </a>
     <!--&lt;Anchor&gt;-->
     <!--&lt;AnchorButton&gt;-->
+    <!--&lt;AppAnchorButton&gt;-->
      
     <button
       class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
@@ -1353,7 +1354,7 @@ exports[`Settings > should render the settings page 1`] = `
     <a
       aria-disabled="false"
       class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-      href="/dashboard"
+      href="/some-base-path/dashboard"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -1377,6 +1378,7 @@ exports[`Settings > should render the settings page 1`] = `
     </a>
     <!--&lt;Anchor&gt;-->
     <!--&lt;AnchorButton&gt;-->
+    <!--&lt;AppAnchorButton&gt;-->
      
     <button
       class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
diff --git a/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js b/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js
index 46c12b18be..fe6b1f5ebd 100644
--- a/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js
@@ -8,9 +8,9 @@ import {
 	vi
 } from "vitest";
 import { act, cleanup, fireEvent, render } from "@testing-library/svelte";
-import * as appNavigation from "$app/navigation";
 
 import mockedWalletStore from "../../__mocks__/mockedWalletStore";
+import * as navigation from "$lib/navigation";
 import { settingsStore, walletStore } from "$lib/stores";
 
 import Settings from "../+page.svelte";
@@ -32,7 +32,7 @@ vi.useFakeTimers();
 
 describe("Settings", () => {
 	const initialWalletStoreState = structuredClone(mockedWalletStore.getMockedStoreValue());
-	const gotoSpy = vi.spyOn(appNavigation, "goto");
+	const gotoSpy = vi.spyOn(navigation, "goto");
 	const resetSpy = vi.spyOn(walletStore, "reset");
 
 	beforeEach(() => {
diff --git a/web-wallet/src/routes/(welcome)/login/+page.svelte b/web-wallet/src/routes/(welcome)/login/+page.svelte
index 75da2d0e36..96742050fd 100644
--- a/web-wallet/src/routes/(welcome)/login/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/login/+page.svelte
@@ -2,15 +2,16 @@
 
 <script>
 	import { mdiArrowLeft, mdiFileKeyOutline, mdiKeyOutline } from "@mdi/js";
-	import { goto } from "$app/navigation";
 	import { validateMnemonic } from "bip39";
 	import { setKey } from "lamb";
+
 	import {
-		AnchorButton,
 		Button,
 		Card,
 		Textbox
 	} from "$lib/dusk/components";
+	import { AppAnchorButton } from "$lib/components";
+	import { goto } from "$lib/navigation";
 	import { settingsStore, walletStore } from "$lib/stores";
 	import { decryptMnemonic, getSeedFromMnemonic } from "$lib/wallet";
 	import loginInfoStorage from "$lib/services/loginInfoStorage";
@@ -103,7 +104,7 @@
 				{/if}
 				<Button variant="secondary" text="Unlock Wallet" type="submit"/>
 				{#if modeLabel === "Password"}
-					<AnchorButton variant="quaternary" href="/setup/restore" text="Forgot Password?"/>
+					<AppAnchorButton variant="quaternary" href="/setup/restore" text="Forgot Password?"/>
 				{/if}
 			</form>
 		</Card>
@@ -116,7 +117,7 @@
 		</Card>
 	</div>
 	<footer class="login-footer">
-		<AnchorButton
+		<AppAnchorButton
 			href="/setup"
 			variant="tertiary"
 			icon={{ path: mdiArrowLeft }}
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
index 1d73a6e271..573482d406 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
@@ -135,7 +135,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
       <a
         aria-disabled="false"
         class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-        href="/setup"
+        href="/some-base-path/setup"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -159,6 +159,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
       </a>
       <!--&lt;Anchor&gt;-->
       <!--&lt;AnchorButton&gt;-->
+      <!--&lt;AppAnchorButton&gt;-->
     </footer>
   </section>
   <!--&lt;+page&gt;-->
@@ -250,7 +251,7 @@ exports[`Login > Password workflow > should show the password field and the link
           <a
             aria-disabled="false"
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal"
-            href="/setup/restore"
+            href="/some-base-path/setup/restore"
           >
             <span
               class="dusk-anchor-button__text"
@@ -261,6 +262,7 @@ exports[`Login > Password workflow > should show the password field and the link
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </form>
       </article>
       
@@ -315,7 +317,7 @@ exports[`Login > Password workflow > should show the password field and the link
       <a
         aria-disabled="false"
         class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-        href="/setup"
+        href="/some-base-path/setup"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -339,6 +341,7 @@ exports[`Login > Password workflow > should show the password field and the link
       </a>
       <!--&lt;Anchor&gt;-->
       <!--&lt;AnchorButton&gt;-->
+      <!--&lt;AppAnchorButton&gt;-->
     </footer>
   </section>
   <!--&lt;+page&gt;-->
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
index 972b902a57..169e017fb9 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
@@ -9,12 +9,12 @@ import {
 } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
 import { generateMnemonic } from "bip39";
-import * as appNavigation from "$app/navigation";
 import { get } from "svelte/store";
 import { Wallet } from "@dusk-network/dusk-wallet-js";
 import { setKey } from "lamb";
 
 import { getAsHTMLElement } from "$lib/dusk/test-helpers";
+import * as navigation from "$lib/navigation";
 import { settingsStore, walletStore } from "$lib/stores";
 import { encryptMnemonic, getSeedFromMnemonic } from "$lib/wallet";
 import loginInfoStorage from "$lib/services/loginInfoStorage";
@@ -36,7 +36,7 @@ describe("Login", async () => {
 	const userId = new Wallet(seed).getPsks()[0];
 	const getErrorElement = () => document.querySelector(".login__error");
 	const getWalletSpy = vi.spyOn(walletService, "getWallet");
-	const gotoSpy = vi.spyOn(appNavigation, "goto");
+	const gotoSpy = vi.spyOn(navigation, "goto");
 	const initSpy = vi.spyOn(walletStore, "init");
 	const settingsResetSpy = vi.spyOn(settingsStore, "reset");
 	const walletResetSpy = vi.spyOn(Wallet.prototype, "reset").mockResolvedValue(void 0);
diff --git a/web-wallet/src/routes/(welcome)/setup/+page.svelte b/web-wallet/src/routes/(welcome)/setup/+page.svelte
index 0b38772140..37a4dc416e 100644
--- a/web-wallet/src/routes/(welcome)/setup/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/+page.svelte
@@ -3,7 +3,7 @@
 <script>
 	import "css-doodle";
 	import Animation from "./Animation.svelte";
-	import { AnchorButton } from "$lib/dusk/components";
+	import { AppAnchorButton } from "$lib/components";
 	import {
 		mdiKeyOutline,
 		mdiRestore,
@@ -20,19 +20,19 @@
 
 		<div class="setup-content__options">
 			<div class="setup-content__options-group">
-				<AnchorButton
+				<AppAnchorButton
 					href="/setup/create"
 					variant="primary"
 					text="Create new wallet"
 					icon={{ path: mdiWalletOutline }}/>
-				<AnchorButton
+				<AppAnchorButton
 					href="/setup/restore/"
 					variant="tertiary"
 					text="Restore Wallet"
 					icon={{ path: mdiRestore }}/>
 			</div>
 			<Animation/>
-			<AnchorButton
+			<AppAnchorButton
 				href="/login"
 				variant="secondary"
 				text="Access wallet"
diff --git a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
index bd26e89458..352c6e0ec8 100644
--- a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -1,10 +1,6 @@
 <script>
-	import {
-		Anchor,
-		AnchorButton,
-		Button,
-		Card
-	} from "$lib/dusk/components";
+	import { Button, Card } from "$lib/dusk/components";
+	import { AppAnchor, AppAnchorButton } from "$lib/components";
 
 	/** @type {boolean} */
 	export let tosAccepted = false;
@@ -13,14 +9,14 @@
 <section class="flex flex-col flex-1">
 	<Card heading="Terms &amp; Privacy Policy">
 		<div class="flex flex-col gap-1">
-			<p>Our <Anchor
+			<p>Our <AppAnchor
 				href="https://dusk.network/privacy-policy/"
 				rel="noopener noreferrer"
-				target="_blank">Terms &amp; Privacy Policy</Anchor> govern your use of our services,
+				target="_blank">Terms &amp; Privacy Policy</AppAnchor> govern your use of our services,
 			including data handling and user responsibilities.
 			Your privacy and security are our top priorities.</p>
 			<div class="flex gap-1 w-100">
-				<AnchorButton
+				<AppAnchorButton
 					className="flex-1"
 					href="/setup"
 					text="Cancel"
diff --git a/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
index 1efaa36af4..8e2addc6c8 100644
--- a/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
@@ -34,7 +34,7 @@ exports[`Setup > should render the Setup page 1`] = `
           <a
             aria-disabled="false"
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-            href="/setup/create"
+            href="/some-base-path/setup/create"
           >
             <svg
               class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -58,11 +58,12 @@ exports[`Setup > should render the Setup page 1`] = `
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
            
           <a
             aria-disabled="false"
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-            href="/setup/restore/"
+            href="/some-base-path/setup/restore/"
           >
             <svg
               class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -86,6 +87,7 @@ exports[`Setup > should render the Setup page 1`] = `
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
          
         <css-doodle
@@ -131,7 +133,7 @@ exports[`Setup > should render the Setup page 1`] = `
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-          href="/login"
+          href="/some-base-path/login"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -155,6 +157,7 @@ exports[`Setup > should render the Setup page 1`] = `
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </div>
     </div>
   </section>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
index 04f8c7f12c..46fe7308cd 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
@@ -15,7 +15,7 @@
 	import AllSet from "../AllSet.svelte";
 	import MnemonicPreSetup from "./MnemonicPreSetup.svelte";
 	import PasswordSetup from "../PasswordSetup.svelte";
-	import { goto } from "$app/navigation";
+	import { goto } from "$lib/navigation";
 
 	/** @type {boolean} */
 	let tosAccepted = false;
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index c3f478b861..f170523af3 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -37,6 +37,7 @@ exports[`Create > should render the Terms of Service step of the Create flow 1`]
               Terms & Privacy Policy
             </a>
             <!--&lt;Anchor&gt;-->
+            <!--&lt;AppAnchor&gt;-->
              govern your use of our services,
 			including data handling and user responsibilities.
 			Your privacy and security are our top priorities.
@@ -48,7 +49,7 @@ exports[`Create > should render the Terms of Service step of the Create flow 1`]
             <a
               aria-disabled="false"
               class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal flex-1"
-              href="/setup"
+              href="/some-base-path/setup"
             >
               <span
                 class="dusk-anchor-button__text"
@@ -59,6 +60,7 @@ exports[`Create > should render the Terms of Service step of the Create flow 1`]
             </a>
             <!--&lt;Anchor&gt;-->
             <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             <button
               class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal flex-1"
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
index b54a12a729..6e41647f89 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
@@ -8,7 +8,7 @@
 	import MnemonicAuthenticate from "./MnemonicAuthenticate.svelte";
 	import { Wizard, WizardStep } from "$lib/dusk/components";
 	import { initializeWallet, refreshLocalStoragePasswordInfo } from "$lib/wallet";
-	import { goto } from "$app/navigation";
+	import { goto } from "$lib/navigation";
 
 	/** @type {boolean} */
 	let tosAccepted = false;
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
index d93b11d7ee..46de05d77d 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
@@ -37,6 +37,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow 1
               Terms & Privacy Policy
             </a>
             <!--&lt;Anchor&gt;-->
+            <!--&lt;AppAnchor&gt;-->
              govern your use of our services,
 			including data handling and user responsibilities.
 			Your privacy and security are our top priorities.
@@ -48,7 +49,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow 1
             <a
               aria-disabled="false"
               class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal flex-1"
-              href="/setup"
+              href="/some-base-path/setup"
             >
               <span
                 class="dusk-anchor-button__text"
@@ -59,6 +60,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow 1
             </a>
             <!--&lt;Anchor&gt;-->
             <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             <button
               class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal flex-1"
diff --git a/web-wallet/src/routes/+page.js b/web-wallet/src/routes/+page.js
index 8737c21a29..9c3dfddef0 100644
--- a/web-wallet/src/routes/+page.js
+++ b/web-wallet/src/routes/+page.js
@@ -1,4 +1,4 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from "$lib/navigation";
 
 /** @type {import('./$types').PageLoad} */
 export function load () {
diff --git a/web-wallet/src/routes/__tests__/page.spec.js b/web-wallet/src/routes/__tests__/page.spec.js
new file mode 100644
index 0000000000..5b0957157d
--- /dev/null
+++ b/web-wallet/src/routes/__tests__/page.spec.js
@@ -0,0 +1,32 @@
+import {
+	afterAll,
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+
+import * as navigation from "$lib/navigation";
+
+import { load } from "../+page";
+
+describe("Main +page.js", () => {
+	const redirectSpy = vi.spyOn(navigation, "redirect");
+
+	afterEach(() => {
+		redirectSpy.mockClear();
+	});
+
+	afterAll(() => {
+		redirectSpy.mockRestore();
+	});
+
+	it("should redirect the user to the setup page", async () => {
+		// @ts-ignore
+		expect(async () => await load()).rejects.toThrow();
+
+		expect(redirectSpy).toHaveBeenCalledTimes(1);
+		expect(redirectSpy).toHaveBeenCalledWith(301, "/setup");
+	});
+});
diff --git a/web-wallet/svelte.config.js b/web-wallet/svelte.config.js
index f2584b54d9..dc07555c8e 100644
--- a/web-wallet/svelte.config.js
+++ b/web-wallet/svelte.config.js
@@ -2,11 +2,16 @@ import adapter from "@sveltejs/adapter-static";
 import autoprefixer from "autoprefixer";
 import postCSSNested from "postcss-nested";
 import preprocess from "svelte-preprocess";
+import { loadEnv } from "vite";
+
+const env = loadEnv("", process.cwd());
+const fallBackBase = env.VITE_BASE_PATH ? `${env.VITE_BASE_PATH}/` : "";
 
 /** @type {import("@sveltejs/kit").Config} */
 const config = {
 	kit: {
-		adapter: adapter({ fallback: "index.html" })
+		adapter: adapter({ fallback: `${fallBackBase}index.html` }),
+		paths: { base: env.VITE_BASE_PATH }
 	},
 	preprocess: [
 		preprocess({
diff --git a/web-wallet/vite-setup.js b/web-wallet/vite-setup.js
index 79531579d3..928f9ac897 100644
--- a/web-wallet/vite-setup.js
+++ b/web-wallet/vite-setup.js
@@ -65,6 +65,12 @@ vi.mock("$app/environment", () => ({
 	version: "any"
 }));
 
+// Mock app paths
+vi.mock("$app/paths", async importOriginal => ({
+	...await importOriginal(),
+	get base () { return "/some-base-path"; }
+}));
+
 // Mock SvelteKit runtime module $app/navigation
 vi.mock("$app/navigation", () => ({
 	afterNavigate: () => {},