@rainlanguage/ui-components 0.0.1-alpha.93 → 0.0.1-alpha.95

package/dist/components/ToastDetail.svelte

@@ -0,0 +1,16 @@
+<script>import { Toast } from "flowbite-svelte";
+import { slide } from "svelte/transition";
+import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
+export let toast;
+</script>
+
+<Toast dismissable={true} transition={slide} color={toast.color} class="mb-2">
+	<svelte:fragment slot="icon">
+		{#if toast.type === 'success'}
+			<CheckCircleSolid class="h-5 w-5" />
+		{:else if toast.type === 'error'}
+			<CloseCircleSolid class="h-5 w-5" />
+		{/if}
+	</svelte:fragment>
+	{toast.message}
+</Toast>

package/dist/components/ToastDetail.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { ToastProps } from '../types/toast';
+declare const __propDef: {
+    props: {
+        toast: ToastProps;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ToastDetailProps = typeof __propDef.props;
+export type ToastDetailEvents = typeof __propDef.events;
+export type ToastDetailSlots = typeof __propDef.slots;
+export default class ToastDetail extends SvelteComponent<ToastDetailProps, ToastDetailEvents, ToastDetailSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -70,6 +70,7 @@ export { TransactionStatus, TransactionErrorMessage, type TransactionState, type
 export type { DeploymentArgs, DepositOrWithdrawArgs, OrderRemoveArgs } from './types/transaction';
 export type { DepositOrWithdrawModalProps, OrderRemoveModalProps, QuoteDebugModalHandler, DebugTradeModalHandler, DeployModalProps, DisclaimerModalProps } from './types/modal';
 export type { ValidStrategyDetail, InvalidStrategyDetail } from './types/strategy';
+export type { ToastProps } from './types/toast';
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';
 export { formatTimestampSecondsAsLocal, timestampSecondsToUTCTimestamp, promiseTimeout } from './services/time';
 export { bigintStringToHex, HEX_INPUT_REGEX } from './utils/hex';
@@ -88,9 +89,11 @@ export { default as logoDark } from './assets/logo-dark.svg';
 export { default as GuiProvider } from './providers/GuiProvider.svelte';
 export { default as WalletProvider } from './providers/wallet/WalletProvider.svelte';
 export { default as RegistryProvider } from './providers/registry/RegistryProvider.svelte';
+export { default as ToastProvider } from './providers/toasts/ToastProvider.svelte';
 export { useGui } from './hooks/useGui';
 export { useAccount } from './providers/wallet/useAccount';
 export { useRegistry } from './providers/registry/useRegistry';
+export { useToasts } from './providers/toasts/useToasts';
 export { RegistryManager } from './providers/registry/RegistryManager';
 export { mockPageStore } from './__mocks__/stores';
 export { mockConfigSource } from './__mocks__/settings';

package/dist/index.js

@@ -89,10 +89,12 @@ export { default as logoDark } from './assets/logo-dark.svg';
 export { default as GuiProvider } from './providers/GuiProvider.svelte';
 export { default as WalletProvider } from './providers/wallet/WalletProvider.svelte';
 export { default as RegistryProvider } from './providers/registry/RegistryProvider.svelte';
+export { default as ToastProvider } from './providers/toasts/ToastProvider.svelte';
 // Hooks
 export { useGui } from './hooks/useGui';
 export { useAccount } from './providers/wallet/useAccount';
 export { useRegistry } from './providers/registry/useRegistry';
+export { useToasts } from './providers/toasts/useToasts';
 // Classes
 export { RegistryManager } from './providers/registry/RegistryManager';
 // Mocks

package/dist/providers/toasts/ToastProvider.svelte

@@ -0,0 +1,17 @@
+<script>import ToastDetail from "../../components/ToastDetail.svelte";
+import { setToastsContext } from "./context";
+import { writable } from "svelte/store";
+import { fade } from "svelte/transition";
+export let toasts = writable([]);
+setToastsContext(toasts);
+</script>
+
+<div class="fixed right-4 top-4 z-[100]">
+	{#each $toasts as toast}
+		<div out:fade data-testid="toast">
+			<ToastDetail {toast} />
+		</div>
+	{/each}
+</div>
+
+<slot />

package/dist/providers/toasts/ToastProvider.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from 'svelte/store';
+import type { ToastProps } from '../../types/toast';
+declare const __propDef: {
+    props: {
+        toasts?: Writable<ToastProps[]>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ToastProviderProps = typeof __propDef.props;
+export type ToastProviderEvents = typeof __propDef.events;
+export type ToastProviderSlots = typeof __propDef.slots;
+export default class ToastProvider extends SvelteComponent<ToastProviderProps, ToastProviderEvents, ToastProviderSlots> {
+}
+export {};

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

@@ -0,0 +1,11 @@
+import { type Writable } from 'svelte/store';
+import type { ToastProps } from '../../types/toast';
+export declare const TOASTS_KEY = "rain:ui-components:toasts";
+/**
+ * Retrieves the toasts store from Svelte's context
+ */
+export declare function getToastsContext(): Writable<ToastProps[]>;
+/**
+ * Sets the toasts store in Svelte's context
+ */
+export declare function setToastsContext(toasts: Writable<ToastProps[]>): void;

package/dist/providers/toasts/context.js

@@ -0,0 +1,19 @@
+import { getContext, setContext } from 'svelte';
+import {} from 'svelte/store';
+export const TOASTS_KEY = 'rain:ui-components:toasts';
+/**
+ * Retrieves the toasts store from Svelte's context
+ */
+export function getToastsContext() {
+    const toasts = getContext(TOASTS_KEY);
+    if (!toasts) {
+        throw new Error('No toasts context found. Did you forget to wrap your component with ToastProvider?');
+    }
+    return toasts;
+}
+/**
+ * Sets the toasts store in Svelte's context
+ */
+export function setToastsContext(toasts) {
+    setContext(TOASTS_KEY, toasts);
+}

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

@@ -0,0 +1,12 @@
+import type { ToastProps } from '../../types/toast';
+/**
+ * Hook for managing toast notifications in the application.
+ * Provides functionality to add, remove, and access toast notifications.
+ *
+ * @returns An object containing the toast store and methods to manipulate toasts
+ */
+export declare function useToasts(): {
+    toasts: import("svelte/store").Writable<ToastProps[]>;
+    addToast: (toast: ToastProps) => void;
+    removeToast: (index: number) => void;
+};

package/dist/providers/toasts/useToasts.js

@@ -0,0 +1,54 @@
+import { getToastsContext } from './context';
+import { get } from 'svelte/store';
+import { v4 as uuidv4 } from 'uuid';
+/**
+ * Hook for managing toast notifications in the application.
+ * Provides functionality to add, remove, and access toast notifications.
+ *
+ * @returns An object containing the toast store and methods to manipulate toasts
+ */
+export function useToasts() {
+    const toasts = getToastsContext();
+    /**
+     * Removes a toast notification by its index
+     *
+     * @param index - The index of the toast to remove
+     */
+    const removeToast = (index) => {
+        toasts.update((toasts) => {
+            if (index < 0 || index >= toasts.length) {
+                return toasts;
+            }
+            return toasts.filter((_, i) => i !== index);
+        });
+    };
+    /**
+     * Adds a new toast notification and automatically removes it after 3 seconds
+     *
+     * @param toast - The toast properties (message and type)
+     */
+    const addToast = (toast) => {
+        const newToast = { ...toast, id: uuidv4() };
+        let addedToastIndex = -1;
+        toasts.update((toasts) => {
+            const updatedToasts = [...toasts, newToast];
+            addedToastIndex = updatedToasts.length - 1;
+            return updatedToasts;
+        });
+        const toastId = newToast.id;
+        if (addedToastIndex > -1) {
+            setTimeout(() => {
+                const currentToasts = get(toasts);
+                const currentIndex = currentToasts.findIndex((t) => t.id === toastId);
+                if (currentIndex > -1) {
+                    removeToast(currentIndex);
+                }
+            }, 3000);
+        }
+    };
+    return {
+        toasts,
+        addToast,
+        removeToast
+    };
+}

package/dist/services/time.js

@@ -1,8 +1,10 @@
 import dayjs from 'dayjs';
 import bigIntSupport from 'dayjs/plugin/bigIntSupport';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import utc from 'dayjs/plugin/utc';
 dayjs.extend(bigIntSupport);
 dayjs.extend(localizedFormat);
+dayjs.extend(utc);
 export const TIME_DELTA_24_HOURS = 60 * 60 * 24;
 export const TIME_DELTA_48_HOURS = TIME_DELTA_24_HOURS * 2;
 export const TIME_DELTA_7_DAYS = TIME_DELTA_24_HOURS * 7;
@@ -12,7 +14,9 @@ export function dateTimestamp(date) {
     return Math.floor(date.getTime() / 1000);
 }
 export function formatTimestampSecondsAsLocal(timestampSeconds) {
-    return dayjs(timestampSeconds * BigInt('1000')).format('L LT');
+    return dayjs(timestampSeconds * BigInt('1000'))
+        .utc()
+        .format('L LT');
 }
 export function timestampSecondsToUTCTimestamp(timestampSeconds) {
     return dayjs(timestampSeconds * BigInt('1000')).unix();
@@ -38,7 +42,7 @@ if (import.meta.vitest) {
     describe('Date and timestamp utilities', () => {
         describe('formatTimestampSecondsAsLocal', () => {
             it('converts timestamp to local format', () => {
-                const result = formatTimestampSecondsAsLocal(BigInt('1672531200')); // Jan 1, 2023 01:00 AM
+                const result = formatTimestampSecondsAsLocal(BigInt('1672531200')); // Jan 1, 2023 12:00 AM
                 expect(result).toBe('01/01/2023 12:00 AM');
             });
         });

package/dist/types/toast.d.ts

@@ -0,0 +1,6 @@
+export interface ToastProps {
+    message: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    color: 'green' | 'red' | 'yellow' | 'blue';
+    id?: string;
+}

package/dist/types/toast.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.93",
+	"version": "0.0.1-alpha.95",
 	"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.93",
+		"@rainlanguage/orderbook": "0.0.1-alpha.95",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",