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

package/dist/components/charts/OrderTradesChart.svelte

@@ -1,4 +1,4 @@
-<script>import {} from "@rainlanguage/orderbook";
+<script>import {} from "@rainlanguage/raindex";
 import { createQuery } from "@tanstack/svelte-query";
 import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
 import {
@@ -17,7 +17,13 @@ import {
   TIME_DELTA_30_DAYS,
   TIME_DELTA_1_YEAR
 } from "../../services/time";
-import { Button, ButtonGroup, Dropdown, DropdownItem, Spinner } from "flowbite-svelte";
+import {
+  Button,
+  ButtonGroup,
+  Dropdown,
+  DropdownItem,
+  Spinner
+} from "flowbite-svelte";
 import { ChevronDownSolid } from "flowbite-svelte-icons";
 import {
   createChart,
@@ -195,7 +201,8 @@ function destroyChart() {
     sellVolumeSeries = void 0;
   }
 }
-$: if (chartElement && trades.length > 0 && selectedPair && !chart) setupChart();
+$: if (chartElement && trades.length > 0 && selectedPair && !chart)
+  setupChart();
 $: if (chart && chartData) updateChartData();
 $: if (chart && $lightweightChartsTheme) setChartOptions();
 onMount(() => {
@@ -207,102 +214,114 @@ onDestroy(() => {
 </script>
 
 <div
-	class="flex h-full flex-col overflow-hidden rounded-lg border bg-gray-50 dark:border-none dark:bg-gray-700"
+  class="flex h-full flex-col overflow-hidden rounded-lg border bg-gray-50 dark:border-none dark:bg-gray-700"
 >
-	<div
-		class="flex w-full flex-wrap items-center justify-between gap-2 border-b p-3 dark:border-gray-700"
-	>
-		<div class="flex items-center gap-2">
-			<div class="text-xl text-gray-900 dark:text-white" data-testid="chart-title">Trades</div>
-			{#if $query?.isLoading}
-				<Spinner class="h-4 w-4" color="white" data-testid="chart-spinner" />
-			{/if}
-		</div>
+  <div
+    class="flex w-full flex-wrap items-center justify-between gap-2 border-b p-3 dark:border-gray-700"
+  >
+    <div class="flex items-center gap-2">
+      <div
+        class="text-xl text-gray-900 dark:text-white"
+        data-testid="chart-title"
+      >
+        Trades
+      </div>
+      {#if $query?.isLoading}
+        <Spinner class="h-4 w-4" color="white" data-testid="chart-spinner" />
+      {/if}
+    </div>
 
-		<div class="flex flex-wrap items-center gap-2">
-			{#if pairs.length > 0}
-				<div class="flex items-center gap-1">
-					<Button
-						color="alternative"
-						size="xs"
-						class="flex items-center gap-1"
-						data-testid="pair-selector"
-					>
-						{pairLabel}
-						<ChevronDownSolid class="h-3 w-3" />
-					</Button>
-					<Dropdown bind:open={dropdownOpen} data-testid="pair-dropdown">
-						{#each pairs as pair, idx}
-							<DropdownItem on:click={() => selectPair(idx)} data-testid="pair-option-{idx}">
-								{getTokenLabel(pair.baseToken)}/{getTokenLabel(pair.quoteToken)}
-							</DropdownItem>
-						{/each}
-					</Dropdown>
-					<Button
-						color="alternative"
-						size="xs"
-						on:click={handleFlipPair}
-						title="Flip pair"
-						data-testid="flip-button"
-					>
-						<svg
-							class="h-4 w-4"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
-							/>
-						</svg>
-					</Button>
-				</div>
-			{/if}
+    <div class="flex flex-wrap items-center gap-2">
+      {#if pairs.length > 0}
+        <div class="flex items-center gap-1">
+          <Button
+            color="alternative"
+            size="xs"
+            class="flex items-center gap-1"
+            data-testid="pair-selector"
+          >
+            {pairLabel}
+            <ChevronDownSolid class="h-3 w-3" />
+          </Button>
+          <Dropdown bind:open={dropdownOpen} data-testid="pair-dropdown">
+            {#each pairs as pair, idx}
+              <DropdownItem
+                on:click={() => selectPair(idx)}
+                data-testid="pair-option-{idx}"
+              >
+                {getTokenLabel(pair.baseToken)}/{getTokenLabel(pair.quoteToken)}
+              </DropdownItem>
+            {/each}
+          </Dropdown>
+          <Button
+            color="alternative"
+            size="xs"
+            on:click={handleFlipPair}
+            title="Flip pair"
+            data-testid="flip-button"
+          >
+            <svg
+              class="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+              />
+            </svg>
+          </Button>
+        </div>
+      {/if}
 
-			{#if trades.length > 0}
-				<ButtonGroup class="bg-gray-800" data-testid="time-filters">
-					{#each TIME_OPTIONS as option}
-						<Button
-							on:click={() => (timeDelta = option.delta)}
-							color={timeDelta === option.delta ? 'primary' : 'alternative'}
-							size="xs"
-							class="px-2 py-1">{option.label}</Button
-						>
-					{/each}
-				</ButtonGroup>
-			{/if}
-		</div>
-	</div>
+      {#if trades.length > 0}
+        <ButtonGroup class="bg-gray-800" data-testid="time-filters">
+          {#each TIME_OPTIONS as option}
+            <Button
+              on:click={() => (timeDelta = option.delta)}
+              color={timeDelta === option.delta ? "primary" : "alternative"}
+              size="xs"
+              class="px-2 py-1">{option.label}</Button
+            >
+          {/each}
+        </ButtonGroup>
+      {/if}
+    </div>
+  </div>
 
-	<div class="relative flex w-full grow items-center justify-center bg-white dark:bg-gray-800">
-		{#if $query?.isLoading}
-			<div class="text-gray-800 dark:text-gray-400">Loading...</div>
-		{:else if $query?.isError}
-			<div class="text-red-500" data-testid="chart-error">
-				Error: {$query?.error?.message ?? 'Failed to load trades'}
-			</div>
-		{:else if trades.length === 0 || !selectedPair}
-			<div class="text-gray-800 dark:text-gray-400" data-testid="chart-empty">No trades found</div>
-		{:else}
-			<div
-				bind:this={chartElement}
-				class="h-full w-full overflow-hidden"
-				data-testid="chart-element"
-			></div>
-			{#if chartData && chartData.pricePoints.length === 0}
-				<div
-					class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"
-					data-testid="chart-no-data"
-				>
-					<span class="text-gray-800 dark:text-gray-400"
-						>No trades found for selected pair and time range</span
-					>
-				</div>
-			{/if}
-		{/if}
-	</div>
+  <div
+    class="relative flex w-full grow items-center justify-center bg-white dark:bg-gray-800"
+  >
+    {#if $query?.isLoading}
+      <div class="text-gray-800 dark:text-gray-400">Loading...</div>
+    {:else if $query?.isError}
+      <div class="text-red-500" data-testid="chart-error">
+        Error: {$query?.error?.message ?? "Failed to load trades"}
+      </div>
+    {:else if trades.length === 0 || !selectedPair}
+      <div class="text-gray-800 dark:text-gray-400" data-testid="chart-empty">
+        No trades found
+      </div>
+    {:else}
+      <div
+        bind:this={chartElement}
+        class="h-full w-full overflow-hidden"
+        data-testid="chart-element"
+      ></div>
+      {#if chartData && chartData.pricePoints.length === 0}
+        <div
+          class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"
+          data-testid="chart-no-data"
+        >
+          <span class="text-gray-800 dark:text-gray-400"
+            >No trades found for selected pair and time range</span
+          >
+        </div>
+      {/if}
+    {/if}
+  </div>
 </div>

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { Readable } from 'svelte/store';
-import { type RaindexOrder } from '@rainlanguage/orderbook';
+import type { Readable } from "svelte/store";
+import { type RaindexOrder } from "@rainlanguage/raindex";
 declare const __propDef: {
     props: {
         order: RaindexOrder;

package/dist/components/charts/transformAndSortData.d.ts

@@ -1,4 +1,4 @@
-import type { UTCTimestamp } from 'lightweight-charts';
+import type { UTCTimestamp } from "lightweight-charts";
 /**
  * Filters out data points with duplicate timestamps, keeping only the first occurrence.
  *

package/dist/components/charts/transformAndSortData.js

@@ -1,4 +1,4 @@
-import { sortBy } from 'lodash';
+import { sortBy } from "lodash";
 /**
  * Filters out data points with duplicate timestamps, keeping only the first occurrence.
  *
@@ -27,83 +27,83 @@ export const transformAndSortData = (data, options) => {
     const { valueTransform, timeTransform } = options;
     const transformedData = data.map((d) => ({
         value: valueTransform(d),
-        time: timeTransform(d)
+        time: timeTransform(d),
     }));
     const sortedData = sortBy(transformedData, (d) => d.time);
     return deduplicateByTime(sortedData);
 };
 if (import.meta.vitest) {
     const { it, expect, describe } = import.meta.vitest;
-    describe('deduplicateByTime', () => {
-        it('should remove entries with duplicate timestamps', () => {
+    describe("deduplicateByTime", () => {
+        it("should remove entries with duplicate timestamps", () => {
             const data = [
                 { time: 100, value: 10 },
                 { time: 200, value: 20 },
                 { time: 200, value: 25 }, // Duplicate timestamp
-                { time: 300, value: 30 }
+                { time: 300, value: 30 },
             ];
             const result = deduplicateByTime(data);
             const expected = [
                 { time: 100, value: 10 },
                 { time: 200, value: 20 }, // First occurrence kept
-                { time: 300, value: 30 }
+                { time: 300, value: 30 },
             ];
             expect(result).toEqual(expected);
         });
-        it('should handle multiple duplicate timestamps', () => {
+        it("should handle multiple duplicate timestamps", () => {
             const data = [
                 { time: 100, value: 10 },
                 { time: 100, value: 15 }, // Duplicate
                 { time: 100, value: 18 }, // Duplicate
-                { time: 200, value: 20 }
+                { time: 200, value: 20 },
             ];
             const result = deduplicateByTime(data);
             const expected = [
                 { time: 100, value: 10 }, // Only first one kept
-                { time: 200, value: 20 }
+                { time: 200, value: 20 },
             ];
             expect(result).toEqual(expected);
         });
-        it('should return original array if no duplicates', () => {
+        it("should return original array if no duplicates", () => {
             const data = [
                 { time: 100, value: 10 },
                 { time: 200, value: 20 },
-                { time: 300, value: 30 }
+                { time: 300, value: 30 },
             ];
             const result = deduplicateByTime(data);
             expect(result).toEqual(data);
             expect(result).not.toBe(data);
         });
-        it('should handle empty array', () => {
+        it("should handle empty array", () => {
             const data = [];
             const result = deduplicateByTime(data);
             expect(result).toEqual([]);
         });
     });
-    describe('transformAndSortData', () => {
-        it('should transform, sort, and deduplicate data', () => {
+    describe("transformAndSortData", () => {
+        it("should transform, sort, and deduplicate data", () => {
             const rawData = [
                 { timestamp: 3000, price: 300 },
                 { timestamp: 1000, price: 100 },
                 { timestamp: 2000, price: 200 },
-                { timestamp: 2000, price: 250 } // Duplicate timestamp
+                { timestamp: 2000, price: 250 }, // Duplicate timestamp
             ];
             const result = transformAndSortData(rawData, {
                 valueTransform: (item) => item.price,
-                timeTransform: (item) => item.timestamp
+                timeTransform: (item) => item.timestamp,
             });
             const expected = [
                 { time: 1000, value: 100 },
                 { time: 2000, value: 200 }, // First occurrence kept after sorting
-                { time: 3000, value: 300 }
+                { time: 3000, value: 300 },
             ];
             expect(result).toEqual(expected);
         });
-        it('should handle empty data array', () => {
+        it("should handle empty data array", () => {
             const rawData = [];
             const result = transformAndSortData(rawData, {
                 valueTransform: (item) => item.price,
-                timeTransform: (item) => item.timestamp
+                timeTransform: (item) => item.timestamp,
             });
             expect(result).toEqual([]);
         });

package/dist/components/deployment/DeploymentSteps.svelte

@@ -6,7 +6,7 @@ import {
   RaindexClient,
   AccountBalance,
   Float
-} from "@rainlanguage/orderbook";
+} from "@rainlanguage/raindex";
 import WalletConnect from "../wallet/WalletConnect.svelte";
 import {} from "svelte/store";
 import { handleShareChoices } from "../../services/handleShareChoices";
@@ -126,7 +126,10 @@ async function fetchTokenBalance(tokenInfo) {
 async function getTokenInfoAndFetchBalance(key) {
   const tokenInfoResult = await builder.getTokenInfo(key);
   if (tokenInfoResult.error) {
-    throw new Error(tokenInfoResult.error.msg);
+    const balances = tokenBalances;
+    balances.delete(key);
+    tokenBalances = balances;
+    return;
   }
   const tokenInfo = tokenInfoResult.value;
   if (!tokenInfo || !tokenInfo.address) {

package/dist/components/deployment/DeploymentSteps.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type NameAndDescriptionCfg, RaindexOrderBuilder, RaindexClient } from '@rainlanguage/orderbook';
+import { type NameAndDescriptionCfg, RaindexOrderBuilder, RaindexClient } from '@rainlanguage/raindex';
 import { type Writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
 import type { Account } from '../../types/account';

package/dist/components/deployment/DeploymentsSection.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { NameAndDescriptionCfg } from '@rainlanguage/orderbook';
+import type { NameAndDescriptionCfg } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         deployments?: Map<string, NameAndDescriptionCfg> | [string, NameAndDescriptionCfg][];

package/dist/components/deployment/DepositInput.svelte

@@ -1,5 +1,5 @@
 <script>import {
-} from "@rainlanguage/orderbook";
+} from "@rainlanguage/raindex";
 import { Input } from "flowbite-svelte";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";

package/dist/components/deployment/DepositInput.svelte.d.ts

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

package/dist/components/deployment/FieldDefinitionInput.svelte

@@ -1,6 +1,6 @@
 <script>import { Input } from "flowbite-svelte";
 import {
-} from "@rainlanguage/orderbook";
+} from "@rainlanguage/raindex";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";

package/dist/components/deployment/FieldDefinitionInput.svelte.d.ts

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

package/dist/components/deployment/OrderPage.svelte.d.ts

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

package/dist/components/deployment/SelectToken.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { OrderBuilderSelectTokensCfg } from '@rainlanguage/orderbook';
+import type { OrderBuilderSelectTokensCfg } from '@rainlanguage/raindex';
 import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {

package/dist/components/deployment/TokenIOInput.svelte

@@ -1,5 +1,5 @@
 <script>import { Input } from "flowbite-svelte";
-import {} from "@rainlanguage/orderbook";
+import {} from "@rainlanguage/raindex";
 import { onMount } from "svelte";
 import { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
 import VaultIdInformation from "./VaultIdInformation.svelte";

package/dist/components/deployment/TokenIOInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type OrderIOCfg } from '@rainlanguage/orderbook';
+import { type OrderIOCfg } from '@rainlanguage/raindex';
 import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {

package/dist/components/deployment/TokenSelectionModal.svelte.d.ts

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

package/dist/components/detail/OrderDetail.svelte

@@ -28,14 +28,14 @@ import {
   RaindexOrder,
   RaindexVault,
   RaindexVaultsList
-} from "@rainlanguage/orderbook";
+} from "@rainlanguage/raindex";
 import { useToasts } from "../../providers/toasts/useToasts";
 import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let handleQuoteDebugModal = void 0;
 export let handleDebugTradeModal = void 0;
 export let codeMirrorTheme;
 export let lightweightChartsTheme;
-export let orderbookAddress;
+export let raindexAddress;
 export let orderHash;
 export let chainId;
 export let rpcs = void 0;
@@ -53,7 +53,7 @@ const raindexClient = useRaindexClient();
 $: orderDetailQuery = createQuery({
   queryKey: [QKEY_ORDER, orderHash],
   queryFn: async () => {
-    const result = await raindexClient.getOrderByHash(chainId, orderbookAddress, orderHash);
+    const result = await raindexClient.getOrderByHash(chainId, raindexAddress, orderHash);
     if (result.error) throw new Error(result.error.readableMsg);
     return result.value;
   }
@@ -120,6 +120,8 @@ const formatBuilderState = (builderState) => {
 
 				<Refresh
 					testId="top-refresh"
+					title="Refresh order"
+					ariaLabel="Refresh order"
 					on:click={handleRefresh}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
@@ -129,9 +131,9 @@ const formatBuilderState = (builderState) => {
 	<svelte:fragment slot="card" let:data>
 		<div class="flex flex-col gap-y-6">
 			<CardProperty>
-				<svelte:fragment slot="key">Orderbook</svelte:fragment>
+				<svelte:fragment slot="key">Raindex</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Identifier} shorten={false} value={data.orderbook} />
+					<Hash type={HashType.Identifier} shorten={false} value={data.raindex} />
 				</svelte:fragment>
 			</CardProperty>
 
@@ -223,7 +225,7 @@ const formatBuilderState = (builderState) => {
 						<svelte:fragment slot="value">
 							<div class="mt-2 space-y-2">
 								{#each filteredVaults as vault}
-									<ButtonVaultLink tokenVault={vault} {chainId} {orderbookAddress}>
+									<ButtonVaultLink tokenVault={vault} {chainId} {raindexAddress}>
 										<svelte:fragment slot="buttons">
 											{#if matchesAccount(vault.owner)}
 												<div class="flex gap-1">
@@ -231,6 +233,8 @@ const formatBuilderState = (builderState) => {
 														color="light"
 														size="xs"
 														data-testid="deposit-button"
+														title="Deposit into vault"
+														aria-label="Deposit into vault"
 														on:click={() => onDeposit(raindexClient, vault)}
 													>
 														<ArrowDownToBracketOutline size="xs" />
@@ -239,6 +243,8 @@ const formatBuilderState = (builderState) => {
 														color="light"
 														size="xs"
 														data-testid="withdraw-button"
+														title="Withdraw from vault"
+														aria-label="Withdraw from vault"
 														on:click={() => onWithdraw(raindexClient, vault)}
 													>
 														<ArrowUpFromBracketOutline size="xs" />

package/dist/components/detail/OrderDetail.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { DebugTradeModalHandler, QuoteDebugModalHandler } from '../../types/modal';
-import { RaindexClient, RaindexOrder, RaindexVault, RaindexVaultsList, type Address, type Hex } from '@rainlanguage/orderbook';
+import { RaindexClient, RaindexOrder, RaindexVault, RaindexVaultsList, type Address, type Hex } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         handleQuoteDebugModal?: QuoteDebugModalHandler | undefined;
         handleDebugTradeModal?: DebugTradeModalHandler | undefined;
         codeMirrorTheme: any;
         lightweightChartsTheme: any;
-        orderbookAddress: Address;
+        raindexAddress: Address;
         orderHash: Hex;
         chainId: number;
         rpcs?: string[] | undefined;

package/dist/components/detail/TanstackOrderQuote.svelte

@@ -83,16 +83,24 @@ $: orderModalArg = order;
 			<Refresh
 				data-testid="refresh-button"
 				class="h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+				title="Refresh quotes"
+				ariaLabel="Refresh quotes"
 				on:click={refreshQuotes}
 				spin={$orderQuoteQuery.isLoading || $orderQuoteQuery.isFetching}
 			/>
 			<PauseSolid
+				data-testid="pause-refresh-button"
+				title="Pause auto-refresh"
+				ariaLabel="Pause auto-refresh"
 				class={`ml-2 h-8 w-3 cursor-pointer text-gray-400 dark:text-gray-400 ${!enabled ? 'hidden' : ''}`}
 				on:click={() => {
 					enabled = false;
 				}}
 			/>
 			<PlaySolid
+				data-testid="resume-refresh-button"
+				title="Resume auto-refresh"
+				ariaLabel="Resume auto-refresh"
 				on:click={() => {
 					enabled = true;
 					blockNumber = undefined;
@@ -125,6 +133,13 @@ $: orderModalArg = order;
 								<Tooltip triggeredBy={`#max-output-${index}`}>
 									{item.data.formattedMaxOutput}
 								</Tooltip>
+								{#if item.data.formattedMaxOutputAsPercentOfVault}
+									<span
+										data-testid={`max-output-percent-${index}`}
+										class="block max-w-[150px] truncate text-xs text-gray-400"
+										>{item.data.formattedMaxOutputAsPercentOfVault}% of vault</span
+									>
+								{/if}
 							</TableBodyCell>
 							<TableBodyCell>
 								<span id={`ratio-${index}`} class="block max-w-[200px] truncate"
@@ -146,6 +161,9 @@ $: orderModalArg = order;
 							<TableBodyCell>
 								{#if handleQuoteDebugModal}
 									<button
+										data-testid="debug-quote-button"
+										title="Debug quote"
+										aria-label="Debug quote"
 										on:click={() =>
 											handleQuoteDebugModal(
 												orderModalArg,
@@ -174,6 +192,7 @@ $: orderModalArg = order;
 									<button
 										type="button"
 										class="mt-0.5 rounded border border-transparent p-1 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100"
+										title="Copy quote error"
 										aria-label="Copy quote error"
 										on:click={() => copyQuoteError(item.error)}
 									>
@@ -190,6 +209,9 @@ $: orderModalArg = order;
 							<TableBodyCell>
 								{#if handleQuoteDebugModal}
 									<button
+										data-testid="debug-quote-error-button"
+										title="Debug quote"
+										aria-label="Debug quote"
 										on:click={() =>
 											handleQuoteDebugModal(
 												order,

package/dist/components/detail/TanstackOrderQuote.svelte.d.ts

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