fix: demo mode improvements and router fixes

Author: onmax

src/components/layouts/AccountOverview.vue

@@ -31,7 +31,7 @@
         <div class="mobile-menu-bar flex-row">
             <button
                 class="reset menu-button"
-                @click="$router.replace({ name: RouteName.Root, query: { sidebar: 'true' } })"
+                @click="$router.push({ name: RouteName.Root, query: { sidebar: 'true' } })"
             >
                 <MenuIcon/>
                 <AttentionDot v-if="updateAvailable"/>

src/composables/useActiveMobileColumn.ts

@@ -13,7 +13,14 @@ export enum ColumnType {
 let activeMobileColumn: Ref<ColumnType> | null = null;
 
 // Adding this code at the end of the call stack so router is not undefined
-setTimeout(() => {
+const initializeRouterGuard = () => {
+    // Check if router and beforeResolve method exist (needed for demo mode initialization)
+    if (!router || typeof router.beforeResolve !== 'function') {
+        // Retry after a longer delay if router is not ready (happens in demo mode)
+        setTimeout(initializeRouterGuard, 100);
+        return;
+    }
+
     router.beforeResolve((to, from, next) => {
         if (!activeMobileColumn) {
             activeMobileColumn = ref(ColumnType.ACCOUNT);
@@ -43,7 +50,8 @@ setTimeout(() => {
 
         next();
     });
-}, 0);
+};
+setTimeout(initializeRouterGuard, 0);
 
 export function useActiveMobileColumn() {
     if (!activeMobileColumn) {

src/global.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Build-time constants defined by webpack DefinePlugin
+ * These values are replaced at build time and should not be accessed via process.env
+ */
+
+/** Whether this is a demo build */
+declare const IS_DEMO_BUILD: boolean;

src/i18n/en.po

@@ -20,9 +20,9 @@ msgstr ""
 msgid "{amount} fee"
 msgstr ""
 
-#: src/components/layouts/Network.vue:30
-#: src/components/layouts/Network.vue:50
-#: src/components/layouts/Network.vue:65
+#: src/components/layouts/Network.vue:35
+#: src/components/layouts/Network.vue:55
+#: src/components/layouts/Network.vue:70
 msgid "{amount}/tx"
 msgstr ""
 
@@ -38,7 +38,7 @@ msgstr ""
 msgid "{count} Confirmation | {count} Confirmations"
 msgstr ""
 
-#: src/components/layouts/Network.vue:28
+#: src/components/layouts/Network.vue:33
 msgid "{count} Peer | {count} Peers"
 msgstr ""
 
@@ -127,11 +127,11 @@ msgstr ""
 msgid "1"
 msgstr ""
 
-#: src/components/layouts/Network.vue:36
+#: src/components/layouts/Network.vue:41
 msgid "1-2 sec"
 msgstr ""
 
-#: src/components/layouts/Network.vue:57
+#: src/components/layouts/Network.vue:62
 msgid "10 min"
 msgstr ""
 
@@ -152,7 +152,7 @@ msgstr ""
 msgid "2-4h"
 msgstr ""
 
-#: src/components/layouts/Network.vue:72
+#: src/components/layouts/Network.vue:77
 msgid "20 sec"
 msgstr ""
 
@@ -217,8 +217,8 @@ msgstr ""
 msgid "Accounts"
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:159
-#: src/components/layouts/AccountOverview.vue:273
+#: src/components/layouts/AccountOverview.vue:162
+#: src/components/layouts/AccountOverview.vue:276
 msgid "Activate"
 msgstr ""
 
@@ -307,7 +307,7 @@ msgstr ""
 msgid "All countries"
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:281
+#: src/components/layouts/AccountOverview.vue:284
 #: src/components/LegacyAccountNotice.vue:37
 msgid "All new features are exclusive to new accounts. Upgrade now, it only takes seconds."
 msgstr ""
@@ -405,7 +405,7 @@ msgstr ""
 msgid "Awaiting swap secret"
 msgstr ""
 
-#: src/components/layouts/Network.vue:14
+#: src/components/layouts/Network.vue:19
 msgid "Back to addresses"
 msgstr ""
 
@@ -434,8 +434,8 @@ msgstr ""
 msgid "BIC works, too."
 msgstr ""
 
-#: src/components/AddressList.vue:191
-#: src/components/layouts/AccountOverview.vue:140
+#: src/components/AddressList.vue:196
+#: src/components/layouts/AccountOverview.vue:143
 #: src/components/layouts/AddressOverview.vue:125
 #: src/components/layouts/Settings.vue:119
 #: src/components/LegacyAccountNotice.vue:21
@@ -663,7 +663,7 @@ msgstr ""
 msgid "Choose an Address"
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:229
+#: src/components/layouts/AccountOverview.vue:232
 msgid "Choose Stablecoin"
 msgstr ""
 
@@ -739,7 +739,7 @@ msgstr ""
 msgid "Connected to"
 msgstr ""
 
-#: src/components/layouts/Network.vue:120
+#: src/components/layouts/Network.vue:125
 msgid "connecting"
 msgstr ""
 
@@ -1068,7 +1068,7 @@ msgstr ""
 msgid "Error:"
 msgstr ""
 
-#: src/components/layouts/Network.vue:121
+#: src/components/layouts/Network.vue:126
 msgid "established"
 msgstr ""
 
@@ -1823,7 +1823,7 @@ msgstr ""
 msgid "Partially reverted"
 msgstr ""
 
-#: src/components/layouts/Network.vue:118
+#: src/components/layouts/Network.vue:123
 msgid "paused"
 msgstr ""
 
@@ -2555,7 +2555,7 @@ msgstr ""
 msgid "Swap"
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:194
+#: src/components/layouts/AccountOverview.vue:197
 msgid "Swap BTC {arrowIcon} {ticker}"
 msgstr ""
 
@@ -2588,11 +2588,11 @@ msgstr ""
 msgid "Swap more per 30 days."
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:123
+#: src/components/layouts/AccountOverview.vue:126
 msgid "Swap NIM {arrowIcon} {ticker}"
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:87
+#: src/components/layouts/AccountOverview.vue:90
 msgid "Swap NIM {arrowIcon} BTC"
 msgstr ""
 
@@ -2637,7 +2637,7 @@ msgstr ""
 msgid "Switch validator"
 msgstr ""
 
-#: src/components/layouts/Network.vue:119
+#: src/components/layouts/Network.vue:124
 msgid "syncing"
 msgstr ""
 
@@ -2662,8 +2662,8 @@ msgstr ""
 msgid "TEN31 Verification"
 msgstr ""
 
-#: src/components/AddressList.vue:210
-#: src/components/layouts/AccountOverview.vue:221
+#: src/components/AddressList.vue:215
+#: src/components/layouts/AccountOverview.vue:224
 #: src/components/layouts/AddressOverview.vue:131
 #: src/components/swap/SwapBalanceBar.vue:29
 #: src/components/swap/SwapBalanceBar.vue:55
@@ -2922,8 +2922,8 @@ msgstr ""
 msgid "To change your validator, un-stake all NIM and restart the process. Click here to {unstakeLink}."
 msgstr ""
 
-#: src/components/layouts/AccountOverview.vue:128
-#: src/components/layouts/AccountOverview.vue:199
+#: src/components/layouts/AccountOverview.vue:131
+#: src/components/layouts/AccountOverview.vue:202
 #: src/components/swap/SwapModal.vue:37
 msgid "To swap with USDC/USDT, choose a stablecoin."
 msgstr ""
@@ -3048,8 +3048,8 @@ msgstr ""
 msgid "Update validator"
 msgstr ""
 
-#: src/components/AddressList.vue:200
-#: src/components/layouts/AccountOverview.vue:218
+#: src/components/AddressList.vue:205
+#: src/components/layouts/AccountOverview.vue:221
 #: src/components/layouts/AddressOverview.vue:128
 #: src/components/swap/SwapBalanceBar.vue:24
 #: src/components/swap/SwapBalanceBar.vue:50

src/lib/Constants.ts

@@ -6,7 +6,7 @@ export { CryptoCurrency } from '@nimiq/utils';
 export const CASHLINK_ADDRESS = 'cashlink';
 export const BANK_ADDRESS = 'bank';
 
-export const ENV_MAIN = 'MainAlbatross';
+export const ENV_MAIN = 'main';
 export const ENV_TEST = 'test';
 export const ENV_DEV = 'dev';
 

src/lib/demo/DemoConstants.ts

@@ -1,58 +1,48 @@
 /* eslint-disable max-len */
 
-// Demo state type
 export type DemoState = {
     active: boolean,
 };
 
-// Demo modal types
 export const DemoModal = {
     Fallback: 'demo-fallback',
     Buy: 'demo-buy',
 } as const;
-
-// Demo addresses
 export const demoNimAddress = 'NQ57 2814 7L5B NBBD 0EU7 EL71 HXP8 M7H8 MHKD';
 export const demoBtcAddress = '1XYZDemoAddress';
 export const demoPolygonAddress = '0xabc123DemoPolygonAddress';
 export const buyFromAddress = 'NQ04 JG63 HYXL H3QF PPNA 7ED7 426M 3FQE FHE5';
 
-// Initial balances
-export const nimInitialBalance = 140_418 * 1e5; // 14,041,800,000 - 14 april, 2018. 5 decimals.
-export const btcInitialBalance = 0.00025 * 1e8; // 0.00025 BTC (8 decimals)
-export const usdtInitialBalance = 514.83 * 1e6; // 5000 USDT (6 decimals)
-export const usdcInitialBalance = 357.38 * 1e6; // 3000 USDC (6 decimals)
+// Initial balance represents 14 april, 2018 (birth of Nimiq)
+export const nimInitialBalance = 140_418 * 1e5;
+export const btcInitialBalance = 0.00025 * 1e8;
+export const usdtInitialBalance = 514.83 * 1e6;
+export const usdcInitialBalance = 357.38 * 1e6;
 
-// Flow types - supporting wallet playground actions
 export type DemoFlowType = 'buy' | 'swap' | 'stake' | 'idle';
 
-// Iframe communication message types
 export type WalletPlaygroundMessage = {
     type: 'demo:ready' | 'action:open-buy-modal' | 'action:open-staking-modal' | 'action:open-swap-modal' | 'action:close-modal',
     data?: any,
 };
 
-// Demo routes mapping - including idle state
 export const demoRoutes: Record<DemoFlowType, string> = {
-    buy: '/demo-buy', // Use demo buy route to show custom modal
+    buy: '/demo-buy',
     swap: '/swap/NIM-BTC',
     stake: '/staking',
-    idle: '/', // Default route for idle state
+    idle: '/',
 };
 
-// Hub API requests to ignore
+// Ignored to prevent unnecessary Hub initialization
 export const ignoreHubRequests = [
     'addBtcAddresses',
     'on',
 ];
-
-// Demo CSS styles
 export const demoCSS = `
 .transaction-list .month-label > :where(.fetching, .failed-to-fetch) {
     display: none;
 }
 
-/* Hide address */
 .active-address .meta .copyable {
     display: none !important;
 }
@@ -73,15 +63,14 @@ export const demoCSS = `
     display: none;
 }
 
-/* Demo address tooltip styling */
 .tooltip.demo-tooltip {
     width: max-content;
     background: var(--nimiq-orange-bg);
     margin-left: -7rem;
 }
 
 .tooltip.demo-tooltip::after {
-    background: #fc750c; /* Match the red theme for the demo warning */
+    background: #fc750c;
 }
 
 .demo-highlight-badge {
@@ -136,13 +125,10 @@ export const demoCSS = `
     background: #dedee2 !important;
 }
 
-/* Hide links and addresses to block explorer in the swap animation */
 .swap-animation :where(.short-address, .blue-link.nq-link) {
     display: none !important;
 }
 `;
-
-// Bank SVG icon
 export const bankSvg = `<svg class="bank-icon" width="48" height="48" viewBox="0 0 66 66" 
         fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M65.012 40.982c-4.408 17.682-22.315 28.438-39.999 24.03C7.339 60.605-3.422 42.698.989 
@@ -158,13 +144,9 @@ export const bankSvg = `<svg class="bank-icon" width="48" height="48" viewBox="0
     </svg>`;
 
 /**
- * Checks if the demo mode should be active.
- * Demo mode is only activated through build commands:
- * - yarn serve:demo
- * - yarn build:demo
- * - yarn build:demo-production
+ * Demo mode is only activated through build commands (yarn serve:demo, yarn build:demo).
  * This ensures demo builds are separate deployments with no runtime activation.
  */
 export function checkIfDemoIsActive(): boolean {
-    return !!(process.env as any).IS_DEMO_BUILD;
+    return IS_DEMO_BUILD; // Replaced at build time by webpack DefinePlugin
 }

src/lib/demo/DemoHubApi.ts

@@ -54,7 +54,7 @@ interface SetupSwapArgs {
 }
 
 /**
- * Replacement of the Hub API class to capture and redirect calls to our demo modals instead.
+ * Mock Hub API that redirects calls to demo modals instead of real Hub.
  */
 export class DemoHubApi extends HubApi {
     static create(): DemoHubApi {