refactor(ui): use svelte-hot-toast instead of svelte-sonner for toasts

holochain-apps · Oct 22, 2024 · 0e4a6e8 · 0e4a6e8
1 parent 665cb0d
commit 0e4a6e8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -23,7 +23,7 @@
     "@tauri-apps/plugin-shell": "^2.0.0",
     "bigger-picture": "^1.1.17",
     "p-retry": "^6.2.0",
-    "svelte-sonner": "^0.3.28",
+    "svelte-french-toast": "^1.2.0",
     "sveltekit-i18n": "^2.4.2"
   },
   "devDependencies": {

diff --git a/ui/src/lib/translations/en/common.json b/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"
 }
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
@@ -9,7 +9,7 @@
 	import { RelayClient } from '$store/RelayClient';
 	import { RelayStore } from '$store/RelayStore';
 	import { type RoleNameCallZomeRequest } from '@holochain/client';
-  import { Toaster, toast } from 'svelte-sonner'
+	import toast, { Toaster } from 'svelte-french-toast';
 
 	import '../app.postcss';
 
@@ -74,7 +74,7 @@
 			console.log("Connected")
 		} catch(e) {
 			console.error("Failed to init holochain", e);
-			toast.error(`Failed to init holochain ${e.message}`);
+			toast.error(`${$t('common.holochain_connect_error')}: ${e.message}`);
 		}
 	}
 	
@@ -166,7 +166,7 @@
 	{/if}
 </div>
 
-<Toaster />
+<Toaster position="bottom-end" />
 
 <style>
   /* Add this to ensure the page doesn't scroll */