@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.241

package/dist/components/ListViewRaindexFilters.svelte

@@ -0,0 +1,64 @@
+<script>import { useRaindexClient } from "../hooks/useRaindexClient";
+import DropdownActiveNetworks from "./dropdown/DropdownActiveNetworks.svelte";
+import { page } from "$app/stores";
+import { isEmpty } from "lodash";
+import { Alert } from "flowbite-svelte";
+import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
+import DropdownTokensFilter from "./dropdown/DropdownTokensFilter.svelte";
+import DropdownRaindexesFilter from "./dropdown/DropdownRaindexesFilter.svelte";
+import InputOrderHash from "./input/InputOrderHash.svelte";
+import InputOwnerFilter from "./input/InputOwnerFilter.svelte";
+import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
+import CheckboxInactiveOrdersVault from "./CheckboxInactiveOrdersVault.svelte";
+export let hideZeroBalanceVaults;
+export let hideInactiveOrdersVaults;
+export let selectedChainIds;
+export let showInactiveOrders;
+export let orderHash;
+export let activeTokens;
+export let selectedTokens;
+export let tokensQuery;
+export let activeRaindexAddresses;
+export let selectedRaindexAddresses;
+export let ownerFilter;
+$: isVaultsPage = $page.url.pathname === "/vaults";
+$: isOrdersPage = $page.url.pathname === "/orders";
+const raindexClient = useRaindexClient();
+$: networks = raindexClient.getAllNetworks();
+</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 networks.error || isEmpty(networks.value)}
+		<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 isVaultsPage}
+			<div class="mt-4 w-full lg:w-auto">
+				<CheckboxZeroBalanceVault {hideZeroBalanceVaults} />
+			</div>
+			<div class="mt-4 w-full lg:w-auto">
+				<CheckboxInactiveOrdersVault {hideInactiveOrdersVaults} />
+			</div>
+		{/if}
+
+		{#if isOrdersPage}
+			<InputOrderHash {orderHash} />
+			<div class="mt-4">
+				<CheckboxActiveOrders {showInactiveOrders} />
+			</div>
+		{/if}
+		<InputOwnerFilter {ownerFilter} />
+		<DropdownTokensFilter {tokensQuery} {activeTokens} {selectedTokens} label="Tokens" />
+		<DropdownRaindexesFilter
+			{activeRaindexAddresses}
+			{selectedRaindexAddresses}
+			selectedChainIds={$selectedChainIds}
+			label="Raindexes"
+		/>
+		<DropdownActiveNetworks {selectedChainIds} />
+	{/if}
+</div>

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

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+import type { Readable } from 'svelte/store';
+import type { Address, RaindexVaultToken } from '@rainlanguage/raindex';
+import type { AppStoresInterface } from '../types/appStores';
+declare const __propDef: {
+    props: {
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
+        selectedChainIds: AppStoresInterface["selectedChainIds"];
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
+        orderHash: AppStoresInterface["orderHash"];
+        activeTokens: AppStoresInterface["activeTokens"];
+        selectedTokens: Address[];
+        tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
+        activeRaindexAddresses: AppStoresInterface["activeRaindexAddresses"];
+        selectedRaindexAddresses: Address[];
+        ownerFilter: AppStoresInterface["ownerFilter"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ListViewRaindexFiltersProps = typeof __propDef.props;
+export type ListViewRaindexFiltersEvents = typeof __propDef.events;
+export type ListViewRaindexFiltersSlots = typeof __propDef.slots;
+export default class ListViewRaindexFilters extends SvelteComponent<ListViewRaindexFiltersProps, ListViewRaindexFiltersEvents, ListViewRaindexFiltersSlots> {
+}
+export {};

package/dist/components/LocalDbStatusBadge.svelte

@@ -0,0 +1,27 @@
+<script>const STATUS_LABELS = {
+  active: "Active",
+  syncing: "Syncing",
+  failure: "Failure"
+};
+const DOT_CLASSES = {
+  active: "bg-emerald-400",
+  syncing: "bg-sky-400",
+  failure: "bg-red-500"
+};
+const TEXT_CLASSES = {
+  active: "text-emerald-400",
+  syncing: "text-sky-400",
+  failure: "text-red-400"
+};
+export let status = "active";
+</script>
+
+<span
+	class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+	data-testid="local-db-status"
+>
+	<span class={`h-2 w-2 rounded-full ${DOT_CLASSES[status]}`} aria-hidden="true" />
+	<span class={TEXT_CLASSES[status]}>
+		{STATUS_LABELS[status]}
+	</span>
+</span>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { LocalDbStatus } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        status?: LocalDbStatus;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusBadgeProps = typeof __propDef.props;
+export type LocalDbStatusBadgeEvents = typeof __propDef.events;
+export type LocalDbStatusBadgeSlots = typeof __propDef.slots;
+export default class LocalDbStatusBadge extends SvelteComponent<LocalDbStatusBadgeProps, LocalDbStatusBadgeEvents, LocalDbStatusBadgeSlots> {
+}
+export {};

package/dist/components/LocalDbStatusCard.svelte

@@ -0,0 +1,43 @@
+<script>import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
+import LocalDbStatusModal from "./LocalDbStatusModal.svelte";
+import { aggregateLocalDbStatus } from "../utils/localDbStatus";
+import { ChevronRightOutline } from "flowbite-svelte-icons";
+export let networkStatuses = /* @__PURE__ */ new Map();
+export let raindexStatuses = /* @__PURE__ */ new Map();
+let modalOpen = false;
+$: networkList = Array.from(networkStatuses.values());
+$: hasNetworks = networkList.length > 0;
+$: displayStatus = aggregateLocalDbStatus([
+  ...networkList,
+  ...Array.from(raindexStatuses.values())
+]).status;
+function openModal() {
+  modalOpen = true;
+}
+</script>
+
+<div
+	class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+	data-testid="local-db-status-card"
+>
+	<button
+		type="button"
+		class="flex w-full items-center justify-between px-3 py-3 text-left transition hover:bg-gray-50 dark:hover:bg-gray-800"
+		on:click={openModal}
+		data-testid="local-db-status-header"
+	>
+		<div class="flex items-center gap-2">
+			<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+				>LocalDB</span
+			>
+		</div>
+		<div class="flex items-center gap-2">
+			<LocalDbStatusBadge status={displayStatus} />
+			{#if hasNetworks}
+				<ChevronRightOutline class="h-3 w-3 shrink-0" />
+			{/if}
+		</div>
+	</button>
+</div>
+
+<LocalDbStatusModal bind:open={modalOpen} {networkStatuses} {raindexStatuses} />

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NetworkSyncStatus, RaindexSyncStatus } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        networkStatuses?: Map<number, NetworkSyncStatus>;
+        raindexStatuses?: Map<string, RaindexSyncStatus>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusCardProps = typeof __propDef.props;
+export type LocalDbStatusCardEvents = typeof __propDef.events;
+export type LocalDbStatusCardSlots = typeof __propDef.slots;
+export default class LocalDbStatusCard extends SvelteComponent<LocalDbStatusCardProps, LocalDbStatusCardEvents, LocalDbStatusCardSlots> {
+}
+export {};

package/dist/components/LocalDbStatusModal.svelte

@@ -0,0 +1,105 @@
+<script>import { Modal } from "flowbite-svelte";
+import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
+import { getNetworkName } from "../utils/getNetworkName";
+export let open = false;
+export let networkStatuses = /* @__PURE__ */ new Map();
+export let raindexStatuses = /* @__PURE__ */ new Map();
+$: networkList = Array.from(networkStatuses.values());
+$: raindexList = Array.from(raindexStatuses.values());
+$: networkGroups = buildNetworkGroups(networkList, raindexList);
+function buildNetworkGroups(networks, raindexes) {
+  const groups = [];
+  for (const network of networks) {
+    const networkRaindexes = raindexes.filter(
+      (raindex) => raindex.raindexId.chainId === network.chainId
+    );
+    groups.push({
+      chainId: network.chainId,
+      networkName: getNetworkName(network.chainId) ?? `Chain ${network.chainId}`,
+      status: network,
+      raindexes: networkRaindexes
+    });
+  }
+  return groups;
+}
+</script>
+
+<Modal
+	bind:open
+	size="lg"
+	class="dark:border dark:border-gray-700 dark:bg-gray-900"
+	dialogClass="fixed top-0 start-0 end-1 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex justify-center items-center h-full"
+	data-testid="local-db-status-modal"
+>
+	<div class="flex flex-col gap-4" slot="header">
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Database Sync Status</h3>
+	</div>
+
+	<div class="max-h-[60vh] overflow-y-auto">
+		{#if networkList.length === 0}
+			<p class="text-sm text-gray-500 dark:text-gray-400">No networks are being synced.</p>
+		{:else}
+			<div class="space-y-4">
+				{#each networkGroups as group (group.chainId)}
+					<div
+						class="rounded-lg border border-gray-200 dark:border-gray-700"
+						data-testid="network-group-{group.chainId}"
+					>
+						<div
+							class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800"
+						>
+							<div class="flex items-center gap-2">
+								<span class="font-medium text-gray-900 dark:text-white">{group.networkName}</span>
+								{#if group.status.schedulerState === 'notLeader'}
+									<span
+										class="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+									>
+										Observing
+									</span>
+								{/if}
+							</div>
+							<LocalDbStatusBadge status={group.status.status} />
+						</div>
+
+						{#if group.raindexes.length > 0}
+							<ul class="divide-y divide-gray-100 dark:divide-gray-800">
+								{#each group.raindexes as raindexStatus (raindexStatus.raindexId.raindexAddress)}
+									<li class="px-4 py-3">
+										<div class="flex items-start justify-between gap-4">
+											<div class="min-w-0 flex-1">
+												<span
+													class="font-mono text-sm text-gray-700 dark:text-gray-300"
+													title={raindexStatus.raindexId.raindexAddress}
+												>
+													{raindexStatus.raindexId.raindexAddress}
+												</span>
+												{#if raindexStatus.status === 'syncing' && raindexStatus.phaseMessage && raindexStatus.schedulerState !== 'notLeader'}
+													<div class="mt-2 text-sm text-sky-600 dark:text-sky-400">
+														{raindexStatus.phaseMessage}
+													</div>
+												{/if}
+												{#if raindexStatus.status === 'failure' && raindexStatus.error}
+													<div class="mt-2 text-sm text-red-600 dark:text-red-400">
+														{raindexStatus.error}
+													</div>
+												{/if}
+											</div>
+										</div>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+
+						{#if group.status.status === 'failure' && group.status.error}
+							<div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
+								<div class="text-sm text-red-600 dark:text-red-400">
+									{group.status.error}
+								</div>
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</Modal>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { NetworkSyncStatus, RaindexSyncStatus } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        networkStatuses?: Map<number, NetworkSyncStatus>;
+        raindexStatuses?: Map<string, RaindexSyncStatus>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusModalProps = typeof __propDef.props;
+export type LocalDbStatusModalEvents = typeof __propDef.events;
+export type LocalDbStatusModalSlots = typeof __propDef.slots;
+export default class LocalDbStatusModal extends SvelteComponent<LocalDbStatusModalProps, LocalDbStatusModalEvents, LocalDbStatusModalSlots> {
+}
+export {};

package/dist/components/OrderOrVaultHash.svelte

@@ -1,24 +1,24 @@
 <script>import { Button } from "flowbite-svelte";
 import Hash, { HashType } from "./Hash.svelte";
+import {
+  constructHashLink,
+  isOrderOrVaultActive,
+  extractHash
+} from "../utils/constructHashLink";
 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;
+export let chainId;
+export let raindexAddress;
+$: hash = extractHash(orderOrVault);
+$: isActive = isOrderOrVaultActive(orderOrVault);
+$: linkPath = constructHashLink(orderOrVault, type, chainId, raindexAddress);
 </script>
 
-<a href={`/${type}/${network}-${slug}`}>
+<a data-testid="order-or-vault-hash" href={linkPath}>
 	<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
+		data-id={hash}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
 	>
 </a>

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

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook/js_api';
+import type { Address, RaindexOrder, RaindexOrderAsIO, RaindexVault } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        orderOrVault: SgOrder | SgVault | SgOrderAsIO;
+        orderOrVault: RaindexVault | RaindexOrder | RaindexOrderAsIO;
         type: "orders" | "vaults";
-        network: string;
-        updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+        chainId: number;
+        raindexAddress: Address;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/PageHeader.svelte

@@ -5,7 +5,7 @@ export let pathname;
 $: breadcrumbs = generateBreadcrumbs(pathname);
 </script>
 
-<div class="mb-4 flex w-full items-center justify-between">
+<div class="mb-4 flex w-full items-center justify-between" data-testid="page-header">
 	<Breadcrumb
 		olClass="inline-flex items-center rtl:space-x-reverse"
 		aria-label="Default breadcrumb example"

package/dist/components/Sensitive.svelte

@@ -0,0 +1,16 @@
+<script>import { scrub as scrubStore } from "../storesGeneric/scrub";
+export let scrub = scrubStore;
+</script>
+
+<span class="relative inline-block align-bottom" data-testid="sensitive">
+	<span class:invisible={$scrub} data-testid="sensitive-content">
+		<slot />
+	</span>
+	{#if $scrub}
+		<span
+			class="absolute inset-0 rounded bg-gray-400 dark:bg-gray-600"
+			data-testid="sensitive-mask"
+			aria-hidden="true"
+		></span>
+	{/if}
+</span>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        /**
+             * Wrap any content that may reveal an address or transaction hash. When the
+             * global `scrub` toggle is on, an opaque grey box is laid over the slotted
+             * content so it can't be read in a screenshot. Purely presentational - the
+             * underlying value is untouched.
+             *
+             * The store is injectable for testing; it defaults to the global scrub store.
+             */ scrub?: Writable<boolean>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SensitiveProps = typeof __propDef.props;
+export type SensitiveEvents = typeof __propDef.events;
+export type SensitiveSlots = typeof __propDef.slots;
+export default class Sensitive extends SvelteComponent<SensitiveProps, SensitiveEvents, SensitiveSlots> {
+}
+export {};