@rainlanguage/ui-components 0.0.1-alpha.102 → 0.0.1-alpha.104

package/dist/components/detail/OrderDetail.svelte

@@ -26,6 +26,7 @@ import { useAccount } from "../../providers/wallet/useAccount";
 import {
   getOrderByHash
 } from "@rainlanguage/orderbook";
+import { useToasts } from "../../providers/toasts/useToasts";
 export let handleQuoteDebugModal = void 0;
 export const handleDebugTradeModal = void 0;
 export let colorTheme;
@@ -42,6 +43,7 @@ let codeMirrorDisabled = true;
 let codeMirrorStyles = {};
 const queryClient = useQueryClient();
 const { matchesAccount } = useAccount();
+const { errToast } = useToasts();
 $: orderDetailQuery = createQuery({
   queryKey: [orderHash, QKEY_ORDER + orderHash],
   queryFn: async () => {
@@ -57,6 +59,13 @@ const interval = setInterval(async () => {
 onDestroy(() => {
   clearInterval(interval);
 });
+const handleRefresh = async () => {
+  try {
+    await invalidateTanstackQueries(queryClient, [orderHash]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
 $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 </script>
 
@@ -86,7 +95,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 
 				<Refresh
 					testId="top-refresh"
-					on:click={() => invalidateTanstackQueries(queryClient, [orderHash])}
+					on:click={handleRefresh}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
 			</div>

package/dist/components/detail/TanstackOrderQuote.svelte

@@ -1,4 +1,5 @@
-<script generics="T">import { invalidateTanstackQueries } from "../../queries/queryClient";
+<script generics="T">import { useToasts } from "../../providers/toasts/useToasts";
+import { invalidateTanstackQueries } from "../../queries/queryClient";
 import Refresh from "../icon/Refresh.svelte";
 import EditableSpan from "../EditableSpan.svelte";
 import { getOrderQuote } from "@rainlanguage/orderbook";
@@ -22,8 +23,13 @@ export let orderbookAddress;
 export let handleQuoteDebugModal = void 0;
 let enabled = true;
 const queryClient = useQueryClient();
+const { errToast } = useToasts();
 const refreshQuotes = async () => {
-  invalidateTanstackQueries(queryClient, [id, QKEY_ORDER_QUOTE + id]);
+  try {
+    await invalidateTanstackQueries(queryClient, [id, QKEY_ORDER_QUOTE + id]);
+  } catch {
+    errToast("Failed to refresh");
+  }
 };
 $: orderQuoteQuery = createQuery({
   queryKey: [id, QKEY_ORDER_QUOTE + id],

package/dist/components/detail/VaultDetail.svelte

@@ -16,6 +16,7 @@ import { invalidateTanstackQueries } from "../../queries/queryClient";
 import { useAccount } from "../../providers/wallet/useAccount";
 import { Button } from "flowbite-svelte";
 import { ArrowDownToBracketOutline, ArrowUpFromBracketOutline } from "flowbite-svelte-icons";
+import { useToasts } from "../../providers/toasts/useToasts";
 export let id;
 export let network;
 export let lightweightChartsTheme = void 0;
@@ -27,6 +28,7 @@ export let onWithdraw;
 const subgraphUrl = $settings?.subgraphs?.[network] || "";
 const queryClient = useQueryClient();
 const { matchesAccount } = useAccount();
+const { errToast } = useToasts();
 $: vaultDetailQuery = createQuery({
   queryKey: [id, QKEY_VAULT + id],
   queryFn: async () => {
@@ -46,6 +48,13 @@ const interval = setInterval(async () => {
 onDestroy(() => {
   clearInterval(interval);
 });
+const handleRefresh = async () => {
+  try {
+    await invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
 </script>
 
 <TanstackPageContentDetail query={vaultDetailQuery} emptyMessage="Vault not found">
@@ -80,7 +89,7 @@ onDestroy(() => {
 
 			<Refresh
 				testId="top-refresh"
-				on:click={() => invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id])}
+				on:click={handleRefresh}
 				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
 			/>
 		</div>

package/dist/providers/toasts/useToasts.d.ts

@@ -12,4 +12,5 @@ export declare function useToasts(): {
     toasts: import("svelte/store").Writable<ToastProps[]>;
     addToast: (toast: ToastProps) => void;
     removeToast: (index: number) => void;
+    errToast: (message: string) => void;
 };

package/dist/providers/toasts/useToasts.js

@@ -40,9 +40,22 @@ export function useToasts() {
             return updatedToasts;
         });
     };
+    /**
+     * Adds a standardized error toast notification
+     *
+     * @param message - The error message to display
+     */
+    const errToast = (message) => {
+        addToast({
+            message,
+            type: 'error',
+            color: 'red'
+        });
+    };
     return {
         toasts,
         addToast,
-        removeToast
+        removeToast,
+        errToast
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.102",
+	"version": "0.0.1-alpha.104",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.102",
+		"@rainlanguage/orderbook": "0.0.1-alpha.104",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",