@rainlanguage/ui-components 0.0.1-alpha.10

package/dist/components/detail/OrderDetail.svelte

@@ -0,0 +1,195 @@
+<script>import Hash, { HashType } from "../Hash.svelte";
+import BadgeActive from "../BadgeActive.svelte";
+import OrderTradesChart from "../charts/OrderTradesChart.svelte";
+import OrderTradesListTable from "../tables/OrderTradesListTable.svelte";
+import TanstackOrderQuote from "./TanstackOrderQuote.svelte";
+import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
+import CardProperty from "../CardProperty.svelte";
+import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import ButtonVaultLink from "../ButtonVaultLink.svelte";
+import OrderVaultsVolTable from "../tables/OrderVaultsVolTable.svelte";
+import { QKEY_ORDER } from "../../queries/keys";
+import CodeMirrorRainlang from "../CodeMirrorRainlang.svelte";
+import { getOrderByHash } from "@rainlanguage/orderbook/js_api";
+import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+import { Button, TabItem, Tabs, Tooltip } from "flowbite-svelte";
+import { onDestroy } from "svelte";
+import OrderApy from "../tables/OrderAPY.svelte";
+import { page } from "$app/stores";
+import DepositOrWithdrawButtons from "./DepositOrWithdrawButtons.svelte";
+import Refresh from "../icon/Refresh.svelte";
+import { invalidateIdQuery } from "../../queries/queryClient";
+import { InfoCircleOutline } from "flowbite-svelte-icons";
+export let handleDepositOrWithdrawModal = void 0;
+export let handleOrderRemoveModal = void 0;
+export let handleQuoteDebugModal = void 0;
+export const handleDebugTradeModal = void 0;
+export let colorTheme;
+export let codeMirrorTheme;
+export let lightweightChartsTheme;
+export let orderbookAddress;
+export let orderHash;
+export let rpcUrl;
+export let subgraphUrl;
+export let chainId;
+export let wagmiConfig = void 0;
+export let signerAddress = void 0;
+let codeMirrorDisabled = true;
+let codeMirrorStyles = {};
+const queryClient = useQueryClient();
+$: orderDetailQuery = createQuery({
+  queryKey: [orderHash, QKEY_ORDER + orderHash],
+  queryFn: () => {
+    return getOrderByHash(subgraphUrl, orderHash);
+  },
+  enabled: !!subgraphUrl
+});
+const interval = setInterval(async () => {
+  await invalidateIdQuery(queryClient, orderHash);
+}, 1e4);
+onDestroy(() => {
+  clearInterval(interval);
+});
+$: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
+</script>
+
+<TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
+	<svelte:fragment slot="top" let:data>
+		<div
+			class="flex w-full flex-wrap items-center justify-between gap-4 text-3xl font-medium lg:justify-between dark:text-white"
+		>
+			<div class="flex items-center gap-x-2">
+				<div class="flex gap-x-2">
+					<span class="font-light">Order</span>
+					<Hash shorten value={data.order.orderHash} />
+				</div>
+
+				<BadgeActive active={data.order.active} large />
+			</div>
+
+			<div class="flex items-center gap-2">
+				{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
+					<Button
+						data-testid="remove-button"
+						color="dark"
+						on:click={() =>
+							handleOrderRemoveModal({
+								open: true,
+								args: {
+									order: data.order,
+									onRemove: $orderDetailQuery.refetch,
+									chainId,
+									orderbookAddress,
+									subgraphUrl
+								}
+							})}
+						disabled={!handleOrderRemoveModal}
+					>
+						Remove
+					</Button>
+				{/if}
+				<Refresh
+					on:click={async () => await invalidateIdQuery(queryClient, orderHash)}
+					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
+				/>
+			</div>
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="card" let:data>
+		<div class="flex flex-col gap-y-6">
+			<CardProperty>
+				<svelte:fragment slot="key">Orderbook</svelte:fragment>
+				<svelte:fragment slot="value">
+					<Hash type={HashType.Identifier} shorten={false} value={data.order.orderbook.id} />
+				</svelte:fragment>
+			</CardProperty>
+
+			<CardProperty>
+				<svelte:fragment slot="key">Owner</svelte:fragment>
+				<svelte:fragment slot="value">
+					<Hash type={HashType.Wallet} shorten={false} value={data.order.owner} />
+				</svelte:fragment>
+			</CardProperty>
+
+			<CardProperty>
+				<svelte:fragment slot="key">Created</svelte:fragment>
+				<svelte:fragment slot="value">
+					{formatTimestampSecondsAsLocal(BigInt(data.order.timestampAdded))}
+				</svelte:fragment>
+			</CardProperty>
+
+			{#each [{ key: 'Input vaults', type: 'inputs' }, { key: 'Output vaults', type: 'outputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
+				{#if data.vaults.get(type)?.length !== 0}
+					<CardProperty>
+						<svelte:fragment slot="key"
+							><div class="flex items-center gap-x-2">
+								{key}
+								{#if type === 'inputs_outputs'}
+									<InfoCircleOutline class="h-4 w-4" /><Tooltip
+										>{'These vaults can be an input or an output for this order'}</Tooltip
+									>{/if}
+							</div></svelte:fragment
+						>
+						<svelte:fragment slot="value">
+							<div class="mt-2 space-y-2">
+								{#each data.vaults.get(type) || [] as vault}
+									<ButtonVaultLink tokenVault={vault} {subgraphName}>
+										<svelte:fragment slot="buttons">
+											{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
+												<DepositOrWithdrawButtons
+													{vault}
+													{chainId}
+													{rpcUrl}
+													query={orderDetailQuery}
+													{handleDepositOrWithdrawModal}
+													{subgraphUrl}
+												/>
+											{/if}
+										</svelte:fragment>
+									</ButtonVaultLink>
+								{/each}
+							</div>
+						</svelte:fragment>
+					</CardProperty>
+				{/if}
+			{/each}
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="chart" let:data>
+		<OrderTradesChart id={data.order.id} {subgraphUrl} {lightweightChartsTheme} {colorTheme} />
+	</svelte:fragment>
+	<svelte:fragment slot="below" let:data>
+		<TanstackOrderQuote
+			id={data.order.id}
+			order={data.order}
+			{rpcUrl}
+			{orderbookAddress}
+			{handleQuoteDebugModal}
+		/>
+		<Tabs
+			style="underline"
+			contentClass="mt-4"
+			defaultClass="flex flex-wrap space-x-2 rtl:space-x-reverse mt-4 list-none"
+		>
+			<TabItem title="Rainlang source">
+				<div class="mb-8 overflow-hidden rounded-lg border dark:border-none">
+					<CodeMirrorRainlang
+						order={data.order}
+						codeMirrorTheme={$codeMirrorTheme}
+						{codeMirrorDisabled}
+						{codeMirrorStyles}
+					></CodeMirrorRainlang>
+				</div>
+			</TabItem>
+			<TabItem open title="Trades">
+				<OrderTradesListTable id={data.order.id} {subgraphUrl} />
+			</TabItem>
+			<TabItem title="Volume">
+				<OrderVaultsVolTable id={data.order.id} {subgraphUrl} />
+			</TabItem>
+			<TabItem title="APY">
+				<OrderApy id={data.order.id} {subgraphUrl} />
+			</TabItem>
+		</Tabs>
+	</svelte:fragment>
+</TanstackPageContentDetail>

package/dist/components/detail/OrderDetail.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
+import type { Config } from 'wagmi';
+import type { Hex } from 'viem';
+import type { DepositOrWithdrawModalProps, OrderRemoveModalProps, QuoteDebugModalHandler, DebugTradeModalHandler } from '../../types/modal';
+declare const __propDef: {
+    props: {
+        handleDepositOrWithdrawModal?: ((props: DepositOrWithdrawModalProps) => void) | undefined;
+        handleOrderRemoveModal?: ((props: OrderRemoveModalProps) => void) | undefined;
+        handleQuoteDebugModal?: QuoteDebugModalHandler | undefined;
+        handleDebugTradeModal?: DebugTradeModalHandler | undefined;
+        colorTheme: any;
+        codeMirrorTheme: any;
+        lightweightChartsTheme: any;
+        orderbookAddress: Hex;
+        orderHash: string;
+        rpcUrl: string;
+        subgraphUrl: string;
+        chainId: number | undefined;
+        wagmiConfig?: Writable<Config> | undefined;
+        signerAddress?: Writable<string | null> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderDetailProps = typeof __propDef.props;
+export type OrderDetailEvents = typeof __propDef.events;
+export type OrderDetailSlots = typeof __propDef.slots;
+export default class OrderDetail extends SvelteComponent<OrderDetailProps, OrderDetailEvents, OrderDetailSlots> {
+    get handleDebugTradeModal(): DebugTradeModalHandler;
+}
+export {};

package/dist/components/detail/TanstackOrderQuote.svelte

@@ -0,0 +1,173 @@
+<script generics="T">import { invalidateIdQuery } from "../../queries/queryClient";
+import Refresh from "../icon/Refresh.svelte";
+import EditableSpan from "../EditableSpan.svelte";
+import { getOrderQuote } from "@rainlanguage/orderbook/quote";
+import { QKEY_ORDER_QUOTE } from "../../queries/keys";
+import { formatUnits, hexToNumber, isHex } from "viem";
+import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+import {
+  Table,
+  TableBody,
+  TableBodyCell,
+  TableBodyRow,
+  TableHead,
+  TableHeadCell,
+  Tooltip
+} from "flowbite-svelte";
+import { BugOutline, PauseSolid, PlaySolid } from "flowbite-svelte-icons";
+export let id;
+export let order;
+export let rpcUrl;
+export let orderbookAddress;
+export let handleQuoteDebugModal = void 0;
+let enabled = true;
+const queryClient = useQueryClient();
+const refreshQuotes = async () => {
+  await invalidateIdQuery(queryClient, id);
+};
+$: orderQuoteQuery = createQuery({
+  queryKey: [id, QKEY_ORDER_QUOTE + id],
+  queryFn: () => getOrderQuote([order], rpcUrl),
+  enabled: !!id && enabled
+});
+let blockNumber;
+$: orderModalArg = order;
+</script>
+
+<div class="mt-4">
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="text-lg font-semibold">Order Quotes</h2>
+		<div class="flex items-center gap-x-1">
+			{#if $orderQuoteQuery.data && $orderQuoteQuery.data.length > 0 && isHex($orderQuoteQuery.data[0].blockNumber)}
+				<EditableSpan
+					displayValue={blockNumber?.toString() ||
+						hexToNumber($orderQuoteQuery.data[0].blockNumber).toString()}
+					on:focus={() => {
+						enabled = false;
+					}}
+					on:blur={({ detail: { value } }) => {
+						blockNumber = parseInt(value);
+						refreshQuotes();
+					}}
+				/>
+			{/if}
+			<span></span>
+			<Refresh
+				class="h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+				on:click={refreshQuotes}
+				spin={$orderQuoteQuery.isLoading || $orderQuoteQuery.isFetching}
+			/>
+			<PauseSolid
+				class={`ml-2 h-8 w-3 cursor-pointer text-gray-400 dark:text-gray-400 ${!enabled ? 'hidden' : ''}`}
+				on:click={() => {
+					enabled = false;
+				}}
+			/>
+			<PlaySolid
+				on:click={() => {
+					enabled = true;
+					blockNumber = undefined;
+					refreshQuotes();
+				}}
+				class={`ml-2 h-8 w-3 cursor-pointer text-gray-400 dark:text-gray-400 ${enabled ? 'hidden' : ''}`}
+			/>
+		</div>
+	</div>
+
+	<Table divClass="rounded-lg lg:overflow-hidden overflow-auto dark:border-none border">
+		<TableHead data-testid="head">
+			<TableHeadCell class="w-[80px]" data-testid="orderQuotesPair">Pair</TableHeadCell>
+			<TableHeadCell class="w-1/4" data-testid="orderQuotesMaxOutput">Maximum Output</TableHeadCell>
+			<TableHeadCell class="w-1/4" data-testid="orderQuotesPrice">Price</TableHeadCell>
+			<TableHeadCell data-testid="orderQuotesPrice">Maximum Input</TableHeadCell>
+			<TableHeadCell class="w-[50px]" />
+		</TableHead>
+
+		<TableBody>
+			{#if $orderQuoteQuery.data && $orderQuoteQuery.data.length > 0}
+				{#each $orderQuoteQuery.data as item}
+					{#if item.success && item.data}
+						<TableBodyRow data-testid="bodyRow">
+							<TableBodyCell>{item.pair.pairName}</TableBodyCell>
+							<TableBodyCell>{formatUnits(BigInt(item.data.maxOutput), 18)}</TableBodyCell>
+							<TableBodyCell
+								>{formatUnits(BigInt(item.data.ratio), 18)}
+								<span class="text-gray-400"
+									>({BigInt(item.data.ratio) > 0n
+										? formatUnits(10n ** 36n / BigInt(item.data.ratio), 18)
+										: '0'})</span
+								></TableBodyCell
+							>
+							<TableBodyCell
+								>{formatUnits(
+									BigInt(item.data.maxOutput) * BigInt(item.data.ratio),
+									36
+								)}</TableBodyCell
+							>
+							<TableBodyCell>
+								{#if handleQuoteDebugModal}
+									<button
+										on:click={() =>
+											handleQuoteDebugModal(
+												orderModalArg,
+												rpcUrl || '',
+												orderbookAddress || '',
+												item.pair.inputIndex,
+												item.pair.outputIndex,
+												item.pair.pairName,
+												$orderQuoteQuery.data[0].blockNumber
+											)}
+									>
+										<BugOutline size="sm" color="grey" />
+									</button>
+								{/if}
+							</TableBodyCell>
+						</TableBodyRow>
+					{:else if !item.success && item.error}
+						<TableBodyRow>
+							<TableBodyCell>{item.pair.pairName}</TableBodyCell>
+							<TableBodyCell colspan="2" class="flex flex-col justify-start text-gray-400">
+								<Tooltip triggeredBy="#quote-error">
+									{item.error}
+								</Tooltip>
+								<div
+									id="quote-error"
+									class="overflow-x cursor-pointer self-start border-dotted border-red-500"
+								>
+									Error fetching quote
+								</div>
+							</TableBodyCell>
+							<TableBodyCell />
+							<TableBodyCell />
+							<TableBodyCell>
+								{#if handleQuoteDebugModal}
+									<button
+										on:click={() =>
+											handleQuoteDebugModal(
+												order,
+												rpcUrl || '',
+												orderbookAddress || '',
+												item.pair.inputIndex,
+												item.pair.outputIndex,
+												item.pair.pairName,
+												$orderQuoteQuery.data[0].blockNumber
+											)}
+									>
+										<BugOutline size="sm" color="grey" />
+									</button>
+								{/if}
+							</TableBodyCell>
+						</TableBodyRow>
+					{/if}
+				{/each}
+			{:else if $orderQuoteQuery.isError}
+				<TableBodyRow>
+					<TableBodyCell colspan="3" class="text-center text-red-500 dark:text-red-400">
+						{'Error fetching quotes:'} <br />
+						{$orderQuoteQuery.error}
+					</TableBodyCell>
+				</TableBodyRow>
+			{/if}
+		</TableBody>
+	</Table>
+</div>

package/dist/components/detail/TanstackOrderQuote.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Hex } from 'viem';
+import type { SgOrder } from '@rainlanguage/orderbook/js_api';
+declare class __sveltets_Render<T> {
+    props(): {
+        id: string;
+        order: SgOrder;
+        rpcUrl: string;
+        orderbookAddress: Hex;
+        handleQuoteDebugModal?: ((order: SgOrder, rpcUrl: string, orderbookAddress: Hex, inputIndex: number, outputIndex: number, pairName: string, blockNumber?: number) => void) | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TanstackOrderQuoteProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TanstackOrderQuoteEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TanstackOrderQuoteSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TanstackOrderQuote<T> extends SvelteComponent<TanstackOrderQuoteProps<T>, TanstackOrderQuoteEvents<T>, TanstackOrderQuoteSlots<T>> {
+}
+export {};

package/dist/components/detail/TanstackPageContentDetail.svelte

@@ -0,0 +1,56 @@
+<script generics="T">import { Spinner } from "flowbite-svelte";
+export let query;
+export let emptyMessage = "Not found";
+let data;
+$: if ($query.data) {
+  data = $query.data;
+}
+</script>
+
+{#if data}
+	<div class="mb-6 flex items-end justify-between">
+		<slot name="top" {data} />
+	</div>
+	<div class="tanstack-detail-grid">
+		<div class="flex flex-col gap-y-6 lg:col-span-1">
+			<slot name="card" {data} />
+		</div>
+		<div class="h-[500px] lg:col-span-2">
+			<slot name="chart" {data} />
+		</div>
+	</div>
+	<div class="w-full">
+		<slot name="below" {data} />
+	</div>
+{:else if $query.isFetching || $query.isLoading}
+	<div class="flex h-16 w-full items-center justify-center">
+		<Spinner class="h-8 w-8" color="white" data-testid="loadingSpinner" />
+	</div>
+{:else}
+	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
+		{emptyMessage}
+	</div>
+{/if}
+
+<style>
+	.tanstack-detail-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		width: 100%;
+	}
+
+	@media (min-width: 1024px) {
+		.tanstack-detail-grid {
+			flex-direction: row;
+		}
+
+		.tanstack-detail-grid > :first-child {
+			flex: 1;
+		}
+
+		.tanstack-detail-grid > :last-child {
+			flex: 2;
+		}
+	}
+</style>

package/dist/components/detail/TanstackPageContentDetail.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import type { CreateQueryResult } from '@tanstack/svelte-query';
+declare class __sveltets_Render<T> {
+    props(): {
+        query: CreateQueryResult<T>;
+        emptyMessage?: string;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        top: {
+            data: NonNullable<T>;
+        };
+        card: {
+            data: NonNullable<T>;
+        };
+        chart: {
+            data: NonNullable<T>;
+        };
+        below: {
+            data: NonNullable<T>;
+        };
+    };
+}
+export type TanstackPageContentDetailProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TanstackPageContentDetailEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TanstackPageContentDetailSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TanstackPageContentDetail<T> extends SvelteComponent<TanstackPageContentDetailProps<T>, TanstackPageContentDetailEvents<T>, TanstackPageContentDetailSlots<T>> {
+}
+export {};