@rainlanguage/ui-components 0.0.1-alpha.154 → 0.0.1-alpha.155

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,4 +1,4 @@
-<script generics="T">import { useRaindexClient } from "../hooks/useRaindexClient";
+<script>import { useRaindexClient } from "../hooks/useRaindexClient";
 import DropdownActiveNetworks from "./dropdown/DropdownActiveNetworks.svelte";
 import { page } from "$app/stores";
 import { isEmpty } from "lodash";

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

@@ -3,8 +3,8 @@ 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(): {
+declare const __propDef: {
+    props: {
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
@@ -15,14 +15,16 @@ declare class __sveltets_Render<T> {
         selectedTokens: Address[];
         tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
     };
-    events(): {} & {
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
-}
-export type ListViewOrderbookFiltersProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type ListViewOrderbookFiltersEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type ListViewOrderbookFiltersSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class ListViewOrderbookFilters<T> extends SvelteComponent<ListViewOrderbookFiltersProps<T>, ListViewOrderbookFiltersEvents<T>, ListViewOrderbookFiltersSlots<T>> {
+    slots: {};
+    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 {};

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { Address, RaindexOrder, RaindexOrderAsIO, RaindexVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        orderOrVault: RaindexOrder | RaindexVault | RaindexOrderAsIO;
+        orderOrVault: RaindexVault | RaindexOrder | RaindexOrderAsIO;
         type: "orders" | "vaults";
         chainId: number;
         orderbookAddress: Address;

package/dist/components/TanstackAppTable.svelte

@@ -1,4 +1,4 @@
-<script generics="T">import { invalidateTanstackQueries } from "../queries/queryClient";
+<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 { createEventDispatcher } from "svelte";
@@ -9,6 +9,11 @@ export let queryKey;
 export let query;
 export let emptyMessage = "None found";
 export let rowHoverable = true;
+export let dataSelector = (pageData) => Array.isArray(pageData) ? pageData : [];
+$: data = $query.data ? {
+  ...$query.data,
+  pages: $query.data.pages.map((page) => dataSelector(page))
+} : void 0;
 </script>
 
 <div data-testid="title" class="flex h-16 w-full items-center justify-end">
@@ -26,11 +31,11 @@ export let rowHoverable = true;
 		}}
 	/>
 </div>
-{#if $query.data?.pages[0].length === 0}
+{#if (data?.pages?.[0]?.length ?? 0) === 0}
 	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
 		{emptyMessage}
 	</div>
-{:else if $query.data}
+{:else if data}
 	<Table
 		divClass="cursor-pointer rounded-lg overflow-auto dark:border-none border"
 		hoverable={rowHoverable}
@@ -39,7 +44,7 @@ export let rowHoverable = true;
 			<slot name="head" />
 		</TableHead>
 		<TableBody>
-			{#each $query.data?.pages as page}
+			{#each data.pages as page}
 				{#each page as item}
 					<TableBodyRow
 						class="whitespace-nowrap"

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

@@ -1,11 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
-declare class __sveltets_Render<T> {
+declare class __sveltets_Render<DataItem, InputData = DataItem[]> {
     props(): {
         queryKey: string;
-        query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
+        query: CreateInfiniteQueryResult<InfiniteData<InputData, unknown>, Error>;
         emptyMessage?: string;
         rowHoverable?: boolean;
+        dataSelector?: ((pageData: InputData) => DataItem[]) | undefined;
     };
     events(): {
         clickRow: CustomEvent<any>;
@@ -18,13 +19,13 @@ declare class __sveltets_Render<T> {
         title: {};
         head: {};
         bodyRow: {
-            item: T;
+            item: DataItem;
         };
     };
 }
-export type TanstackAppTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TanstackAppTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TanstackAppTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TanstackAppTable<T> extends SvelteComponent<TanstackAppTableProps<T>, TanstackAppTableEvents<T>, TanstackAppTableSlots<T>> {
+export type TanstackAppTableProps<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['props']>;
+export type TanstackAppTableEvents<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['events']>;
+export type TanstackAppTableSlots<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['slots']>;
+export default class TanstackAppTable<DataItem, InputData = DataItem[]> extends SvelteComponent<TanstackAppTableProps<DataItem, InputData>, TanstackAppTableEvents<DataItem, InputData>, TanstackAppTableSlots<DataItem, InputData>> {
 }
 export {};

package/dist/components/VaultCard.svelte

@@ -0,0 +1,18 @@
+<script>import { goto } from "$app/navigation";
+export let vault;
+const handleClick = (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  goto(`/vaults/${vault.chainId}-${vault.orderbook}-${vault.id}`);
+};
+</script>
+
+<button
+	type="button"
+	class="flex w-full flex-col rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-left shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
+	on:click={handleClick}
+	data-testid="vault-card"
+>
+	<span class="font-semibold text-gray-800 dark:text-gray-200">{vault.token.symbol}</span>
+	<span class="text-xs text-gray-500 dark:text-gray-400">{vault.formattedBalance}</span>
+</button>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { RaindexVault } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        vault: RaindexVault;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultCardProps = typeof __propDef.props;
+export type VaultCardEvents = typeof __propDef.events;
+export type VaultCardSlots = typeof __propDef.slots;
+export default class VaultCard extends SvelteComponent<VaultCardProps, VaultCardEvents, VaultCardSlots> {
+}
+export {};

package/dist/components/charts/LightweightChart.svelte

@@ -1,4 +1,4 @@
-<script generics="T extends keyof SeriesOptionsMap, D, O">import { Spinner } from "flowbite-svelte";
+<script generics="T extends keyof SeriesOptionsMap, O">import { Spinner } from "flowbite-svelte";
 import {
   createChart
 } from "lightweight-charts";

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { Readable } from 'svelte/store';
 import { type IChartApi, type UTCTimestamp, type ISeriesApi, type WhitespaceData, type Time, type DeepPartial, type SeriesOptionsCommon, type SeriesOptionsMap } from 'lightweight-charts';
-declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
+declare class __sveltets_Render<T extends keyof SeriesOptionsMap, O> {
     props(): {
         [x: string]: any;
         data?: {
@@ -21,9 +21,9 @@ declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
     };
     slots(): {};
 }
-export type LightweightChartProps<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['props']>;
-export type LightweightChartEvents<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['events']>;
-export type LightweightChartSlots<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['slots']>;
-export default class LightweightChart<T extends keyof SeriesOptionsMap, D, O> extends SvelteComponent<LightweightChartProps<T, D, O>, LightweightChartEvents<T, D, O>, LightweightChartSlots<T, D, O>> {
+export type LightweightChartProps<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['props']>;
+export type LightweightChartEvents<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['events']>;
+export type LightweightChartSlots<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['slots']>;
+export default class LightweightChart<T extends keyof SeriesOptionsMap, O> extends SvelteComponent<LightweightChartProps<T, O>, LightweightChartEvents<T, O>, LightweightChartSlots<T, O>> {
 }
 export {};

package/dist/components/charts/VaultBalanceChart.svelte

@@ -1,20 +1,7 @@
-<script>import { timestampSecondsToUTCTimestamp } from "../../services/time";
-import { createQuery } from "@tanstack/svelte-query";
-import TanstackLightweightChartLine from "../charts/TanstackLightweightChartLine.svelte";
-import { QKEY_VAULT_CHANGES } from "../../queries/keys";
-export let vault;
-export let lightweightChartsTheme;
-$: query = createQuery({
-  queryKey: [vault.id, QKEY_VAULT_CHANGES + vault.id, QKEY_VAULT_CHANGES],
-  queryFn: async () => {
-    const result = await vault.getBalanceChanges(1);
-    if (result.error) throw new Error(result.error.msg);
-    return result.value;
-  }
-});
-const Chart = TanstackLightweightChartLine;
-</script>
+<!-- TODO: Issue #1989 -->
+<script></script>
 
+<!--
 {#if vault && $query.data}
 	<Chart
 		title="Balance history"
@@ -25,4 +12,8 @@ const Chart = TanstackLightweightChartLine;
 		emptyMessage="No deposits or withdrawals found"
 		{lightweightChartsTheme}
 	/>
+{/if} -->
+
+{#if false}
+	<div>TODO: Issue #1989</div>
 {/if}

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

@@ -1,10 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { RaindexVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
-    props: {
-        vault: RaindexVault;
-        lightweightChartsTheme: any;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/deployment/DeploymentSteps.svelte

@@ -36,8 +36,6 @@ let showAdvancedOptions = false;
 let allTokenInfos = [];
 let selectTokens = void 0;
 let checkingDeployment = false;
-let availableTokens = [];
-let loadingTokens = false;
 let tokenBalances = /* @__PURE__ */ new Map();
 const gui = useGui();
 const registry = useRegistry();
@@ -50,7 +48,6 @@ onMount(async () => {
   }
   selectTokens = selectTokensResult.value;
   await areAllTokensSelected();
-  await loadAvailableTokens();
 });
 $: if (selectTokens?.length === 0 || allTokensSelected) {
   updateFields();
@@ -71,22 +68,6 @@ let unsubscribeAccount = account.subscribe((account2) => {
 onDestroy(() => {
   unsubscribeAccount();
 });
-async function loadAvailableTokens() {
-  if (loadingTokens) return;
-  loadingTokens = true;
-  try {
-    const result = await gui.getAllTokens();
-    if (result.error) {
-      throw new Error(result.error.msg);
-    }
-    availableTokens = result.value;
-  } catch (error) {
-    DeploymentStepsError.catch(error, DeploymentStepsErrorCode.NO_AVAILABLE_TOKENS);
-    availableTokens = [];
-  } finally {
-    loadingTokens = false;
-  }
-}
 function getAllGuiConfig() {
   try {
     let result = gui.getAllGuiConfig();
@@ -239,13 +220,7 @@ async function handleDeployButtonClick() {
 						description="Select the tokens that you want to use in your order."
 					/>
 					{#each selectTokens as token}
-						<SelectToken
-							{token}
-							{onSelectTokenSelect}
-							{availableTokens}
-							loading={loadingTokens}
-							{tokenBalances}
-						/>
+						<SelectToken {token} {onSelectTokenSelect} {tokenBalances} />
 					{/each}
 				</div>
 			{/if}

package/dist/components/deployment/DepositInput.svelte

@@ -43,10 +43,10 @@ const getTokenSymbol = async () => {
     error = errorMessage;
   }
 };
-function handlePresetClick(preset) {
+async function handlePresetClick(preset) {
   if (deposit.token?.key) {
     inputValue = preset;
-    gui.setDeposit(deposit.token?.key, preset);
+    await gui.setDeposit(deposit.token?.key, preset);
     try {
       currentDeposit = getCurrentDeposit();
     } catch (e) {
@@ -54,11 +54,11 @@ function handlePresetClick(preset) {
     }
   }
 }
-function handleInput(e) {
+async function handleInput(e) {
   if (deposit.token?.key) {
     if (e.currentTarget instanceof HTMLInputElement) {
       inputValue = e.currentTarget.value;
-      gui.setDeposit(deposit.token.key, e.currentTarget.value);
+      await gui.setDeposit(deposit.token.key, e.currentTarget.value);
       try {
         currentDeposit = getCurrentDeposit();
       } catch (e2) {

package/dist/components/deployment/SelectToken.svelte

@@ -8,15 +8,12 @@ import TokenSelectionModal from "./TokenSelectionModal.svelte";
 import TokenBalanceComponent from "./TokenBalance.svelte";
 export let token;
 export let onSelectTokenSelect;
-export let availableTokens = [];
-export let loading = false;
 export let tokenBalances = /* @__PURE__ */ new Map();
 let inputValue = null;
 let tokenInfo = null;
 let error = "";
 let checking = false;
 let selectionMode = "dropdown";
-let searchQuery = "";
 let selectedToken = null;
 const gui = useGui();
 onMount(async () => {
@@ -33,43 +30,13 @@ onMount(async () => {
   } catch {
   }
 });
-$: if (tokenInfo?.address && availableTokens.length > 0) {
-  const foundToken = availableTokens.find(
-    (t) => t.address.toLowerCase() === tokenInfo?.address.toLowerCase()
-  );
-  selectedToken = foundToken || null;
-  if (inputValue === null) {
-    inputValue = tokenInfo.address;
-  }
-  if (!foundToken && selectionMode === "dropdown") {
-    selectionMode = "custom";
-  }
-} else if (tokenInfo?.address && inputValue === null) {
+$: if (tokenInfo?.address && inputValue === null) {
   inputValue = tokenInfo.address;
 }
 function setMode(mode) {
   selectionMode = mode;
   error = "";
-  if (mode === "dropdown") {
-    searchQuery = "";
-    if (inputValue && tokenInfo) {
-      const foundToken = availableTokens.find(
-        (t) => t.address.toLowerCase() === inputValue?.toLowerCase()
-      );
-      if (foundToken) {
-        selectedToken = foundToken;
-      } else {
-        inputValue = null;
-        tokenInfo = null;
-        selectedToken = null;
-        clearTokenSelection();
-      }
-    } else {
-      inputValue = null;
-      tokenInfo = null;
-      selectedToken = null;
-    }
-  } else if (mode === "custom") {
+  if (mode === "custom") {
     selectedToken = null;
     tokenInfo = null;
     inputValue = "";
@@ -82,9 +49,6 @@ function handleTokenSelect(token2) {
   inputValue = token2.address;
   saveTokenSelection(token2.address);
 }
-function handleSearch(query) {
-  searchQuery = query;
-}
 async function saveTokenSelection(address) {
   checking = true;
   error = "";
@@ -153,34 +117,26 @@ async function handleInput(event) {
 		{/if}
 	</div>
 
-	{#if availableTokens.length > 0 && !loading}
-		<div class="selection-mode flex gap-2">
-			<ButtonSelectOption
-				active={selectionMode === 'dropdown'}
-				buttonText="Select from list"
-				clickHandler={() => setMode('dropdown')}
-				dataTestId="dropdown-mode-button"
-			/>
-			<ButtonSelectOption
-				active={selectionMode === 'custom'}
-				buttonText="Custom address"
-				clickHandler={() => setMode('custom')}
-				dataTestId="custom-mode-button"
-			/>
-		</div>
-	{/if}
-
-	{#if selectionMode === 'dropdown' && availableTokens.length > 0 && !loading}
-		<TokenSelectionModal
-			tokens={availableTokens}
-			{selectedToken}
-			onSelect={handleTokenSelect}
-			searchValue={searchQuery}
-			onSearch={handleSearch}
+	<div class="selection-mode flex gap-2">
+		<ButtonSelectOption
+			active={selectionMode === 'dropdown'}
+			buttonText="Select from list"
+			clickHandler={() => setMode('dropdown')}
+			dataTestId="dropdown-mode-button"
 		/>
+		<ButtonSelectOption
+			active={selectionMode === 'custom'}
+			buttonText="Custom address"
+			clickHandler={() => setMode('custom')}
+			dataTestId="custom-mode-button"
+		/>
+	</div>
+
+	{#if selectionMode === 'dropdown'}
+		<TokenSelectionModal {selectedToken} onSelect={handleTokenSelect} />
 	{/if}
 
-	{#if selectionMode === 'custom' || availableTokens.length === 0}
+	{#if selectionMode === 'custom'}
 		<div class="custom-input">
 			<Input
 				type="text"
@@ -193,12 +149,7 @@ async function handleInput(event) {
 	{/if}
 
 	<div class="token-status">
-		{#if loading}
-			<div class="flex h-5 flex-row items-center gap-2">
-				<Spinner class="h-5 w-5" />
-				<span>Loading tokens...</span>
-			</div>
-		{:else if checking}
+		{#if checking}
 			<div class="flex h-5 flex-row items-center gap-2">
 				<Spinner class="h-5 w-5" />
 				<span>Checking...</span>

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

@@ -1,12 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { GuiSelectTokensCfg, TokenInfo } from '@rainlanguage/orderbook';
+import type { GuiSelectTokensCfg } from '@rainlanguage/orderbook';
 import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {
         token: GuiSelectTokensCfg;
         onSelectTokenSelect: (key: string) => void;
-        availableTokens?: TokenInfo[];
-        loading?: boolean;
         tokenBalances?: Map<string, TokenBalance>;
     };
     events: {

package/dist/components/deployment/TokenSelectionModal.svelte

@@ -1,20 +1,30 @@
 <script>import { Input, Button, Modal } from "flowbite-svelte";
 import { SearchOutline, CheckCircleSolid, ChevronDownSolid } from "flowbite-svelte-icons";
-export let tokens = [];
+import { useGui } from "../../hooks/useGui";
+import { onMount, tick } from "svelte";
 export let selectedToken = null;
 export let onSelect;
-export let searchValue = "";
-export let onSearch;
 let modalOpen = false;
-$: filteredTokens = tokens.filter((token) => {
-  if (!searchValue) return true;
-  const query = searchValue.toLowerCase();
-  return token.name.toLowerCase().includes(query) || token.symbol.toLowerCase().includes(query) || token.address.toLowerCase().includes(query);
-});
+let searchQuery = "";
+let tokens = [];
+let isSearching = false;
+const gui = useGui();
+async function loadTokens(search) {
+  isSearching = true;
+  const result = await gui.getAllTokens(search);
+  if (result.error) {
+    tokens = [];
+  } else {
+    tokens = result.value;
+  }
+  isSearching = false;
+}
 function handleSearch(event) {
   const target = event.target;
-  onSearch(target.value);
+  searchQuery = target.value;
+  loadTokens(searchQuery || void 0);
 }
+onMount(() => loadTokens());
 function formatAddress(address) {
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
@@ -23,6 +33,14 @@ function handleTokenSelect(token) {
   modalOpen = false;
 }
 $: displayText = selectedToken ? `${selectedToken.name} (${selectedToken.symbol})` : "Select a token...";
+$: if (modalOpen) {
+  tick().then(() => {
+    const input = document.querySelector(".token-search-input");
+    if (input) {
+      input.focus();
+    }
+  });
+}
 </script>
 
 <div class="token-dropdown">
@@ -50,50 +68,59 @@ $: displayText = selectedToken ? `${selectedToken.name} (${selectedToken.symbol}
 				<Input
 					type="text"
 					placeholder="Search tokens..."
-					bind:value={searchValue}
+					bind:value={searchQuery}
 					on:input={handleSearch}
-					class="pl-10"
+					class="token-search-input pl-10"
 				/>
 			</div>
 
 			<div class="token-list max-h-80 overflow-y-auto">
-				{#each filteredTokens as token (token.address)}
-					<div
-						class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 last:border-b-0 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
-						class:bg-blue-50={selectedToken?.address === token.address}
-						class:dark:bg-blue-900={selectedToken?.address === token.address}
-						class:border-l-4={selectedToken?.address === token.address}
-						class:border-l-blue-500={selectedToken?.address === token.address}
-						on:click={() => handleTokenSelect(token)}
-						on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(token)}
-						role="button"
-						tabindex="0"
-					>
-						<div class="token-info flex-grow">
-							<div class="token-name font-medium text-gray-900 dark:text-white">
-								{token.name}
-							</div>
-							<div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
-								<span class="symbol font-medium">{token.symbol}</span>
-								<span class="address">{formatAddress(token.address)}</span>
+				{#if isSearching}
+					<div class="p-4 text-center text-gray-500 dark:text-gray-400">
+						<p>Searching tokens...</p>
+					</div>
+				{:else}
+					{#each tokens as token (token.address)}
+						<div
+							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 last:border-b-0 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
+							class:bg-blue-50={selectedToken?.address === token.address}
+							class:dark:bg-blue-900={selectedToken?.address === token.address}
+							class:border-l-4={selectedToken?.address === token.address}
+							class:border-l-blue-500={selectedToken?.address === token.address}
+							on:click={() => handleTokenSelect(token)}
+							on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(token)}
+							role="button"
+							tabindex="0"
+						>
+							<div class="token-info flex-grow">
+								<div class="token-name font-medium text-gray-900 dark:text-white">
+									{token.name}
+								</div>
+								<div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
+									<span class="symbol font-medium">{token.symbol}</span>
+									<span class="address">{formatAddress(token.address)}</span>
+								</div>
 							</div>
+							{#if selectedToken?.address === token.address}
+								<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
+							{/if}
 						</div>
-						{#if selectedToken?.address === token.address}
-							<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
-						{/if}
-					</div>
-				{/each}
+					{/each}
 
-				{#if filteredTokens.length === 0}
-					<div class="no-results p-4 text-center text-gray-500 dark:text-gray-400">
-						<p>No tokens found matching your search.</p>
-						<button
-							class="mt-2 text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
-							on:click={() => onSearch('')}
-						>
-							Clear search
-						</button>
-					</div>
+					{#if tokens.length === 0}
+						<div class="no-results p-4 text-center text-gray-500 dark:text-gray-400">
+							<p>No tokens found matching your search.</p>
+							<button
+								class="mt-2 text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+								on:click={() => {
+									searchQuery = '';
+									loadTokens();
+								}}
+							>
+								Clear search
+							</button>
+						</div>
+					{/if}
 				{/if}
 			</div>
 		</Modal>

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

@@ -2,11 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { TokenInfo } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        tokens?: TokenInfo[];
         selectedToken?: TokenInfo | null;
         onSelect: (token: TokenInfo) => void;
-        searchValue?: string;
-        onSearch: (query: string) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;