@rainlanguage/ui-components 0.0.1-alpha.13 → 0.0.1-alpha.131

package/dist/components/CodeMirrorDotrain.svelte

@@ -6,6 +6,7 @@ export let disabled = false;
 export let styles = {};
 export let rainlangExtension;
 export let codeMirrorTheme;
+export let onTextChange;
 </script>
 
 <div data-testid="codemirror-dotrain">
@@ -22,6 +23,9 @@ export let codeMirrorTheme;
 			},
 			...styles
 		}}
+		on:change={(e) => {
+			onTextChange(e.detail);
+		}}
 		on:ready={(e) => {
 			openLintPanel(e.detail);
 		}}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         styles?: {};
         rainlangExtension: RawRainlangExtension;
         codeMirrorTheme: any;
+        onTextChange: (text: string) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorRainlang.svelte

@@ -1,4 +1,4 @@
-<script>import { extendOrder } from "@rainlanguage/orderbook/js_api";
+<script>import { extendOrder } from "@rainlanguage/orderbook";
 import CodeMirror from "svelte-codemirror-editor";
 import { RainlangLR } from "codemirror-rainlang";
 export let order = void 0;
@@ -6,12 +6,16 @@ export let rainlangText = void 0;
 export let codeMirrorTheme;
 export let codeMirrorDisabled = true;
 export let codeMirrorStyles = {};
-$: extendedOrder = order ? extendOrder(order) : void 0;
+let result;
+let extendedOrder;
+$: result = order ? extendOrder(order) : void 0;
+$: extendedOrder = result && !result.error ? result.value : void 0;
+$: extendOrderError = result && result.error ? result.error : void 0;
 </script>
 
 {#if rainlangText || extendedOrder?.rainlang}
 	<CodeMirror
-		value={rainlangText || extendedOrder.rainlang}
+		value={rainlangText || extendedOrder?.rainlang}
 		extensions={[RainlangLR]}
 		theme={codeMirrorTheme}
 		readonly={codeMirrorDisabled}
@@ -24,6 +28,10 @@ $: extendedOrder = order ? extendOrder(order) : void 0;
 			...codeMirrorStyles
 		}}
 	/>
+{:else if extendOrderError}
+	<div class="w-full tracking-tight text-red-600 dark:text-red-400" data-testid="rainlang-error">
+		{extendOrderError.readableMsg}
+	</div>
 {:else if !extendedOrder?.rainlang && !rainlangText}
 	<div
 		class="w-full tracking-tight text-gray-900 dark:text-white"

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrder } from '@rainlanguage/orderbook/js_api';
+import type { SgOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         order?: SgOrder | undefined;

package/dist/components/EditableSpan.svelte

@@ -1,15 +1,10 @@
 <script>import { createEventDispatcher } from "svelte";
+import { PenSolid } from "flowbite-svelte-icons";
 export let displayValue;
-let focussed = false;
 let textContent;
 let editableSpan;
 let dispatch = createEventDispatcher();
-const inputFocussed = () => {
-  focussed = true;
-  dispatch("focus");
-};
 const inputBlurred = () => {
-  focussed = false;
   displayValue = textContent;
   dispatch("blur", { value: textContent });
 };
@@ -20,27 +15,21 @@ const handleKeyDown = (event) => {
 };
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	data-testid="editableSpanWrapper"
-	on:click={inputFocussed}
-	class="flex gap-x-1 border-b-2 border-dotted text-sm text-gray-400 dark:text-gray-400"
+	class="flex items-center gap-x-1 border-b-2 border-dotted text-sm text-gray-400 dark:text-gray-400"
 >
+	<PenSolid class="h-3 w-3 cursor-pointer" />
 	<span>Block:</span>
 	<div class="relative">
 		<span
 			data-testid="editableSpan"
-			class="absolute"
-			class:opacity-0={!focussed}
 			bind:this={editableSpan}
 			bind:textContent
 			contenteditable="true"
 			on:keydown={handleKeyDown}
 			on:blur={inputBlurred}>{displayValue}</span
 		>
-		<span data-testid="displayElement" class="pointer-events-none" class:opacity-0={focussed}
-			>{displayValue}</span
-		>
 	</div>
 </div>

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

@@ -4,7 +4,6 @@ declare const __propDef: {
         displayValue: string;
     };
     events: {
-        focus: CustomEvent<any>;
         blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/Hash.svelte

@@ -7,7 +7,7 @@
 })(HashType || {});
 </script>
 
-<script>import { Tooltip } from "flowbite-svelte";
+<script>import Tooltip from "./Tooltip.svelte";
 import {
   WalletOutline,
   FingerprintOutline,
@@ -60,7 +60,7 @@ function copy(e) {
 {#if showCopiedMessage}
 	<div
 		out:fade
-		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white shadow"
+		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white"
 		style="top: {cursorY + 10}px; left: {cursorX + 10}px"
 	>
 		Copied to clipboard
@@ -68,7 +68,7 @@ function copy(e) {
 {/if}
 
 {#if shorten}
-	<Tooltip triggeredBy={`#${id}`} class="z-20 whitespace-normal">
+	<Tooltip triggeredBy={`#${id}`}>
 		<div class="flex items-center justify-start space-x-2">
 			{#if type === HashType.Wallet}
 				<WalletOutline size="sm" />

package/dist/components/License.svelte

@@ -2,19 +2,20 @@
 	import { Heading, Text, BlockQuote } from '@rainlanguage/ui-components';
 	import Markdown from 'svelte-markdown';
 	import { onMount } from 'svelte';
+	import { LICENSE_URL } from '../consts';
 
 	let source = '';
 
 	onMount(async () => {
 		try {
-			const response = await fetch(
-				'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md'
-			);
+			const response = await fetch(LICENSE_URL);
 			if (response.ok) {
 				source = await response.text();
+			} else {
+				source = `Failed to fetch license: HTTP ${response.status}`;
 			}
 		} catch {
-			source = '';
+			source = 'Failed to fetch license.';
 		}
 	});
 </script>

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,41 +1,40 @@
-<script generics="T">import { isEmpty } from "lodash";
-import { Alert, Tooltip } from "flowbite-svelte";
+<script generics="T">import { page } from "$app/stores";
+import { isEmpty } from "lodash";
+import { Alert } from "flowbite-svelte";
+import Tooltip from "./Tooltip.svelte";
 import DropdownActiveSubgraphs from "./dropdown/DropdownActiveSubgraphs.svelte";
-import DropdownOrderStatus from "./dropdown/DropdownOrderStatus.svelte";
+import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
 import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
+import { useAccount } from "../providers/wallet/useAccount";
 export let settings;
 export let accounts;
 export let hideZeroBalanceVaults;
 export let activeAccountsItems;
 export let showMyItemsOnly;
 export let activeSubgraphs;
-export let activeOrderStatus;
+export let showInactiveOrders;
 export let orderHash;
-export let isVaultsPage;
-export let isOrdersPage;
-export let signerAddress;
+$: isVaultsPage = $page.url.pathname === "/vaults";
+$: isOrdersPage = $page.url.pathname === "/orders";
+const { account } = useAccount();
 </script>
 
 <div
 	class="grid w-full items-center gap-4 md:flex md:justify-end lg:min-w-[600px]"
 	style="grid-template-columns: repeat(2, minmax(0, 1fr));"
 >
-	{#if isEmpty($settings?.networks)}
+	{#if isEmpty($settings.orderbook.networks)}
 		<Alert color="gray" data-testid="no-networks-alert" class="w-full">
 			No networks added to <a class="underline" href="/settings">settings</a>
 		</Alert>
 	{:else}
 		{#if $accounts && !Object.values($accounts).length}
 			<div class="mt-4 w-full lg:w-auto" data-testid="my-items-only">
-				<CheckboxMyItemsOnly
-					context={isVaultsPage ? 'vaults' : 'orders'}
-					{showMyItemsOnly}
-					{signerAddress}
-				/>
-				{#if !$signerAddress}
+				<CheckboxMyItemsOnly context={isVaultsPage ? 'vaults' : 'orders'} {showMyItemsOnly} />
+				{#if !$account}
 					<Tooltip>Connect a wallet to filter by {isVaultsPage ? 'vault' : 'order'} owner</Tooltip>
 				{/if}
 			</div>
@@ -48,7 +47,9 @@ export let signerAddress;
 
 		{#if isOrdersPage}
 			<InputOrderHash {orderHash} />
-			<DropdownOrderStatus {activeOrderStatus} />
+			<div class="mt-4">
+				<CheckboxActiveOrders {showInactiveOrders} />
+			</div>
 		{/if}
 		{#if $accounts && Object.values($accounts).length > 0}
 			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />

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

@@ -1,19 +1,15 @@
 import { SvelteComponent } from "svelte";
-import type { Readable, Writable } from 'svelte/store';
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+import type { AppStoresInterface } from '../types/appStores';
 declare class __sveltets_Render<T> {
     props(): {
-        settings: Writable<ConfigSource | undefined>;
-        accounts: Readable<Record<string, string>> | undefined;
-        hideZeroBalanceVaults: Writable<boolean>;
-        activeAccountsItems: Writable<Record<string, string>> | undefined;
-        showMyItemsOnly: Writable<boolean>;
-        activeSubgraphs: Writable<Record<string, string>>;
-        activeOrderStatus: Writable<boolean | undefined>;
-        orderHash: Writable<string>;
-        isVaultsPage: boolean;
-        isOrdersPage: boolean;
-        signerAddress: Writable<string | null> | undefined;
+        settings: AppStoresInterface["settings"];
+        accounts: AppStoresInterface["accounts"];
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        activeAccountsItems: AppStoresInterface["activeAccountsItems"];
+        showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
+        activeSubgraphs: AppStoresInterface["activeSubgraphs"];
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
+        orderHash: AppStoresInterface["orderHash"];
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/components/OrderOrVaultHash.svelte

@@ -1,22 +1,25 @@
 <script>import { Button } from "flowbite-svelte";
 import Hash, { HashType } from "./Hash.svelte";
+import {
+  constructHashLink,
+  isOrderOrVaultActive,
+  extractHash
+} from "../utils/constructHashLink";
 export let orderOrVault;
 export let type;
 export let network;
 export let updateActiveNetworkAndOrderbook;
-let hash;
-$: isOrder = "orderHash" in (orderOrVault || {});
-$: slug = isOrder ? orderOrVault.orderHash : orderOrVault?.id;
-$: hash = isOrder ? orderOrVault.orderHash : orderOrVault?.id || "";
-$: isActive = isOrder ? orderOrVault.active : false;
+$: hash = extractHash(orderOrVault);
+$: isActive = isOrderOrVaultActive(orderOrVault);
+$: linkPath = constructHashLink(orderOrVault, type, network);
 </script>
 
-<a href={`/${type}/${network}-${slug}`}>
+<a data-testid="order-or-vault-hash" href={linkPath}>
 	<Button
 		class="mr-1 mt-1 px-2 py-1 text-sm"
 		color={isActive ? 'green' : 'yellow'}
 		data-testid="vault-order-input"
-		data-id={slug}
+		data-id={hash}
 		on:click={() => {
 			updateActiveNetworkAndOrderbook(network);
 		}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook/js_api';
+import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         orderOrVault: SgOrder | SgVault | SgOrderAsIO;

package/dist/components/PageHeader.svelte

@@ -5,7 +5,7 @@ export let pathname;
 $: breadcrumbs = generateBreadcrumbs(pathname);
 </script>
 
-<div class="mb-4 flex w-full items-center justify-between">
+<div class="mb-4 flex w-full items-center justify-between" data-testid="page-header">
 	<Breadcrumb
 		olClass="inline-flex items-center rtl:space-x-reverse"
 		aria-label="Default breadcrumb example"

package/dist/components/TanstackAppTable.svelte

@@ -1,4 +1,4 @@
-<script generics="T">import { invalidateIdQuery } from "../queries/queryClient";
+<script generics="T">import { invalidateTanstackQueries } from "../queries/queryClient";
 import Refresh from "./icon/Refresh.svelte";
 import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
 import { createEventDispatcher } from "svelte";
@@ -21,9 +21,8 @@ export let rowHoverable = true;
 		spin={$query.isLoading || $query.isFetching}
 		on:click={async () => {
 			if (queryKey) {
-				await invalidateIdQuery(queryClient, queryKey);
+				invalidateTanstackQueries(queryClient, [queryKey]);
 			}
-			$query.refetch();
 		}}
 	/>
 </div>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 declare class __sveltets_Render<T> {
     props(): {
-        queryKey: string | undefined;
+        queryKey: string;
         query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
         emptyMessage?: string;
         rowHoverable?: boolean;

package/dist/components/ToastDetail.svelte

@@ -0,0 +1,42 @@
+<script>import { Toast } from "flowbite-svelte";
+import { slide } from "svelte/transition";
+import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
+import { useToasts } from "../providers/toasts/useToasts";
+export let toast;
+export let i;
+const { removeToast } = useToasts();
+</script>
+
+<Toast
+	on:close={() => removeToast(i)}
+	dismissable={true}
+	transition={slide}
+	color={toast.color}
+	class="mb-2"
+>
+	<svelte:fragment slot="icon">
+		{#if toast.type === 'success'}
+			<CheckCircleSolid class="h-5 w-5" data-testid="success-icon" />
+		{:else if toast.type === 'error'}
+			<CloseCircleSolid class="h-5 w-5" data-testid="error-icon" />
+		{/if}
+	</svelte:fragment>
+	<p class="font-semibold">{toast.message}</p>
+	{#if toast.detail}
+		<p>{toast.detail}</p>
+	{/if}
+	{#if toast.links}
+		<div class="flex flex-col">
+			{#each toast.links as { link, label }}
+				<a
+					href={link}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-blue-500 hover:underline"
+				>
+					{label}
+				</a>
+			{/each}
+		</div>
+	{/if}
+</Toast>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ToastProps } from '../types/toast';
+declare const __propDef: {
+    props: {
+        toast: ToastProps;
+        i: number;
+    };
+    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/components/Tooltip.svelte

@@ -0,0 +1,8 @@
+<script>import { Tooltip } from "flowbite-svelte";
+export let triggeredBy = "";
+export let customClass = "";
+</script>
+
+<Tooltip {triggeredBy} class={`z-[99] shadow-none ${customClass}`}>
+	<slot />
+</Tooltip>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        triggeredBy?: string;
+        customClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/components/charts/OrderTradesChart.svelte

@@ -1,4 +1,4 @@
-<script>import { getOrderTradesList } from "@rainlanguage/orderbook/js_api";
+<script>import { getOrderTradesList } from "@rainlanguage/orderbook";
 import { prepareHistoricalOrderChartData } from "../../services/historicalOrderCharts";
 import TanstackLightweightChartLine from "./TanstackLightweightChartLine.svelte";
 import { createQuery } from "@tanstack/svelte-query";
@@ -20,7 +20,8 @@ $: query = createQuery({
       BigInt(1e3),
       void 0
     );
-    return prepareHistoricalOrderChartData(data, $colorTheme);
+    if (data.error) throw new Error(data.error.msg);
+    return prepareHistoricalOrderChartData(data.value, $colorTheme);
   },
   enabled: !!subgraphUrl
 });

package/dist/components/charts/TanstackLightweightChartLine.svelte

@@ -1,17 +1,13 @@
 <script generics="T">import LightweightChart from "./LightweightChart.svelte";
-import { sortBy } from "lodash";
+import { transformAndSortData } from "./transformAndSortData";
 export let query;
 export let timeTransform;
 export let valueTransform;
 export let lightweightChartsTheme;
-const transformAndSortData = (data2) => {
-  const transformedData = data2.map((d) => ({
-    value: valueTransform(d),
-    time: timeTransform(d)
-  }));
-  return sortBy(transformedData, (d) => d.time);
-};
-$: data = transformAndSortData($query.data ?? []);
+$: data = transformAndSortData($query.data ?? [], {
+  valueTransform,
+  timeTransform
+});
 const createSeries = (chart) => chart.addLineSeries({ lineWidth: 1 });
 </script>
 

package/dist/components/charts/VaultBalanceChart.svelte

@@ -1,9 +1,7 @@
-<script>import { timestampSecondsToUTCTimestamp } from "../../utils/time";
+<script>import { timestampSecondsToUTCTimestamp } from "../../services/time";
 import { bigintToFloat } from "../../utils/number";
 import { createQuery } from "@tanstack/svelte-query";
-import {
-  getVaultBalanceChanges
-} from "@rainlanguage/orderbook/js_api";
+import { getVaultBalanceChanges } from "@rainlanguage/orderbook";
 import TanstackLightweightChartLine from "../charts/TanstackLightweightChartLine.svelte";
 import { QKEY_VAULT_CHANGES } from "../../queries/keys";
 export let vault;
@@ -12,11 +10,13 @@ export let subgraphUrl;
 export let lightweightChartsTheme;
 $: query = createQuery({
   queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
-  queryFn: () => {
-    return getVaultBalanceChanges(subgraphUrl || "", vault.id, {
+  queryFn: async () => {
+    const result = await getVaultBalanceChanges(subgraphUrl || "", vault.id, {
       page: 1,
       pageSize: 1e3
     });
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
   },
   enabled: !!subgraphUrl
 });

package/dist/components/charts/VaultBalanceChart.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SgVault } from '@rainlanguage/orderbook/js_api';
+import type { SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         vault: SgVault;

package/dist/components/charts/transformAndSortData.d.ts

@@ -0,0 +1,24 @@
+import type { UTCTimestamp } from 'lightweight-charts';
+/**
+ * Filters out data points with duplicate timestamps, keeping only the first occurrence.
+ *
+ * @param data Array of data points with time and value properties
+ * @returns A new array with only unique timestamps
+ */
+export declare const deduplicateByTime: <T extends {
+    time: UTCTimestamp;
+}>(data: T[]) => T[];
+/**
+ * Transforms and sorts data, ensuring unique timestamps.
+ *
+ * @param data The source data to transform
+ * @param options Configuration object with transform functions
+ * @returns Transformed, sorted, and deduplicated data
+ */
+export declare const transformAndSortData: <T>(data: T[], options: {
+    valueTransform: (item: T) => number;
+    timeTransform: (item: T) => UTCTimestamp;
+}) => Array<{
+    value: number;
+    time: UTCTimestamp;
+}>;