feat(demo): enhance demo mode with exchange rate updates and inactivity detection

Author: onmax

src/main-demo.ts

@@ -5,9 +5,11 @@ import VueVirtualScroller from 'vue-virtual-scroller';
 import { setAssetPublicPath as setVueComponentsAssetPath } from '@nimiq/vue-components';
 // @ts-expect-error missing types for this package
 import VuePortal from '@linusborg/vue-simple-portal';
+import { init as initOasisApi } from '@nimiq/oasis-api';
 import { init as initFastspotApi } from '@nimiq/fastspot-api';
 
 import App from './App.vue';
+import { serviceWorkerHasUpdate } from './registerServiceWorker';
 import { launchNetwork } from './network';
 import { useAccountStore } from './stores/Account';
 import { dangerouslyInitializeDemo } from './lib/Demo';
@@ -26,6 +28,8 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import '@/scss/themes.scss';
 import { launchPolygon } from './ethers';
 import { launchElectrum } from './electrum';
+import { useInactivityDetection } from './composables/useInactivityDetection';
+import { useFiatStore } from './stores/Fiat';
 
 // Set asset path relative to the public path defined in vue.config.json,
 // see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
@@ -40,6 +44,41 @@ Vue.use(VuePortal, { name: 'Portal' });
 async function start() {
     dangerouslyInitializeDemo(router);
 
+    serviceWorkerHasUpdate.then((hasUpdate) => useSettingsStore().state.updateAvailable = hasUpdate);
+
+    // 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
+    // before queueing the next update. If the last update before page load was less than 2 minutes ago, wait the
+    // remaining time first.
+    const { timestamp: lastSuccessfulExchangeRateUpdate, updateExchangeRates } = useFiatStore();
+    const { isUserInactive } = useInactivityDetection();
+    let lastTriedExchangeRateUpdate = lastSuccessfulExchangeRateUpdate.value;
+    const TWO_MINUTES = 2 * 60 * 1000;
+    const TEN_MINUTES = 5 * TWO_MINUTES;
+    let exchangeRateUpdateTimer = -1;
+    function queueExchangeRateUpdate() {
+        const interval = isUserInactive.value ? TEN_MINUTES : TWO_MINUTES;
+        // Update lastTriedExchangeRateUpdate as there might have been other exchange rate updates in the meantime, for
+        // example on currency change.
+        lastTriedExchangeRateUpdate = Math.max(lastTriedExchangeRateUpdate, lastSuccessfulExchangeRateUpdate.value);
+        // Also set interval as upper bound to be immune to the user's system clock being wrong.
+        const remainingTime = Math.max(0, Math.min(lastTriedExchangeRateUpdate + interval - Date.now(), interval));
+        clearTimeout(exchangeRateUpdateTimer);
+        exchangeRateUpdateTimer = window.setTimeout(async () => {
+            // Silently ignore errors. If successful, this updates fiatStore.timestamp, which then also triggers price
+            // chart updates in PriceChart.vue.
+            await updateExchangeRates(/* failGracefully */ true);
+            // In contrast to lastSuccessfulExchangeRateUpdate also update lastTriedExchangeRateUpdate on failed
+            // attempts, to avoid repeated rescheduling on failure. Instead, simply skip the failed attempt and try
+            // again at the regular interval. We update the time after the update attempt, instead of before it, because
+            // exchange rates are up-to-date at the time an update successfully finishes, and get old from that point,
+            // and not from the time the update was started.
+            lastTriedExchangeRateUpdate = Date.now();
+            queueExchangeRateUpdate();
+        }, remainingTime);
+    }
+    watch(isUserInactive, queueExchangeRateUpdate); // (Re)schedule exchange rate updates at the desired interval.
+
     // Fetch language file
     const { language } = useSettingsStore();
     loadLanguage(language.value);
@@ -52,6 +91,11 @@ async function start() {
         initFastspotApi(config.fastspot.apiEndpoint, config.fastspot.apiKey);
     });
 
+    watch(() => {
+        if (!config.oasis.apiEndpoint) return;
+        initOasisApi(config.oasis.apiEndpoint);
+    });
+
     config.demo.enabled = true;
     // Make reactive config accessible in components
     Vue.prototype.$config = config;