@rainlanguage/ui-components 0.0.1-alpha.21 → 0.0.1-alpha.211

package/dist/components/tables/VaultsListTable.svelte

@@ -1,228 +1,351 @@
-<script generics="T">import { Button, Dropdown, DropdownItem, TableBodyCell, TableHeadCell } from "flowbite-svelte";
+<script>import { toHex } from "viem";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
+import {
+  Button,
+  Checkbox,
+  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 { ArrowUpFromBracketOutline, DotsVerticalOutline } from "flowbite-svelte-icons";
+import { createInfiniteQuery, createQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
 import OrderOrVaultHash from "../OrderOrVaultHash.svelte";
 import Hash, { HashType } from "../Hash.svelte";
 import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
-import { vaultBalanceDisplay } from "../../utils/vault";
-import { bigintStringToHex } from "../../utils/hex";
-import {} from "@rainlanguage/orderbook/js_api";
-import {} from "@rainlanguage/orderbook/js_api";
-import { QKEY_VAULTS } from "../../queries/keys";
 import {
-  getVaults
-} from "@rainlanguage/orderbook/js_api";
-import {} from "svelte/store";
-export let activeOrderbook;
-export let subgraphUrl;
-export let accounts;
+  Float,
+  RaindexClient,
+  RaindexVault,
+  RaindexVaultsList
+} from "@rainlanguage/orderbook";
+import { QKEY_TOKENS, QKEY_VAULTS } from "../../queries/keys";
+import { useAccount } from "../../providers/wallet/useAccount";
+import { getNetworkName } from "../../utils/getNetworkName";
+import { getAllContexts } from "svelte";
+import Tooltip from "../Tooltip.svelte";
+import { useToasts } from "../../providers/toasts/useToasts";
+const context = getAllContexts();
+const { errToast } = useToasts();
 export let activeAccountsItems;
 export let orderHash;
-export let activeSubgraphs;
-export let settings;
-export let activeOrderStatus;
+export let showInactiveOrders;
 export let hideZeroBalanceVaults;
-export let activeNetworkRef;
-export let activeOrderbookRef;
-export let activeAccounts;
-export let walletAddressMatchesOrBlank;
-export let handleDepositGenericModal = void 0;
+export let hideInactiveOrdersVaults;
+export let activeTokens;
+export let selectedChainIds;
+export let showMyItemsOnly;
+export let activeOrderbookAddresses;
 export let handleDepositModal = void 0;
 export let handleWithdrawModal = void 0;
-export let currentRoute;
-export let showMyItemsOnly;
-export let signerAddress;
-$: multiSubgraphArgs = Object.entries(
-  Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : $settings?.subgraphs ?? {}
-).map(([name, url]) => ({
-  name,
-  url
-}));
-$: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $signerAddress ? [$signerAddress] : [];
+export let onWithdrawAll = void 0;
+const { 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)
+) ?? [];
+$: orderbooksMap = raindexClient.getAllOrderbooks()?.value ?? /* @__PURE__ */ new Map();
+$: availableOrderbookAddresses = (() => {
+  const addrs = [];
+  orderbooksMap.forEach((cfg) => {
+    if ($selectedChainIds.length === 0 || $selectedChainIds.includes(cfg.network.chainId)) {
+      addrs.push(cfg.address.toLowerCase());
+    }
+  });
+  return addrs;
+})();
+$: selectedOrderbookAddresses = $activeOrderbookAddresses?.filter(
+  (address) => availableOrderbookAddresses.includes(address.toLowerCase())
+) ?? [];
 $: query = createInfiniteQuery({
   queryKey: [
     QKEY_VAULTS,
-    $activeAccounts,
     $hideZeroBalanceVaults,
-    $activeSubgraphs,
-    multiSubgraphArgs,
-    $settings,
-    owners
+    $hideInactiveOrdersVaults,
+    $selectedChainIds,
+    owners,
+    selectedTokens,
+    selectedOrderbookAddresses
   ],
-  queryFn: ({ pageParam }) => {
-    return getVaults(
-      multiSubgraphArgs,
+  queryFn: async ({ pageParam }) => {
+    const result = await raindexClient.getVaults(
+      $selectedChainIds,
       {
         owners,
-        hideZeroBalance: $hideZeroBalanceVaults
+        hideZeroBalance: $hideZeroBalanceVaults,
+        tokens: selectedTokens,
+        orderbookAddresses: selectedOrderbookAddresses.length > 0 ? selectedOrderbookAddresses : void 0,
+        onlyActiveOrders: $hideInactiveOrdersVaults
       },
-      { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE }
+      pageParam + 1
     );
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
   },
   initialPageParam: 0,
   getNextPageParam(lastPage, _allPages, lastPageParam) {
-    return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
+    return lastPage.items.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
   },
   refetchInterval: DEFAULT_REFRESH_INTERVAL,
-  enabled: !!$subgraphUrl
+  enabled: true
 });
-const updateActiveNetworkAndOrderbook = (subgraphName) => {
-  activeNetworkRef.set(subgraphName);
-  activeOrderbookRef.set(subgraphName);
+$: if (selectedVaults.size > 0 && !$account) {
+  selectedVaults = /* @__PURE__ */ new Set();
+  selectedVaultsOnChainId = null;
+}
+let selectedVaults = /* @__PURE__ */ new Set();
+let selectedVaultsOnChainId = null;
+const getToggleSelectVaultHandler = (vaultId, chainId) => (e) => {
+  e.stopPropagation();
+  if (selectedVaults.has(vaultId)) {
+    selectedVaults.delete(vaultId);
+    if (selectedVaults.size === 0) {
+      selectedVaultsOnChainId = null;
+    }
+  } else {
+    selectedVaults.add(vaultId);
+    if (selectedVaultsOnChainId === null) {
+      selectedVaultsOnChainId = chainId;
+    }
+  }
+  selectedVaults = new Set(selectedVaults);
+};
+const stopPropagation = (e) => e.stopPropagation();
+const handleWithdrawAll = () => {
+  const pages = $query.data?.pages ?? [];
+  if (!onWithdrawAll || pages.length === 0) {
+    return;
+  }
+  const selectedIds = Array.from(selectedVaults);
+  try {
+    const filteredVaultListResults = pages.reduce(
+      (prev, cur) => {
+        const result = cur.pickByIds(selectedIds);
+        if (result.error) {
+          throw new Error(result.error.readableMsg);
+        }
+        return [...prev, result.value];
+      },
+      []
+    );
+    if (filteredVaultListResults.length === 0) {
+      errToast("No selected vaults found in the loaded pages. Please refresh and try again.");
+      return;
+    }
+    const [first, ...rest] = filteredVaultListResults;
+    const combinedVaultsList = rest.reduce((prev, cur) => {
+      const result = prev.concat(cur);
+      if (result.error) {
+        throw new Error(result.error.readableMsg);
+      }
+      return result.value;
+    }, first);
+    return onWithdrawAll(raindexClient, combinedVaultsList);
+  } catch (err) {
+    if (err instanceof Error) {
+      errToast(err.message);
+    }
+  }
+};
+const ZERO_FLOAT = Float.parse("0").value;
+const isZeroBalance = (item) => {
+  if (!ZERO_FLOAT) return true;
+  return item.balance.eq(ZERO_FLOAT).value;
+};
+const isSameChainId = (item, chainId) => {
+  return chainId === null || chainId === item.chainId;
+};
+const isDisabled = (item, chainId) => {
+  return !isSameChainId(item, chainId) || isZeroBalance(item);
 };
-$: isVaultsPage = currentRoute.startsWith("/vaults");
-$: isOrdersPage = currentRoute.startsWith("/orders");
 const AppTable = TanstackAppTable;
 </script>
 
 {#if $query}
 	<ListViewOrderbookFilters
-		{activeSubgraphs}
-		{settings}
-		{accounts}
+		{selectedChainIds}
 		{activeAccountsItems}
 		{showMyItemsOnly}
-		{activeOrderStatus}
+		{showInactiveOrders}
 		{orderHash}
 		{hideZeroBalanceVaults}
-		{isVaultsPage}
-		{isOrdersPage}
-		{signerAddress}
+		{hideInactiveOrdersVaults}
+		{activeTokens}
+		{tokensQuery}
+		{selectedTokens}
+		{activeOrderbookAddresses}
+		{selectedOrderbookAddresses}
 	/>
 	<AppTable
 		{query}
-		queryKey={undefined}
+		dataSelector={(page) => page.items}
+		queryKey={QKEY_VAULTS}
 		emptyMessage="No Vaults Found"
 		on:clickRow={(e) => {
-			updateActiveNetworkAndOrderbook(e.detail.item.subgraphName);
-			goto(`/vaults/${e.detail.item.subgraphName}-${e.detail.item.vault.id}`);
+			goto(`/vaults/${e.detail.item.chainId}-${e.detail.item.orderbook}-${e.detail.item.id}`);
 		}}
 	>
 		<svelte:fragment slot="title">
 			<div class="mt-2 flex w-full justify-between">
 				<div class="flex items-center gap-x-6">
 					<div class="text-3xl font-medium dark:text-white">Vaults</div>
-					{#if handleDepositGenericModal}
-						<Button
-							disabled={!$activeOrderbook}
-							size="sm"
-							color="primary"
-							data-testid="new-vault-button"
-							on:click={() => {
-								handleDepositGenericModal();
-							}}
-							>New vault
-						</Button>
-					{/if}
+					<Button
+						size="xs"
+						on:click={handleWithdrawAll}
+						disabled={!onWithdrawAll || selectedVaults.size === 0}
+						data-testid="withdraw-all-button"
+					>
+						<ArrowUpFromBracketOutline size="xs" class="mr-2" />
+						{selectedVaults.size > 0
+							? `Withdraw selected (${selectedVaults.size})`
+							: 'Withdraw vaults'}
+					</Button>
 				</div>
 			</div>
 		</svelte:fragment>
 		<svelte:fragment slot="head">
-			<TableHeadCell padding="p-4">Network</TableHeadCell>
-			<TableHeadCell padding="px-4 py-4">Vault ID</TableHeadCell>
-			<TableHeadCell padding="px-4 py-4">Orderbook</TableHeadCell>
-			<TableHeadCell padding="px-4 py-4">Owner</TableHeadCell>
-			<TableHeadCell padding="px-2 py-4">Token</TableHeadCell>
-			<TableHeadCell padding="px-2 py-4">Balance</TableHeadCell>
-			<TableHeadCell padding="px-3 py-4">Input For</TableHeadCell>
-			<TableHeadCell padding="px-3 py-4">Output For</TableHeadCell>
+			<TableHeadCell padding="p-0" class="w-[4%]"><span class="sr-only">Select</span></TableHeadCell
+			>
+			<TableHeadCell padding="pl-0 py-4" class="w-[8%]">Network</TableHeadCell>
+			<TableHeadCell padding="px-4 py-4" class="w-[22%]">Addresses</TableHeadCell>
+			<TableHeadCell padding="px-2 py-4" class="w-[22%]">Token</TableHeadCell>
+			<TableHeadCell padding="px-3 py-4" class="w-[20%]">Input For</TableHeadCell>
+			<TableHeadCell padding="px-3 py-4" class="w-[20%]">Output For</TableHeadCell>
+			<TableHeadCell padding="p-0" class="w-[4%]"
+				><span class="sr-only">Actions</span></TableHeadCell
+			>
 		</svelte:fragment>
 
 		<svelte:fragment slot="bodyRow" let:item>
-			<TableBodyCell tdClass="px-4 py-2" data-testid="vault-network">
-				{item.subgraphName}
+			<TableBodyCell tdClass="px-0" on:click={stopPropagation}>
+				<Checkbox
+					data-testid="vault-checkbox"
+					class={`block px-2 py-4 ${$account?.toLowerCase() !== item.owner.toLowerCase() ? 'invisible' : ''}`}
+					checked={selectedVaults.has(item.id)}
+					disabled={isDisabled(item, selectedVaultsOnChainId)}
+					on:change={getToggleSelectVaultHandler(item.id, item.chainId)}
+					on:click={stopPropagation}
+					aria-label={`Select vault ${item.id}`}
+				/>
+				{#if $account?.toLowerCase() === item.owner.toLowerCase() && isDisabled(item, selectedVaultsOnChainId)}
+					<Tooltip>
+						{isZeroBalance(item)
+							? 'This vault has a zero balance'
+							: 'This vault is on a different network'}
+					</Tooltip>
+				{/if}
 			</TableBodyCell>
 
-			<TableBodyCell tdClass="break-all px-4 py-4" data-testid="vault-id">
-				<Hash type={HashType.Identifier} value={bigintStringToHex(item.vault.vaultId)} />
-			</TableBodyCell>
-			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-orderbook">
-				<Hash type={HashType.Identifier} value={item.vault.orderbook.id} />
+			<TableBodyCell tdClass="px-4 py-2" data-testid="vault-network">
+				{getNetworkName(Number(item.chainId))}
 			</TableBodyCell>
-			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-owner">
-				<Hash type={HashType.Wallet} value={item.vault.owner} />
+
+			<TableBodyCell data-testid="vaultAddresses" tdClass="px-4 py-2">
+				<div class="flex flex-col gap-1 text-sm">
+					<div class="flex items-center gap-1">
+						<span class="text-gray-500 dark:text-gray-400">Vault:</span>
+						<Hash type={HashType.Identifier} value={toHex(item.vaultId)} />
+					</div>
+					<div class="flex items-center gap-1">
+						<span class="text-gray-500 dark:text-gray-400">Orderbook:</span>
+						<Hash type={HashType.Identifier} value={item.orderbook} />
+					</div>
+					<div class="flex items-center gap-1">
+						<span class="text-gray-500 dark:text-gray-400">Owner:</span>
+						<Hash type={HashType.Wallet} value={item.owner} />
+					</div>
+				</div>
 			</TableBodyCell>
-			<TableBodyCell tdClass="break-word p-2 min-w-48" data-testid="vault-token"
-				>{item.vault.token.name}</TableBodyCell
-			>
-			<TableBodyCell tdClass="break-all p-2 min-w-48" data-testid="vault-balance">
-				{vaultBalanceDisplay(item.vault)}
-				{item.vault.token.symbol}
+			<TableBodyCell tdClass="p-2" data-testid="vault-token">
+				<div class="flex flex-col overflow-hidden">
+					<span class="truncate font-medium">{item.token.name}</span>
+					<span class="max-w-[200px] truncate text-sm text-gray-500 dark:text-gray-400"
+						>{item.formattedBalance} {item.token.symbol}</span
+					>
+				</div>
 			</TableBodyCell>
-			<TableBodyCell tdClass="break-all p-2 min-w-48">
-				{#if item.vault.ordersAsInput.length > 0}
+			<TableBodyCell tdClass="break-all p-2">
+				{#if item.ordersAsInput.length > 0}
 					<div data-testid="vault-order-inputs" class="flex flex-wrap items-end justify-start">
-						{#each item.vault.ordersAsInput.slice(0, 3) as order}
+						{#each item.ordersAsInput.slice(0, 3) as order}
 							<OrderOrVaultHash
 								type="orders"
 								orderOrVault={order}
-								network={item.subgraphName}
-								{updateActiveNetworkAndOrderbook}
+								chainId={item.chainId}
+								orderbookAddress={item.orderbook}
 							/>
 						{/each}
-						{#if item.vault.ordersAsInput.length > 3}...{/if}
+						{#if item.ordersAsInput.length > 3}...{/if}
 					</div>
 				{/if}
 			</TableBodyCell>
-			<TableBodyCell tdClass="break-all p-2 min-w-48">
-				{#if item.vault.ordersAsOutput.length > 0}
+			<TableBodyCell tdClass="break-all p-2">
+				{#if item.ordersAsOutput.length > 0}
 					<div data-testid="vault-order-outputs" class="flex flex-wrap items-end justify-start">
-						{#each item.vault.ordersAsOutput.slice(0, 3) as order}
+						{#each item.ordersAsOutput.slice(0, 3) as order}
 							<OrderOrVaultHash
 								type="orders"
 								orderOrVault={order}
-								network={item.subgraphName}
-								{updateActiveNetworkAndOrderbook}
+								chainId={item.chainId}
+								orderbookAddress={item.orderbook}
 							/>
 						{/each}
-						{#if item.vault.ordersAsOutput.length > 3}...{/if}
+						{#if item.ordersAsOutput.length > 3}...{/if}
 					</div>
 				{/if}
 			</TableBodyCell>
-			{#if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank(item.vault.owner)}
-				<TableBodyCell tdClass="px-0 text-right">
-					{#if $walletAddressMatchesOrBlank(item.vault.owner)}
-						<Button
-							color="alternative"
-							outline={false}
-							data-testid="vault-menu"
-							id={`vault-menu-${item.vault.id}`}
-							class="mr-2 border-none px-2"
-							on:click={(e) => {
-								e.stopPropagation();
-							}}
-						>
-							<DotsVerticalOutline class="dark:text-white" />
-						</Button>
-					{/if}
-				</TableBodyCell>
-				{#if $walletAddressMatchesOrBlank(item.vault.owner)}
-					<Dropdown
-						data-testid="dropdown"
-						placement="bottom-end"
-						triggeredBy={`#vault-menu-${item.vault.id}`}
+			<TableBodyCell tdClass="px-0 text-right">
+				{#if handleDepositModal && handleWithdrawModal && item.owner.toLowerCase() === $account?.toLowerCase()}
+					<Button
+						color="alternative"
+						outline={false}
+						data-testid="vault-menu"
+						id={`vault-menu-${item.id}`}
+						class="mr-2 border-none px-2"
+						on:click={(e) => {
+							e.stopPropagation();
+						}}
 					>
-						<DropdownItem
-							data-testid="deposit-button"
-							on:click={(e) => {
-								e.stopPropagation();
-								handleDepositModal(item.vault, $query.refetch);
-							}}
-							>Deposit
-						</DropdownItem>
-						<DropdownItem
-							data-testid="withdraw-button"
-							on:click={(e) => {
-								e.stopPropagation();
-								handleWithdrawModal(item.vault, $query.refetch);
-							}}
-							>Withdraw
-						</DropdownItem>
-					</Dropdown>
+						<DotsVerticalOutline class="dark:text-white" />
+					</Button>
 				{/if}
+			</TableBodyCell>
+			{#if handleDepositModal && handleWithdrawModal && item.owner.toLowerCase() === $account?.toLowerCase()}
+				<Dropdown
+					data-testid="dropdown"
+					placement="bottom-end"
+					triggeredBy={`#vault-menu-${item.id}`}
+				>
+					<DropdownItem
+						data-testid="deposit-button"
+						on:click={(e) => {
+							e.stopPropagation();
+							handleDepositModal(item, $query.refetch, context);
+						}}
+						>Deposit
+					</DropdownItem>
+					<DropdownItem
+						data-testid="withdraw-button"
+						on:click={(e) => {
+							e.stopPropagation();
+							handleWithdrawModal(item, $query.refetch, context);
+						}}
+						>Withdraw
+					</DropdownItem>
+				</Dropdown>
 			{/if}
 		</svelte:fragment>
 	</AppTable>

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

@@ -1,40 +1,32 @@
 import { SvelteComponent } from "svelte";
-import { type ConfigSource, type OrderbookConfigSource } from '@rainlanguage/orderbook/js_api';
-import { type SgVault } from '@rainlanguage/orderbook/js_api';
-import { type Writable, type Readable } from 'svelte/store';
+import { RaindexClient, RaindexVault, RaindexVaultsList } from '@rainlanguage/orderbook';
 import type { AppStoresInterface } from '../../types/appStores.ts';
-declare class __sveltets_Render<T> {
-    props(): {
-        activeOrderbook: Readable<OrderbookConfigSource | undefined>;
-        subgraphUrl: Readable<string | undefined>;
-        accounts: AppStoresInterface["accounts"] | undefined;
-        activeAccountsItems: AppStoresInterface["activeAccountsItems"] | undefined;
-        orderHash: Writable<string>;
-        activeSubgraphs: Writable<Record<string, string>>;
-        settings: Writable<ConfigSource | undefined>;
-        activeOrderStatus: Writable<boolean | undefined>;
-        hideZeroBalanceVaults: Writable<boolean>;
-        activeNetworkRef: Writable<string | undefined>;
-        activeOrderbookRef: Writable<string | undefined>;
-        activeAccounts: Readable<{
-            [k: string]: string;
-        }>;
-        walletAddressMatchesOrBlank: Readable<(otherAddress: string) => boolean>;
-        handleDepositGenericModal?: (() => void) | undefined;
-        handleDepositModal?: ((vault: SgVault, refetch: () => void) => void) | undefined;
-        handleWithdrawModal?: ((vault: SgVault, refetch: () => void) => void) | undefined;
-        currentRoute: string;
+import { getAllContexts } from 'svelte';
+declare const __propDef: {
+    props: {
+        activeAccountsItems: AppStoresInterface["activeAccountsItems"];
+        orderHash: AppStoresInterface["orderHash"];
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
+        activeTokens: AppStoresInterface["activeTokens"];
+        selectedChainIds: AppStoresInterface["selectedChainIds"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
-        signerAddress: Writable<string | null> | undefined;
+        activeOrderbookAddresses: AppStoresInterface["activeOrderbookAddresses"];
+        handleDepositModal?: ((vault: RaindexVault, refetch: () => void, context: ReturnType<typeof getAllContexts>) => void) | undefined;
+        handleWithdrawModal?: ((vault: RaindexVault, refetch: () => void, context: ReturnType<typeof getAllContexts>) => void) | undefined;
+        onWithdrawAll?: ((raindexClient: RaindexClient, vaultsList: RaindexVaultsList) => void | Promise<void>) | undefined;
     };
-    events(): {} & {
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
-}
-export type VaultsListTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type VaultsListTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type VaultsListTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class VaultsListTable<T> extends SvelteComponent<VaultsListTableProps<T>, VaultsListTableEvents<T>, VaultsListTableSlots<T>> {
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultsListTableProps = typeof __propDef.props;
+export type VaultsListTableEvents = typeof __propDef.events;
+export type VaultsListTableSlots = typeof __propDef.slots;
+export default class VaultsListTable extends SvelteComponent<VaultsListTableProps, VaultsListTableEvents, VaultsListTableSlots> {
 }
 export {};

package/dist/components/transactions/FixedBottomTransaction.svelte

@@ -0,0 +1,63 @@
+<script>import { useTransactions } from "../../providers/transactions/useTransactions";
+import { CloseOutline } from "flowbite-svelte-icons";
+import { writable } from "svelte/store";
+import { getStatusEmoji } from "./getStatusEmoji";
+const { transactions } = useTransactions();
+const isDismissed = writable(false);
+$: latestTransaction = $transactions.length > 0 ? $transactions[$transactions.length - 1].state : null;
+$: if (latestTransaction) {
+  isDismissed.set(false);
+}
+function dismissTransaction() {
+  isDismissed.set(true);
+}
+</script>
+
+{#if $latestTransaction && !$isDismissed}
+	<div
+		class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white lg:hidden dark:border-gray-700 dark:bg-gray-900"
+	>
+		<div class="flex items-start gap-3 p-3">
+			<!-- Transaction details -->
+			<div class="min-w-0 flex-1">
+				<div class="mb-1 flex items-center gap-2">
+					<span class="text-lg">{getStatusEmoji($latestTransaction.status)}</span>
+					<p class="truncate text-sm font-semibold text-gray-600 dark:text-gray-400">
+						{$latestTransaction.name}
+					</p>
+				</div>
+				<p class="truncate text-xs text-gray-600 dark:text-gray-400">
+					{$latestTransaction.status}
+				</p>
+				{#if $latestTransaction.errorDetails}
+					<p class="truncate text-xs text-red-600 dark:text-red-400">
+						{$latestTransaction.errorDetails}
+					</p>
+				{/if}
+				{#if $latestTransaction.links.length > 0}
+					<div class="mt-1 flex gap-2">
+						{#each $latestTransaction.links.slice(0, 2) as link}
+							<a
+								href={link.link}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="truncate text-xs text-blue-500 hover:underline"
+							>
+								{link.label}
+							</a>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Close button -->
+			<button
+				on:click={dismissTransaction}
+				class="flex-shrink-0 p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+				aria-label="Dismiss transaction"
+			>
+				<CloseOutline class="h-4 w-4" />
+			</button>
+		</div>
+	</div>
+{/if}

package/dist/components/transactions/FixedBottomTransaction.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 FixedBottomTransactionProps = typeof __propDef.props;
+export type FixedBottomTransactionEvents = typeof __propDef.events;
+export type FixedBottomTransactionSlots = typeof __propDef.slots;
+export default class FixedBottomTransaction extends SvelteComponent<FixedBottomTransactionProps, FixedBottomTransactionEvents, FixedBottomTransactionSlots> {
+}
+export {};