|
| 1 | +import Vue from 'vue'; |
| 2 | +import VueCompositionApi, { watch } from '@vue/composition-api'; |
| 3 | +// @ts-expect-error Could not find a declaration file for module 'vue-virtual-scroller'. |
| 4 | +import VueVirtualScroller from 'vue-virtual-scroller'; |
| 5 | +import { setAssetPublicPath as setVueComponentsAssetPath } from '@nimiq/vue-components'; |
| 6 | +import { init as initFastspotApi } from '@nimiq/fastspot-api'; |
| 7 | +// @ts-expect-error missing types for this package |
| 8 | +import VuePortal from '@linusborg/vue-simple-portal'; |
| 9 | + |
| 10 | +import App from './App.vue'; |
| 11 | +import { dangerouslyInitializeDemo } from './lib/Demo'; |
| 12 | +import { useAccountStore } from './stores/Account'; |
| 13 | +import { useFiatStore } from './stores/Fiat'; |
| 14 | +import { useSettingsStore } from './stores/Settings'; |
| 15 | +import router from './router'; |
| 16 | +import { i18n, loadLanguage } from './i18n/i18n-setup'; |
| 17 | +import { CryptoCurrency } from './lib/Constants'; |
| 18 | +import { useConfig } from './composables/useConfig'; |
| 19 | +import { initPwa } from './composables/usePwaInstallPrompt'; |
| 20 | +import { useInactivityDetection } from './composables/useInactivityDetection'; |
| 21 | + |
| 22 | +// Side-effects |
| 23 | +import './lib/AddressBook'; |
| 24 | + |
| 25 | +import '@nimiq/style/nimiq-style.min.css'; |
| 26 | +import '@nimiq/vue-components/dist/NimiqVueComponents.css'; |
| 27 | +import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; |
| 28 | +import '@/scss/themes.scss'; |
| 29 | + |
| 30 | +// Set asset path relative to the public path defined in vue.config.json, |
| 31 | +// see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code |
| 32 | +setVueComponentsAssetPath(`${process.env.BASE_URL}js/`, `${process.env.BASE_URL}img/`); |
| 33 | + |
| 34 | +Vue.config.productionTip = false; |
| 35 | + |
| 36 | +Vue.use(VueCompositionApi); |
| 37 | +Vue.use(VueVirtualScroller); |
| 38 | +Vue.use(VuePortal, { name: 'Portal' }); |
| 39 | + |
| 40 | +async function startDemo() { |
| 41 | + // eslint-disable-next-line no-console |
| 42 | + console.warn('[Demo] Starting Nimiq Wallet in demo mode...'); |
| 43 | + |
| 44 | + initPwa(); // Must be called as soon as possible to catch early browser events related to PWA |
| 45 | + |
| 46 | + // Initialize demo environment - this replaces the normal storage/hub initialization |
| 47 | + dangerouslyInitializeDemo(router); |
| 48 | + |
| 49 | + // Update exchange rates every 2 minutes or every 10 minutes, depending on whether the Wallet is currently actively |
| 50 | + // used. If an update takes longer than that time due to a provider's rate limit, wait until the update succeeds |
| 51 | + // before queueing the next update. If the last update before page load was less than 2 minutes ago, wait the |
| 52 | + // remaining time first. |
| 53 | + const { timestamp: lastSuccessfulExchangeRateUpdate, updateExchangeRates } = useFiatStore(); |
| 54 | + const { isUserInactive } = useInactivityDetection(); |
| 55 | + let lastTriedExchangeRateUpdate = lastSuccessfulExchangeRateUpdate.value; |
| 56 | + const TWO_MINUTES = 2 * 60 * 1000; |
| 57 | + const TEN_MINUTES = 5 * TWO_MINUTES; |
| 58 | + let exchangeRateUpdateTimer = -1; |
| 59 | + function queueExchangeRateUpdate() { |
| 60 | + const interval = isUserInactive.value ? TEN_MINUTES : TWO_MINUTES; |
| 61 | + // Update lastTriedExchangeRateUpdate as there might have been other exchange rate updates in the meantime, for |
| 62 | + // example on currency change. |
| 63 | + lastTriedExchangeRateUpdate = Math.max(lastTriedExchangeRateUpdate, lastSuccessfulExchangeRateUpdate.value); |
| 64 | + // Also set interval as upper bound to be immune to the user's system clock being wrong. |
| 65 | + const remainingTime = Math.max(0, Math.min(lastTriedExchangeRateUpdate + interval - Date.now(), interval)); |
| 66 | + clearTimeout(exchangeRateUpdateTimer); |
| 67 | + exchangeRateUpdateTimer = window.setTimeout(async () => { |
| 68 | + // Silently ignore errors. If successful, this updates fiatStore.timestamp, which then also triggers price |
| 69 | + // chart updates in PriceChart.vue. |
| 70 | + await updateExchangeRates(/* failGracefully */ true); |
| 71 | + // In contrast to lastSuccessfulExchangeRateUpdate also update lastTriedExchangeRateUpdate on failed |
| 72 | + // attempts, to avoid repeated rescheduling on failure. Instead, simply skip the failed attempt and try |
| 73 | + // again at the regular interval. We update the time after the update attempt, instead of before it, because |
| 74 | + // exchange rates are up-to-date at the time an update successfully finishes, and get old from that point, |
| 75 | + // and not from the time the update was started. |
| 76 | + lastTriedExchangeRateUpdate = Date.now(); |
| 77 | + queueExchangeRateUpdate(); |
| 78 | + }, remainingTime); |
| 79 | + } |
| 80 | + watch(isUserInactive, queueExchangeRateUpdate); // (Re)schedule exchange rate updates at the desired interval. |
| 81 | + |
| 82 | + // Fetch language file |
| 83 | + const { language } = useSettingsStore(); |
| 84 | + loadLanguage(language.value); |
| 85 | + |
| 86 | + const { config } = useConfig(); |
| 87 | + |
| 88 | + // Set demo-specific document title |
| 89 | + document.title = 'Nimiq Wallet Demo'; |
| 90 | + |
| 91 | + // Initialize Fastspot API for demo |
| 92 | + watch(() => { |
| 93 | + if (!config.fastspot.apiEndpoint || !config.fastspot.apiKey) return; |
| 94 | + initFastspotApi(config.fastspot.apiEndpoint, config.fastspot.apiKey); |
| 95 | + }); |
| 96 | + |
| 97 | + // Make reactive config accessible in components |
| 98 | + Vue.prototype.$config = config; |
| 99 | + |
| 100 | + new Vue({ |
| 101 | + router, |
| 102 | + i18n, |
| 103 | + render: (h) => h(App), |
| 104 | + }).$mount('#app'); |
| 105 | + |
| 106 | + // Note: We don't launch network, electrum, or polygon connections in demo mode |
| 107 | + // as the demo uses simulated data instead of real blockchain connections |
| 108 | + |
| 109 | + // Set active currency to NIM by default for demo |
| 110 | + const { state: { activeCurrency } } = useAccountStore(); |
| 111 | + if (activeCurrency !== CryptoCurrency.NIM) { |
| 112 | + useAccountStore().setActiveCurrency(CryptoCurrency.NIM); |
| 113 | + } |
| 114 | +} |
| 115 | + |
| 116 | +startDemo(); |
| 117 | + |
| 118 | +declare module 'vue/types/vue' { |
| 119 | + interface Vue { |
| 120 | + $config: ReturnType<typeof useConfig>['config']; |
| 121 | + } |
| 122 | +} |
| 123 | + |
| 124 | +declare module '@vue/composition-api/dist/component/component' { |
| 125 | + interface SetupContext { |
| 126 | + readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }; |
| 127 | + } |
| 128 | +} |
0 commit comments