@rainlanguage/ui-components 0.0.1-alpha.10

package/dist/components/icon/Refresh.svelte

@@ -0,0 +1,57 @@
+<script>import { getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
+const ctx = getContext("iconCtx") ?? {};
+const sizes = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
+};
+export let size = ctx.size || "md";
+export let role = ctx.role || "img";
+export let ariaLabel = "refresh";
+export let spin = false;
+</script>
+
+<svg
+	data-testid="refresh-button"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	{...$$restProps}
+	class={twMerge(
+		'shrink-0 cursor-pointer outline-none',
+		sizes[size],
+		$$props.class,
+		spin ? 'animate-spin ease-out' : ''
+	)}
+	{role}
+	aria-label={ariaLabel}
+	viewBox="0 0 24 24"
+	on:click
+	on:keydown
+	on:keyup
+	on:focus
+	on:blur
+	on:mouseenter
+	on:mouseleave
+	on:mouseover
+	on:mouseout
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M17.651 7.65a7.131 7.131 0 0 0-12.68 3.15M18.001 4v4h-4m-7.652 8.35a7.13 7.13 0 0 0 12.68-3.15M6 20v-4h4"
+	/>
+</svg>
+
+<!--
+    @component
+    [Go to docs](https://flowbite-svelte-icons.vercel.app/)
+    ## Props
+    @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = ctx.size || 'md';
+    @prop export let role = ctx.role || 'img';
+    @prop export let ariaLabel = 'refresh';
+    -->

package/dist/components/icon/Refresh.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import type { AriaRole } from 'svelte/elements';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: ("xs" | "sm" | "md" | "lg" | "xl") | undefined;
+        role?: AriaRole | undefined;
+        ariaLabel?: string | undefined;
+        spin?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type RefreshProps = typeof __propDef.props;
+export type RefreshEvents = typeof __propDef.events;
+export type RefreshSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte-icons.vercel.app/)
+ * ## Props
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = ctx.size || 'md';
+ * @prop export let role = ctx.role || 'img';
+ * @prop export let ariaLabel = 'refresh';
+ */
+export default class Refresh extends SvelteComponent<RefreshProps, RefreshEvents, RefreshSlots> {
+}
+export {};

package/dist/components/input/InputHex.svelte

@@ -0,0 +1,42 @@
+<script>import { imask } from "@imask/svelte";
+import { fromHex, toHex } from "viem";
+import { HEX_INPUT_REGEX } from "../../utils/hex";
+let valueRaw = "";
+export let value;
+export let required = true;
+$: {
+  if (value !== void 0) {
+    valueRaw = toHex(value);
+  }
+}
+const maskOptions = {
+  // hexadecimal string, optionally starting with 0x
+  mask: HEX_INPUT_REGEX,
+  lazy: false
+};
+function complete({ detail }) {
+  valueRaw = detail.value;
+  if (detail.unmaskedValue.length === 0) {
+    value = 0n;
+  } else {
+    let valuePrefixed = detail.unmaskedValue;
+    if (detail.unmaskedValue.substring(0, 2) !== "0x") {
+      valuePrefixed = `0x${valuePrefixed}`;
+    }
+    try {
+      value = fromHex(valuePrefixed, "bigint");
+    } catch (e) {
+      value = 0n;
+    }
+  }
+}
+</script>
+
+<input
+	{required}
+	type="text"
+	value={valueRaw}
+	class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400"
+	use:imask={maskOptions}
+	on:complete={complete}
+/>

package/dist/components/input/InputHex.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: bigint | undefined;
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputHexProps = typeof __propDef.props;
+export type InputHexEvents = typeof __propDef.events;
+export type InputHexSlots = typeof __propDef.slots;
+export default class InputHex extends SvelteComponent<InputHexProps, InputHexEvents, InputHexSlots> {
+}
+export {};

package/dist/components/input/InputOrderHash.svelte

@@ -0,0 +1,22 @@
+<script>import { Label } from "flowbite-svelte";
+export let orderHash;
+export let value = $orderHash;
+function handleChange(event) {
+  const input = event.target;
+  value = input.value;
+  $orderHash = value;
+}
+</script>
+
+<div data-testid="order-hash-input" class="flex flex-col gap-x-2">
+	<Label>Order Hash</Label>
+	<div class="w-full lg:w-32">
+		<input
+			type="text"
+			bind:value
+			on:input={handleChange}
+			placeholder="0x..."
+			class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400"
+		/>
+	</div>
+</div>

package/dist/components/input/InputOrderHash.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        orderHash: Writable<string>;
+        value?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputOrderHashProps = typeof __propDef.props;
+export type InputOrderHashEvents = typeof __propDef.events;
+export type InputOrderHashSlots = typeof __propDef.slots;
+export default class InputOrderHash extends SvelteComponent<InputOrderHashProps, InputOrderHashEvents, InputOrderHashSlots> {
+}
+export {};

package/dist/components/input/InputRegistryUrl.svelte

@@ -0,0 +1,18 @@
+<script>import { Button, Input } from "flowbite-svelte";
+let newRegistryUrl = localStorage.getItem("registry") || "";
+const loadRegistryUrl = () => {
+  window.history.pushState({}, "", window.location.pathname + "?registry=" + newRegistryUrl);
+  window.location.reload();
+  localStorage.setItem("registry", newRegistryUrl);
+};
+</script>
+
+<div class="flex w-full items-start gap-4">
+	<Input
+		id="strategy-url"
+		type="url"
+		placeholder="Enter URL to raw strategy registry file"
+		bind:value={newRegistryUrl}
+	/>
+	<Button class="text-nowrap" on:click={loadRegistryUrl}>Load Registry URL</Button>
+</div>

package/dist/components/input/InputRegistryUrl.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputRegistryUrlProps = typeof __propDef.props;
+export type InputRegistryUrlEvents = typeof __propDef.events;
+export type InputRegistryUrlSlots = typeof __propDef.slots;
+export default class InputRegistryUrl extends SvelteComponent<InputRegistryUrlProps, InputRegistryUrlEvents, InputRegistryUrlSlots> {
+}
+export {};

package/dist/components/input/InputToken.svelte

@@ -0,0 +1,53 @@
+<script>import { Helper, Input } from "flowbite-svelte";
+import { imask } from "@imask/svelte";
+import { isAddress } from "viem";
+let decimalsRaw = "";
+export let decimals;
+export let address = "";
+$: isAddressValid = address && address.length > 0 && isAddress(address);
+$: {
+  if (decimals !== void 0) {
+    decimalsRaw = decimals.toString();
+  }
+}
+const decimalsMaskOptions = {
+  mask: Number,
+  min: 0,
+  lazy: false,
+  scale: 0,
+  thousandsSeparator: "",
+  radix: "."
+};
+function decimalsComplete({ detail }) {
+  decimalsRaw = detail.value;
+  if (detail.unmaskedValue.length === 0) {
+    decimals = 0;
+  } else {
+    decimals = parseInt(detail.unmaskedValue);
+  }
+}
+</script>
+
+<div class="flex w-full items-start justify-start space-x-2">
+	<div class="grow" data-testid="token-address">
+		<div class="relative flex">
+			<Input label="Token Address" name="address" required bind:value={address} />
+		</div>
+
+		{#if !isAddressValid && address.length > 0}
+			<Helper class="mt-2 text-sm" color="red">Invalid Address</Helper>
+		{/if}
+
+		<Helper class="mt-2 text-sm">Token Address</Helper>
+	</div>
+	<div class="w-32 grow-0 break-all" data-testid="token-decimals-input">
+		<input
+			type="text"
+			value={decimalsRaw}
+			class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400"
+			use:imask={decimalsMaskOptions}
+			on:complete={decimalsComplete}
+		/>
+		<Helper class="break-word mt-2 text-sm">Decimals</Helper>
+	</div>
+</div>

package/dist/components/input/InputToken.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        decimals: number | undefined;
+        address?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputTokenProps = typeof __propDef.props;
+export type InputTokenEvents = typeof __propDef.events;
+export type InputTokenSlots = typeof __propDef.slots;
+export default class InputToken extends SvelteComponent<InputTokenProps, InputTokenEvents, InputTokenSlots> {
+}
+export {};

package/dist/components/input/InputTokenAmount.svelte

@@ -0,0 +1,63 @@
+<script>import { InputAddon, Button, Alert } from "flowbite-svelte";
+import { InfoCircleSolid } from "flowbite-svelte-icons";
+import { parseUnits } from "viem";
+export let symbol = void 0;
+export let decimals = 0;
+export let maxValue = void 0;
+let inputValue = "";
+export let value = 0n;
+function handleInput(event) {
+  const input = event.target;
+  inputValue = input.value;
+  if (inputValue === "") {
+    value = 0n;
+  } else {
+    try {
+      value = parseUnits(inputValue, decimals);
+    } catch (_e) {
+      value = 0n;
+    }
+  }
+}
+function fillMaxValue() {
+  if (!maxValue) return;
+  value = maxValue;
+  inputValue = maxValue.toString().padStart(decimals + 1, "0");
+  inputValue = inputValue.slice(0, -decimals) + "." + inputValue.slice(-decimals);
+  inputValue = inputValue.replace(/\.?0+$/, "");
+}
+</script>
+
+<div class="w-full">
+	<div class="flex w-full">
+		<div class="relative flex w-full">
+			<input
+				type="text"
+				class={`focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 ${symbol && '!rounded-none !rounded-l-lg'}`}
+				bind:value={inputValue}
+				on:input={handleInput}
+			/>
+
+			{#if maxValue}
+				<div class="absolute right-4 flex h-10 flex-col justify-center">
+					<Button color="blue" class="px-2 py-1" size="xs" pill on:click={fillMaxValue}>MAX</Button>
+				</div>
+			{/if}
+		</div>
+
+		{#if symbol}
+			<InputAddon>
+				<span class="whitespace-nowrap">
+					{symbol}
+				</span>
+			</InputAddon>
+		{/if}
+	</div>
+	{#if decimals === 0}
+		<Alert color="yellow" border class="mt-2">
+			<InfoCircleSolid slot="icon" class="h-6 w-6" />
+			This token does not specify a number of decimals. <br />You are inputting the raw integer
+			amount with 0 decimal places.
+		</Alert>
+	{/if}
+</div>

package/dist/components/input/InputTokenAmount.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        symbol?: string | undefined;
+        decimals?: number;
+        maxValue?: bigint | undefined;
+        value?: bigint;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputTokenAmountProps = typeof __propDef.props;
+export type InputTokenAmountEvents = typeof __propDef.events;
+export type InputTokenAmountSlots = typeof __propDef.slots;
+export default class InputTokenAmount extends SvelteComponent<InputTokenAmountProps, InputTokenAmountEvents, InputTokenAmountSlots> {
+}
+export {};

package/dist/components/tables/OrderAPY.svelte

@@ -0,0 +1,57 @@
+<script>import { createInfiniteQuery } from "@tanstack/svelte-query";
+import TanstackAppTable from "../TanstackAppTable.svelte";
+import { QKEY_ORDER_APY } from "../../queries/keys";
+import { getOrderPerformance } from "@rainlanguage/orderbook/js_api";
+import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
+import ApyTimeFilters from "../charts/APYTimeFilters.svelte";
+import { bigintStringToPercentage } from "../../utils/number";
+export let id;
+export let subgraphUrl;
+let startTimestamp;
+let endTimestamp;
+$: queryStartTime = startTimestamp ? BigInt(startTimestamp) : void 0;
+$: queryEndTime = endTimestamp ? BigInt(endTimestamp) : void 0;
+$: orderPerformance = createInfiniteQuery({
+  queryKey: [id, QKEY_ORDER_APY + id],
+  queryFn: async () => {
+    return [
+      await getOrderPerformance(
+        subgraphUrl || "",
+        id,
+        queryStartTime,
+        queryEndTime
+      )
+    ];
+  },
+  initialPageParam: 0,
+  getNextPageParam: () => void 0,
+  enabled: !!subgraphUrl
+});
+</script>
+
+<TanstackAppTable
+	query={orderPerformance}
+	emptyMessage="APY Unavailable"
+	rowHoverable={false}
+	queryKey={id}
+>
+	<svelte:fragment slot="timeFilter">
+		<ApyTimeFilters bind:startTimestamp bind:endTimestamp />
+	</svelte:fragment>
+	<svelte:fragment slot="head">
+		<TableHeadCell padding="p-4">APY</TableHeadCell>
+	</svelte:fragment>
+
+	<svelte:fragment slot="bodyRow" let:item>
+		<TableBodyCell tdClass="break-all px-4 py-2" data-testid="apy-field">
+			{item.denominatedPerformance
+				? (item.denominatedPerformance.apyIsNeg ? '-' : '') +
+					bigintStringToPercentage(item.denominatedPerformance.apy, 18, 5) +
+					'% in ' +
+					(item.denominatedPerformance.token.symbol ??
+						item.denominatedPerformance.token.name ??
+						item.denominatedPerformance.token.address)
+				: 'Unavailable APY'}
+		</TableBodyCell>
+	</svelte:fragment>
+</TanstackAppTable>

package/dist/components/tables/OrderAPY.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        subgraphUrl: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderApyProps = typeof __propDef.props;
+export type OrderApyEvents = typeof __propDef.events;
+export type OrderApySlots = typeof __propDef.slots;
+export default class OrderApy extends SvelteComponent<OrderApyProps, OrderApyEvents, OrderApySlots> {
+}
+export {};

package/dist/components/tables/OrderTradesListTable.svelte

@@ -0,0 +1,145 @@
+<script>import { createInfiniteQuery } from "@tanstack/svelte-query";
+import TanstackAppTable from "../TanstackAppTable.svelte";
+import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
+import { getOrderTradesList, getOrderTradesCount } from "@rainlanguage/orderbook/js_api";
+import { DEFAULT_PAGE_SIZE } from "../../queries/constants";
+import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
+import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import Hash, { HashType } from "../Hash.svelte";
+import { formatUnits } from "viem";
+import { BugOutline } from "flowbite-svelte-icons";
+import TableTimeFilters from "../charts/TableTimeFilters.svelte";
+export let id;
+export let subgraphUrl;
+export let rpcUrl = void 0;
+export let handleDebugTradeModal = void 0;
+let startTimestamp;
+let endTimestamp;
+let tradesCount;
+$: orderTradesQuery = createInfiniteQuery({
+  queryKey: [id, QKEY_ORDER_TRADES_LIST + id],
+  queryFn: async ({ pageParam }) => {
+    tradesCount = void 0;
+    const [count, trades] = await Promise.all([
+      getOrderTradesCount(
+        subgraphUrl || "",
+        id,
+        startTimestamp ? BigInt(startTimestamp) : void 0,
+        endTimestamp ? BigInt(endTimestamp) : void 0
+      ),
+      getOrderTradesList(
+        subgraphUrl || "",
+        id,
+        { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE },
+        startTimestamp ? BigInt(startTimestamp) : void 0,
+        endTimestamp ? BigInt(endTimestamp) : void 0
+      )
+    ]);
+    if (typeof count === "number") {
+      tradesCount = count;
+    }
+    return trades;
+  },
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, _allPages, lastPageParam) => {
+    return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
+  },
+  enabled: !!subgraphUrl
+});
+</script>
+
+<TanstackAppTable
+	query={orderTradesQuery}
+	emptyMessage="No trades found"
+	rowHoverable={false}
+	queryKey={id}
+>
+	<svelte:fragment slot="info">
+		{#if tradesCount !== undefined}
+			<div class="px-2">{tradesCount} Trades</div>
+		{/if}
+	</svelte:fragment>
+	<svelte:fragment slot="timeFilter">
+		<TableTimeFilters bind:startTimestamp bind:endTimestamp />
+	</svelte:fragment>
+	<svelte:fragment slot="head">
+		<TableHeadCell padding="p-4">Date</TableHeadCell>
+		<TableHeadCell padding="p-0">Sender</TableHeadCell>
+		<TableHeadCell padding="p-0">Transaction Hash</TableHeadCell>
+		<TableHeadCell padding="p-0">Input</TableHeadCell>
+		<TableHeadCell padding="p-0">Output</TableHeadCell>
+		<TableHeadCell padding="p-0">IO Ratio</TableHeadCell>
+		<TableHeadCell padding="p-0"></TableHeadCell>
+	</svelte:fragment>
+
+	<svelte:fragment slot="bodyRow" let:item>
+		<TableBodyCell tdClass="px-4 py-2">
+			{formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2 min-w-32">
+			<Hash type={HashType.Wallet} value={item.tradeEvent.transaction.from} />
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2 min-w-32">
+			<Hash type={HashType.Transaction} value={item.tradeEvent.transaction.id} />
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2">
+			{formatUnits(
+				BigInt(item.inputVaultBalanceChange.amount),
+				Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
+			)}
+			{item.inputVaultBalanceChange.vault.token.symbol}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2">
+			{formatUnits(
+				BigInt(item.outputVaultBalanceChange.amount) * BigInt(-1),
+				Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
+			)}
+			{item.outputVaultBalanceChange.vault.token.symbol}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2" data-testid="io-ratio">
+			{Math.abs(
+				Number(
+					formatUnits(
+						BigInt(item.inputVaultBalanceChange.amount),
+						Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
+					)
+				) /
+					Number(
+						formatUnits(
+							BigInt(item.outputVaultBalanceChange.amount),
+							Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
+						)
+					)
+			)}
+			<span class="text-gray-400">
+				({Math.abs(
+					Number(
+						formatUnits(
+							BigInt(item.outputVaultBalanceChange.amount),
+							Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
+						)
+					) /
+						Number(
+							formatUnits(
+								BigInt(item.inputVaultBalanceChange.amount),
+								Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
+							)
+						)
+				)})
+			</span>
+		</TableBodyCell>
+		{#if rpcUrl && handleDebugTradeModal}
+			<TableBodyCell tdClass="py-2">
+				<button
+					data-testid="debug-trade-button"
+					class="text-gray-500 hover:text-gray-700"
+					on:click={() => {
+						if (rpcUrl) handleDebugTradeModal(item.tradeEvent.transaction.id, rpcUrl);
+					}}
+				>
+					<BugOutline size="xs" />
+				</button>
+			</TableBodyCell>
+		{/if}
+	</svelte:fragment>
+</TanstackAppTable>

package/dist/components/tables/OrderTradesListTable.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        subgraphUrl: string;
+        rpcUrl?: string | undefined;
+        handleDebugTradeModal?: ((hash: string, rpcUrl: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderTradesListTableProps = typeof __propDef.props;
+export type OrderTradesListTableEvents = typeof __propDef.events;
+export type OrderTradesListTableSlots = typeof __propDef.slots;
+export default class OrderTradesListTable extends SvelteComponent<OrderTradesListTableProps, OrderTradesListTableEvents, OrderTradesListTableSlots> {
+}
+export {};