@rainlanguage/ui-components 0.0.1-alpha.142 → 0.0.1-alpha.144

package/dist/components/ButtonVaultLink.svelte

@@ -1,4 +1,4 @@
-<script>import { formatUnits, toHex } from "viem";
+<script>import { toHex } from "viem";
 import Tooltip from "./Tooltip.svelte";
 export let tokenVault;
 export let chainId;
@@ -20,7 +20,7 @@ export let orderbookAddress;
 			{tokenVault.token.name} ({tokenVault.token.symbol})
 		</a>
 		<span class="text-sm text-gray-500 dark:text-gray-400">
-			Balance: {formatUnits(tokenVault.balance, Number(tokenVault.token.decimals) || 18)}
+			Balance: {tokenVault.formattedBalance}
 		</span>
 	</div>
 	<div>

package/dist/components/charts/VaultBalanceChart.svelte

@@ -1,5 +1,4 @@
 <script>import { timestampSecondsToUTCTimestamp } from "../../services/time";
-import { bigintToFloat } from "../../utils/number";
 import { createQuery } from "@tanstack/svelte-query";
 import TanstackLightweightChartLine from "../charts/TanstackLightweightChartLine.svelte";
 import { QKEY_VAULT_CHANGES } from "../../queries/keys";
@@ -22,7 +21,7 @@ const Chart = TanstackLightweightChartLine;
 		priceSymbol={vault.token.symbol}
 		{query}
 		timeTransform={(d) => timestampSecondsToUTCTimestamp(BigInt(d.timestamp))}
-		valueTransform={(d) => bigintToFloat(d.newBalance, Number(vault.token.decimals ?? 0))}
+		valueTransform={(d) => parseFloat(d.formattedNewBalance)}
 		emptyMessage="No deposits or withdrawals found"
 		{lightweightChartsTheme}
 	/>

package/dist/components/deployment/DeploymentSteps.svelte

@@ -35,6 +35,8 @@ let showAdvancedOptions = false;
 let allTokenInfos = [];
 let selectTokens = void 0;
 let checkingDeployment = false;
+let availableTokens = [];
+let loadingTokens = false;
 const gui = useGui();
 const registry = useRegistry();
 const raindexClient = useRaindexClient();
@@ -46,10 +48,27 @@ onMount(async () => {
   }
   selectTokens = selectTokensResult.value;
   await areAllTokensSelected();
+  await loadAvailableTokens();
 });
 $: if (selectTokens?.length === 0 || allTokensSelected) {
   updateFields();
 }
+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();
@@ -162,7 +181,7 @@ async function handleDeployButtonClick() {
 						description="Select the tokens that you want to use in your order."
 					/>
 					{#each selectTokens as token}
-						<SelectToken {token} {onSelectTokenSelect} />
+						<SelectToken {token} {onSelectTokenSelect} {availableTokens} loading={loadingTokens} />
 					{/each}
 				</div>
 			{/if}

package/dist/components/deployment/SelectToken.svelte

@@ -3,12 +3,19 @@ import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
 import { Spinner } from "flowbite-svelte";
 import { onMount } from "svelte";
 import { useGui } from "../../hooks/useGui";
+import ButtonSelectOption from "./ButtonSelectOption.svelte";
+import TokenSelectionModal from "./TokenSelectionModal.svelte";
 export let token;
 export let onSelectTokenSelect;
+export let availableTokens = [];
+export let loading = false;
 let inputValue = null;
 let tokenInfo = null;
 let error = "";
 let checking = false;
+let selectionMode = "dropdown";
+let searchQuery = "";
+let selectedToken = null;
 const gui = useGui();
 onMount(async () => {
   try {
@@ -17,12 +24,82 @@ onMount(async () => {
       throw new Error(result.error.msg);
     }
     tokenInfo = result.value;
-    if (tokenInfo?.address) {
-      inputValue = tokenInfo.address;
+    if (result.value?.address) {
+      inputValue = result.value.address;
     }
   } 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) {
+  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") {
+    selectedToken = null;
+    tokenInfo = null;
+    inputValue = "";
+    error = "";
+    clearTokenSelection();
+  }
+}
+function handleTokenSelect(token2) {
+  selectedToken = token2;
+  inputValue = token2.address;
+  saveTokenSelection(token2.address);
+}
+function handleSearch(query) {
+  searchQuery = query;
+}
+async function saveTokenSelection(address) {
+  checking = true;
+  error = "";
+  try {
+    await gui.setSelectToken(token.key, address);
+    await getInfoForSelectedToken();
+  } catch (e) {
+    const errorMessage = e.message || "Invalid token address.";
+    error = errorMessage;
+  } finally {
+    checking = false;
+    onSelectTokenSelect();
+  }
+}
+function clearTokenSelection() {
+  gui.unsetSelectToken(token.key);
+  onSelectTokenSelect();
+}
 async function getInfoForSelectedToken() {
   error = "";
   try {
@@ -37,64 +114,105 @@ async function getInfoForSelectedToken() {
   }
 }
 async function handleInput(event) {
-  tokenInfo = null;
   const currentTarget = event.currentTarget;
   if (currentTarget instanceof HTMLInputElement) {
     inputValue = currentTarget.value;
+    if (tokenInfo && tokenInfo.address.toLowerCase() !== inputValue.toLowerCase()) {
+      tokenInfo = null;
+      selectedToken = null;
+    }
     if (!inputValue) {
       error = "";
+      tokenInfo = null;
+      selectedToken = null;
+      return;
     }
-    checking = true;
-    try {
-      await gui.setSelectToken(token.key, currentTarget.value);
-      await getInfoForSelectedToken();
-    } catch (e) {
-      const errorMessage = e.message ? e.message : "Invalid token address.";
-      error = errorMessage;
-    }
+    saveTokenSelection(inputValue);
   }
-  checking = false;
-  onSelectTokenSelect();
 }
 </script>
 
-<div class="flex w-full flex-col">
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-col justify-start gap-4 lg:flex-row lg:items-center lg:justify-between">
-			{#if token.name || token.description}
-				<div class="flex flex-col">
-					{#if token.name}
-						<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-xl dark:text-white">
-							{token.name}
-						</h1>
-					{/if}
-					{#if token.description}
-						<p class="text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
-							{token.description}
-						</p>
-					{/if}
-				</div>
-			{/if}
-			{#if checking}
-				<div class="flex h-5 flex-row items-center gap-2">
-					<Spinner class="h-5 w-5" />
-					<span>Checking...</span>
-				</div>
-			{:else if tokenInfo}
-				<div
-					class="flex h-5 flex-row items-center gap-2"
-					data-testid={`select-token-success-${token.key}`}
-				>
-					<CheckCircleSolid class="h-5 w-5" color="green" />
-					<span>{tokenInfo.name}</span>
-				</div>
-			{:else if error}
-				<div class="flex h-5 flex-row items-center gap-2" data-testid="error">
-					<CloseCircleSolid class="h-5 w-5" color="red" />
-					<span>{error}</span>
-				</div>
-			{/if}
+<div class="token-selection-container flex w-full flex-col gap-4">
+	<div class="token-header">
+		{#if token.name || token.description}
+			<div class="flex flex-col">
+				{#if token.name}
+					<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-xl dark:text-white">
+						{token.name}
+					</h1>
+				{/if}
+				{#if token.description}
+					<p class="text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
+						{token.description}
+					</p>
+				{/if}
+			</div>
+		{/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}
+		/>
+	{/if}
+
+	{#if selectionMode === 'custom' || availableTokens.length === 0}
+		<div class="custom-input">
+			<Input
+				type="text"
+				size="lg"
+				placeholder="Enter token address (0x...)"
+				bind:value={inputValue}
+				on:input={handleInput}
+			/>
 		</div>
-		<Input type="text" size="lg" on:input={handleInput} bind:value={inputValue} />
+	{/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}
+			<div class="flex h-5 flex-row items-center gap-2">
+				<Spinner class="h-5 w-5" />
+				<span>Checking...</span>
+			</div>
+		{:else if tokenInfo}
+			<div
+				class="flex h-5 flex-row items-center gap-2"
+				data-testid={`select-token-success-${token.key}`}
+			>
+				<CheckCircleSolid class="h-5 w-5" color="green" />
+				<span>{tokenInfo.name}</span>
+			</div>
+		{:else if error}
+			<div class="flex h-5 flex-row items-center gap-2" data-testid="error">
+				<CloseCircleSolid class="h-5 w-5" color="red" />
+				<span>{error}</span>
+			</div>
+		{/if}
 	</div>
 </div>

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

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { GuiSelectTokensCfg } from '@rainlanguage/orderbook';
+import type { GuiSelectTokensCfg, TokenInfo } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         token: GuiSelectTokensCfg;
         onSelectTokenSelect: () => void;
+        availableTokens?: TokenInfo[];
+        loading?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/TokenSelectionModal.svelte

@@ -0,0 +1,101 @@
+<script>import { Input, Button, Modal } from "flowbite-svelte";
+import { SearchOutline, CheckCircleSolid, ChevronDownSolid } from "flowbite-svelte-icons";
+export let tokens = [];
+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);
+});
+function handleSearch(event) {
+  const target = event.target;
+  onSearch(target.value);
+}
+function formatAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function handleTokenSelect(token) {
+  onSelect(token);
+  modalOpen = false;
+}
+$: displayText = selectedToken ? `${selectedToken.name} (${selectedToken.symbol})` : "Select a token...";
+</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={searchValue}
+					on:input={handleSearch}
+					class="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>
+							</div>
+						</div>
+						{#if selectedToken?.address === token.address}
+							<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
+						{/if}
+					</div>
+				{/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}
+			</div>
+		</Modal>
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+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>;
+    };
+    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/detail/VaultDetail.svelte

@@ -7,7 +7,7 @@ import { QKEY_VAULT } from "../../queries/keys";
 import {
   RaindexClient
 } from "@rainlanguage/orderbook";
-import { formatUnits, toHex } from "viem";
+import { toHex } from "viem";
 import { createQuery } from "@tanstack/svelte-query";
 import { onDestroy } from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
@@ -119,8 +119,7 @@ const handleRefresh = async () => {
 		<CardProperty data-testid="vaultDetailBalance">
 			<svelte:fragment slot="key">Balance</svelte:fragment>
 			<svelte:fragment slot="value"
-				>{formatUnits(BigInt(data.balance), Number(data.token.decimals ?? 0))}
-				{data.token.symbol}</svelte:fragment
+				>{`${data.formattedBalance} ${data.token.symbol}`}</svelte:fragment
 			>
 		</CardProperty>
 

package/dist/components/tables/OrderTradesListTable.svelte

@@ -5,7 +5,6 @@ import { DEFAULT_PAGE_SIZE } from "../../queries/constants";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
 import Hash, { HashType } from "../Hash.svelte";
-import { formatUnits } from "viem";
 import { BugOutline } from "flowbite-svelte-icons";
 import TableTimeFilters from "../charts/TableTimeFilters.svelte";
 export let order;
@@ -80,48 +79,22 @@ $: orderTradesQuery = createInfiniteQuery({
 			<Hash type={HashType.Transaction} value={item.transaction.id} />
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2">
-			{formatUnits(
-				BigInt(item.inputVaultBalanceChange.amount),
-				Number(item.inputVaultBalanceChange.token.decimals ?? 0)
-			)}
+			{item.inputVaultBalanceChange.formattedAmount}
 			{item.inputVaultBalanceChange.token.symbol}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2">
-			{formatUnits(
-				BigInt(item.outputVaultBalanceChange.amount) * BigInt(-1),
-				Number(item.outputVaultBalanceChange.token.decimals ?? 0)
-			)}
+			{item.outputVaultBalanceChange.formattedAmount}
 			{item.outputVaultBalanceChange.token.symbol}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2" data-testid="io-ratio">
 			{Math.abs(
-				Number(
-					formatUnits(
-						BigInt(item.inputVaultBalanceChange.amount),
-						Number(item.inputVaultBalanceChange.token.decimals ?? 0)
-					)
-				) /
-					Number(
-						formatUnits(
-							BigInt(item.outputVaultBalanceChange.amount),
-							Number(item.outputVaultBalanceChange.token.decimals ?? 0)
-						)
-					)
+				Number(item.inputVaultBalanceChange.formattedAmount) /
+					Number(item.outputVaultBalanceChange.formattedAmount)
 			)}
 			<span class="text-gray-400">
 				({Math.abs(
-					Number(
-						formatUnits(
-							BigInt(item.outputVaultBalanceChange.amount),
-							Number(item.outputVaultBalanceChange.token.decimals ?? 0)
-						)
-					) /
-						Number(
-							formatUnits(
-								BigInt(item.inputVaultBalanceChange.amount),
-								Number(item.inputVaultBalanceChange.token.decimals ?? 0)
-							)
-						)
+					Number(item.outputVaultBalanceChange.formattedAmount) /
+						Number(item.inputVaultBalanceChange.formattedAmount)
 				)})
 			</span>
 		</TableBodyCell>

package/dist/components/tables/OrderVaultsVolTable.svelte

@@ -1,12 +1,10 @@
 <script>import { createInfiniteQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_VAULTS_VOL_LIST } from "../../queries/keys";
-import {} from "@rainlanguage/orderbook";
+import { RaindexVaultVolume } from "@rainlanguage/orderbook";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import Hash, { HashType } from "../Hash.svelte";
-import { formatUnits } from "viem";
 import TableTimeFilters from "../charts/TableTimeFilters.svelte";
-import { bigintStringToHex } from "../../utils/hex";
 export let order;
 let startTimestamp;
 let endTimestamp;
@@ -44,7 +42,7 @@ $: vaultsVol = createInfiniteQuery({
 
 	<svelte:fragment slot="bodyRow" let:item>
 		<TableBodyCell tdClass="px-4 py-2">
-			<Hash type={HashType.Identifier} shorten value={bigintStringToHex(item.id)} />
+			<Hash type={HashType.Identifier} shorten value={item.id} />
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2 min-w-32">
 			<div class="flex gap-x-3">
@@ -53,17 +51,16 @@ $: vaultsVol = createInfiniteQuery({
 			</div>
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2 min-w-32" data-testid="total-in">
-			{formatUnits(BigInt(item.volDetails.totalIn), Number(item.token.decimals ?? 0))}
+			{item.details.formattedTotalIn}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2" data-testid="total-out">
-			{formatUnits(BigInt(item.volDetails.totalOut), Number(item.token.decimals ?? 0))}
+			{item.details.formattedTotalOut}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2" data-testid="net-vol">
-			{(BigInt(item.volDetails.totalIn) >= BigInt(item.volDetails.totalOut) ? '' : '-') +
-				formatUnits(BigInt(item.volDetails.netVol), Number(item.token.decimals ?? 0))}
+			{(item.details.totalIn >= item.details.totalOut ? '' : '-') + item.details.formattedNetVol}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2" data-testid="total-vol">
-			{formatUnits(BigInt(item.volDetails.totalVol), Number(item.token.decimals ?? 0))}
+			{item.details.formattedTotalVol}
 		</TableBodyCell>
 	</svelte:fragment>
 </TanstackAppTable>

package/dist/components/tables/VaultBalanceChangesTable.svelte

@@ -1,5 +1,4 @@
 <script generics="T">import { Heading, TableHeadCell, TableBodyCell } from "flowbite-svelte";
-import { formatUnits } from "viem";
 import { createInfiniteQuery } from "@tanstack/svelte-query";
 import { RaindexVault } from "@rainlanguage/orderbook";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
@@ -55,12 +54,10 @@ const AppTable = TanstackAppTable;
 			tdClass="break-word p-0 text-left"
 			data-testid="vaultBalanceChangesTableBalanceChange"
 		>
-			{formatUnits(BigInt(item.amount), Number(item.token.decimals ?? 0))}
-			{item.token.symbol}
+			{`${item.formattedAmount} ${item.token.symbol}`}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-word p-0 text-left" data-testid="vaultBalanceChangesTableBalance">
-			{formatUnits(item.newBalance, Number(item.token.decimals ?? 0))}
-			{item.token.symbol}
+			{`${item.formattedNewBalance} ${item.token.symbol}`}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-word p-0 text-left" data-testid="vaultBalanceChangesTableType">
 			{item.type}

package/dist/components/tables/VaultsListTable.svelte

@@ -9,7 +9,6 @@ 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 { RaindexVault } from "@rainlanguage/orderbook";
 import { QKEY_TOKENS, QKEY_VAULTS } from "../../queries/keys";
 import { useAccount } from "../../providers/wallet/useAccount";
@@ -130,8 +129,7 @@ const AppTable = TanstackAppTable;
 				>{item.token.name}</TableBodyCell
 			>
 			<TableBodyCell tdClass="break-all p-2 min-w-48" data-testid="vault-balance">
-				{vaultBalanceDisplay(item)}
-				{item.token.symbol}
+				{`${item.formattedBalance} ${item.token.symbol}`}
 			</TableBodyCell>
 			<TableBodyCell tdClass="break-all p-2 min-w-48">
 				{#if item.ordersAsInput.length > 0}

package/dist/errors/DeploymentStepsError.d.ts

@@ -11,6 +11,7 @@ export declare enum DeploymentStepsErrorCode {
     NO_GUI_DETAILS = "Error getting GUI details",
     NO_CHAIN = "Unsupported chain ID",
     NO_NETWORK_KEY = "No network key found",
+    NO_AVAILABLE_TOKENS = "Error loading available tokens",
     SERIALIZE_ERROR = "Error serializing state",
     ADD_ORDER_FAILED = "Failed to add order",
     NO_WALLET = "No account address found",

package/dist/errors/DeploymentStepsError.js

@@ -13,6 +13,7 @@ export var DeploymentStepsErrorCode;
     DeploymentStepsErrorCode["NO_GUI_DETAILS"] = "Error getting GUI details";
     DeploymentStepsErrorCode["NO_CHAIN"] = "Unsupported chain ID";
     DeploymentStepsErrorCode["NO_NETWORK_KEY"] = "No network key found";
+    DeploymentStepsErrorCode["NO_AVAILABLE_TOKENS"] = "Error loading available tokens";
     DeploymentStepsErrorCode["SERIALIZE_ERROR"] = "Error serializing state";
     DeploymentStepsErrorCode["ADD_ORDER_FAILED"] = "Failed to add order";
     DeploymentStepsErrorCode["NO_WALLET"] = "No account address found";

package/dist/index.d.ts

@@ -75,8 +75,6 @@ export type { ToastProps } from './types/toast';
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';
 export { formatTimestampSecondsAsLocal, timestampSecondsToUTCTimestamp, promiseTimeout } from './services/time';
 export { bigintStringToHex, HEX_INPUT_REGEX } from './utils/hex';
-export { vaultBalanceDisplay } from './utils/vault';
-export { bigintToFloat } from './utils/number';
 export { getExplorerLink } from './services/getExplorerLink';
 export { invalidateTanstackQueries } from './queries/queryClient';
 export { getToastsContext } from './providers/toasts/context';

package/dist/index.js

@@ -72,8 +72,6 @@ export { TransactionStatusMessage, TransactionStoreErrorMessage } from './types/
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';
 export { formatTimestampSecondsAsLocal, timestampSecondsToUTCTimestamp, promiseTimeout } from './services/time';
 export { bigintStringToHex, HEX_INPUT_REGEX } from './utils/hex';
-export { vaultBalanceDisplay } from './utils/vault';
-export { bigintToFloat } from './utils/number';
 export { getExplorerLink } from './services/getExplorerLink';
 export { invalidateTanstackQueries } from './queries/queryClient';
 export { getToastsContext } from './providers/toasts/context';

package/dist/utils/number.d.ts

@@ -5,10 +5,3 @@
  * @param decimalPoint - (optional) The number of digits to keep after "." in final result, defaults to valueDecimals
  */
 export declare function bigintStringToPercentage(value: string, valueDecimals: number, finalDecimalsDigits?: number): string;
-/**
- * Converts a bigint value to a floating point number with the specified number of decimals
- * @param value - The bigint value to convert
- * @param decimals - The number of decimal places to use in the conversion
- * @returns The converted floating point number
- */
-export declare function bigintToFloat(value: bigint, decimals: number): number;

package/dist/utils/number.js

@@ -14,30 +14,3 @@ export function bigintStringToPercentage(value, valueDecimals, finalDecimalsDigi
     }
     return valueString;
 }
-/**
- * Converts a bigint value to a floating point number with the specified number of decimals
- * @param value - The bigint value to convert
- * @param decimals - The number of decimal places to use in the conversion
- * @returns The converted floating point number
- */
-export function bigintToFloat(value, decimals) {
-    return parseFloat(formatUnits(value, decimals));
-}
-if (import.meta.vitest) {
-    const { it, expect } = import.meta.vitest;
-    it('should get percentage string from bigint string', () => {
-        const value = '123456000000000000';
-        const decimals = 18;
-        const finalDecimalsDigits = 4;
-        const result = bigintStringToPercentage(value, decimals, finalDecimalsDigits);
-        const expected = '12.3456';
-        expect(result).toEqual(expected);
-    });
-    it('should convert bigint to float', () => {
-        const value = 123456000000000000n;
-        const decimals = 18;
-        const result = bigintToFloat(value, decimals);
-        const expected = 0.123456;
-        expect(result).toEqual(expected);
-    });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.142",
+	"version": "0.0.1-alpha.144",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.142",
+		"@rainlanguage/orderbook": "0.0.1-alpha.144",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",

package/dist/utils/vault.d.ts

@@ -1,2 +0,0 @@
-import type { RaindexVault } from '@rainlanguage/orderbook';
-export declare const vaultBalanceDisplay: (vault: RaindexVault) => string;

package/dist/utils/vault.js

@@ -1,29 +0,0 @@
-import { formatUnits } from 'viem';
-export const vaultBalanceDisplay = (vault) => {
-    return formatUnits(BigInt(vault.balance), Number(vault.token?.decimals || 0));
-};
-if (import.meta.vitest) {
-    const { it, expect } = import.meta.vitest;
-    it('formats the vault balance correctly', () => {
-        const vault = {
-            id: '1',
-            balance: '1000000000000000000',
-            token: {
-                id: '1',
-                decimals: '18',
-                address: '0x00'
-            },
-            vaultId: '1',
-            owner: '0x00',
-            ordersAsInput: [],
-            ordersAsOutput: [],
-            balanceChanges: [],
-            orderbook: {
-                id: '0x00'
-            }
-        };
-        expect(vaultBalanceDisplay(vault)).toEqual('1');
-        vault.token.decimals = '6';
-        expect(vaultBalanceDisplay(vault)).toEqual('1000000000000');
-    });
-}