@rainlanguage/ui-components 0.0.1-alpha.10

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconTelegramProps */
+/** @typedef {typeof __propDef.events}  IconTelegramEvents */
+/** @typedef {typeof __propDef.slots}  IconTelegramSlots */
+export default class IconTelegram extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconTelegramProps = typeof __propDef.props;
+export type IconTelegramEvents = typeof __propDef.events;
+export type IconTelegramSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/IconWalletConnect.svelte

@@ -0,0 +1,13 @@
+<script>import icon from "../assets/walletconnect.svg?raw";
+</script>
+
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<div class="icon-walletconnect">{@html icon}</div>
+
+<style>
+	:global(.icon-walletconnect svg) {
+		height: 1.5rem;
+		width: auto;
+		fill: white;
+	}
+</style>

package/dist/components/IconWalletConnect.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 IconWalletConnectProps = typeof __propDef.props;
+export type IconWalletConnectEvents = typeof __propDef.events;
+export type IconWalletConnectSlots = typeof __propDef.slots;
+export default class IconWalletConnect extends SvelteComponent<IconWalletConnectProps, IconWalletConnectEvents, IconWalletConnectSlots> {
+}
+export {};

package/dist/components/IconWarning.svelte

@@ -0,0 +1,8 @@
+<script>import ExclamationCircleSolid from "flowbite-svelte-icons/ExclamationCircleSolid.svelte";
+</script>
+
+<div
+	class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-yellow-100 text-yellow-500 dark:bg-yellow-800 dark:text-yellow-200"
+>
+	<ExclamationCircleSolid class="h-5 w-5" />
+</div>

package/dist/components/IconWarning.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 IconWarningProps = typeof __propDef.props;
+export type IconWarningEvents = typeof __propDef.events;
+export type IconWarningSlots = typeof __propDef.slots;
+export default class IconWarning extends SvelteComponent<IconWarningProps, IconWarningEvents, IconWarningSlots> {
+}
+export {};

package/dist/components/License.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { Heading, Text, BlockQuote } from '@rainlanguage/ui-components';
+	import Markdown from 'svelte-markdown';
+	import { onMount } from 'svelte';
+
+	let source = '';
+
+	onMount(async () => {
+		try {
+			const response = await fetch(
+				'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md'
+			);
+			if (response.ok) {
+				source = await response.text();
+			}
+		} catch {
+			source = '';
+		}
+	});
+</script>
+
+<Markdown
+	{source}
+	renderers={{
+		text: Text,
+		heading: Heading,
+		blockquote: BlockQuote
+	}}
+/>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  LicenseProps */
+/** @typedef {typeof __propDef.events}  LicenseEvents */
+/** @typedef {typeof __propDef.slots}  LicenseSlots */
+export default class License extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LicenseProps = typeof __propDef.props;
+export type LicenseEvents = typeof __propDef.events;
+export type LicenseSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/ListViewOrderbookFilters.svelte

@@ -0,0 +1,58 @@
+<script generics="T">import { isEmpty } from "lodash";
+import { Alert, Tooltip } from "flowbite-svelte";
+import DropdownActiveSubgraphs from "./dropdown/DropdownActiveSubgraphs.svelte";
+import DropdownOrderStatus from "./dropdown/DropdownOrderStatus.svelte";
+import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
+import InputOrderHash from "./input/InputOrderHash.svelte";
+import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
+import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
+export let settings;
+export let accounts;
+export let hideZeroBalanceVaults;
+export let activeAccountsItems;
+export let showMyItemsOnly;
+export let activeSubgraphs;
+export let activeOrderStatus;
+export let orderHash;
+export let isVaultsPage;
+export let isOrdersPage;
+export let signerAddress;
+</script>
+
+<div
+	class="grid w-full items-center gap-4 md:flex md:justify-end lg:min-w-[600px]"
+	style="grid-template-columns: repeat(2, minmax(0, 1fr));"
+>
+	{#if isEmpty($settings?.networks)}
+		<Alert color="gray" data-testid="no-networks-alert" class="w-full">
+			No networks added to <a class="underline" href="/settings">settings</a>
+		</Alert>
+	{: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}
+					<Tooltip>Connect a wallet to filter by {isVaultsPage ? 'vault' : 'order'} owner</Tooltip>
+				{/if}
+			</div>
+		{/if}
+		{#if isVaultsPage}
+			<div class="mt-4 w-full lg:w-auto">
+				<CheckboxZeroBalanceVault {hideZeroBalanceVaults} />
+			</div>
+		{/if}
+
+		{#if isOrdersPage}
+			<InputOrderHash {orderHash} />
+			<DropdownOrderStatus {activeOrderStatus} />
+		{/if}
+		{#if $accounts && Object.values($accounts).length > 0}
+			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
+		{/if}
+		<DropdownActiveSubgraphs settings={$settings} {activeSubgraphs} />
+	{/if}
+</div>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Readable, Writable } from 'svelte/store';
+import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+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;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ListViewOrderbookFiltersProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type ListViewOrderbookFiltersEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type ListViewOrderbookFiltersSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class ListViewOrderbookFilters<T> extends SvelteComponent<ListViewOrderbookFiltersProps<T>, ListViewOrderbookFiltersEvents<T>, ListViewOrderbookFiltersSlots<T>> {
+}
+export {};

package/dist/components/OrderOrVaultHash.svelte

@@ -0,0 +1,24 @@
+<script>import { Button } from "flowbite-svelte";
+import Hash, { HashType } from "./Hash.svelte";
+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;
+</script>
+
+<a href={`/${type}/${network}-${slug}`}>
+	<Button
+		class="mr-1 mt-1 px-2 py-1 text-sm"
+		color={isActive ? 'green' : 'yellow'}
+		data-testid="vault-order-input"
+		data-id={slug}
+		on:click={() => {
+			updateActiveNetworkAndOrderbook(network);
+		}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
+	>
+</a>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        orderOrVault: SgOrder | SgVault | SgOrderAsIO;
+        type: "orders" | "vaults";
+        network: string;
+        updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderOrVaultHashProps = typeof __propDef.props;
+export type OrderOrVaultHashEvents = typeof __propDef.events;
+export type OrderOrVaultHashSlots = typeof __propDef.slots;
+export default class OrderOrVaultHash extends SvelteComponent<OrderOrVaultHashProps, OrderOrVaultHashEvents, OrderOrVaultHashSlots> {
+}
+export {};

package/dist/components/PageHeader.svelte

@@ -0,0 +1,33 @@
+<script>import { Breadcrumb, BreadcrumbItem } from "flowbite-svelte";
+import { generateBreadcrumbs } from "../utils/breadcrumbs";
+export let title;
+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}
+			<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>
+	<div class="flex-1">
+		<div class="flex justify-end space-x-2">
+			<slot name="actions" />
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        pathname: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        actions: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
+export default class PageHeader extends SvelteComponent<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
+}
+export {};

package/dist/components/TanstackAppTable.svelte

@@ -0,0 +1,73 @@
+<script generics="T">import { invalidateIdQuery } from "../queries/queryClient";
+import Refresh from "./icon/Refresh.svelte";
+import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
+import { createEventDispatcher } from "svelte";
+import { useQueryClient } from "@tanstack/svelte-query";
+const queryClient = useQueryClient();
+const dispatch = createEventDispatcher();
+export let queryKey;
+export let query;
+export let emptyMessage = "None found";
+export let rowHoverable = true;
+</script>
+
+<div data-testid="title" class="flex h-16 w-full items-center justify-end">
+	<slot name="info" />
+	<slot name="timeFilter" />
+	<slot name="title" />
+	<Refresh
+		class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+		data-testid="refreshButton"
+		spin={$query.isLoading || $query.isFetching}
+		on:click={async () => {
+			if (queryKey) {
+				await invalidateIdQuery(queryClient, queryKey);
+			}
+			$query.refetch();
+		}}
+	/>
+</div>
+{#if $query.data?.pages[0].length === 0}
+	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
+		{emptyMessage}
+	</div>
+{:else if $query.data}
+	<Table
+		divClass="cursor-pointer rounded-lg overflow-auto dark:border-none border"
+		hoverable={rowHoverable}
+	>
+		<TableHead data-testid="head">
+			<slot name="head" />
+		</TableHead>
+		<TableBody>
+			{#each $query.data?.pages as page}
+				{#each page as item}
+					<TableBodyRow
+						class="whitespace-nowrap"
+						data-testid="bodyRow"
+						on:click={() => {
+							dispatch('clickRow', { item });
+						}}
+					>
+						<slot name="bodyRow" {item} />
+					</TableBodyRow>
+				{/each}
+			{/each}
+		</TableBody>
+	</Table>
+	<div class="mt-2 flex justify-center">
+		<Button
+			data-testid="loadMoreButton"
+			size="xs"
+			color="dark"
+			on:click={() => $query.fetchNextPage()}
+			disabled={!$query.hasNextPage || $query.isFetchingNextPage}
+		>
+			{#if $query.isFetchingNextPage}
+				Loading more...
+			{:else if $query.hasNextPage}
+				Load More
+			{:else}Nothing more to load{/if}
+		</Button>
+	</div>
+{/if}

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
+declare class __sveltets_Render<T> {
+    props(): {
+        queryKey: string | undefined;
+        query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
+        emptyMessage?: string;
+        rowHoverable?: boolean;
+    };
+    events(): {
+        clickRow: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        info: {};
+        timeFilter: {};
+        title: {};
+        head: {};
+        bodyRow: {
+            item: T;
+        };
+    };
+}
+export type TanstackAppTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TanstackAppTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TanstackAppTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TanstackAppTable<T> extends SvelteComponent<TanstackAppTableProps<T>, TanstackAppTableEvents<T>, TanstackAppTableSlots<T>> {
+}
+export {};

package/dist/components/Text.svelte

@@ -0,0 +1,12 @@
+<script>
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	export let text;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	text;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	export let raw;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	raw;
+</script>
+
+<div class="my-2 mb-3"><slot /></div>

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

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  TextProps */
+/** @typedef {typeof __propDef.events}  TextEvents */
+/** @typedef {typeof __propDef.slots}  TextSlots */
+export default class Text extends SvelteComponent<{
+    text: any;
+    raw: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TextProps = typeof __propDef.props;
+export type TextEvents = typeof __propDef.events;
+export type TextSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text: any;
+        raw: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/charts/APYTimeFilters.svelte

@@ -0,0 +1,47 @@
+<script>import ButtonTab from "../ButtonTab.svelte";
+import { dateTimestamp, TIME_DELTA_1_YEAR, TIME_DELTA_30_DAYS } from "../../services/time";
+import { ButtonGroup } from "flowbite-svelte";
+let now = dateTimestamp(/* @__PURE__ */ new Date());
+let timeDelta;
+function setNow() {
+  now = dateTimestamp(/* @__PURE__ */ new Date());
+}
+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_1_YEAR;
+			startTimestamp = now - TIME_DELTA_1_YEAR;
+			endTimestamp = now;
+		}}
+		active={timeDelta === TIME_DELTA_1_YEAR}
+		size="xs"
+		class="px-2 py-1">Last Year</ButtonTab
+	>
+	<ButtonTab
+		on:click={() => {
+			setNow();
+			timeDelta = TIME_DELTA_30_DAYS;
+			startTimestamp = now - TIME_DELTA_30_DAYS;
+			endTimestamp = now;
+		}}
+		active={timeDelta === TIME_DELTA_30_DAYS}
+		size="xs"
+		class="px-2 py-1">Last Month</ButtonTab
+	>
+</ButtonGroup>

package/dist/components/charts/APYTimeFilters.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 ApyTimeFiltersProps = typeof __propDef.props;
+export type ApyTimeFiltersEvents = typeof __propDef.events;
+export type ApyTimeFiltersSlots = typeof __propDef.slots;
+export default class ApyTimeFilters extends SvelteComponent<ApyTimeFiltersProps, ApyTimeFiltersEvents, ApyTimeFiltersSlots> {
+}
+export {};

package/dist/components/charts/ChartTimeFilters.svelte

@@ -0,0 +1,35 @@
+<script>import ButtonTab from "../ButtonTab.svelte";
+import { ButtonGroup } from "flowbite-svelte";
+const TIME_DELTA_24_HOURS = 60 * 60 * 24;
+const TIME_DELTA_7_DAYS = TIME_DELTA_24_HOURS * 7;
+const TIME_DELTA_30_DAYS = TIME_DELTA_24_HOURS * 30;
+const TIME_DELTA_1_YEAR = TIME_DELTA_24_HOURS * 365;
+export let timeDelta = TIME_DELTA_1_YEAR;
+</script>
+
+<ButtonGroup class="bg-gray-800" data-testid="lightweightChartYearButtons">
+	<ButtonTab
+		on:click={() => (timeDelta = TIME_DELTA_1_YEAR)}
+		active={timeDelta === TIME_DELTA_1_YEAR}
+		size="xs"
+		class="px-2 py-1">1 Year</ButtonTab
+	>
+	<ButtonTab
+		on:click={() => (timeDelta = TIME_DELTA_30_DAYS)}
+		active={timeDelta === TIME_DELTA_30_DAYS}
+		size="xs"
+		class="px-2 py-1">30 Days</ButtonTab
+	>
+	<ButtonTab
+		on:click={() => (timeDelta = TIME_DELTA_7_DAYS)}
+		active={timeDelta === TIME_DELTA_7_DAYS}
+		size="xs"
+		class="px-2 py-1">7 Days</ButtonTab
+	>
+	<ButtonTab
+		on:click={() => (timeDelta = TIME_DELTA_24_HOURS)}
+		active={timeDelta === TIME_DELTA_24_HOURS}
+		size="xs"
+		class="px-2 py-1">24 Hours</ButtonTab
+	>
+</ButtonGroup>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        timeDelta?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ChartTimeFiltersProps = typeof __propDef.props;
+export type ChartTimeFiltersEvents = typeof __propDef.events;
+export type ChartTimeFiltersSlots = typeof __propDef.slots;
+export default class ChartTimeFilters extends SvelteComponent<ChartTimeFiltersProps, ChartTimeFiltersEvents, ChartTimeFiltersSlots> {
+}
+export {};