wip

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';
@@ -52,8 +53,11 @@ async function start() {
     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.
+    console.log(usePlaygroundStore().isEnabled.value, ' it should be same as the state in Playground, but is it always true'); // This does not work
+    if (!usePlaygroundStore().isEnabled.value) {
+        await initHubApi();
+        syncFromHub(); // Can run parallel to Vue initialization; must be called after storage was initialized.
+    }
 
     serviceWorkerHasUpdate.then((hasUpdate) => useSettingsStore().state.updateAvailable = hasUpdate);
 

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 = {
@@ -263,6 +265,7 @@ export async function initStorage() {
                 validators: {},
             }),
         ),
+        initStoreStore(usePlaygroundStore(), StorageKeys.PLAYGROUND),
     ]);
 
     // Fetch missing exchange rates.

src/stores/Playground.ts

@@ -0,0 +1,19 @@
+import { createStore } from 'pinia';
+
+export type PlaygroundState = {
+  enabled: boolean,
+};
+
+export const usePlaygroundStore = createStore({
+    id: 'playground',
+    state: (): PlaygroundState => {
+        const enabled = window.location.pathname === '/playground';
+        console.log('playground enabled', enabled); // This works
+        return {
+            enabled,
+        };
+    },
+    getters: {
+        isEnabled: (state) => state.enabled,
+    },
+});