wip

src/components/layouts/AccountOverview.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="account-overview" ref="root$">
         <div
-            v-if="activeAccountInfo && activeAccountInfo.type === AccountType.BIP39 && !activeAccountInfo.fileExported"
+            v-if="
+                activeAccountInfo && activeAccountInfo.type === AccountType.BIP39
+                && !activeAccountInfo.fileExported && !isPlaygroundEnabled"
             class="backup-warning file nq-orange-bg flex-row"
         >
             <span class="alert-text">
@@ -13,7 +15,7 @@
             </button>
         </div>
         <div
-            v-else-if="activeAccountInfo && !activeAccountInfo.wordsExported"
+            v-else-if="activeAccountInfo && !activeAccountInfo.wordsExported && !isPlaygroundEnabled"
             class="backup-warning words nq-orange flex-row"
         >
             <span class="alert-text">
@@ -366,6 +368,7 @@ import { useAddressStore } from '../../stores/Address';
 import { useConfig } from '../../composables/useConfig';
 import router from '../../router';
 import { useAccountSettingsStore } from '../../stores/AccountSettings';
+import { usePlaygroundStore } from '@/stores/Playground';
 // import { useStakingStore } from '../../stores/Staking';
 // import AccountStake from '../staking/AccountStake.vue';
 
@@ -388,6 +391,7 @@ export default defineComponent({
             accountUsdtBridgedBalance,
         } = usePolygonAddressStore();
         const { stablecoin, knowsAboutUsdt } = useAccountSettingsStore();
+        const { isEnabled: isPlaygroundEnabled } = usePlaygroundStore();
         const { config } = useConfig();
 
         const isLegacyAccount = computed(() => (activeAccountInfo.value || false)
@@ -581,6 +585,7 @@ export default defineComponent({
             accountUsdcBridgedBalance,
             accountUsdcBalance,
             accountUsdtBridgedBalance,
+            isPlaygroundEnabled,
             showFullLegacyAccountNotice,
             showModalLegacyAccountNotice,
             selectBitcoin,

src/components/layouts/AddressOverview.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="address-overview"
         :class="{ 'no-accounts flex-column': activeCurrency === CryptoCurrency.NIM && !activeAddressInfo }">
+        {{ activeCurrency }}
+        || {{activeAddressInfo}} ||
         <HeroIcon class="svg-id-fix" />
         <template
             v-if="activeAddressInfo

src/hub.ts

@@ -38,6 +38,7 @@ import { WELCOME_MODAL_LOCALSTORAGE_KEY, WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY
 import { usePwaInstallPrompt } from './composables/usePwaInstallPrompt';
 import type { SetupSwapWithKycResult, SWAP_KYC_HANDLER_STORAGE_KEY } from './swap-kyc-handler'; // avoid bundling
 import type { RelayServerInfo } from './lib/usdc/OpenGSN';
+import { usePlaygroundStore } from './stores/Playground';
 
 export function shouldUseRedirects(ignoreSettings = false): boolean {
     if (!ignoreSettings) {

src/main.ts

@@ -17,6 +17,7 @@ import { launchElectrum } from './electrum';
 import { launchPolygon } from './ethers';
 import { useAccountStore } from './stores/Account';
 import { useFiatStore } from './stores/Fiat';
+import { usePlaygroundStore } from './stores/Playground';
 import { useSettingsStore } from './stores/Settings';
 import router from './router';
 import { i18n, loadLanguage } from './i18n/i18n-setup';
@@ -48,14 +49,21 @@ Vue.use(VuePortal, { name: 'Portal' });
 
 async function start() {
     initPwa(); // Must be called as soon as possible to catch early browser events related to PWA
-    await initStorage(); // Must be awaited before starting Vue
-    initTrials(); // Must be called after storage was initialized, can affect Config
-    // Must run after VueCompositionApi has been enabled and after storage was initialized. Could potentially run in
-    // background and in parallel to syncFromHub, but RedirectRpcClient.init does not actually run async code anyways.
-    await initHubApi();
-    syncFromHub(); // Can run parallel to Vue initialization; must be called after storage was initialized.
-
-    serviceWorkerHasUpdate.then((hasUpdate) => useSettingsStore().state.updateAvailable = hasUpdate);
+    const { isEnabled: isPlaygroundEnabled } = usePlaygroundStore();
+
+    if (!isPlaygroundEnabled.value) {
+        await initStorage(); // Must be awaited before starting Vue
+        initTrials(); // Must be called after storage was initialized, can affect Config
+        // Must run after VueCompositionApi has been enabled and after storage was initialized. Could potentially run in
+        // background and in parallel to syncFromHub, but RedirectRpcClient.init does not actually run async code
+        // anyways.
+        await initHubApi();
+        syncFromHub(); // Can run parallel to Vue initialization; must be called after storage was initialized.
+
+        serviceWorkerHasUpdate.then((hasUpdate) => useSettingsStore().state.updateAvailable = hasUpdate);
+    } else {
+        usePlaygroundStore().setDummyAccount();
+    }
 
     // Update exchange rates every 2 minutes or every 10 minutes, depending on whether the Wallet is currently actively
     // used. If an update takes longer than that time due to a provider's rate limit, wait until the update succeeds
@@ -94,28 +102,34 @@ async function start() {
     const { language } = useSettingsStore();
     loadLanguage(language.value);
 
-    startSentry();
+    if (!isPlaygroundEnabled.value) {
+        startSentry();
+    }
 
     const { config } = useConfig();
 
-    if (config.environment !== ENV_MAIN) {
+    if (isPlaygroundEnabled.value) {
+        document.title = 'Nimiq Wallet Playground';
+    } else if (config.environment !== ENV_MAIN) {
         document.title = 'Nimiq Testnet Wallet';
     }
 
-    watch(() => {
-        if (!config.fastspot.apiEndpoint || !config.fastspot.apiKey) return;
-        initFastspotApi(config.fastspot.apiEndpoint, config.fastspot.apiKey);
-    });
-
-    watch(() => {
-        if (!config.oasis.apiEndpoint) return;
-        initOasisApi(config.oasis.apiEndpoint);
-    });
-
-    watch(() => {
-        if (!config.ten31Pass.enabled) return;
-        initKycConnection();
-    });
+    if (!isPlaygroundEnabled.value) {
+        watch(() => {
+            if (!config.fastspot.apiEndpoint || !config.fastspot.apiKey) return;
+            initFastspotApi(config.fastspot.apiEndpoint, config.fastspot.apiKey);
+        });
+
+        watch(() => {
+            if (!config.oasis.apiEndpoint) return;
+            initOasisApi(config.oasis.apiEndpoint);
+        });
+
+        watch(() => {
+            if (!config.ten31Pass.enabled) return;
+            initKycConnection();
+        });
+    }
 
     // Make reactive config accessible in components
     Vue.prototype.$config = config;

src/network.ts

@@ -299,7 +299,8 @@ export async function launchNetwork() {
         const url = `${config.staking.validatorsApiBase}${config.staking.validatorsPath}?only-known=true`;
         const apiValidators = await retry(() => fetch(url))
             .then((res) => res.json()).catch(() => []) as ApiValidator[];
-        stakingStore.setApiValidators(apiValidators);
+        console.log({ apiValidators })
+        stakingStore.setApiValidators([]);
     })();
 
     function transactionListener(plain: PlainTransactionDetails) {

src/storage.ts

@@ -25,6 +25,7 @@ import { useKycStore } from './stores/Kyc';
 import { useStakingStore } from './stores/Staking';
 import { useGeoIp } from './composables/useGeoIp';
 import { reportToSentry } from './lib/Sentry';
+import { usePlaygroundStore } from './stores/Playground';
 
 const StorageKeys = {
     TRANSACTIONS: 'wallet_transactions_v01',
@@ -44,6 +45,7 @@ const StorageKeys = {
     BANK: 'wallet_bank_v01',
     KYC: 'wallet_kyc_v00',
     STAKING: 'wallet_staking_v00',
+    PLAYGROUND: 'wallet_playground_v00',
 };
 
 const PersistentStorageKeys = {

src/stores/Playground.ts

@@ -0,0 +1,62 @@
+import { createStore } from 'pinia';
+import { AccountType, useAccountStore } from './Account';
+import { AddressType, useAddressStore } from './Address';
+import { set } from 'vue/types/umd';
+import { CryptoCurrency } from '@nimiq/utils';
+
+export type PlaygroundState = {
+    enabled: boolean,
+};
+
+export const usePlaygroundStore = createStore({
+    id: 'playground',
+    state: (): PlaygroundState => {
+        const enabled = window.location.search.includes('?playground');
+        return {
+            enabled,
+        };
+    },
+    getters: {
+        isEnabled: (state) => state.enabled,
+    },
+    actions: {
+        setDummyAccount() {
+            // eslint-disable-next-line no-console
+            console.warn('[Playground] Setting dummy account');
+
+            const { setAddressInfos, activeAddressInfo, activeAddress } = useAddressStore();
+            setAddressInfos([{
+                label: 'Playground',
+                type: AddressType.BASIC,
+                address: 'NQ64M4BPYY1BHL994G0FPKGA128NVK4EHFSD',
+                // address: 'NQ00 1111 2222 3333 4444 5555 6666 7777 8888',
+                balance: 100_000_000,
+            }]);
+            console.log('[Playground]', activeAddressInfo.value, activeAddress.value)
+
+            setTimeout(() => {
+                const { activeAddressInfo: _activeAddressInfo, activeAddress: _activeAddress } = useAddressStore();
+                console.log('[Playground]', activeAddressInfo.value, activeAddress.value, _activeAddressInfo.value, _activeAddress.value)
+            }, 100)
+
+            const { addAccountInfo } = useAccountStore();
+            addAccountInfo({
+                id: 'dummy-account-1',
+                type: AccountType.BIP39,
+                label: 'Dummy Account 1',
+                fileExported: false,
+                wordsExported: false,
+                addresses: [],
+                btcAddresses: {
+                    internal: [],
+                    external: [],
+                },
+                polygonAddresses: [],
+                uid: 'dummy-account-1',
+            });
+
+            const { setActiveCurrency } = useAccountStore();
+            setActiveCurrency(CryptoCurrency.NIM);
+        },
+    },
+});