Wallet Demo

README.md

@@ -1,5 +1,8 @@
 # Nimiq Wallet
 
+> [!WARNING]
+> There is an Open PR: https://github.com/nimiq/wallet/pull/263 that it is out of sync already.
+
 ## Project setup
 ```
 yarn install
@@ -10,7 +13,12 @@ yarn install
 yarn serve
 ```
 
-> You will also need to run the [Nimiq Hub](https://github.com/nimiq/hub#contribute) and [Nimiq Keyguard](https://github.com/nimiq/keyguard/#development) in development, too.
+If you need to interact with a real account and data, then you will also need to run the [Nimiq Hub](https://github.com/nimiq/hub#contribute) and [Nimiq Keyguard](https://github.com/nimiq/keyguard/#development) in development, too.
+
+For demo mode with simulated accounts and transactions, use:
+```
+yarn serve:demo
+```
 
 ### Compiles and minifies for production
 ```

package.json

@@ -6,7 +6,10 @@
   "packageManager": "yarn@1.22.22",
   "scripts": {
     "serve": "yarn pre && yarn vue-cli-service serve --port 8081",
+    "serve:demo": "yarn pre && build=demo yarn vue-cli-service serve --port 8081",
     "build": "yarn pre && yarn vue-cli-service build",
+    "build:demo": "yarn pre && build=demo NODE_ENV=production yarn vue-cli-service build",
+    "build:demo-production": "yarn pre && build=demo-production NODE_ENV=production yarn vue-cli-service build",
     "lint": "vue-cli-service lint --no-fix",
     "lint:fix": "vue-cli-service lint",
     "build:bitcoinjs": "yarn --silent browserify bitcoinjs-parts.js -p common-shakeify -s BitcoinJS | yarn terser --compress --mangle --source-map --output public/bitcoin/BitcoinJS.min.js",

src/App.vue

@@ -50,7 +50,7 @@ import { nextTick } from '@/lib/nextTick';
 import Sidebar from './components/layouts/Sidebar.vue';
 import SwapNotification from './components/swap/SwapNotification.vue';
 import UpdateNotification from './components/UpdateNotification.vue';
-import router, { provideRouter } from './router';
+import router, { provideRouter, RouteName } from './router';
 import { useAccountStore } from './stores/Account';
 import { useSettingsStore } from './stores/Settings';
 import { useWindowSize } from './composables/useWindowSize';
@@ -110,7 +110,7 @@ export default defineComponent({
                 await router.push({ name: router.currentRoute.name!, query: { sidebar: 'true' } });
             } else if (currentXPosition <= transactionsBarrier && (initialXPosition) > transactionsBarrier) {
                 // Go to transactions
-                if (router.currentRoute.name === 'root') {
+                if (router.currentRoute.name === RouteName.Root) {
                     await router.push('/transactions');
                 }
             } else if (

src/components/AccountMenu.vue

@@ -28,7 +28,7 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import { Identicon, MenuDotsIcon } from '@nimiq/vue-components';
-import { useRouter } from '@/router';
+import { useRouter, RouteName } from '@/router';
 
 import LoginFileIcon from './icons/LoginFileIcon.vue';
 import LedgerIcon from './icons/LedgerIcon.vue';
@@ -56,7 +56,7 @@ export default defineComponent({
             && addressState.addressInfos[activeAccountInfo.value.addresses[0]]);
 
         function goToAccount(testForMenuOpening = true) {
-            if (testForMenuOpening && router.currentRoute.name === 'root') {
+            if (testForMenuOpening && router.currentRoute.name === RouteName.Root) {
                 openMenu();
                 return;
             }

src/components/AddressList.vue

@@ -55,7 +55,7 @@ import { useAccountStore } from '../stores/Account';
 import { useBtcAddressStore } from '../stores/BtcAddress';
 import { usePolygonAddressStore } from '../stores/PolygonAddress';
 import { CryptoCurrency } from '../lib/Constants';
-import router from '../router';
+import router, { RouteName } from '../router';
 import { useSettingsStore } from '../stores/Settings';
 import { useAccountSettingsStore } from '../stores/AccountSettings';
 import { useStakingStore } from '../stores/Staking';
@@ -142,7 +142,12 @@ export default defineComponent({
             watch(activeAddress, () => activeAddress.value && adjustBackgroundOffsetAndScale(activeAddress.value));
             /* Update the .active-box after the decimals setting is changed */
             router.afterEach((to, from) => {
-                if (from.name === 'settings' && from.query.sidebar && to.name === 'root' && activeAddress.value) {
+                if (
+                    from.name === RouteName.Settings
+                    && from.query.sidebar
+                    && to.name === RouteName.Root
+                    && activeAddress.value
+                ) {
                     nextTick(() =>
                         activeAddress.value && adjustBackgroundOffsetAndScale(activeAddress.value),
                     );

src/components/layouts/AccountOverview.vue

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

src/components/layouts/Network.vue

@@ -1,8 +1,13 @@
 <template>
     <div class="network nq-blue-bg" :class="{'no-footer': !$config.enableBitcoin && !$config.polygon.enabled }">
         <div class="menu-bar full-width flex-row">
-            <button class="reset menu-button"
-                @click="$router.push({ name: 'network', query: { sidebar: !router.currentRoute.query.sidebar } })">
+            <button
+                class="reset menu-button"
+                @click="$router.push({
+                    name: RouteName.Network,
+                    query: { sidebar: !router.currentRoute.query.sidebar },
+                })"
+            >
                 <MenuIcon/>
                 <AttentionDot v-if="updateAvailable"/>
             </button>
@@ -104,7 +109,7 @@ import MenuIcon from '../icons/MenuIcon.vue';
 import NetworkInfoModal from '../modals/NetworkInfoModal.vue';
 import AttentionDot from '../AttentionDot.vue';
 import FiatConvertedAmount from '../FiatConvertedAmount.vue';
-import router from '../../router';
+import router, { RouteName } from '../../router';
 
 const LOCALSTORAGE_KEY = 'network-info-dismissed';
 
@@ -197,6 +202,7 @@ export default defineComponent({
             btcFee,
             polygonFee,
             router,
+            RouteName,
             stablecoin,
         };
     },

src/components/layouts/Settings.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="settings flex-row">
         <div class="mobile-menu-bar flex-row">
-            <button class="reset menu-button" @click="$router.push({name: 'settings', query: {sidebar: true}})">
+            <button class="reset menu-button" @click="$router.push({name: RouteName.Settings, query: {sidebar: true}})">
                 <MenuIcon/>
             </button>
 

src/components/layouts/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sidebar padding flex-column">
-        <div v-if="isTestnet" class="testnet-notice flex-row">
+        <div v-if="isTestnet" class="environment-notice flex-row">
             <StreetconeIcon/>
             <span class="nq-label">{{ $t('PoS Testnet') }}</span>
             <div class="flex-grow"></div>
@@ -20,6 +20,26 @@
             </Tooltip>
         </div>
 
+        <div v-if="isDemoActive " class="environment-notice demo-notice flex-row">
+            <StreetconeIcon/>
+            <span class="nq-label">{{ $t('Demo mode') }}</span>
+            <div class="flex-grow"></div>
+            <Tooltip preferredPosition="bottom left"
+                :container="$parent"
+                theme="inverse"
+                :styles="{ transform: 'translate(0.5rem, 2rem)' }"
+                ref="demoTooltip"
+            >
+                <template #trigger>
+                    <InfoCircleIcon/>
+                </template>
+                <template #default>
+                    <p>{{ $t('Experience the Nimiq Wallet risk-free.' ) }}</p>
+                    <p>{{ $t('Explore and learn how it all works, safely and without real assets.') }}</p>
+                </template>
+            </Tooltip>
+        </div>
+
         <header class="logo" @click="resetState">
             <span class="nq-icon nimiq-logo"></span>
             <span class="logo-wordmark">Nimiq</span>
@@ -165,20 +185,20 @@
         <div class="flex-grow"></div>
 
         <AccountMenu
-            :class="{'active': $route.name === 'root'}"
+            :class="{'active': $route.name === RouteName.Root}"
             @click="navigateTo('/')"/>
 
         <button
             class="network reset flex-row"
-            :class="{'active': $route.name === 'network'}"
+            :class="{'active': $route.name === RouteName.Network}"
             @click="navigateTo('/network')"
         >
             <ConsensusIcon/>
             <span class="label">{{ $t('Network') }}</span>
         </button>
         <button
             class="settings reset flex-row"
-            :class="{'active': $route.name === 'settings'}"
+            :class="{'active': $route.name === RouteName.Settings}"
             @click="navigateTo('/settings')"
         >
             <GearIcon/>
@@ -193,6 +213,7 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
 import { SwapAsset } from '@nimiq/fastspot-api';
 import { GearIcon, Tooltip, InfoCircleIcon } from '@nimiq/vue-components';
 import { RouteName, useRouter } from '@/router';
+import { checkIfDemoIsActive } from '@/lib/demo';
 import AnnouncementBox from '../AnnouncementBox.vue';
 import AccountMenu from '../AccountMenu.vue';
 import PriceChart, { TimeRange } from '../PriceChart.vue';
@@ -359,8 +380,11 @@ export default defineComponent({
                 : null;
         });
 
+        const isDemoActive = checkIfDemoIsActive();
+
         return {
             CryptoCurrency,
+            RouteName,
             navigateTo,
             resetState,
             isTestnet,
@@ -378,13 +402,13 @@ export default defineComponent({
             updateAvailable,
             hideTooltips,
             openModal,
-            RouteName,
             SellProvider,
             enabledSellProviders,
             sellEnabled,
             openSellModal,
             nimSellOptions,
             activeCurrency,
+            isDemoActive,
         };
     },
     components: {
@@ -424,7 +448,7 @@ $balance-distribution-display-breakpoint: 450px;
     padding-bottom: max(var(--padding-bottom), env(safe-area-inset-bottom));
 }
 
-.testnet-notice {
+.environment-notice {
     align-items: center;
     width: calc(100% + calc(2 * var(--padding-sides)));
     margin: calc(-1 * var(--padding-top)) calc(-1 * var(--padding-sides)) var(--padding-top);