@rainlanguage/ui-components 0.0.1-alpha.237 → 0.0.1-alpha.239

package/dist/components/{ListViewOrderbookFilters.svelte → ListViewRaindexFilters.svelte}

@@ -5,7 +5,7 @@ import { isEmpty } from "lodash";
 import { Alert } from "flowbite-svelte";
 import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownTokensFilter from "./dropdown/DropdownTokensFilter.svelte";
-import DropdownOrderbooksFilter from "./dropdown/DropdownOrderbooksFilter.svelte";
+import DropdownRaindexesFilter from "./dropdown/DropdownRaindexesFilter.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
 import InputOwnerFilter from "./input/InputOwnerFilter.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
@@ -18,8 +18,8 @@ export let orderHash;
 export let activeTokens;
 export let selectedTokens;
 export let tokensQuery;
-export let activeOrderbookAddresses;
-export let selectedOrderbookAddresses;
+export let activeRaindexAddresses;
+export let selectedRaindexAddresses;
 export let ownerFilter;
 $: isVaultsPage = $page.url.pathname === "/vaults";
 $: isOrdersPage = $page.url.pathname === "/orders";
@@ -53,11 +53,11 @@ $: networks = raindexClient.getAllNetworks();
 		{/if}
 		<InputOwnerFilter {ownerFilter} />
 		<DropdownTokensFilter {tokensQuery} {activeTokens} {selectedTokens} label="Tokens" />
-		<DropdownOrderbooksFilter
-			{activeOrderbookAddresses}
-			{selectedOrderbookAddresses}
+		<DropdownRaindexesFilter
+			{activeRaindexAddresses}
+			{selectedRaindexAddresses}
 			selectedChainIds={$selectedChainIds}
-			label="Orderbooks"
+			label="Raindexes"
 		/>
 		<DropdownActiveNetworks {selectedChainIds} />
 	{/if}

package/dist/components/{ListViewOrderbookFilters.svelte.d.ts → ListViewRaindexFilters.svelte.d.ts}

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { QueryObserverResult } from '@tanstack/svelte-query';
 import type { Readable } from 'svelte/store';
-import type { Address, RaindexVaultToken } from '@rainlanguage/orderbook';
+import type { Address, RaindexVaultToken } from '@rainlanguage/raindex';
 import type { AppStoresInterface } from '../types/appStores';
 declare const __propDef: {
     props: {
@@ -13,8 +13,8 @@ declare const __propDef: {
         activeTokens: AppStoresInterface["activeTokens"];
         selectedTokens: Address[];
         tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
-        activeOrderbookAddresses: AppStoresInterface["activeOrderbookAddresses"];
-        selectedOrderbookAddresses: Address[];
+        activeRaindexAddresses: AppStoresInterface["activeRaindexAddresses"];
+        selectedRaindexAddresses: Address[];
         ownerFilter: AppStoresInterface["ownerFilter"];
     };
     events: {
@@ -24,9 +24,9 @@ declare const __propDef: {
     exports?: {} | undefined;
     bindings?: string | undefined;
 };
-export type ListViewOrderbookFiltersProps = typeof __propDef.props;
-export type ListViewOrderbookFiltersEvents = typeof __propDef.events;
-export type ListViewOrderbookFiltersSlots = typeof __propDef.slots;
-export default class ListViewOrderbookFilters extends SvelteComponent<ListViewOrderbookFiltersProps, ListViewOrderbookFiltersEvents, ListViewOrderbookFiltersSlots> {
+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.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { LocalDbStatus } from '@rainlanguage/orderbook';
+import type { LocalDbStatus } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         status?: LocalDbStatus;

package/dist/components/LocalDbStatusCard.svelte

@@ -1,13 +1,16 @@
 <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 orderbookStatuses = /* @__PURE__ */ new Map();
+export let raindexStatuses = /* @__PURE__ */ new Map();
 let modalOpen = false;
 $: networkList = Array.from(networkStatuses.values());
 $: hasNetworks = networkList.length > 0;
-$: hasFailure = networkList.some((s) => s.status === "failure");
-$: displayStatus = hasFailure ? "failure" : "active";
+$: displayStatus = aggregateLocalDbStatus([
+  ...networkList,
+  ...Array.from(raindexStatuses.values())
+]).status;
 function openModal() {
   modalOpen = true;
 }
@@ -37,4 +40,4 @@ function openModal() {
 	</button>
 </div>
 
-<LocalDbStatusModal bind:open={modalOpen} {networkStatuses} {orderbookStatuses} />
+<LocalDbStatusModal bind:open={modalOpen} {networkStatuses} {raindexStatuses} />

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { NetworkSyncStatus, OrderbookSyncStatus } from '@rainlanguage/orderbook';
+import type { NetworkSyncStatus, RaindexSyncStatus } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         networkStatuses?: Map<number, NetworkSyncStatus>;
-        orderbookStatuses?: Map<string, OrderbookSyncStatus>;
+        raindexStatuses?: Map<string, RaindexSyncStatus>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/LocalDbStatusModal.svelte

@@ -3,19 +3,21 @@ import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
 import { getNetworkName } from "../utils/getNetworkName";
 export let open = false;
 export let networkStatuses = /* @__PURE__ */ new Map();
-export let orderbookStatuses = /* @__PURE__ */ new Map();
+export let raindexStatuses = /* @__PURE__ */ new Map();
 $: networkList = Array.from(networkStatuses.values());
-$: orderbookList = Array.from(orderbookStatuses.values());
-$: networkGroups = buildNetworkGroups(networkList, orderbookList);
-function buildNetworkGroups(networks, orderbooks) {
+$: raindexList = Array.from(raindexStatuses.values());
+$: networkGroups = buildNetworkGroups(networkList, raindexList);
+function buildNetworkGroups(networks, raindexes) {
   const groups = [];
   for (const network of networks) {
-    const networkOrderbooks = orderbooks.filter((ob) => ob.obId.chainId === network.chainId);
+    const networkRaindexes = raindexes.filter(
+      (raindex) => raindex.raindexId.chainId === network.chainId
+    );
     groups.push({
       chainId: network.chainId,
       networkName: getNetworkName(network.chainId) ?? `Chain ${network.chainId}`,
       status: network,
-      orderbooks: networkOrderbooks
+      raindexes: networkRaindexes
     });
   }
   return groups;
@@ -59,26 +61,26 @@ function buildNetworkGroups(networks, orderbooks) {
 							<LocalDbStatusBadge status={group.status.status} />
 						</div>
 
-						{#if group.orderbooks.length > 0}
+						{#if group.raindexes.length > 0}
 							<ul class="divide-y divide-gray-100 dark:divide-gray-800">
-								{#each group.orderbooks as obStatus (obStatus.obId.orderbookAddress)}
+								{#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={obStatus.obId.orderbookAddress}
+													title={raindexStatus.raindexId.raindexAddress}
 												>
-													{obStatus.obId.orderbookAddress}
+													{raindexStatus.raindexId.raindexAddress}
 												</span>
-												{#if obStatus.status === 'syncing' && obStatus.phaseMessage && obStatus.schedulerState !== 'notLeader'}
+												{#if raindexStatus.status === 'syncing' && raindexStatus.phaseMessage && raindexStatus.schedulerState !== 'notLeader'}
 													<div class="mt-2 text-sm text-sky-600 dark:text-sky-400">
-														{obStatus.phaseMessage}
+														{raindexStatus.phaseMessage}
 													</div>
 												{/if}
-												{#if obStatus.status === 'failure' && obStatus.error}
+												{#if raindexStatus.status === 'failure' && raindexStatus.error}
 													<div class="mt-2 text-sm text-red-600 dark:text-red-400">
-														{obStatus.error}
+														{raindexStatus.error}
 													</div>
 												{/if}
 											</div>

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { NetworkSyncStatus, OrderbookSyncStatus } from '@rainlanguage/orderbook';
+import type { NetworkSyncStatus, RaindexSyncStatus } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         open?: boolean;
         networkStatuses?: Map<number, NetworkSyncStatus>;
-        orderbookStatuses?: Map<string, OrderbookSyncStatus>;
+        raindexStatuses?: Map<string, RaindexSyncStatus>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/OrderOrVaultHash.svelte

@@ -8,10 +8,10 @@ import {
 export let orderOrVault;
 export let type;
 export let chainId;
-export let orderbookAddress;
+export let raindexAddress;
 $: hash = extractHash(orderOrVault);
 $: isActive = isOrderOrVaultActive(orderOrVault);
-$: linkPath = constructHashLink(orderOrVault, type, chainId, orderbookAddress);
+$: linkPath = constructHashLink(orderOrVault, type, chainId, raindexAddress);
 </script>
 
 <a data-testid="order-or-vault-hash" href={linkPath}>

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

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { Address, RaindexOrder, RaindexOrderAsIO, RaindexVault } from '@rainlanguage/orderbook';
+import type { Address, RaindexOrder, RaindexOrderAsIO, RaindexVault } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         orderOrVault: RaindexVault | RaindexOrder | RaindexOrderAsIO;
         type: "orders" | "vaults";
         chainId: number;
-        orderbookAddress: Address;
+        raindexAddress: Address;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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 {};

package/dist/components/TanstackAppTable.svelte

@@ -1,9 +1,22 @@
 <script generics="DataItem, InputData = DataItem[]">import { invalidateTanstackQueries } from "../queries/queryClient";
 import Refresh from "./icon/Refresh.svelte";
-import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
-import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableBodyRow,
+  TableHead
+} from "flowbite-svelte";
+import {
+  afterUpdate,
+  createEventDispatcher,
+  onDestroy,
+  onMount
+} from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
-import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
+import {
+  createWindowVirtualizer
+} from "@tanstack/svelte-virtual";
 const queryClient = useQueryClient();
 const dispatch = createEventDispatcher();
 export let queryKey;
@@ -37,6 +50,7 @@ $: {
 $: flattenedRows = transformedPages.flat();
 $: totalRows = flattenedRows.length;
 $: hasData = totalRows > 0;
+$: isInitialLoading = totalRows === 0 && ($query.isLoading || $query.isFetching);
 const hasWindow = typeof window !== "undefined";
 let tableContainerElement = null;
 let tableOffsetTop = 0;
@@ -118,7 +132,9 @@ afterUpdate(() => {
     return;
   }
   const rows = Array.from(
-    tableContainerElement.querySelectorAll('tbody tr[data-virtual-row="true"]')
+    tableContainerElement.querySelectorAll(
+      'tbody tr[data-virtual-row="true"]'
+    )
   );
   if (!rows.length) {
     return;
@@ -136,89 +152,132 @@ afterUpdate(() => {
 </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) {
-				invalidateTanstackQueries(queryClient, [queryKey]);
-			}
-		}}
-	/>
+  <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"
+    title="Refresh"
+    ariaLabel="Refresh"
+    spin={$query.isLoading || $query.isFetching}
+    on:click={async () => {
+      if (queryKey) {
+        invalidateTanstackQueries(queryClient, [queryKey]);
+      }
+    }}
+  />
 </div>
-{#if totalRows === 0}
-	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
-		{emptyMessage}
-	</div>
+{#if isInitialLoading}
+  <div
+    data-testid="tableLoadingSkeleton"
+    class="animate-pulse overflow-hidden rounded-lg border dark:border-gray-700"
+  >
+    <div
+      class="grid grid-cols-5 gap-4 border-b bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800"
+    >
+      {#each [0, 1, 2, 3, 4] as columnIndex (columnIndex)}
+        <div class="h-3 rounded bg-gray-200 dark:bg-gray-700" />
+      {/each}
+    </div>
+    {#each [0, 1, 2, 3, 4, 5, 6, 7] as rowIndex (rowIndex)}
+      <div
+        class="grid grid-cols-5 gap-4 border-b p-4 last:border-b-0 dark:border-gray-700"
+      >
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+      </div>
+    {/each}
+  </div>
+{:else if totalRows === 0}
+  <div
+    data-testid="emptyMessage"
+    class="text-center text-gray-900 dark:text-white"
+  >
+    {emptyMessage}
+  </div>
 {:else if hasData}
-	<div
-		class="cursor-pointer overflow-x-auto rounded-lg border dark:border-none"
-		data-testid="tanstackTableContainer"
-		bind:this={tableContainerElement}
-	>
-		<Table divClass="min-w-full" class="w-full table-fixed" hoverable={rowHoverable}>
-			<TableHead data-testid="head">
-				<slot name="head" />
-			</TableHead>
-			<TableBody>
-				{#if virtualizationActive && topPadding > 0}
-					<tr aria-hidden="true">
-						<td colspan="1000" class="border-0 p-0" style={`height:${topPadding}px;`} />
-					</tr>
-				{/if}
-				{#if virtualizationActive}
-					{#each virtualItems as virtualItem (virtualItem.key)}
-						<TableBodyRow
-							class="whitespace-nowrap"
-							data-testid="bodyRow"
-							data-virtual-row="true"
-							on:click={() => {
-								dispatch('clickRow', { item: flattenedRows[virtualItem.index] });
-							}}
-						>
-							<slot name="bodyRow" item={flattenedRows[virtualItem.index]} />
-						</TableBodyRow>
-					{/each}
-				{:else}
-					{#each transformedPages 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}
-				{/if}
-				{#if virtualizationActive && bottomPadding > 0}
-					<tr aria-hidden="true">
-						<td colspan="1000" class="border-0 p-0" style={`height:${bottomPadding}px;`} />
-					</tr>
-				{/if}
-			</TableBody>
-		</Table>
-	</div>
-	<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>
+  <div
+    class="cursor-pointer overflow-x-auto rounded-lg border dark:border-none"
+    data-testid="tanstackTableContainer"
+    bind:this={tableContainerElement}
+  >
+    <Table
+      divClass="min-w-full"
+      class="w-full table-fixed"
+      hoverable={rowHoverable}
+    >
+      <TableHead data-testid="head">
+        <slot name="head" />
+      </TableHead>
+      <TableBody>
+        {#if virtualizationActive && topPadding > 0}
+          <tr aria-hidden="true">
+            <td
+              colspan="1000"
+              class="border-0 p-0"
+              style={`height:${topPadding}px;`}
+            />
+          </tr>
+        {/if}
+        {#if virtualizationActive}
+          {#each virtualItems as virtualItem (virtualItem.key)}
+            <TableBodyRow
+              class="whitespace-nowrap"
+              data-testid="bodyRow"
+              data-virtual-row="true"
+              on:click={() => {
+                dispatch("clickRow", {
+                  item: flattenedRows[virtualItem.index],
+                });
+              }}
+            >
+              <slot name="bodyRow" item={flattenedRows[virtualItem.index]} />
+            </TableBodyRow>
+          {/each}
+        {:else}
+          {#each transformedPages 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}
+        {/if}
+        {#if virtualizationActive && bottomPadding > 0}
+          <tr aria-hidden="true">
+            <td
+              colspan="1000"
+              class="border-0 p-0"
+              style={`height:${bottomPadding}px;`}
+            />
+          </tr>
+        {/if}
+      </TableBody>
+    </Table>
+  </div>
+  <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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
+import type { CreateInfiniteQueryResult, InfiniteData } from "@tanstack/svelte-query";
 declare class __sveltets_Render<DataItem, InputData = DataItem[]> {
     props(): {
         queryKey: string;

package/dist/components/VaultBalanceChangeTypeFilter.svelte

@@ -1,4 +1,4 @@
-<script>import {} from "@rainlanguage/orderbook";
+<script>import {} from "@rainlanguage/raindex";
 import DropdownCheckbox from "./dropdown/DropdownCheckbox.svelte";
 import { VAULT_BALANCE_CHANGE_FILTER_LABELS } from "../utils/vaultBalanceChangeLabels";
 export let value = void 0;

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type VaultBalanceChangeFilter } from '@rainlanguage/orderbook';
+import { type VaultBalanceChangeFilter } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         value?: VaultBalanceChangeFilter[] | undefined;

package/dist/components/VaultCard.svelte

@@ -3,7 +3,7 @@ export let vault;
 const handleClick = (event) => {
   event.stopPropagation();
   event.preventDefault();
-  goto(`/vaults/${vault.chainId}-${vault.orderbook}-${vault.id}`);
+  goto(`/vaults/${vault.chainId}-${vault.raindex}-${vault.id}`);
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RaindexVault } from '@rainlanguage/orderbook';
+import type { RaindexVault } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         vault: RaindexVault;