@rainlanguage/ui-components 0.0.1-alpha.10

package/dist/components/charts/LightweightChart.svelte

@@ -0,0 +1,110 @@
+<script generics="T extends keyof SeriesOptionsMap, D, O">import { Spinner } from "flowbite-svelte";
+import {
+  createChart
+} from "lightweight-charts";
+import { onDestroy, onMount } from "svelte";
+import ChartTimeFilters from "./ChartTimeFilters.svelte";
+export let data = [];
+export let loading = false;
+export let emptyMessage = "None found";
+export let title = void 0;
+export let priceSymbol = void 0;
+export let createSeries;
+export let lightweightChartsTheme;
+let chartElement = void 0;
+let chart;
+let series;
+let timeDelta;
+let timeFrom;
+let timeTo;
+let previousDataLength = 0;
+function setTimeScale() {
+  if (chart === void 0) return;
+  timeTo = Math.floor((/* @__PURE__ */ new Date()).getTime() / 1e3);
+  timeFrom = timeTo - timeDelta;
+  chart.timeScale().setVisibleRange({
+    from: timeFrom,
+    to: timeTo
+  });
+}
+function setOptions() {
+  if (chart === void 0) return;
+  chart.applyOptions({
+    ...$lightweightChartsTheme,
+    autoSize: true,
+    localization: {
+      priceFormatter: (p) => priceSymbol ? `${p.toFixed(4)} ${priceSymbol}` : p.toFixed(4)
+    }
+  });
+}
+function updateNewDataPoints() {
+  if (series === void 0 || data.length === 0) return;
+  if (previousDataLength === 0) {
+    series.setData(data);
+  } else if (data.length > previousDataLength) {
+    const newPoints = data.slice(previousDataLength);
+    newPoints.forEach((point) => {
+      series?.update(point);
+    });
+  }
+  previousDataLength = data.length;
+  setTimeScale();
+}
+function destroyChart() {
+  if (chart == void 0) return;
+  chart.remove();
+  chart = void 0;
+}
+function setupChart() {
+  if (chartElement === void 0) return;
+  chart = createChart(chartElement);
+  series = createSeries(chart);
+  setOptions();
+  updateNewDataPoints();
+}
+$: if (data || series) updateNewDataPoints();
+$: if (timeDelta) setTimeScale();
+$: if ($lightweightChartsTheme) setOptions();
+$: if (chartElement && data.length > 0 && !chart) setupChart();
+onMount(() => {
+  setupChart();
+});
+onDestroy(() => {
+  destroyChart();
+});
+</script>
+
+<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 justify-between border-b p-3 pb-0 dark:border-gray-700">
+		<div class="text-gray-900 dark:text-white">
+			{#if title !== undefined}
+				<div data-testid="lightweightChartTitle" class="mb-2 text-xl">{title}</div>
+			{/if}
+		</div>
+
+		<div>
+			{#if loading}
+				<Spinner data-testid="lightweightChartSpinner" class="mr-2 h-4 w-4" color="white" />
+			{/if}
+			{#if data.length > 0}
+				<ChartTimeFilters bind:timeDelta />
+			{/if}
+		</div>
+	</div>
+	<div class="relative flex w-full grow items-center justify-center bg-white dark:bg-gray-800">
+		{#if data.length === 0 && !loading}
+			<div class="text-gray-800 dark:text-gray-400" data-testid="lightweightChartEmptyMessage">
+				{emptyMessage}
+			</div>
+		{:else}
+			<div
+				bind:this={chartElement}
+				class="h-full w-full overflow-hidden"
+				{...$$props}
+				data-testid="lightweightChartElement"
+			></div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Readable } from 'svelte/store';
+import { type IChartApi, type UTCTimestamp, type ISeriesApi, type WhitespaceData, type Time, type DeepPartial, type SeriesOptionsCommon, type SeriesOptionsMap } from 'lightweight-charts';
+declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
+    props(): {
+        [x: string]: any;
+        data?: {
+            value: number;
+            time: UTCTimestamp;
+            color?: string;
+        }[] | undefined;
+        loading?: boolean | undefined;
+        emptyMessage?: string | undefined;
+        title?: string | undefined;
+        priceSymbol?: string | undefined;
+        createSeries: (chart: IChartApi) => ISeriesApi<T, Time, WhitespaceData<Time>, O, DeepPartial<O & SeriesOptionsCommon>>;
+        lightweightChartsTheme: Readable<Record<string, unknown>>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type LightweightChartProps<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['props']>;
+export type LightweightChartEvents<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['events']>;
+export type LightweightChartSlots<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['slots']>;
+export default class LightweightChart<T extends keyof SeriesOptionsMap, D, O> extends SvelteComponent<LightweightChartProps<T, D, O>, LightweightChartEvents<T, D, O>, LightweightChartSlots<T, D, O>> {
+}
+export {};

package/dist/components/charts/OrderTradesChart.svelte

@@ -0,0 +1,36 @@
+<script>import { getOrderTradesList } from "@rainlanguage/orderbook/js_api";
+import { prepareHistoricalOrderChartData } from "../../services/historicalOrderCharts";
+import TanstackLightweightChartLine from "./TanstackLightweightChartLine.svelte";
+import { createQuery } from "@tanstack/svelte-query";
+import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
+export let id;
+export let subgraphUrl;
+export let colorTheme;
+export let lightweightChartsTheme;
+$: query = createQuery({
+  queryKey: [QKEY_ORDER_TRADES_LIST, id],
+  queryFn: async () => {
+    const data = await getOrderTradesList(
+      subgraphUrl || "",
+      id,
+      {
+        page: 1,
+        pageSize: 10
+      },
+      BigInt(1e3),
+      void 0
+    );
+    return prepareHistoricalOrderChartData(data, $colorTheme);
+  },
+  enabled: !!subgraphUrl
+});
+</script>
+
+<TanstackLightweightChartLine
+	title="Trades"
+	{query}
+	timeTransform={(d) => d.time}
+	valueTransform={(d) => d.value}
+	emptyMessage="No trades found"
+	{lightweightChartsTheme}
+/>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        subgraphUrl: string;
+        colorTheme: any;
+        lightweightChartsTheme: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderTradesChartProps = typeof __propDef.props;
+export type OrderTradesChartEvents = typeof __propDef.events;
+export type OrderTradesChartSlots = typeof __propDef.slots;
+export default class OrderTradesChart extends SvelteComponent<OrderTradesChartProps, OrderTradesChartEvents, OrderTradesChartSlots> {
+}
+export {};

package/dist/components/charts/TableTimeFilters.svelte

@@ -0,0 +1,48 @@
+<script>import ButtonTab from "../ButtonTab.svelte";
+import { ButtonGroup } from "flowbite-svelte";
+const TIME_DELTA_24_HOURS = 60 * 60 * 24;
+const TIME_DELTA_48_HOURS = TIME_DELTA_24_HOURS * 2;
+let now = Math.floor((/* @__PURE__ */ new Date()).getTime() / 1e3);
+let timeDelta;
+function setNow() {
+  now = Math.floor((/* @__PURE__ */ new Date()).getTime() / 1e3);
+}
+export let startTimestamp;
+export let endTimestamp;
+</script>
+
+<ButtonGroup class="bg-gray-800" data-testid="lightweightChartYearButtons">
+	<ButtonTab
+		on:click={() => {
+			setNow();
+			timeDelta = undefined;
+			startTimestamp = undefined;
+			endTimestamp = undefined;
+		}}
+		active={timeDelta === undefined}
+		size="xs"
+		class="px-2 py-1">All Time</ButtonTab
+	>
+	<ButtonTab
+		on:click={() => {
+			setNow();
+			timeDelta = TIME_DELTA_48_HOURS;
+			startTimestamp = now - TIME_DELTA_48_HOURS;
+			endTimestamp = now;
+		}}
+		active={timeDelta === TIME_DELTA_48_HOURS}
+		size="xs"
+		class="px-2 py-1">48 Hours</ButtonTab
+	>
+	<ButtonTab
+		on:click={() => {
+			setNow();
+			timeDelta = TIME_DELTA_24_HOURS;
+			startTimestamp = now - TIME_DELTA_24_HOURS;
+			endTimestamp = now;
+		}}
+		active={timeDelta === TIME_DELTA_24_HOURS}
+		size="xs"
+		class="px-2 py-1">24 Hours</ButtonTab
+	>
+</ButtonGroup>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        startTimestamp: number | undefined;
+        endTimestamp: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TableTimeFiltersProps = typeof __propDef.props;
+export type TableTimeFiltersEvents = typeof __propDef.events;
+export type TableTimeFiltersSlots = typeof __propDef.slots;
+export default class TableTimeFilters extends SvelteComponent<TableTimeFiltersProps, TableTimeFiltersEvents, TableTimeFiltersSlots> {
+}
+export {};

package/dist/components/charts/TanstackLightweightChartLine.svelte

@@ -0,0 +1,24 @@
+<script generics="T">import LightweightChart from "./LightweightChart.svelte";
+import { sortBy } from "lodash";
+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 ?? []);
+const createSeries = (chart) => chart.addLineSeries({ lineWidth: 1 });
+</script>
+
+<LightweightChart
+	{createSeries}
+	{data}
+	loading={$query.isLoading}
+	{...$$props}
+	{lightweightChartsTheme}
+/>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Readable } from 'svelte/store';
+import type { CreateQueryResult } from '@tanstack/svelte-query';
+import type { UTCTimestamp } from 'lightweight-charts';
+declare class __sveltets_Render<T> {
+    props(): {
+        [x: string]: any;
+        query: CreateQueryResult<T[]>;
+        timeTransform: (data: T) => UTCTimestamp;
+        valueTransform: (data: T) => number;
+        lightweightChartsTheme: Readable<Record<string, unknown>>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TanstackLightweightChartLineProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TanstackLightweightChartLineEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TanstackLightweightChartLineSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TanstackLightweightChartLine<T> extends SvelteComponent<TanstackLightweightChartLineProps<T>, TanstackLightweightChartLineEvents<T>, TanstackLightweightChartLineSlots<T>> {
+}
+export {};

package/dist/components/charts/VaultBalanceChart.svelte

@@ -0,0 +1,37 @@
+<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>
+
+{#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))}
+		emptyMessage="No deposits or withdrawals found"
+		{lightweightChartsTheme}
+	/>
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { SgVault } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        vault: SgVault;
+        id: string;
+        subgraphUrl: string;
+        lightweightChartsTheme: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultBalanceChartProps = typeof __propDef.props;
+export type VaultBalanceChartEvents = typeof __propDef.events;
+export type VaultBalanceChartSlots = typeof __propDef.slots;
+export default class VaultBalanceChart extends SvelteComponent<VaultBalanceChartProps, VaultBalanceChartEvents, VaultBalanceChartSlots> {
+}
+export {};

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,17 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Checkbox as FlowbiteCheckbox, Label } from "flowbite-svelte";
+const dispatch = createEventDispatcher();
+export let label = "";
+export let checked = false;
+function handleChange() {
+  checked = !checked;
+  dispatch("change", checked);
+}
+</script>
+
+<div class="flex items-center">
+	<FlowbiteCheckbox {checked} on:click={handleChange} data-testid="checkbox" />
+	<Label class="ml-2">
+		{label}
+	</Label>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        checked?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/dist/components/deployment/ButtonSelectOption.svelte

@@ -0,0 +1,14 @@
+<script>import { Button } from "flowbite-svelte";
+export let active;
+export let buttonText;
+export let clickHandler;
+</script>
+
+<Button
+	size="lg"
+	color="alternative"
+	class={active ? 'border-2 border-blue-300 dark:border-blue-700' : 'border-2 border-transparent'}
+	on:click={clickHandler}
+>
+	{buttonText}
+</Button>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        active: boolean;
+        buttonText: string;
+        clickHandler: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ButtonSelectOptionProps = typeof __propDef.props;
+export type ButtonSelectOptionEvents = typeof __propDef.events;
+export type ButtonSelectOptionSlots = typeof __propDef.slots;
+export default class ButtonSelectOption extends SvelteComponent<ButtonSelectOptionProps, ButtonSelectOptionEvents, ButtonSelectOptionSlots> {
+}
+export {};

package/dist/components/deployment/ComposedRainlangModal.svelte

@@ -0,0 +1,35 @@
+<script>import CodeMirror from "svelte-codemirror-editor";
+import { RainlangLR } from "codemirror-rainlang";
+import { lightCodeMirrorTheme } from "../../utils/codeMirrorThemes";
+import { Button, Modal } from "flowbite-svelte";
+export let gui;
+let rainlangText = null;
+let open = false;
+async function generateRainlang() {
+  const rainlang = await gui.getComposedRainlang();
+  if (rainlang) {
+    rainlangText = rainlang;
+    open = true;
+  }
+}
+</script>
+
+<Button color="light" size="lg" on:click={generateRainlang}>Show Rainlang</Button>
+
+<Modal size="xl" class="bg-opacity-90  backdrop-blur-sm" bind:open data-testid="modal">
+	<div data-testid="modal-content">
+		<h3 class="mb-2 text-2xl font-semibold text-gray-900 dark:text-white">Generated Rainlang</h3>
+		<CodeMirror
+			value={rainlangText}
+			extensions={[RainlangLR]}
+			theme={lightCodeMirrorTheme}
+			readonly={true}
+			styles={{
+				'&': {
+					height: '70vh',
+					width: '100%'
+				}
+			}}
+		/>
+	</div>
+</Modal>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        gui: DotrainOrderGui;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ComposedRainlangModalProps = typeof __propDef.props;
+export type ComposedRainlangModalEvents = typeof __propDef.events;
+export type ComposedRainlangModalSlots = typeof __propDef.slots;
+export default class ComposedRainlangModal extends SvelteComponent<ComposedRainlangModalProps, ComposedRainlangModalEvents, ComposedRainlangModalSlots> {
+}
+export {};

package/dist/components/deployment/DeploymentSectionHeader.svelte

@@ -0,0 +1,14 @@
+<script>export let title;
+export let description = "";
+</script>
+
+<div class="flex max-w-xl flex-grow flex-col gap-y-4 text-left">
+	<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
+		{title}
+	</h1>
+	{#if description}
+		<p class="break-words text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
+			{description}
+		</p>
+	{/if}
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        description?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DeploymentSectionHeaderProps = typeof __propDef.props;
+export type DeploymentSectionHeaderEvents = typeof __propDef.events;
+export type DeploymentSectionHeaderSlots = typeof __propDef.slots;
+export default class DeploymentSectionHeader extends SvelteComponent<DeploymentSectionHeaderProps, DeploymentSectionHeaderEvents, DeploymentSectionHeaderSlots> {
+}
+export {};