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

package/dist/components/dropdown/DropdownRaindexesFilter.svelte

@@ -0,0 +1,172 @@
+<script>import { Button, Dropdown, Label, Checkbox, Input } from "flowbite-svelte";
+import { ChevronDownSolid, SearchSolid } from "flowbite-svelte-icons";
+import { isEmpty } from "lodash";
+import { getNetworkName } from "../../utils/getNetworkName";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
+export let activeRaindexAddresses;
+export let selectedRaindexAddresses;
+export let selectedChainIds;
+export let label = "Filter by raindex";
+export let allLabel = "All raindexes";
+export let emptyMessage = "No raindexes available";
+const raindexClient = useRaindexClient();
+let filteredRaindexes = [];
+let searchTerm = "";
+let selectedIndex = 0;
+$: raindexesResult = raindexClient.getAllRaindexes();
+$: raindexesMap = raindexesResult?.value ?? /* @__PURE__ */ new Map();
+$: raindexesError = raindexesResult?.error;
+$: availableRaindexes = (() => {
+  const items = [];
+  raindexesMap.forEach((cfg, key) => {
+    if (selectedChainIds.length === 0 || selectedChainIds.includes(cfg.network.chainId)) {
+      items.push({
+        key,
+        address: cfg.address,
+        label: cfg.label,
+        chainId: cfg.network.chainId
+      });
+    }
+  });
+  return items;
+})();
+$: selectedCount = selectedRaindexAddresses.length;
+$: allSelected = selectedCount === availableRaindexes.length && availableRaindexes.length > 0;
+$: buttonText = selectedCount === 0 ? "Select raindexes" : allSelected ? allLabel : `${selectedCount} raindex${selectedCount > 1 ? "es" : ""}`;
+$: {
+  if (searchTerm.trim() === "") {
+    filteredRaindexes = availableRaindexes;
+    selectedIndex = 0;
+  } else {
+    const term = searchTerm.toLowerCase();
+    filteredRaindexes = availableRaindexes.filter(
+      (raindex) => raindex.label?.toLowerCase().includes(term) || raindex.address?.toLowerCase().includes(term) || raindex.key?.toLowerCase().includes(term)
+    );
+    selectedIndex = filteredRaindexes.length > 0 ? 0 : -1;
+  }
+}
+$: sortedFilteredRaindexes = [...filteredRaindexes].sort((a, b) => {
+  const aSelected = selectedRaindexAddresses.some(
+    (addr) => addr.toLowerCase() === a.address.toLowerCase()
+  );
+  const bSelected = selectedRaindexAddresses.some(
+    (addr) => addr.toLowerCase() === b.address.toLowerCase()
+  );
+  if (aSelected === bSelected) return 0;
+  return aSelected ? -1 : 1;
+});
+function getDisplayName(raindex) {
+  const truncatedAddr = `${raindex.address.slice(0, 6)}...${raindex.address.slice(-4)}`;
+  return raindex.label ? `${raindex.label} (${truncatedAddr})` : truncatedAddr;
+}
+function updateSelectedRaindexes(newSelection) {
+  activeRaindexAddresses.set(newSelection);
+}
+function toggleRaindex({ address }) {
+  if (!address) return;
+  const normalizedAddress = address.toLowerCase();
+  const isSelected = selectedRaindexAddresses.some(
+    (addr) => addr.toLowerCase() === normalizedAddress
+  );
+  const newSelection = isSelected ? $activeRaindexAddresses.filter((addr) => addr.toLowerCase() !== normalizedAddress) : [...$activeRaindexAddresses, normalizedAddress];
+  updateSelectedRaindexes(newSelection);
+}
+function handleKeyDown(event) {
+  if (!sortedFilteredRaindexes.length) return;
+  switch (event.key) {
+    case "Enter":
+      event.preventDefault();
+      if (sortedFilteredRaindexes.length > 0) {
+        const raindexToToggle = sortedFilteredRaindexes[selectedIndex];
+        if (raindexToToggle) {
+          toggleRaindex(raindexToToggle);
+        }
+      }
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, sortedFilteredRaindexes.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-raindexes-filter-button"
+			aria-label="Select raindexes to filter"
+			aria-expanded="false"
+			aria-haspopup="listbox"
+		>
+			<div class="w-[110px] 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-raindexes-filter"
+		>
+			{#if raindexesError}
+				<div class="ml-2 w-full rounded-lg p-3 text-red-500">
+					Cannot load raindexes list: {raindexesError.readableMsg || 'Unknown error'}
+				</div>
+			{:else if isEmpty(availableRaindexes)}
+				<div class="ml-2 w-full rounded-lg p-3">{emptyMessage}</div>
+			{:else}
+				<div class="sticky top-0 bg-white p-3 dark:bg-gray-800">
+					<Input
+						placeholder="Search raindexes..."
+						bind:value={searchTerm}
+						autofocus
+						on:keydown={handleKeyDown}
+						data-testid="raindexes-filter-search"
+					>
+						<SearchSolid slot="left" class="h-4 w-4 text-gray-500" />
+					</Input>
+				</div>
+
+				{#if isEmpty(filteredRaindexes)}
+					<div class="ml-2 w-full rounded-lg p-3">No raindexes match your search</div>
+				{:else}
+					{#each sortedFilteredRaindexes as raindex, index (`${raindex.address}-${raindex.chainId}`)}
+						<Checkbox
+							data-testid="dropdown-raindexes-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={() => toggleRaindex(raindex)}
+							checked={!!(
+								raindex.address &&
+								selectedRaindexAddresses.some(
+									(addr) => addr.toLowerCase() === raindex.address.toLowerCase()
+								)
+							)}
+						>
+							<div class="ml-2 flex w-full">
+								<div class="flex-1 text-sm font-medium">{getDisplayName(raindex)}</div>
+								<div class="text-xs text-gray-500">
+									{getNetworkName(raindex.chainId)}
+								</div>
+							</div>
+						</Checkbox>
+					{/each}
+				{/if}
+			{/if}
+		</Dropdown>
+	</div>
+</div>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { Address } from '@rainlanguage/raindex';
+import type { AppStoresInterface } from '../../types/appStores';
+declare const __propDef: {
+    props: {
+        activeRaindexAddresses: AppStoresInterface["activeRaindexAddresses"];
+        selectedRaindexAddresses: Address[];
+        selectedChainIds: number[];
+        label?: string;
+        allLabel?: string;
+        emptyMessage?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DropdownRaindexesFilterProps = typeof __propDef.props;
+export type DropdownRaindexesFilterEvents = typeof __propDef.events;
+export type DropdownRaindexesFilterSlots = typeof __propDef.slots;
+export default class DropdownRaindexesFilter extends SvelteComponent<DropdownRaindexesFilterProps, DropdownRaindexesFilterEvents, DropdownRaindexesFilterSlots> {
+}
+export {};

package/dist/components/dropdown/DropdownTokensFilter.svelte

@@ -0,0 +1,152 @@
+<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((a, b) => {
+  const aSelected = selectedTokens.includes(a.address);
+  const bSelected = selectedTokens.includes(b.address);
+  if (aSelected === bSelected) return 0;
+  return aSelected ? -1 : 1;
+});
+function updateSelectedTokens(newSelection) {
+  activeTokens.set(newSelection);
+}
+function toggleToken({ address }) {
+  if (!address) return;
+  const isSelected = selectedTokens.includes(address);
+  const newSelection = isSelected ? $activeTokens.filter((addr) => addr !== address) : [...$activeTokens, address];
+  updateSelectedTokens(newSelection);
+}
+function handleKeyDown(event) {
+  if (!sortedFilteredTokens.length) return;
+  switch (event.key) {
+    case "Enter":
+      event.preventDefault();
+      if (sortedFilteredTokens.length > 0) {
+        const tokenToToggle = sortedFilteredTokens[selectedIndex];
+        if (tokenToToggle) {
+          toggleToken(tokenToToggle);
+        }
+      }
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, sortedFilteredTokens.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 && selectedTokens.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/raindex';
+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/icon/Refresh.svelte

@@ -11,14 +11,16 @@ const sizes = {
 export let size = ctx.size || "md";
 export let role = ctx.role || "img";
 export let ariaLabel = "refresh";
+export let title = "Refresh";
 export let spin = false;
+export let testId = "refresh-button";
 </script>
 
 <svg
-	data-testid="refresh-button"
+	data-testid={testId}
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
-	{...$$restProps}
+	{...{ title, ...$$restProps }}
 	class={twMerge(
 		'shrink-0 cursor-pointer outline-none',
 		sizes[size],

package/dist/components/icon/Refresh.svelte.d.ts

@@ -6,7 +6,9 @@ declare const __propDef: {
         size?: ("xs" | "sm" | "md" | "lg" | "xl") | undefined;
         role?: AriaRole | undefined;
         ariaLabel?: string | undefined;
+        title?: string | undefined;
         spin?: boolean | undefined;
+        testId?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/input/InputOrderHash.svelte

@@ -9,7 +9,7 @@ function handleChange(event) {
 </script>
 
 <div data-testid="order-hash-input" class="flex flex-col gap-x-2">
-	<Label>Order Hash</Label>
+	<Label>Order hash</Label>
 	<div class="w-full lg:w-32">
 		<input
 			type="text"

package/dist/components/input/InputOrderHash.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
+import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
-        orderHash: Writable<string>;
-        value?: string;
+        orderHash: AppStoresInterface["orderHash"];
+        value?: `0x${string}`;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/input/InputOwnerFilter.svelte

@@ -0,0 +1,48 @@
+<script>import { Button, Label } from "flowbite-svelte";
+import { useAccount } from "../../providers/wallet/useAccount";
+export let ownerFilter;
+const { account } = useAccount();
+let value = "";
+$: value = $ownerFilter;
+function handleChange(event) {
+  const input = event.target;
+  value = input.value;
+  ownerFilter.set(value);
+}
+function handleMyItems() {
+  if (!$account) return;
+  if ($ownerFilter.toLowerCase() === $account.toLowerCase()) {
+    ownerFilter.set("");
+    value = "";
+  } else {
+    ownerFilter.set($account);
+    value = $account;
+  }
+}
+</script>
+
+<div data-testid="owner-filter-input" class="flex flex-col gap-x-2">
+	<Label>Owner</Label>
+	<div class="flex items-center gap-2">
+		<div class="w-full lg:w-32">
+			<input
+				type="text"
+				bind:value
+				on:input={handleChange}
+				placeholder="0x..."
+				class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400"
+			/>
+		</div>
+		<Button
+			size="xs"
+			color={$account && $ownerFilter.toLowerCase() === $account.toLowerCase()
+				? 'primary'
+				: 'alternative'}
+			disabled={!$account}
+			on:click={handleMyItems}
+			data-testid="my-items-button"
+		>
+			My Items
+		</Button>
+	</div>
+</div>

package/dist/components/input/InputOwnerFilter.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../../types/appStores';
+declare const __propDef: {
+    props: {
+        ownerFilter: AppStoresInterface["ownerFilter"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputOwnerFilterProps = typeof __propDef.props;
+export type InputOwnerFilterEvents = typeof __propDef.events;
+export type InputOwnerFilterSlots = typeof __propDef.slots;
+export default class InputOwnerFilter extends SvelteComponent<InputOwnerFilterProps, InputOwnerFilterEvents, InputOwnerFilterSlots> {
+}
+export {};

package/dist/components/input/InputRegistryUrl.svelte

@@ -1,18 +1,40 @@
 <script>import { Button, Input } from "flowbite-svelte";
-let newRegistryUrl = localStorage.getItem("registry") || "";
-const loadRegistryUrl = () => {
-  window.history.pushState({}, "", window.location.pathname + "?registry=" + newRegistryUrl);
-  window.location.reload();
-  localStorage.setItem("registry", newRegistryUrl);
-};
+import { useRegistry } from "../../providers/registry/useRegistry";
+import { loadRegistryUrl } from "../../services/loadRegistryUrl";
+const registry = useRegistry();
+let newRegistryUrl = registry.getCurrentRegistry();
+let error = null;
+let loading = false;
+async function handleClick() {
+  loading = true;
+  error = null;
+  try {
+    if (!registry) {
+      throw new Error("Registry manager not yet available.");
+    }
+    await loadRegistryUrl(newRegistryUrl, registry);
+  } catch (err) {
+    error = err instanceof Error ? err.message : "Unknown error";
+  }
+  loading = false;
+}
 </script>
 
-<div class="mb-4 flex w-full items-start gap-4">
-	<Input
-		id="strategy-url"
-		type="url"
-		placeholder="Enter URL to raw strategy registry file"
-		bind:value={newRegistryUrl}
-	/>
-	<Button class="text-nowrap" on:click={loadRegistryUrl}>Load Registry URL</Button>
+<div class="flex w-full flex-col items-end gap-2">
+	<div class="flex w-full items-start gap-4" data-testid="registry-input">
+		<Input
+			id="order-url"
+			type="url"
+			placeholder="Enter URL to raw order registry file"
+			bind:value={newRegistryUrl}
+		/>
+		<Button class="w-36 text-nowrap" on:click={handleClick} disabled={loading}>
+			{loading ? 'Loading registry...' : 'Load registry URL'}
+		</Button>
+	</div>
+	<div class="h-4">
+		{#if error}
+			<p data-testid="registry-error" class="text-red-500">{error}</p>
+		{/if}
+	</div>
 </div>

package/dist/components/input/InputToken.svelte

@@ -35,10 +35,10 @@ function decimalsComplete({ detail }) {
 		</div>
 
 		{#if !isAddressValid && address.length > 0}
-			<Helper class="mt-2 text-sm" color="red">Invalid Address</Helper>
+			<Helper class="mt-2 text-sm" color="red">Invalid address</Helper>
 		{/if}
 
-		<Helper class="mt-2 text-sm">Token Address</Helper>
+		<Helper class="mt-2 text-sm">Token address</Helper>
 	</div>
 	<div class="w-32 grow-0 break-all" data-testid="token-decimals-input">
 		<input

package/dist/components/input/InputTokenAmount.svelte

@@ -1,30 +1,41 @@
-<script>import { InputAddon, Button, Alert } from "flowbite-svelte";
-import { InfoCircleSolid } from "flowbite-svelte-icons";
-import { parseUnits } from "viem";
+<script>import { InputAddon, Button } from "flowbite-svelte";
+import { Float } from "@rainlanguage/raindex";
+import { validateAmount } from "../../services/validateAmount";
 export let symbol = void 0;
-export let decimals = 0;
 export let maxValue = void 0;
+export let value = Float.parse("0").value;
 let inputValue = "";
-export let value = 0n;
+let decimalsError = null;
 function handleInput(event) {
   const input = event.target;
   inputValue = input.value;
+  const decimalsValidation = validateAmount(inputValue);
+  decimalsError = decimalsValidation.errorMessage;
+  if (!decimalsValidation.isValid) {
+    value = Float.parse("0").value;
+    return;
+  }
   if (inputValue === "") {
-    value = 0n;
+    value = Float.parse("0").value;
   } else {
-    try {
-      value = parseUnits(inputValue, decimals);
-    } catch (_e) {
-      value = 0n;
+    let parsedValue = Float.parse(inputValue);
+    if (parsedValue.error) {
+      value = Float.parse("0").value;
+      return;
     }
+    value = parsedValue.value;
   }
 }
 function fillMaxValue() {
   if (!maxValue) return;
   value = maxValue;
-  inputValue = maxValue.toString().padStart(decimals + 1, "0");
-  inputValue = inputValue.slice(0, -decimals) + "." + inputValue.slice(-decimals);
-  inputValue = inputValue.replace(/\.?0+$/, "");
+  decimalsError = null;
+  let formattedValue = value.format().value;
+  if (!formattedValue) {
+    inputValue = "";
+    return;
+  }
+  inputValue = formattedValue;
 }
 </script>
 
@@ -39,7 +50,7 @@ function fillMaxValue() {
 			/>
 
 			{#if maxValue}
-				<div class="absolute right-4 flex h-10 flex-col justify-center">
+				<div class="absolute right-2 flex h-10 flex-col justify-center">
 					<Button color="blue" class="px-2 py-1" size="xs" pill on:click={fillMaxValue}>MAX</Button>
 				</div>
 			{/if}
@@ -53,11 +64,10 @@ function fillMaxValue() {
 			</InputAddon>
 		{/if}
 	</div>
-	{#if decimals === 0}
-		<Alert color="yellow" border class="mt-2">
-			<InfoCircleSolid slot="icon" class="h-6 w-6" />
-			This token does not specify a number of decimals. <br />You are inputting the raw integer
-			amount with 0 decimal places.
-		</Alert>
+
+	{#if decimalsError}
+		<p class="mt-1 text-sm text-red-500" data-testid="decimals-error">
+			{decimalsError}
+		</p>
 	{/if}
 </div>

package/dist/components/input/InputTokenAmount.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
+import { Float } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         symbol?: string | undefined;
-        decimals?: number;
-        maxValue?: bigint | undefined;
-        value?: bigint;
+        maxValue?: Float | undefined;
+        value?: Float;
     };
     events: {
         [evt: string]: CustomEvent<any>;