@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.241

package/dist/components/deployment/TokenIOInput.svelte

@@ -1,32 +1,33 @@
 <script>import { Input } from "flowbite-svelte";
-import {
-} from "@rainlanguage/orderbook/js_api";
-import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
+import {} from "@rainlanguage/raindex";
 import { onMount } from "svelte";
-export let i;
+import { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
+import VaultIdInformation from "./VaultIdInformation.svelte";
+const builder = useRaindexOrderBuilder();
 export let label;
 export let vault;
-export let gui;
+export let tokenBalances = /* @__PURE__ */ new Map();
 let tokenInfo = null;
 let inputValue = "";
 let error = "";
 onMount(() => {
-  const result = gui.getVaultIds();
+  if (!vault.token?.key) return;
+  const result = builder.getVaultIds();
   if (result.error) {
     error = result.error.msg;
     return;
   }
   const vaultIds = result.value;
-  if (label === "Input") {
-    inputValue = vaultIds.get("input")?.[i];
-  } else if (label === "Output") {
-    inputValue = vaultIds.get("output")?.[i];
+  const vaultMap = vaultIds.get(label.toLowerCase());
+  if (vaultMap) {
+    const vaultId = vaultMap.get(vault.token.key);
+    inputValue = vaultId || "";
   }
 });
 const handleGetTokenInfo = async () => {
   if (!vault.token?.key) return;
   try {
-    let result = await gui.getTokenInfo(vault.token?.key);
+    let result = await builder.getTokenInfo(vault.token?.key);
     if (result.error) {
       error = result.error.msg;
       return;
@@ -38,10 +39,13 @@ const handleGetTokenInfo = async () => {
   }
 };
 const handleInput = async () => {
-  const isInput = label === "Input";
+  if (!vault.token) {
+    error = "Vault token is not set.";
+    return;
+  }
   error = "";
   try {
-    gui?.setVaultId(isInput, i, inputValue);
+    builder.setVaultId(label.toLowerCase(), vault.token.key, inputValue);
   } catch (e) {
     const errorMessage = e.message ? e.message : "Error setting vault ID.";
     error = errorMessage;
@@ -53,12 +57,18 @@ $: if (vault.token?.key) {
 </script>
 
 <div class="flex w-full flex-col gap-6">
-	<DeploymentSectionHeader
-		title={`${label} ${i + 1} ${tokenInfo?.symbol ? `(${tokenInfo.symbol})` : ''}`}
-		description={`${tokenInfo?.symbol} vault ID`}
-	/>
+	<div class="flex w-full flex-col gap-2">
+		<div class="flex items-center gap-2">
+			<VaultIdInformation
+				title={`${label} ${tokenInfo?.symbol ? `(${tokenInfo.symbol})` : ''}`}
+				description={`${tokenInfo?.symbol || 'Token'} vault ID`}
+				tokenBalance={tokenBalances.get(vault.token?.key || '')}
+			/>
+		</div>
+	</div>
 	<div class="flex flex-col gap-2">
 		<Input
+			data-testid="vault-id-input"
 			size="lg"
 			type="text"
 			placeholder="Enter vault ID"

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

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import { type OrderIOCfg, type DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+import { type OrderIOCfg } from '@rainlanguage/raindex';
+import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {
-        i: number;
         label: "Input" | "Output";
         vault: OrderIOCfg;
-        gui: DotrainOrderGui;
+        tokenBalances?: Map<string, TokenBalance>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/TokenSelectionModal.svelte

@@ -0,0 +1,148 @@
+<script>import { Input, Button, Modal } from "flowbite-svelte";
+import { SearchOutline, CheckCircleSolid, ChevronDownSolid } from "flowbite-svelte-icons";
+import { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
+import { onMount, tick } from "svelte";
+export let selectedToken = null;
+export let onSelect;
+let modalOpen = false;
+let searchQuery = "";
+let tokens = [];
+let isSearching = false;
+let failedImages = /* @__PURE__ */ new Set();
+const builder = useRaindexOrderBuilder();
+async function loadTokens(search) {
+  isSearching = true;
+  const result = await builder.getAllTokens(search);
+  if (result.error) {
+    tokens = [];
+  } else {
+    tokens = result.value;
+  }
+  isSearching = false;
+}
+function handleSearch(event) {
+  const target = event.target;
+  searchQuery = target.value;
+  loadTokens(searchQuery || void 0);
+}
+onMount(() => loadTokens());
+function formatAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function handleTokenSelect(token) {
+  onSelect(token);
+  modalOpen = false;
+}
+function handleImageError(address) {
+  failedImages = /* @__PURE__ */ new Set([...failedImages, address]);
+}
+$: 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">
+	<div class="relative w-full">
+		<Button
+			color="alternative"
+			class="flex w-full justify-between overflow-hidden overflow-ellipsis pl-4 pr-2 text-left"
+			size="lg"
+			on:click={() => (modalOpen = true)}
+		>
+			<div class="flex-grow overflow-hidden">
+				<span class="text-gray-900 dark:text-white">{displayText}</span>
+			</div>
+			<ChevronDownSolid class="ml-2 h-4 w-4 text-black dark:text-white" />
+		</Button>
+
+		<Modal bind:open={modalOpen} size="md" class="w-full max-w-lg">
+			<div slot="header" class="flex w-full items-center justify-between">
+				<h3 class="text-xl font-medium text-gray-900 dark:text-white">Select a token</h3>
+			</div>
+			<div class="relative w-full border-b border-gray-200 p-2 dark:border-gray-600">
+				<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5">
+					<SearchOutline class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+				</div>
+				<Input
+					type="text"
+					placeholder="Search tokens..."
+					bind:value={searchQuery}
+					on:input={handleSearch}
+					class="token-search-input pl-10"
+				/>
+			</div>
+
+			<div class="token-list max-h-80 overflow-y-auto">
+				{#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"
+						>
+							{#if token.logoUri && !failedImages.has(token.address)}
+								<img
+									src={token.logoUri}
+									alt="{token.symbol} logo"
+									class="mr-3 h-8 w-8 rounded-full object-cover"
+									on:error={() => handleImageError(token.address)}
+								/>
+							{:else}
+								<div
+									class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-600"
+								>
+									<span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+										{token.symbol?.slice(0, 2) || '??'}
+									</span>
+								</div>
+							{/if}
+							<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>
+					{/each}
+
+					{#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>
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ExtendedTokenInfo } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        selectedToken?: ExtendedTokenInfo | null;
+        onSelect: (token: ExtendedTokenInfo) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TokenSelectionModalProps = typeof __propDef.props;
+export type TokenSelectionModalEvents = typeof __propDef.events;
+export type TokenSelectionModalSlots = typeof __propDef.slots;
+export default class TokenSelectionModal extends SvelteComponent<TokenSelectionModalProps, TokenSelectionModalEvents, TokenSelectionModalSlots> {
+}
+export {};

package/dist/components/deployment/{ValidStrategiesSection.svelte → ValidOrdersSection.svelte}

@@ -1,24 +1,24 @@
 <script>import { onMount } from "svelte";
 import { page } from "$app/stores";
-export let strategies;
+export let orders;
 let customRegistryParam = "";
 onMount(async () => {
   customRegistryParam = $page.url.searchParams.get("registry") ? `?registry=${$page.url.searchParams.get("registry")}` : "";
 });
 </script>
 
-<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" data-testid="valid-strategies">
-	{#each strategies as strategy}
+<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" data-testid="valid-orders">
+	{#each orders as order}
 		<a
-			href={`/deploy/${strategy.name}${customRegistryParam}`}
-			data-testid="strategy-short-tile"
+			href={`/deploy/${order.name}${customRegistryParam}`}
+			data-testid="order-short-tile"
 			class="flex flex-col gap-y-2 rounded-xl border border-gray-200 p-4 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900"
 		>
 			<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
-				{strategy.details.name}
+				{order.details.name}
 			</h3>
 			<p class="text-lg text-gray-600 dark:text-gray-400">
-				{strategy.details.short_description}
+				{order.details.short_description}
 			</p>
 		</a>
 	{/each}

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { ValidOrderDetail } from '../../types/order';
+declare const __propDef: {
+    props: {
+        orders: ValidOrderDetail[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ValidOrdersSectionProps = typeof __propDef.props;
+export type ValidOrdersSectionEvents = typeof __propDef.events;
+export type ValidOrdersSectionSlots = typeof __propDef.slots;
+export default class ValidOrdersSection extends SvelteComponent<ValidOrdersSectionProps, ValidOrdersSectionEvents, ValidOrdersSectionSlots> {
+}
+export {};

package/dist/components/deployment/VaultIdInformation.svelte

@@ -0,0 +1,17 @@
+<script>import TokenBalanceComponent from "./TokenBalance.svelte";
+export let title;
+export let description;
+export let tokenBalance;
+</script>
+
+<div class="flex max-w-xl flex-grow flex-col gap-y-4 text-left">
+	<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
+		{title}
+	</h1>
+	<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+		<div class="text-gray-600 dark:text-gray-400">
+			{description}
+		</div>
+		<TokenBalanceComponent {tokenBalance} />
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TokenBalance } from '../../types/tokenBalance';
+declare const __propDef: {
+    props: {
+        title: string;
+        description: string;
+        tokenBalance: TokenBalance | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultIdInformationProps = typeof __propDef.props;
+export type VaultIdInformationEvents = typeof __propDef.events;
+export type VaultIdInformationSlots = typeof __propDef.slots;
+export default class VaultIdInformation extends SvelteComponent<VaultIdInformationProps, VaultIdInformationEvents, VaultIdInformationSlots> {
+}
+export {};