@rainlanguage/ui-components 0.0.1-alpha.140 → 0.0.1-alpha.142

package/dist/components/ListViewOrderbookFilters.svelte

@@ -5,6 +5,7 @@ import { Alert } from "flowbite-svelte";
 import Tooltip from "./Tooltip.svelte";
 import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
+import DropdownTokensFilter from "./dropdown/DropdownTokensFilter.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
 import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
@@ -17,6 +18,9 @@ export let showMyItemsOnly;
 export let selectedChainIds;
 export let showInactiveOrders;
 export let orderHash;
+export let activeTokens;
+export let selectedTokens;
+export let tokensQuery;
 $: isVaultsPage = $page.url.pathname === "/vaults";
 $: isOrdersPage = $page.url.pathname === "/orders";
 const { account } = useAccount();
@@ -54,6 +58,7 @@ const { account } = useAccount();
 		{#if $accounts && Object.values($accounts).length > 0}
 			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
 		{/if}
+		<DropdownTokensFilter {tokensQuery} {activeTokens} {selectedTokens} label="Tokens" />
 		<DropdownActiveNetworks settings={$settings} {selectedChainIds} />
 	{/if}
 </div>

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

@@ -1,4 +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 { AppStoresInterface } from '../types/appStores';
 declare class __sveltets_Render<T> {
     props(): {
@@ -10,6 +13,9 @@ declare class __sveltets_Render<T> {
         selectedChainIds: AppStoresInterface["selectedChainIds"];
         showInactiveOrders: AppStoresInterface["showInactiveOrders"];
         orderHash: AppStoresInterface["orderHash"];
+        activeTokens: AppStoresInterface["activeTokens"];
+        selectedTokens: Address[];
+        tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/components/dropdown/DropdownTokensFilter.svelte

@@ -0,0 +1,149 @@
+<script>import { Button, Dropdown, Label, Checkbox, Input } from "flowbite-svelte";
+import { ChevronDownSolid, SearchSolid } from "flowbite-svelte-icons";
+import { isEmpty } from "lodash";
+import { getTokenDisplayName } from "../../utils/tokens";
+import { getNetworkName } from "../../utils/getNetworkName";
+export let tokensQuery;
+export let activeTokens;
+export let selectedTokens;
+export let label = "Filter by tokens";
+export let allLabel = "All tokens";
+export let emptyMessage = "No tokens available";
+export let loadingMessage = "Loading tokens...";
+let filteredTokens = [];
+let searchTerm = "";
+let selectedIndex = 0;
+$: availableTokens = $tokensQuery?.data || [];
+$: selectedCount = selectedTokens.length;
+$: allSelected = selectedCount === availableTokens.length && availableTokens.length > 0;
+$: buttonText = selectedCount === 0 ? "Select tokens" : allSelected ? allLabel : `${selectedCount} token${selectedCount > 1 ? "s" : ""}`;
+$: {
+  let tokensToFilter = availableTokens;
+  const getKey = (token) => `${token.address}-${token.chainId}`;
+  const uniqueTokensMap = /* @__PURE__ */ new Map();
+  tokensToFilter.forEach((token) => {
+    const key = getKey(token);
+    if (token.address && !uniqueTokensMap.has(key)) {
+      uniqueTokensMap.set(key, token);
+    }
+  });
+  const uniqueTokens = Array.from(uniqueTokensMap.values());
+  if (searchTerm.trim() === "") {
+    filteredTokens = uniqueTokens;
+  } else {
+    const term = searchTerm.toLowerCase();
+    filteredTokens = uniqueTokens.filter(
+      (token) => token.symbol?.toLowerCase().includes(term) || token.name?.toLowerCase().includes(term) || token.address?.toLowerCase().includes(term)
+    );
+    selectedIndex = filteredTokens.length > 0 ? 0 : -1;
+  }
+}
+$: sortedFilteredTokens = filteredTokens.sort(
+  ({ address }) => selectedTokens.includes(address) ? -1 : 1
+);
+function updateSelectedTokens(newSelection) {
+  activeTokens.set(newSelection);
+}
+function toggleToken({ address }) {
+  if (!address) return;
+  const idx = $activeTokens.indexOf(address);
+  const newSelection = idx !== -1 ? $activeTokens.filter((addr) => addr !== address) : [...$activeTokens, address];
+  updateSelectedTokens(newSelection);
+}
+function handleKeyDown(event) {
+  if (!filteredTokens.length) return;
+  switch (event.key) {
+    case "Enter":
+      event.preventDefault();
+      if (filteredTokens.length > 0) {
+        const tokenToToggle = filteredTokens[selectedIndex];
+        if (tokenToToggle) {
+          toggleToken(tokenToToggle);
+        }
+      }
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, filteredTokens.length - 1);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+      break;
+    case "Escape":
+      searchTerm = "";
+      selectedIndex = -1;
+      break;
+  }
+}
+</script>
+
+<div class="flex flex-col gap-x-2">
+	<Label>{label}</Label>
+	<div>
+		<Button
+			color="alternative"
+			class="flex w-full justify-between overflow-hidden pl-2 pr-0 text-left"
+			data-testid="dropdown-tokens-filter-button"
+			aria-label="Select tokens to filter"
+			aria-expanded="false"
+			aria-haspopup="listbox"
+		>
+			<div class="w-[90px] overflow-hidden text-ellipsis whitespace-nowrap">
+				{buttonText}
+			</div>
+			<ChevronDownSolid class="mx-2 h-3 w-3 text-black dark:text-white" />
+		</Button>
+
+		<Dropdown
+			class="max-h-[75vh] w-full min-w-60 overflow-y-auto py-0"
+			data-testid="dropdown-tokens-filter"
+		>
+			{#if $tokensQuery.isLoading}
+				<div class="ml-2 w-full rounded-lg p-3">{loadingMessage}</div>
+			{:else if $tokensQuery.isError}
+				<div class="ml-2 w-full rounded-lg p-3 text-red-500">
+					Cannot load tokens list: {$tokensQuery.error?.message || 'Unknown error'}
+				</div>
+			{:else if isEmpty(availableTokens)}
+				<div class="ml-2 w-full rounded-lg p-3">{emptyMessage}</div>
+			{:else}
+				<!-- Search input -->
+				<div class="sticky top-0 bg-white p-3 dark:bg-gray-800">
+					<Input
+						placeholder="Search tokens..."
+						bind:value={searchTerm}
+						autofocus
+						on:keydown={handleKeyDown}
+						data-testid="tokens-filter-search"
+					>
+						<SearchSolid slot="left" class="h-4 w-4 text-gray-500" />
+					</Input>
+				</div>
+
+				{#if isEmpty(filteredTokens)}
+					<div class="ml-2 w-full rounded-lg p-3">No tokens match your search</div>
+				{:else}
+					{#each sortedFilteredTokens as token, index (`${token.address}-${token.chainId}`)}
+						<Checkbox
+							data-testid="dropdown-tokens-filter-option"
+							class="w-full rounded-lg p-3 hover:bg-gray-100 dark:hover:bg-gray-600 {selectedIndex ===
+							index
+								? 'bg-blue-100 dark:bg-blue-900'
+								: ''}"
+							on:click={() => toggleToken(token)}
+							checked={!!(token.address && $activeTokens.includes(token.address))}
+						>
+							<div class="ml-2 flex w-full">
+								<div class="flex-1 text-sm font-medium">{getTokenDisplayName(token)}</div>
+								<div class="text-xs text-gray-500">
+									{getNetworkName(token.chainId)}
+								</div>
+							</div>
+						</Checkbox>
+					{/each}
+				{/if}
+			{/if}
+		</Dropdown>
+	</div>
+</div>

package/dist/components/dropdown/DropdownTokensFilter.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Address, RaindexVaultToken } from '@rainlanguage/orderbook';
+import type { AppStoresInterface } from '../../types/appStores';
+import type { Readable } from 'svelte/store';
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+declare const __propDef: {
+    props: {
+        tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
+        activeTokens: AppStoresInterface["activeTokens"];
+        selectedTokens: Address[];
+        label?: string;
+        allLabel?: string;
+        emptyMessage?: string;
+        loadingMessage?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DropdownTokensFilterProps = typeof __propDef.props;
+export type DropdownTokensFilterEvents = typeof __propDef.events;
+export type DropdownTokensFilterSlots = typeof __propDef.slots;
+export default class DropdownTokensFilter extends SvelteComponent<DropdownTokensFilterProps, DropdownTokensFilterEvents, DropdownTokensFilterSlots> {
+}
+export {};

package/dist/components/tables/OrdersListTable.svelte

@@ -1,14 +1,14 @@
 <script generics="T">import { getNetworkName } from "../../utils/getNetworkName";
 import { goto } from "$app/navigation";
 import { DotsVerticalOutline } from "flowbite-svelte-icons";
-import { createInfiniteQuery } from "@tanstack/svelte-query";
+import { createInfiniteQuery, createQuery } from "@tanstack/svelte-query";
 import { RaindexOrder } from "@rainlanguage/orderbook";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
 import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
 import Hash, { HashType } from "../Hash.svelte";
 import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
-import { QKEY_ORDERS } from "../../queries/keys";
+import { QKEY_ORDERS, QKEY_TOKENS } from "../../queries/keys";
 import {
   Badge,
   Button,
@@ -28,18 +28,40 @@ export let showInactiveOrders;
 export let orderHash;
 export let hideZeroBalanceVaults;
 export let showMyItemsOnly;
+export let activeTokens;
 const { matchesAccount, account } = useAccount();
 const raindexClient = useRaindexClient();
 $: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $account ? [$account] : [];
+$: tokensQuery = createQuery({
+  queryKey: [QKEY_TOKENS, $selectedChainIds],
+  queryFn: async () => {
+    const result = await raindexClient.getAllVaultTokens($selectedChainIds);
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
+  },
+  enabled: true
+});
+$: selectedTokens = $activeTokens?.filter(
+  (address) => !$tokensQuery.data || $tokensQuery.data.some((t) => t.address === address)
+) ?? [];
 $: query = createInfiniteQuery({
-  queryKey: [QKEY_ORDERS, $selectedChainIds, $settings, owners, $showInactiveOrders, $orderHash],
+  queryKey: [
+    QKEY_ORDERS,
+    $selectedChainIds,
+    $settings,
+    owners,
+    $showInactiveOrders,
+    $orderHash,
+    selectedTokens
+  ],
   queryFn: async ({ pageParam }) => {
     const result = await raindexClient.getOrders(
       $selectedChainIds,
       {
         owners,
         active: $showInactiveOrders ? void 0 : true,
-        orderHash: $orderHash || void 0
+        orderHash: $orderHash || void 0,
+        tokens: selectedTokens
       },
       pageParam + 1
     );
@@ -65,6 +87,9 @@ const AppTable = TanstackAppTable;
 	{showInactiveOrders}
 	{orderHash}
 	{hideZeroBalanceVaults}
+	{tokensQuery}
+	{activeTokens}
+	{selectedTokens}
 />
 
 <AppTable

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

@@ -11,6 +11,7 @@ declare class __sveltets_Render<T> {
         orderHash: AppStoresInterface["orderHash"];
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
+        activeTokens: AppStoresInterface["activeTokens"];
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/components/tables/VaultsListTable.svelte

@@ -3,7 +3,7 @@ import { useRaindexClient } from "../../hooks/useRaindexClient";
 import { Button, Dropdown, DropdownItem, TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import { goto } from "$app/navigation";
 import { DotsVerticalOutline } from "flowbite-svelte-icons";
-import { createInfiniteQuery } from "@tanstack/svelte-query";
+import { createInfiniteQuery, createQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
 import OrderOrVaultHash from "../OrderOrVaultHash.svelte";
@@ -11,7 +11,7 @@ import Hash, { HashType } from "../Hash.svelte";
 import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
 import { vaultBalanceDisplay } from "../../utils/vault";
 import { RaindexVault } from "@rainlanguage/orderbook";
-import { QKEY_VAULTS } from "../../queries/keys";
+import { QKEY_TOKENS, QKEY_VAULTS } from "../../queries/keys";
 import { useAccount } from "../../providers/wallet/useAccount";
 import { getNetworkName } from "../../utils/getNetworkName";
 export let accounts;
@@ -20,29 +20,42 @@ export let orderHash;
 export let settings;
 export let showInactiveOrders;
 export let hideZeroBalanceVaults;
-export let activeAccounts;
+export let activeTokens;
 export let selectedChainIds;
+export let showMyItemsOnly;
 export let handleDepositModal = void 0;
 export let handleWithdrawModal = void 0;
-export let showMyItemsOnly;
 const { account, matchesAccount } = useAccount();
 const raindexClient = useRaindexClient();
 $: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $account ? [$account] : [];
+$: tokensQuery = createQuery({
+  queryKey: [QKEY_TOKENS, $selectedChainIds],
+  queryFn: async () => {
+    const result = await raindexClient.getAllVaultTokens($selectedChainIds);
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
+  },
+  enabled: true
+});
+$: selectedTokens = $activeTokens?.filter(
+  (address) => !$tokensQuery.data || $tokensQuery.data.some((t) => t.address === address)
+) ?? [];
 $: query = createInfiniteQuery({
   queryKey: [
     QKEY_VAULTS,
-    $activeAccounts,
     $hideZeroBalanceVaults,
     $selectedChainIds,
     $settings,
-    owners
+    owners,
+    selectedTokens
   ],
   queryFn: async ({ pageParam }) => {
     const result = await raindexClient.getVaults(
       $selectedChainIds,
       {
         owners,
-        hideZeroBalance: $hideZeroBalanceVaults
+        hideZeroBalance: $hideZeroBalanceVaults,
+        tokens: selectedTokens
       },
       pageParam + 1
     );
@@ -69,6 +82,9 @@ const AppTable = TanstackAppTable;
 		{showInactiveOrders}
 		{orderHash}
 		{hideZeroBalanceVaults}
+		{activeTokens}
+		{tokensQuery}
+		{selectedTokens}
 	/>
 	<AppTable
 		{query}

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

@@ -9,11 +9,11 @@ declare class __sveltets_Render<T> {
         settings: AppStoresInterface["settings"];
         showInactiveOrders: AppStoresInterface["showInactiveOrders"];
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
-        activeAccounts: AppStoresInterface["activeAccounts"];
+        activeTokens: AppStoresInterface["activeTokens"];
         selectedChainIds: AppStoresInterface["selectedChainIds"];
+        showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
         handleDepositModal?: ((vault: RaindexVault, refetch: () => void) => void) | undefined;
         handleWithdrawModal?: ((vault: RaindexVault, refetch: () => void) => void) | undefined;
-        showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as CardProperty } from './components/CardProperty.svelte';
 export { default as Hash, HashType } from './components/Hash.svelte';
 export { default as TanstackAppTable } from './components/TanstackAppTable.svelte';
 export { default as DropdownCheckbox } from './components/dropdown/DropdownCheckbox.svelte';
+export { default as DropdownTokensFilter } from './components/dropdown/DropdownTokensFilter.svelte';
 export { default as DropdownOrderListAccounts } from './components/dropdown/DropdownOrderListAccounts.svelte';
 export { default as DropdownRadio } from './components/dropdown/DropdownRadio.svelte';
 export { default as Refresh } from './components/icon/Refresh.svelte';

package/dist/index.js

@@ -3,6 +3,7 @@ export { default as CardProperty } from './components/CardProperty.svelte';
 export { default as Hash, HashType } from './components/Hash.svelte';
 export { default as TanstackAppTable } from './components/TanstackAppTable.svelte';
 export { default as DropdownCheckbox } from './components/dropdown/DropdownCheckbox.svelte';
+export { default as DropdownTokensFilter } from './components/dropdown/DropdownTokensFilter.svelte';
 export { default as DropdownOrderListAccounts } from './components/dropdown/DropdownOrderListAccounts.svelte';
 export { default as DropdownRadio } from './components/dropdown/DropdownRadio.svelte';
 export { default as Refresh } from './components/icon/Refresh.svelte';

package/dist/queries/keys.d.ts

@@ -7,3 +7,4 @@ export declare const QKEY_ORDER_TRADES_LIST = "orderTradesList";
 export declare const QKEY_ORDER_QUOTE = "orderQuote";
 export declare const QKEY_VAULTS_VOL_LIST = "orderVaultsVolumeList";
 export declare const QKEY_ORDER_APY = "orderApy";
+export declare const QKEY_TOKENS = "tokens";

package/dist/queries/keys.js

@@ -7,3 +7,4 @@ export const QKEY_ORDER_TRADES_LIST = 'orderTradesList';
 export const QKEY_ORDER_QUOTE = 'orderQuote';
 export const QKEY_VAULTS_VOL_LIST = 'orderVaultsVolumeList';
 export const QKEY_ORDER_APY = 'orderApy';
+export const QKEY_TOKENS = 'tokens';

package/dist/types/appStores.d.ts

@@ -8,8 +8,6 @@ export interface AppStoresInterface {
     showInactiveOrders: Writable<boolean>;
     orderHash: Writable<Hex>;
     hideZeroBalanceVaults: Writable<boolean>;
-    activeAccounts: Readable<{
-        [k: string]: AccountCfg;
-    }>;
+    activeTokens: Writable<Address[]>;
     showMyItemsOnly: Writable<boolean>;
 }

package/dist/utils/tokens.d.ts

@@ -0,0 +1,2 @@
+import type { RaindexVaultToken } from '@rainlanguage/orderbook';
+export declare function getTokenDisplayName(token: RaindexVaultToken): string;

package/dist/utils/tokens.js

@@ -0,0 +1,3 @@
+export function getTokenDisplayName(token) {
+    return token.symbol || token.name || 'Unknown Token';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.140",
+	"version": "0.0.1-alpha.142",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.140",
+		"@rainlanguage/orderbook": "0.0.1-alpha.142",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",