Merge pull request #172 from holochain-apps/feat/error-notices

Feat/error notices

ui/package.json

@@ -23,6 +23,7 @@
     "@tauri-apps/plugin-shell": "^2.0.0",
     "bigger-picture": "^1.1.17",
     "p-retry": "^6.2.0",
+    "svelte-french-toast": "^1.2.0",
     "sveltekit-i18n": "^2.4.2"
   },
   "devDependencies": {

ui/src/lib/translations/en/common.json

@@ -27,5 +27,6 @@
   "welcome_text_2": "Private, encrypted and secured by keys only you control.",
   "what_is_your_name": "What is your name?",
   "need_camera_permission": "Camera permission is required to scan codes.",
-  "open_app_settings": "Open App Settings"
+  "open_app_settings": "Open App Settings",
+  "holochain_connect_error": "Error connecting to Holochain"
 }

ui/src/routes/+layout.svelte

@@ -9,6 +9,7 @@
 	import { RelayClient } from '$store/RelayClient';
 	import { RelayStore } from '$store/RelayStore';
 	import { type RoleNameCallZomeRequest } from '@holochain/client';
+	import toast, { Toaster } from 'svelte-french-toast';
 
 	import '../app.postcss';
 
@@ -32,10 +33,8 @@
 		document.documentElement.style.setProperty('--app-height', `${appHeight}px`);
   }
 
-	onMount(() => {
-		async function initHolochain() {
-			// console.log("FISH", window.__TAURI__)
-
+	async function initHolochain() {
+		try {
 			let tokenResp
 			if (adminPort) {
 				const adminWebsocket = await AdminWebsocket.connect({ url: new URL(`ws://localhost:${adminPort}`) })
@@ -73,10 +72,16 @@
 			await relayStore.initialize()
 			connected = true
 			console.log("Connected")
+		} catch(e) {
+			console.error("Failed to init holochain", e);
+			toast.error(`${$t('common.holochain_connect_error')}: ${e.message}`);
 		}
-
+	}
+	
+	onMount(() => {
+		// Launch and connect to holochain
 		initHolochain()
-
+		
 		// To change from light mode to dark mode based on system settings
 		// XXX: not using the built in skeleton autoModeWatcher() because it doesn't set modeCurrent in JS which we use
 		const mql = window.matchMedia('(prefers-color-scheme: light)');
@@ -161,6 +166,8 @@
 	{/if}
 </div>
 
+<Toaster position="bottom-end" />
+
 <style>
   /* Add this to ensure the page doesn't scroll */
   :global(body) {