@rainlanguage/ui-components 0.0.1-alpha.21 → 0.0.1-alpha.210

package/dist/components/charts/OrderTradesChart.svelte

@@ -1,36 +1,308 @@
-<script>import { getOrderTradesList } from "@rainlanguage/orderbook/js_api";
-import { prepareHistoricalOrderChartData } from "../../services/historicalOrderCharts";
-import TanstackLightweightChartLine from "./TanstackLightweightChartLine.svelte";
+<script>import {} from "@rainlanguage/orderbook";
 import { createQuery } from "@tanstack/svelte-query";
 import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
-export let id;
-export let subgraphUrl;
-export let colorTheme;
+import {
+  CHART_COLORS,
+  extractPairsFromTrades,
+  findPairIndex,
+  flipTradingPair,
+  formatChartTimestamp,
+  getDefaultPair,
+  getTokenLabel,
+  transformPairTrades
+} from "../../services/pairTradesChartData";
+import {
+  TIME_DELTA_24_HOURS,
+  TIME_DELTA_7_DAYS,
+  TIME_DELTA_30_DAYS,
+  TIME_DELTA_1_YEAR
+} from "../../services/time";
+import { Button, ButtonGroup, Dropdown, DropdownItem, Spinner } from "flowbite-svelte";
+import { ChevronDownSolid } from "flowbite-svelte-icons";
+import {
+  createChart,
+  CrosshairMode
+} from "lightweight-charts";
+import { onDestroy, onMount } from "svelte";
+export let order;
 export let lightweightChartsTheme;
+let chartElement = void 0;
+let chart;
+let priceSeries;
+let buyVolumeSeries;
+let sellVolumeSeries;
+const TIME_OPTIONS = [
+  { delta: TIME_DELTA_1_YEAR, label: "1Y" },
+  { delta: TIME_DELTA_30_DAYS, label: "30D" },
+  { delta: TIME_DELTA_7_DAYS, label: "7D" },
+  { delta: TIME_DELTA_24_HOURS, label: "24H" }
+];
+let timeDelta = TIME_DELTA_1_YEAR;
+let pairs = [];
+let selectedPairIndex = 0;
+let dropdownOpen = false;
+$: selectedPair = pairs[selectedPairIndex] ?? null;
 $: query = createQuery({
-  queryKey: [QKEY_ORDER_TRADES_LIST, id],
+  queryKey: [QKEY_ORDER_TRADES_LIST, order.id],
   queryFn: async () => {
-    const data = await getOrderTradesList(
-      subgraphUrl || "",
-      id,
-      {
-        page: 1,
-        pageSize: 10
-      },
-      BigInt(1e3),
-      void 0
-    );
-    return prepareHistoricalOrderChartData(data, $colorTheme);
-  },
-  enabled: !!subgraphUrl
+    const data = await order.getTradesList(void 0, void 0, 1);
+    if (data.error) throw new Error(data.error.readableMsg);
+    return data.value;
+  }
+});
+$: trades = $query?.data ?? [];
+$: {
+  if (trades.length > 0) {
+    const isFirstLoad = pairs.length === 0;
+    const extractedPairs = extractPairsFromTrades(trades);
+    for (const newPair of extractedPairs) {
+      if (findPairIndex(pairs, newPair) === -1) {
+        pairs = [...pairs, newPair];
+      }
+    }
+    if (isFirstLoad && pairs.length > 0) {
+      const defaultPair = getDefaultPair(trades);
+      if (defaultPair) {
+        const idx = findPairIndex(pairs, defaultPair);
+        if (idx >= 0) selectedPairIndex = idx;
+      }
+    }
+  }
+}
+$: chartData = selectedPair ? transformPairTrades({
+  trades,
+  baseTokenAddress: selectedPair.baseToken.address,
+  quoteTokenAddress: selectedPair.quoteToken.address,
+  timeDeltaSeconds: timeDelta
+}) : null;
+$: pairLabel = selectedPair ? `${getTokenLabel(selectedPair.baseToken)}/${getTokenLabel(selectedPair.quoteToken)}` : "Select pair";
+function handleFlipPair() {
+  if (!selectedPair) return;
+  const flipped = flipTradingPair(selectedPair);
+  const existingIdx = findPairIndex(pairs, flipped);
+  if (existingIdx >= 0) {
+    selectedPairIndex = existingIdx;
+  } else {
+    pairs = [...pairs, flipped];
+    selectedPairIndex = pairs.length - 1;
+  }
+}
+function selectPair(index) {
+  selectedPairIndex = index;
+  dropdownOpen = false;
+}
+function setupChart() {
+  if (!chartElement) return;
+  chart = createChart(chartElement, {
+    autoSize: true,
+    leftPriceScale: {
+      visible: true,
+      borderVisible: false
+    },
+    rightPriceScale: {
+      visible: true,
+      borderVisible: false
+    },
+    crosshair: {
+      mode: CrosshairMode.Normal
+    },
+    timeScale: {
+      tickMarkFormatter: (time) => formatChartTimestamp(time, timeDelta)
+    }
+  });
+  buyVolumeSeries = chart.addHistogramSeries({
+    color: CHART_COLORS.BUY_VOLUME_TRANSPARENT,
+    priceFormat: { type: "volume" },
+    priceScaleId: "left"
+  });
+  sellVolumeSeries = chart.addHistogramSeries({
+    color: CHART_COLORS.SELL_VOLUME_TRANSPARENT,
+    priceFormat: { type: "volume" },
+    priceScaleId: "left"
+  });
+  buyVolumeSeries.createPriceLine({
+    price: 0,
+    color: CHART_COLORS.ZERO_LINE,
+    lineWidth: 1,
+    lineStyle: 0,
+    axisLabelVisible: false
+  });
+  sellVolumeSeries.createPriceLine({
+    price: 0,
+    color: CHART_COLORS.ZERO_LINE,
+    lineWidth: 1,
+    lineStyle: 0,
+    axisLabelVisible: false
+  });
+  priceSeries = chart.addLineSeries({
+    color: CHART_COLORS.PRICE_LINE,
+    lineWidth: 2,
+    priceScaleId: "right",
+    priceFormat: {
+      type: "price",
+      precision: 6,
+      minMove: 1e-6
+    }
+  });
+  chart.priceScale("left").applyOptions({
+    scaleMargins: { top: 0.1, bottom: 0.1 }
+  });
+  chart.priceScale("right").applyOptions({
+    scaleMargins: { top: 0.1, bottom: 0.1 }
+  });
+  setChartOptions();
+  updateChartData();
+}
+function setChartOptions() {
+  if (!chart) return;
+  chart.applyOptions({
+    ...$lightweightChartsTheme,
+    autoSize: true
+  });
+}
+function updateChartData() {
+  if (!chart || !priceSeries || !buyVolumeSeries || !sellVolumeSeries) return;
+  if (chartData) {
+    priceSeries.setData(chartData.pricePoints);
+    buyVolumeSeries.setData(chartData.buyVolumePoints);
+    sellVolumeSeries.setData(chartData.sellVolumePoints);
+  } else {
+    priceSeries.setData([]);
+    buyVolumeSeries.setData([]);
+    sellVolumeSeries.setData([]);
+  }
+  setTimeScale();
+}
+function setTimeScale() {
+  if (!chart) return;
+  chart.timeScale().applyOptions({
+    tickMarkFormatter: (time) => formatChartTimestamp(time, timeDelta)
+  });
+  if (chartData && chartData.pricePoints.length > 0) {
+    const now = Math.floor(Date.now() / 1e3);
+    const from = now - timeDelta;
+    chart.timeScale().setVisibleRange({ from, to: now });
+  } else {
+    chart.timeScale().fitContent();
+  }
+}
+function destroyChart() {
+  if (chart) {
+    chart.remove();
+    chart = void 0;
+    priceSeries = void 0;
+    buyVolumeSeries = void 0;
+    sellVolumeSeries = void 0;
+  }
+}
+$: if (chartElement && trades.length > 0 && selectedPair && !chart) setupChart();
+$: if (chart && chartData) updateChartData();
+$: if (chart && $lightweightChartsTheme) setChartOptions();
+onMount(() => {
+  if (trades.length > 0 && selectedPair) setupChart();
+});
+onDestroy(() => {
+  destroyChart();
 });
 </script>
 
-<TanstackLightweightChartLine
-	title="Trades"
-	{query}
-	timeTransform={(d) => d.time}
-	valueTransform={(d) => d.value}
-	emptyMessage="No trades found"
-	{lightweightChartsTheme}
-/>
+<div
+	class="flex h-full flex-col overflow-hidden rounded-lg border bg-gray-50 dark:border-none dark:bg-gray-700"
+>
+	<div
+		class="flex w-full flex-wrap items-center justify-between gap-2 border-b p-3 dark:border-gray-700"
+	>
+		<div class="flex items-center gap-2">
+			<div class="text-xl text-gray-900 dark:text-white" data-testid="chart-title">Trades</div>
+			{#if $query?.isLoading}
+				<Spinner class="h-4 w-4" color="white" data-testid="chart-spinner" />
+			{/if}
+		</div>
+
+		<div class="flex flex-wrap items-center gap-2">
+			{#if pairs.length > 0}
+				<div class="flex items-center gap-1">
+					<Button
+						color="alternative"
+						size="xs"
+						class="flex items-center gap-1"
+						data-testid="pair-selector"
+					>
+						{pairLabel}
+						<ChevronDownSolid class="h-3 w-3" />
+					</Button>
+					<Dropdown bind:open={dropdownOpen} data-testid="pair-dropdown">
+						{#each pairs as pair, idx}
+							<DropdownItem on:click={() => selectPair(idx)} data-testid="pair-option-{idx}">
+								{getTokenLabel(pair.baseToken)}/{getTokenLabel(pair.quoteToken)}
+							</DropdownItem>
+						{/each}
+					</Dropdown>
+					<Button
+						color="alternative"
+						size="xs"
+						on:click={handleFlipPair}
+						title="Flip pair"
+						data-testid="flip-button"
+					>
+						<svg
+							class="h-4 w-4"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+							/>
+						</svg>
+					</Button>
+				</div>
+			{/if}
+
+			{#if trades.length > 0}
+				<ButtonGroup class="bg-gray-800" data-testid="time-filters">
+					{#each TIME_OPTIONS as option}
+						<Button
+							on:click={() => (timeDelta = option.delta)}
+							color={timeDelta === option.delta ? 'primary' : 'alternative'}
+							size="xs"
+							class="px-2 py-1">{option.label}</Button
+						>
+					{/each}
+				</ButtonGroup>
+			{/if}
+		</div>
+	</div>
+
+	<div class="relative flex w-full grow items-center justify-center bg-white dark:bg-gray-800">
+		{#if $query?.isLoading}
+			<div class="text-gray-800 dark:text-gray-400">Loading...</div>
+		{:else if $query?.isError}
+			<div class="text-red-500" data-testid="chart-error">
+				Error: {$query?.error?.message ?? 'Failed to load trades'}
+			</div>
+		{:else if trades.length === 0 || !selectedPair}
+			<div class="text-gray-800 dark:text-gray-400" data-testid="chart-empty">No trades found</div>
+		{:else}
+			<div
+				bind:this={chartElement}
+				class="h-full w-full overflow-hidden"
+				data-testid="chart-element"
+			></div>
+			{#if chartData && chartData.pricePoints.length === 0}
+				<div
+					class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"
+					data-testid="chart-no-data"
+				>
+					<span class="text-gray-800 dark:text-gray-400"
+						>No trades found for selected pair and time range</span
+					>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { Readable } from 'svelte/store';
+import { type RaindexOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        id: string;
-        subgraphUrl: string;
-        colorTheme: any;
-        lightweightChartsTheme: any;
+        order: RaindexOrder;
+        lightweightChartsTheme: Readable<Record<string, unknown>>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,37 +1,19 @@
-<script>import { timestampSecondsToUTCTimestamp } from "../../utils/time";
-import { bigintToFloat } from "../../utils/number";
-import { createQuery } from "@tanstack/svelte-query";
-import {
-  getVaultBalanceChanges
-} from "@rainlanguage/orderbook/js_api";
-import TanstackLightweightChartLine from "../charts/TanstackLightweightChartLine.svelte";
-import { QKEY_VAULT_CHANGES } from "../../queries/keys";
-export let vault;
-export let id;
-export let subgraphUrl;
-export let lightweightChartsTheme;
-$: query = createQuery({
-  queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
-  queryFn: () => {
-    return getVaultBalanceChanges(subgraphUrl || "", vault.id, {
-      page: 1,
-      pageSize: 1e3
-    });
-  },
-  enabled: !!subgraphUrl
-});
-const Chart = TanstackLightweightChartLine;
-</script>
+<!-- TODO: Issue #1989 -->
+<script></script>
 
+<!--
 {#if vault && $query.data}
 	<Chart
 		title="Balance history"
 		priceSymbol={vault.token.symbol}
 		{query}
 		timeTransform={(d) => timestampSecondsToUTCTimestamp(BigInt(d.timestamp))}
-		valueTransform={(d) =>
-			bigintToFloat(BigInt(d.newVaultBalance), Number(vault.token.decimals ?? 0))}
+		valueTransform={(d) => parseFloat(d.formattedNewBalance)}
 		emptyMessage="No deposits or withdrawals found"
 		{lightweightChartsTheme}
 	/>
+{/if} -->
+
+{#if false}
+	<div>TODO: Issue #1989</div>
 {/if}

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

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

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/ButtonSelectOption.svelte

@@ -2,6 +2,7 @@
 export let active;
 export let buttonText;
 export let clickHandler;
+export let dataTestId;
 </script>
 
 <Button
@@ -9,6 +10,7 @@ export let clickHandler;
 	color="alternative"
 	class={active ? 'border-2 border-blue-300 dark:border-blue-700' : 'border-2 border-transparent'}
 	on:click={clickHandler}
+	data-testid={dataTestId}
 >
 	{buttonText}
 </Button>

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         active: boolean;
         buttonText: string;
         clickHandler: () => void;
+        dataTestId: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/ComposedRainlangModal.svelte

@@ -2,7 +2,8 @@
 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() {

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>