feat(wallet): enable webassembly loading

apps/wallet/build/main.build.ts

@@ -72,6 +72,13 @@ export default defineConfig(_ => {
               const folder = dirname(id);
               const isNodeModule = folder.includes('node_modules');
 
+              if (isNodeModule && folder.includes('/@dfinity/didc')) {
+                // This ensures that the didc library is not included in the main ic libs chunk,
+                // this is because the didc library includes a wasm file that is loaded at runtime and
+                // makes the first load of the application slower.
+                return `ic-didc`;
+              }
+
               if (
                 folder.includes('/src/locales') &&
                 SUPPORTED_LOCALES.some(locale => resolve(folder, `${locale}.locale.ts`) === id)

apps/wallet/build/plugins/with-ic-assets.plugin.ts

@@ -10,7 +10,7 @@ const getContentSecurityPolicy = (
 ): string => {
   const csp: Record<string, string[]> = {
     'default-src': ["'none'"],
-    'script-src': ["'self'"],
+    'script-src': ["'self'", "'wasm-unsafe-eval'"],
     'connect-src': ["'self'", 'https://icp-api.io', 'https://ic0.app', 'https://icp0.io'],
     'img-src': ["'self'", 'data:'],
     'font-src': ["'self'"],

apps/wallet/src/components/PageLayout.vue

@@ -77,17 +77,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, defineAsyncComponent, watch } from 'vue';
 import { useDisplay } from 'vuetify';
 import { VBtn, VLayout, VMain, VSnackbar } from 'vuetify/components';
 import AppSidebar from '~/components/layouts/AppSidebar.vue';
 import AppToolbar from '~/components/layouts/AppToolbar.vue';
-import OpenRequestOverlay from '~/components/requests/OpenRequestOverlay.vue';
+import StationSelector from '~/components/StationSelector.vue';
+import { appInitConfig } from '~/configs/init.config';
 import { useAppStore } from '~/stores/app.store';
 import { useSessionStore } from '~/stores/session.store';
 import SessionExpiredOverlay from './SessionExpiredOverlay.vue';
-import StationSelector from '~/components/StationSelector.vue';
-import { appInitConfig } from '~/configs/init.config';
+import ErrorDialog from './ui/ErrorDialog.vue';
 
 const app = useAppStore();
 const session = useSessionStore();
@@ -138,6 +138,13 @@ const showStationSelector = computed(
 );
 
 const showWarningBanner = ['playground', 'testing'].includes(appInitConfig.buildMode);
+
+// Ensures that the OpenRequestOverlay is only loaded when there is a request in context to be displayed
+const OpenRequestOverlay = defineAsyncComponent({
+  errorComponent: ErrorDialog,
+  loader: () => import('~/components/requests/OpenRequestOverlay.vue'),
+  delay: 200,
+});
 </script>
 
 <style lang="scss">

apps/wallet/src/components/ui/ErrorDialog.vue

@@ -0,0 +1,40 @@
+<template>
+  <VDialog v-model="open" width="600">
+    <ErrorCard :title="title" :error="error" :error-details="props.errorDetails" />
+  </VDialog>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { VDialog } from 'vuetify/components';
+import ErrorCard from './ErrorCard.vue';
+import { useI18n } from 'vue-i18n';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    title?: string;
+    error: string;
+    errorDetails?: string;
+  }>(),
+  {
+    modelValue: true,
+    title: undefined,
+    error: '',
+    errorDetails: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: boolean): void;
+}>();
+
+const open = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+});
+
+const i18n = useI18n();
+
+const title = computed(() => props.title || i18n.t('app.error_dialog_title'));
+const error = computed(() => props.error || i18n.t('app.error_dialog_message'));
+</script>

apps/wallet/src/locales/en.locale.ts

@@ -99,6 +99,8 @@ export default {
     no_matching_results: 'No matching results found for `{search}`.',
     add_new_label: 'Add new label: {label}',
     user_cancel_pending_requests: 'Cancel all pending requests from this user.',
+    error_dialog_title: 'Failed to load.',
+    error_dialog_message: 'Failed to load, please try again.',
   },
   alpha_warning: {
     version: 'This is an alpha version.',

apps/wallet/src/locales/fr.locale.ts

@@ -101,6 +101,8 @@ export default {
     no_matching_results: 'Pas de résultats correspondants trouvés pour `{search}`.',
     add_new_label: 'Ajouter une nouvelle étiquette: {label}',
     user_cancel_pending_requests: 'Annuler toutes les demandes en attente de cet usager.',
+    error_dialog_title: 'Échec de chargement.',
+    error_dialog_message: 'Échec de chargement, veuillez réessayer.',
   },
   alpha_warning: {
     version: 'Ceci est une version alpha.',

apps/wallet/src/locales/pt.locale.ts

@@ -100,6 +100,8 @@ export default {
     no_matching_results: 'Nenhum resultado encontrado para `{search}`.',
     add_new_label: 'Adicionar novo rótulo: {label}',
     user_cancel_pending_requests: 'Cancelar todos os pedidos pendentes deste usuário.',
+    error_dialog_title: 'Falha ao carregar.',
+    error_dialog_message: 'Falha ao carregar, por favor, tente novamente.',
   },
   alpha_warning: {
     version: 'Esta é uma versão alfa.',