@rainlanguage/ui-components 0.0.1-alpha.10 → 0.0.1-alpha.100

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,22 +1,25 @@
-<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
@@ -30,12 +33,8 @@ export let signerAddress;
 	{: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,29 +5,27 @@ export let pathname;
 $: breadcrumbs = generateBreadcrumbs(pathname);
 </script>
 
-<div class="mb-4 flex w-full items-center">
-	<div class="flex-grow">
-		<Breadcrumb
-			olClass="inline-flex items-center rtl:space-x-reverse"
-			aria-label="Default breadcrumb example"
-		>
-			<BreadcrumbItem href="/" home></BreadcrumbItem>
-			{#each breadcrumbs as crumb}
-				<BreadcrumbItem
-					href={crumb.href}
-					linkClass="mx-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white first-letter:uppercase"
-					>{crumb.label}</BreadcrumbItem
-				>
-			{/each}
+<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"
+	>
+		<BreadcrumbItem href="/" home></BreadcrumbItem>
+		{#each breadcrumbs as crumb}
 			<BreadcrumbItem
-				spanClass="mx-2 text-sm font-medium text-gray-700 dark:text-gray-300 first-letter:uppercase"
-				><span data-testid="breadcrumb-page-title">{title}</span></BreadcrumbItem
+				href={crumb.href}
+				linkClass="mx-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white first-letter:uppercase"
+				>{crumb.label}</BreadcrumbItem
 			>
-		</Breadcrumb>
-	</div>
-	<div class="flex-1">
-		<div class="flex justify-end space-x-2">
-			<slot name="actions" />
-		</div>
+		{/each}
+		<BreadcrumbItem
+			spanClass="mx-2 text-sm font-medium text-gray-700 dark:text-gray-300 first-letter:uppercase"
+			><span data-testid="breadcrumb-page-title">{title}</span></BreadcrumbItem
+		>
+	</Breadcrumb>
+
+	<div class="flex flex-col items-end gap-2 lg:flex-row lg:items-center">
+		<slot name="warning" />
+		<slot name="actions" />
 	</div>
 </div>

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        warning: {};
         actions: {};
     };
     exports?: {} | undefined;

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,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/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;
+}>;

package/dist/components/charts/transformAndSortData.js

@@ -0,0 +1,111 @@
+import { sortBy } from 'lodash';
+/**
+ * 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 const deduplicateByTime = (data) => {
+    const uniqueData = [];
+    const seenTimes = new Set();
+    for (const dataPoint of data) {
+        if (!seenTimes.has(dataPoint.time)) {
+            uniqueData.push(dataPoint);
+            seenTimes.add(dataPoint.time);
+        }
+    }
+    return uniqueData;
+};
+/**
+ * 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 const transformAndSortData = (data, options) => {
+    const { valueTransform, timeTransform } = options;
+    const transformedData = data.map((d) => ({
+        value: valueTransform(d),
+        time: timeTransform(d)
+    }));
+    const sortedData = sortBy(transformedData, (d) => d.time);
+    return deduplicateByTime(sortedData);
+};
+if (import.meta.vitest) {
+    const { it, expect, describe } = import.meta.vitest;
+    describe('deduplicateByTime', () => {
+        it('should remove entries with duplicate timestamps', () => {
+            const data = [
+                { time: 100, value: 10 },
+                { time: 200, value: 20 },
+                { time: 200, value: 25 }, // Duplicate timestamp
+                { time: 300, value: 30 }
+            ];
+            const result = deduplicateByTime(data);
+            const expected = [
+                { time: 100, value: 10 },
+                { time: 200, value: 20 }, // First occurrence kept
+                { time: 300, value: 30 }
+            ];
+            expect(result).toEqual(expected);
+        });
+        it('should handle multiple duplicate timestamps', () => {
+            const data = [
+                { time: 100, value: 10 },
+                { time: 100, value: 15 }, // Duplicate
+                { time: 100, value: 18 }, // Duplicate
+                { time: 200, value: 20 }
+            ];
+            const result = deduplicateByTime(data);
+            const expected = [
+                { time: 100, value: 10 }, // Only first one kept
+                { time: 200, value: 20 }
+            ];
+            expect(result).toEqual(expected);
+        });
+        it('should return original array if no duplicates', () => {
+            const data = [
+                { time: 100, value: 10 },
+                { time: 200, value: 20 },
+                { time: 300, value: 30 }
+            ];
+            const result = deduplicateByTime(data);
+            expect(result).toEqual(data);
+            expect(result).not.toBe(data);
+        });
+        it('should handle empty array', () => {
+            const data = [];
+            const result = deduplicateByTime(data);
+            expect(result).toEqual([]);
+        });
+    });
+    describe('transformAndSortData', () => {
+        it('should transform, sort, and deduplicate data', () => {
+            const rawData = [
+                { timestamp: 3000, price: 300 },
+                { timestamp: 1000, price: 100 },
+                { timestamp: 2000, price: 200 },
+                { timestamp: 2000, price: 250 } // Duplicate timestamp
+            ];
+            const result = transformAndSortData(rawData, {
+                valueTransform: (item) => item.price,
+                timeTransform: (item) => item.timestamp
+            });
+            const expected = [
+                { time: 1000, value: 100 },
+                { time: 2000, value: 200 }, // First occurrence kept after sorting
+                { time: 3000, value: 300 }
+            ];
+            expect(result).toEqual(expected);
+        });
+        it('should handle empty data array', () => {
+            const rawData = [];
+            const result = transformAndSortData(rawData, {
+                valueTransform: (item) => item.price,
+                timeTransform: (item) => item.timestamp
+            });
+            expect(result).toEqual([]);
+        });
+    });
+}

package/dist/components/checkbox/CheckboxActiveOrders.svelte

@@ -0,0 +1,11 @@
+<script>import { Checkbox } from "flowbite-svelte";
+export let showInactiveOrders;
+let checked = $showInactiveOrders ? true : false;
+function handleChange() {
+  $showInactiveOrders = !$showInactiveOrders;
+}
+</script>
+
+<div data-testid="order-status-checkbox">
+	<Checkbox {checked} on:change={handleChange}>Include inactive orders</Checkbox>
+</div>

package/dist/components/checkbox/CheckboxActiveOrders.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../../types/appStores';
+declare const __propDef: {
+    props: {
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CheckboxActiveOrdersProps = typeof __propDef.props;
+export type CheckboxActiveOrdersEvents = typeof __propDef.events;
+export type CheckboxActiveOrdersSlots = typeof __propDef.slots;
+export default class CheckboxActiveOrders extends SvelteComponent<CheckboxActiveOrdersProps, CheckboxActiveOrdersEvents, CheckboxActiveOrdersSlots> {
+}
+export {};

package/dist/components/deployment/ComposedRainlangModal.svelte

@@ -2,15 +2,17 @@
 import { RainlangLR } from "codemirror-rainlang";
 import { lightCodeMirrorTheme } from "../../utils/codeMirrorThemes";
 import { Button, Modal } from "flowbite-svelte";
-export let gui;
+import { useGui } from "../../hooks/useGui";
+const gui = useGui();
 let rainlangText = null;
 let open = false;
 async function generateRainlang() {
-  const rainlang = await gui.getComposedRainlang();
-  if (rainlang) {
-    rainlangText = rainlang;
-    open = true;
+  let result = await gui.getComposedRainlang();
+  if (result.error) {
+    throw new Error(result.error.msg);
   }
+  rainlangText = result.value;
+  open = true;
 }
 </script>
 

package/dist/components/deployment/ComposedRainlangModal.svelte.d.ts

@@ -1,9 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 declare const __propDef: {
-    props: {
-        gui: DotrainOrderGui;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/deployment/DeploymentSectionHeader.svelte

@@ -1,4 +1,5 @@
-<script>export let title;
+<script>import Markdown from "svelte-markdown";
+export let title;
 export let description = "";
 </script>
 
@@ -7,8 +8,10 @@ export let description = "";
 		{title}
 	</h1>
 	{#if description}
-		<p class="break-words text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
-			{description}
-		</p>
+		<div
+			class="prose prose-sm lg:prose-base prose-neutral dark:prose-invert text-gray-600 dark:text-gray-400"
+		>
+			<Markdown source={description} />
+		</div>
 	{/if}
 </div>