@rainlanguage/ui-components 0.0.1-alpha.150 → 0.0.1-alpha.152

package/dist/__mocks__/stores.d.ts

@@ -1,10 +1,6 @@
-import type { AccountCfg, NewConfig } from '@rainlanguage/orderbook';
 import { type Config } from '@wagmi/core';
 declare const initialPageState: {
     data: {
-        stores: {
-            settings: {};
-        };
         dotrain: string;
         deployment: {
             key: string;
@@ -20,14 +16,6 @@ declare const initialPageState: {
         id: null;
     };
 };
-export declare const mockSettingsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<NewConfig>, invalidate?: import("svelte/store").Invalidator<NewConfig> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: NewConfig) => void;
-    mockSetSubscribeValue: (value: NewConfig) => void;
-};
-export declare const mockAccountsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, AccountCfg>>, invalidate?: import("svelte/store").Invalidator<Record<string, AccountCfg>> | undefined) => import("svelte/store").Unsubscriber;
-};
 export declare const mockActiveAccountsItemsStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, string>>, invalidate?: import("svelte/store").Invalidator<Record<string, string>> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: Record<string, string>) => void;
@@ -98,9 +86,6 @@ export declare const mockSelectedChainIdsStore: {
 export declare const mockPageStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<{
         data: {
-            stores: {
-                settings: {};
-            };
             dotrain: string;
             deployment: {
                 key: string;
@@ -117,9 +102,6 @@ export declare const mockPageStore: {
         };
     }>, invalidate?: import("svelte/store").Invalidator<{
         data: {
-            stores: {
-                settings: {};
-            };
             dotrain: string;
             deployment: {
                 key: string;
@@ -137,9 +119,6 @@ export declare const mockPageStore: {
     }> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: {
         data: {
-            stores: {
-                settings: {};
-            };
             dotrain: string;
             deployment: {
                 key: string;

package/dist/__mocks__/stores.js

@@ -1,6 +1,4 @@
-import { parseYaml } from '@rainlanguage/orderbook';
 import { writable } from 'svelte/store';
-import settingsYamlContent from '../__fixtures__/settings.yaml?raw';
 import {} from '@wagmi/core';
 import { mockWeb3Config } from './mockWeb3Config';
 if (import.meta.vitest) {
@@ -11,15 +9,8 @@ if (import.meta.vitest) {
         };
     });
 }
-// Parse the YAML settings
-const parseResult = parseYaml([settingsYamlContent]);
-if (parseResult.error) {
-    throw new Error(`Failed to parse settings YAML: ${parseResult.error.readableMsg}`);
-}
-const settingsFixture = parseResult.value;
 const initialPageState = {
     data: {
-        stores: { settings: {} },
         dotrain: 'some dotrain content',
         deployment: { key: 'deploy-key' },
         orderDetail: {}
@@ -34,8 +25,6 @@ const initialPageState = {
     }
 };
 const mockPageWritable = writable(initialPageState);
-const mockSettingsWritable = writable(settingsFixture);
-const mockAccountsWritable = writable({});
 const mockActiveAccountsItemsWritable = writable({});
 const mockShowInactiveOrdersWritable = writable(true);
 const mockOrderHashWritable = writable('');
@@ -49,14 +38,6 @@ const mockConnectedWritable = writable(true);
 const mockWagmiConfigWritable = writable(mockWeb3Config);
 const mockShowMyItemsOnlyWritable = writable(false);
 const mockSelectedChainIdsWritable = writable([]);
-export const mockSettingsStore = {
-    subscribe: mockSettingsWritable.subscribe,
-    set: mockSettingsWritable.set,
-    mockSetSubscribeValue: (value) => mockSettingsWritable.set(value)
-};
-export const mockAccountsStore = {
-    subscribe: mockAccountsWritable.subscribe
-};
 export const mockActiveAccountsItemsStore = {
     subscribe: mockActiveAccountsItemsWritable.subscribe,
     set: mockActiveAccountsItemsWritable.set,

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,4 +1,5 @@
-<script generics="T">import DropdownActiveNetworks from "./dropdown/DropdownActiveNetworks.svelte";
+<script generics="T">import { useRaindexClient } from "../hooks/useRaindexClient";
+import DropdownActiveNetworks from "./dropdown/DropdownActiveNetworks.svelte";
 import { page } from "$app/stores";
 import { isEmpty } from "lodash";
 import { Alert } from "flowbite-svelte";
@@ -10,8 +11,6 @@ import InputOrderHash from "./input/InputOrderHash.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
 import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
 import { useAccount } from "../providers/wallet/useAccount";
-export let settings;
-export let accounts;
 export let hideZeroBalanceVaults;
 export let activeAccountsItems;
 export let showMyItemsOnly;
@@ -24,18 +23,21 @@ export let tokensQuery;
 $: isVaultsPage = $page.url.pathname === "/vaults";
 $: isOrdersPage = $page.url.pathname === "/orders";
 const { account } = useAccount();
+const raindexClient = useRaindexClient();
+$: networks = raindexClient.getAllNetworks();
+$: accounts = raindexClient.getAllAccounts();
 </script>
 
 <div
 	class="grid w-full items-center gap-4 md:flex md:justify-end lg:min-w-[600px]"
 	style="grid-template-columns: repeat(2, minmax(0, 1fr));"
 >
-	{#if isEmpty($settings.orderbook.networks)}
+	{#if networks.error || isEmpty(networks.value)}
 		<Alert color="gray" data-testid="no-networks-alert" class="w-full">
 			No networks added to <a class="underline" href="/settings">settings</a>
 		</Alert>
 	{:else}
-		{#if $accounts && !Object.values($accounts).length}
+		{#if !accounts.error && accounts.value.size === 0}
 			<div class="mt-4 w-full lg:w-auto" data-testid="my-items-only">
 				<CheckboxMyItemsOnly context={isVaultsPage ? 'vaults' : 'orders'} {showMyItemsOnly} />
 				{#if !$account}
@@ -55,10 +57,10 @@ const { account } = useAccount();
 				<CheckboxActiveOrders {showInactiveOrders} />
 			</div>
 		{/if}
-		{#if $accounts && Object.values($accounts).length > 0}
-			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
+		{#if !accounts.error && accounts.value.size > 0}
+			<DropdownOrderListAccounts {activeAccountsItems} />
 		{/if}
 		<DropdownTokensFilter {tokensQuery} {activeTokens} {selectedTokens} label="Tokens" />
-		<DropdownActiveNetworks settings={$settings} {selectedChainIds} />
+		<DropdownActiveNetworks {selectedChainIds} />
 	{/if}
 </div>

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

@@ -5,8 +5,6 @@ import type { Address, RaindexVaultToken } from '@rainlanguage/orderbook';
 import type { AppStoresInterface } from '../types/appStores';
 declare class __sveltets_Render<T> {
     props(): {
-        settings: AppStoresInterface["settings"];
-        accounts: AppStoresInterface["accounts"];
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];

package/dist/components/deployment/DeploymentSteps.svelte

@@ -3,13 +3,14 @@ import TokenIOInput from "./TokenIOInput.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
 import {
   DotrainOrderGui,
-  RaindexClient
+  RaindexClient,
+  AccountBalance
 } from "@rainlanguage/orderbook";
 import WalletConnect from "../wallet/WalletConnect.svelte";
 import {} from "svelte/store";
 import { handleShareChoices } from "../../services/handleShareChoices";
 import { DeploymentStepsError, DeploymentStepsErrorCode } from "../../errors";
-import { onMount } from "svelte";
+import { onDestroy, onMount } from "svelte";
 import FieldDefinitionInput from "./FieldDefinitionInput.svelte";
 import DepositInput from "./DepositInput.svelte";
 import SelectToken from "./SelectToken.svelte";
@@ -37,6 +38,7 @@ let selectTokens = void 0;
 let checkingDeployment = false;
 let availableTokens = [];
 let loadingTokens = false;
+let tokenBalances = /* @__PURE__ */ new Map();
 const gui = useGui();
 const registry = useRegistry();
 const raindexClient = useRaindexClient();
@@ -53,6 +55,22 @@ onMount(async () => {
 $: if (selectTokens?.length === 0 || allTokensSelected) {
   updateFields();
 }
+let unsubscribeAccount = account.subscribe((account2) => {
+  if (!account2) {
+    const balances = tokenBalances;
+    balances.clear();
+    tokenBalances = balances;
+    return;
+  }
+  if (selectTokens) {
+    selectTokens.forEach(async (selectToken) => {
+      await getTokenInfoAndFetchBalance(selectToken.key);
+    });
+  }
+});
+onDestroy(() => {
+  unsubscribeAccount();
+});
 async function loadAvailableTokens() {
   if (loadingTokens) return;
   loadingTokens = true;
@@ -95,8 +113,48 @@ function updateFields() {
 async function _handleShareChoices() {
   await handleShareChoices(gui, registry.getCurrentRegistry());
 }
-async function onSelectTokenSelect() {
+async function fetchTokenBalance(tokenInfo) {
+  if (!$account) return;
+  const balances = tokenBalances;
+  balances.set(tokenInfo.key, {
+    value: { balance: BigInt(0), formattedBalance: "0" },
+    loading: true,
+    error: ""
+  });
+  const { value: accountBalance, error } = await gui.getAccountBalance(
+    tokenInfo.address,
+    $account
+  );
+  if (error) {
+    balances.set(tokenInfo.key, {
+      value: { balance: BigInt(0), formattedBalance: "0" },
+      loading: false,
+      error: error.readableMsg
+    });
+    tokenBalances = balances;
+    return;
+  }
+  balances.set(tokenInfo.key, {
+    value: accountBalance,
+    loading: false,
+    error: ""
+  });
+  tokenBalances = balances;
+}
+async function getTokenInfoAndFetchBalance(key) {
+  const tokenInfoResult = await gui.getTokenInfo(key);
+  if (tokenInfoResult.error) {
+    throw new Error(tokenInfoResult.error.msg);
+  }
+  const tokenInfo = tokenInfoResult.value;
+  if (!tokenInfo || !tokenInfo.address) {
+    return;
+  }
+  await fetchTokenBalance(tokenInfo);
+}
+async function onSelectTokenSelect(key) {
   await areAllTokensSelected();
+  await getTokenInfoAndFetchBalance(key);
   if (allTokensSelected) {
     let result = await gui.getAllTokenInfos();
     if (result.error) {
@@ -181,7 +239,13 @@ 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} />
+						<SelectToken
+							{token}
+							{onSelectTokenSelect}
+							{availableTokens}
+							loading={loadingTokens}
+							{tokenBalances}
+						/>
 					{/each}
 				</div>
 			{/if}
@@ -205,11 +269,11 @@ async function handleDeployButtonClick() {
 					{/each}
 
 					{#each allTokenOutputs as output}
-						<TokenIOInput label="Output" vault={output} />
+						<TokenIOInput label="Output" vault={output} {tokenBalances} />
 					{/each}
 
 					{#each allTokenInputs as input}
-						<TokenIOInput label="Input" vault={input} />
+						<TokenIOInput label="Input" vault={input} {tokenBalances} />
 					{/each}
 				{/if}
 

package/dist/components/deployment/SelectToken.svelte

@@ -5,10 +5,12 @@ import { onMount } from "svelte";
 import { useGui } from "../../hooks/useGui";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 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 = "";
@@ -24,8 +26,9 @@ onMount(async () => {
       throw new Error(result.error.msg);
     }
     tokenInfo = result.value;
-    if (result.value?.address) {
+    if (result.value.address) {
       inputValue = result.value.address;
+      onSelectTokenSelect(token.key);
     }
   } catch {
   }
@@ -93,12 +96,12 @@ async function saveTokenSelection(address) {
     error = errorMessage;
   } finally {
     checking = false;
-    onSelectTokenSelect();
+    onSelectTokenSelect(token.key);
   }
 }
 function clearTokenSelection() {
   gui.unsetSelectToken(token.key);
-  onSelectTokenSelect();
+  onSelectTokenSelect(token.key);
 }
 async function getInfoForSelectedToken() {
   error = "";
@@ -207,6 +210,7 @@ async function handleInput(event) {
 			>
 				<CheckCircleSolid class="h-5 w-5" color="green" />
 				<span>{tokenInfo.name}</span>
+				<TokenBalanceComponent tokenBalance={tokenBalances.get(token.key)} />
 			</div>
 		{:else if error}
 			<div class="flex h-5 flex-row items-center gap-2" data-testid="error">

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

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

package/dist/components/deployment/TokenBalance.svelte

@@ -0,0 +1,19 @@
+<script>import { Spinner } from "flowbite-svelte";
+export let tokenBalance;
+</script>
+
+{#if tokenBalance}
+	{#if tokenBalance.loading}
+		<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+			<Spinner class="h-4 w-4" />
+		</div>
+	{:else if !tokenBalance.error}
+		<div class="text-sm text-gray-600 dark:text-gray-400">
+			Balance: {tokenBalance.value.formattedBalance}
+		</div>
+	{:else if tokenBalance.error}
+		<div class="text-sm text-red-600 dark:text-red-400">
+			{tokenBalance.error}
+		</div>
+	{/if}
+{/if}

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

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

package/dist/components/deployment/TokenIOInput.svelte

@@ -1,11 +1,12 @@
 <script>import { Input } from "flowbite-svelte";
 import {} from "@rainlanguage/orderbook";
-import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";
 import { useGui } from "../../hooks/useGui";
+import VaultIdInformation from "./VaultIdInformation.svelte";
 const gui = useGui();
 export let label;
 export let vault;
+export let tokenBalances = /* @__PURE__ */ new Map();
 let tokenInfo = null;
 let inputValue = "";
 let error = "";
@@ -56,10 +57,15 @@ $: if (vault.token?.key) {
 </script>
 
 <div class="flex w-full flex-col gap-6">
-	<DeploymentSectionHeader
-		title={`${label} ${tokenInfo?.symbol ? `(${tokenInfo.symbol})` : ''}`}
-		description={`${tokenInfo?.symbol || 'Token'} 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"

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

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

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 {};

package/dist/components/detail/OrderDetail.svelte

@@ -37,7 +37,7 @@ export let lightweightChartsTheme;
 export let orderbookAddress;
 export let orderHash;
 export let chainId;
-export let rpcUrls = void 0;
+export let rpcs = void 0;
 export let onRemove;
 export let onDeposit;
 export let onWithdraw;
@@ -194,7 +194,7 @@ const handleRefresh = async () => {
 				</div>
 			</TabItem>
 			<TabItem open title="Trades">
-				<OrderTradesListTable order={data} {handleDebugTradeModal} {rpcUrls} />
+				<OrderTradesListTable order={data} {handleDebugTradeModal} {rpcs} />
 			</TabItem>
 			<TabItem title="Volume">
 				<OrderVaultsVolTable order={data} />

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

@@ -11,7 +11,7 @@ declare const __propDef: {
         orderbookAddress: Address;
         orderHash: Hex;
         chainId: number;
-        rpcUrls?: string[] | undefined;
+        rpcs?: string[] | undefined;
         /** Callback function when remove action is triggered for an order
              * @param order The order to remove
              */ onRemove: (raindexClient: RaindexClient, order: RaindexOrder) => void;

package/dist/components/dropdown/DropdownActiveNetworks.svelte

@@ -1,48 +1,40 @@
 <script>import DropdownCheckbox from "./DropdownCheckbox.svelte";
 import { getNetworkName } from "../../utils/getNetworkName";
-export let settings;
+import { useRaindexClient } from "../../hooks/useRaindexClient";
+const raindexClient = useRaindexClient();
 export let selectedChainIds;
-$: dropdownOptions = Object.keys(settings.orderbook.networks ?? {}).reduce((acc, key) => {
-  const networkCfg = (settings.orderbook.networks ?? {})[key];
-  const networkName = getNetworkName(Number(networkCfg.chainId)) ?? key;
-  const existingKey = Object.keys(acc).find((existingKey2) => {
-    const existingNetworkCfg = (settings.orderbook.networks ?? {})[existingKey2];
-    return existingNetworkCfg.chainId === networkCfg.chainId;
-  });
-  if (!existingKey) {
-    return {
-      ...acc,
-      [key]: networkName
-    };
+let dropdownOptions = {};
+$: {
+  const uniqueChainIds = raindexClient.getUniqueChainIds();
+  if (uniqueChainIds.error) {
+    dropdownOptions = {};
+  } else {
+    dropdownOptions = Object.fromEntries(
+      uniqueChainIds.value.map((chainId) => [
+        String(chainId),
+        getNetworkName(chainId) ?? `Chain ${chainId}`
+      ])
+    );
   }
-  return acc;
-}, {});
+}
 function handleStatusChange(event) {
-  let items = Object.keys(event.detail);
-  const chainIds = Array.from(
-    new Set(
-      Object.values(items).map((key) => {
-        const networkCfg = (settings.orderbook.networks ?? {})[key];
-        return networkCfg.chainId;
-      })
-    )
-  );
+  const chainIds = Object.keys(event.detail).map(Number);
   selectedChainIds.set(chainIds);
 }
-$: value = $selectedChainIds.reduce(
-  (acc, chainId) => {
-    const networkKey = Object.keys(settings.orderbook.networks ?? {}).find((key) => {
-      const networkCfg = (settings.orderbook.networks ?? {})[key];
-      return networkCfg.chainId === chainId;
-    });
-    if (networkKey) {
-      const networkName = getNetworkName(chainId) ?? networkKey;
-      acc[networkKey] = networkName;
-    }
-    return acc;
-  },
-  {}
-);
+let value = {};
+$: {
+  const networks = raindexClient.getAllNetworks();
+  if (networks.error) {
+    value = {};
+  } else {
+    value = Object.fromEntries(
+      $selectedChainIds.map((chainId) => [
+        String(chainId),
+        getNetworkName(chainId) ?? `Chain ${chainId}`
+      ])
+    );
+  }
+}
 </script>
 
 <div data-testid="subgraphs-dropdown">

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

@@ -1,9 +1,7 @@
 import { SvelteComponent } from "svelte";
-import type { NewConfig } from '@rainlanguage/orderbook';
 import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
-        settings: NewConfig;
         selectedChainIds: AppStoresInterface["selectedChainIds"];
     };
     events: {

package/dist/components/dropdown/DropdownOrderListAccounts.svelte

@@ -1,8 +1,10 @@
 <script>import DropdownCheckbox from "./DropdownCheckbox.svelte";
 import { getAccountsAsOptions } from "../../utils/configHelpers";
-export let accounts;
+import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let activeAccountsItems;
-$: options = getAccountsAsOptions($accounts);
+const raindexClient = useRaindexClient();
+$: accounts = raindexClient.getAllAccounts();
+$: options = getAccountsAsOptions(accounts.value);
 </script>
 
 <div data-testid="accounts-dropdown">

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

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
-        accounts: AppStoresInterface["accounts"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"];
     };
     events: {

package/dist/components/tables/OrderTradesListTable.svelte

@@ -8,7 +8,7 @@ import Hash, { HashType } from "../Hash.svelte";
 import { BugOutline } from "flowbite-svelte-icons";
 import TableTimeFilters from "../charts/TableTimeFilters.svelte";
 export let order;
-export let rpcUrls = void 0;
+export let rpcs = void 0;
 export let handleDebugTradeModal = void 0;
 let startTimestamp;
 let endTimestamp;
@@ -98,13 +98,13 @@ $: orderTradesQuery = createInfiniteQuery({
 				)})
 			</span>
 		</TableBodyCell>
-		{#if rpcUrls && handleDebugTradeModal}
+		{#if rpcs && handleDebugTradeModal}
 			<TableBodyCell tdClass="py-2">
 				<button
 					data-testid="debug-trade-button"
 					class="text-gray-500 hover:text-gray-700"
 					on:click={() => {
-						if (rpcUrls) handleDebugTradeModal(item.transaction.id, rpcUrls);
+						if (rpcs) handleDebugTradeModal(item.transaction.id, rpcs);
 					}}
 				>
 					<BugOutline size="xs" />

package/dist/components/tables/OrderTradesListTable.svelte.d.ts

@@ -3,8 +3,8 @@ import type { RaindexOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         order: RaindexOrder;
-        rpcUrls?: string[] | undefined;
-        handleDebugTradeModal?: ((hash: string, rpcUrls: string[]) => void) | undefined;
+        rpcs?: string[] | undefined;
+        handleDebugTradeModal?: ((hash: string, rpcs: string[]) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/tables/OrdersListTable.svelte

@@ -19,10 +19,10 @@ import {
 } from "flowbite-svelte";
 import { useAccount } from "../../providers/wallet/useAccount";
 import { useRaindexClient } from "../../hooks/useRaindexClient";
+import { getAllContexts } from "svelte";
+const context = getAllContexts();
 export let handleOrderRemoveModal = void 0;
-export let settings;
 export let selectedChainIds;
-export let accounts;
 export let activeAccountsItems;
 export let showInactiveOrders;
 export let orderHash;
@@ -48,7 +48,6 @@ $: query = createInfiniteQuery({
   queryKey: [
     QKEY_ORDERS,
     $selectedChainIds,
-    $settings,
     owners,
     $showInactiveOrders,
     $orderHash,
@@ -80,8 +79,6 @@ const AppTable = TanstackAppTable;
 
 <ListViewOrderbookFilters
 	{selectedChainIds}
-	{settings}
-	{accounts}
 	{activeAccountsItems}
 	{showMyItemsOnly}
 	{showInactiveOrders}
@@ -178,7 +175,7 @@ const AppTable = TanstackAppTable;
 						<DropdownItem
 							on:click={(e) => {
 								e.stopPropagation();
-								handleOrderRemoveModal(item, $query.refetch);
+								handleOrderRemoveModal(item, $query.refetch, context);
 							}}>Remove</DropdownItem
 						>
 					</Dropdown>

package/dist/components/tables/OrdersListTable.svelte.d.ts

@@ -3,9 +3,7 @@ import type { AppStoresInterface } from '../../types/appStores';
 declare class __sveltets_Render<T> {
     props(): {
         handleOrderRemoveModal?: any;
-        settings: AppStoresInterface["settings"];
         selectedChainIds: AppStoresInterface["selectedChainIds"];
-        accounts: AppStoresInterface["accounts"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"] | undefined;
         showInactiveOrders: AppStoresInterface["showInactiveOrders"];
         orderHash: AppStoresInterface["orderHash"];

package/dist/components/tables/VaultsListTable.svelte

@@ -13,10 +13,10 @@ import { RaindexVault } from "@rainlanguage/orderbook";
 import { QKEY_TOKENS, QKEY_VAULTS } from "../../queries/keys";
 import { useAccount } from "../../providers/wallet/useAccount";
 import { getNetworkName } from "../../utils/getNetworkName";
-export let accounts;
+import { getAllContexts } from "svelte";
+const context = getAllContexts();
 export let activeAccountsItems;
 export let orderHash;
-export let settings;
 export let showInactiveOrders;
 export let hideZeroBalanceVaults;
 export let activeTokens;
@@ -40,14 +40,7 @@ $: selectedTokens = $activeTokens?.filter(
   (address) => !$tokensQuery.data || $tokensQuery.data.some((t) => t.address === address)
 ) ?? [];
 $: query = createInfiniteQuery({
-  queryKey: [
-    QKEY_VAULTS,
-    $hideZeroBalanceVaults,
-    $selectedChainIds,
-    $settings,
-    owners,
-    selectedTokens
-  ],
+  queryKey: [QKEY_VAULTS, $hideZeroBalanceVaults, $selectedChainIds, owners, selectedTokens],
   queryFn: async ({ pageParam }) => {
     const result = await raindexClient.getVaults(
       $selectedChainIds,
@@ -74,8 +67,6 @@ const AppTable = TanstackAppTable;
 {#if $query}
 	<ListViewOrderbookFilters
 		{selectedChainIds}
-		{settings}
-		{accounts}
 		{activeAccountsItems}
 		{showMyItemsOnly}
 		{showInactiveOrders}
@@ -186,7 +177,7 @@ const AppTable = TanstackAppTable;
 						data-testid="deposit-button"
 						on:click={(e) => {
 							e.stopPropagation();
-							handleDepositModal(item, $query.refetch);
+							handleDepositModal(item, $query.refetch, context);
 						}}
 						>Deposit
 					</DropdownItem>
@@ -194,7 +185,7 @@ const AppTable = TanstackAppTable;
 						data-testid="withdraw-button"
 						on:click={(e) => {
 							e.stopPropagation();
-							handleWithdrawModal(item, $query.refetch);
+							handleWithdrawModal(item, $query.refetch, context);
 						}}
 						>Withdraw
 					</DropdownItem>

package/dist/components/tables/VaultsListTable.svelte.d.ts

@@ -1,19 +1,18 @@
 import { SvelteComponent } from "svelte";
 import { RaindexVault } from '@rainlanguage/orderbook';
 import type { AppStoresInterface } from '../../types/appStores.ts';
+import { getAllContexts } from 'svelte';
 declare class __sveltets_Render<T> {
     props(): {
-        accounts: AppStoresInterface["accounts"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"];
         orderHash: AppStoresInterface["orderHash"];
-        settings: AppStoresInterface["settings"];
         showInactiveOrders: AppStoresInterface["showInactiveOrders"];
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
         activeTokens: AppStoresInterface["activeTokens"];
         selectedChainIds: AppStoresInterface["selectedChainIds"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
-        handleDepositModal?: ((vault: RaindexVault, refetch: () => void) => void) | undefined;
-        handleWithdrawModal?: ((vault: RaindexVault, refetch: () => void) => void) | undefined;
+        handleDepositModal?: ((vault: RaindexVault, refetch: () => void, context: ReturnType<typeof getAllContexts>) => void) | undefined;
+        handleWithdrawModal?: ((vault: RaindexVault, refetch: () => void, context: ReturnType<typeof getAllContexts>) => void) | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -93,6 +93,7 @@ export { default as RegistryProvider } from './providers/registry/RegistryProvid
 export { default as ToastProvider } from './providers/toasts/ToastProvider.svelte';
 export { default as TransactionProvider } from './providers/transactions/TransactionProvider.svelte';
 export { useGui } from './hooks/useGui';
+export { useRaindexClient, RAINDEX_CLIENT_CONTEXT_KEY } from './hooks/useRaindexClient';
 export { useAccount } from './providers/wallet/useAccount';
 export { useRegistry } from './providers/registry/useRegistry';
 export { useToasts } from './providers/toasts/useToasts';
@@ -101,5 +102,3 @@ export { RegistryManager } from './providers/registry/RegistryManager';
 export { TransactionStore } from './models/Transaction';
 export { TransactionManager } from './providers/transactions/TransactionManager';
 export { mockPageStore } from './__mocks__/stores';
-export { mockConfig } from './__mocks__/settings';
-export { mockSettingsStore } from './__mocks__/settings';

package/dist/index.js

@@ -95,6 +95,7 @@ export { default as ToastProvider } from './providers/toasts/ToastProvider.svelt
 export { default as TransactionProvider } from './providers/transactions/TransactionProvider.svelte';
 // Hooks
 export { useGui } from './hooks/useGui';
+export { useRaindexClient, RAINDEX_CLIENT_CONTEXT_KEY } from './hooks/useRaindexClient';
 export { useAccount } from './providers/wallet/useAccount';
 export { useRegistry } from './providers/registry/useRegistry';
 export { useToasts } from './providers/toasts/useToasts';
@@ -105,5 +106,3 @@ export { TransactionStore } from './models/Transaction';
 export { TransactionManager } from './providers/transactions/TransactionManager';
 // Mocks
 export { mockPageStore } from './__mocks__/stores';
-export { mockConfig } from './__mocks__/settings';
-export { mockSettingsStore } from './__mocks__/settings';

package/dist/types/appStores.d.ts

@@ -1,7 +1,6 @@
 import type { Readable, Writable } from 'svelte/store';
-import type { AccountCfg, Address, Hex, NewConfig } from '@rainlanguage/orderbook';
+import type { AccountCfg, Address, Hex } from '@rainlanguage/orderbook';
 export interface AppStoresInterface {
-    settings: Writable<NewConfig>;
     selectedChainIds: Writable<number[]>;
     accounts: Readable<Record<string, AccountCfg>>;
     activeAccountsItems: Writable<Record<string, Address>> | undefined;

package/dist/types/tokenBalance.d.ts

@@ -0,0 +1,6 @@
+import type { AccountBalance } from '@rainlanguage/orderbook';
+export interface TokenBalance {
+    value: AccountBalance;
+    loading: boolean;
+    error: string;
+}

package/dist/types/tokenBalance.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/configHelpers.d.ts

@@ -1,4 +1,4 @@
 import type { AccountCfg } from '@rainlanguage/orderbook';
-export declare function getAccountsAsOptions(accounts: Record<string, AccountCfg>): {
+export declare function getAccountsAsOptions(accounts?: Map<string, AccountCfg>): {
     [k: string]: string;
 };

package/dist/utils/configHelpers.js

@@ -1,14 +1,16 @@
 export function getAccountsAsOptions(accounts) {
-    return Object.fromEntries(Object.entries(accounts).map(([key, value]) => [key, value.address]));
+    if (!accounts)
+        return {};
+    return Object.fromEntries(Array.from(accounts.entries()).map(([key, value]) => [key, value.address]));
 }
 if (import.meta.vitest) {
     const { expect, it, describe } = import.meta.vitest;
     describe('getAccountsAsOptions', () => {
         it('should return the correct accounts as options', () => {
-            const accounts = {
-                account1: { address: '0x1234567890abcdef', key: 'account1' },
-                account2: { address: '0xabcdef1234567890', key: 'account2' }
-            };
+            const accounts = new Map([
+                ['account1', { address: '0x1234567890abcdef', key: 'account1' }],
+                ['account2', { address: '0xabcdef1234567890', key: 'account2' }]
+            ]);
             const result = getAccountsAsOptions(accounts);
             expect(result).toEqual({
                 account1: '0x1234567890abcdef',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.150",
+	"version": "0.0.1-alpha.152",
 	"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.150",
+		"@rainlanguage/orderbook": "0.0.1-alpha.152",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",

package/dist/__mocks__/settings.d.ts

@@ -1,7 +0,0 @@
-import type { NewConfig } from '@rainlanguage/orderbook';
-export declare const mockConfig: NewConfig;
-export declare const mockSettingsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<NewConfig>, invalidate?: import("svelte/store").Invalidator<NewConfig> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: NewConfig) => void;
-    mockSetSubscribeValue: (value: NewConfig) => void;
-};

package/dist/__mocks__/settings.js

@@ -1,72 +0,0 @@
-import { writable } from 'svelte/store';
-export const mockConfig = {
-    orderbook: {
-        networks: {
-            mainnet: {
-                key: 'mainnet',
-                rpcs: ['https://mainnet.infura.io/v3/YOUR-PROJECT-ID'],
-                chainId: 1,
-                label: 'Ethereum Mainnet',
-                currency: 'ETH'
-            }
-        },
-        subgraphs: {
-            mainnet: {
-                key: 'mainnet',
-                url: 'https://api.thegraph.com/subgraphs/name/mainnet'
-            },
-            flare: {
-                key: 'flare',
-                url: 'https://api.thegraph.com/subgraphs/name/flare'
-            },
-            testnet: {
-                key: 'testnet',
-                url: 'https://api.thegraph.com/subgraphs/name/testnet'
-            }
-        },
-        orderbooks: {
-            orderbook1: {
-                key: 'orderbook1',
-                address: '0xOrderbookAddress1',
-                network: {
-                    key: 'mainnet',
-                    rpc: 'https://mainnet.infura.io/v3/YOUR-PROJECT-ID',
-                    chainId: 1,
-                    label: 'Ethereum Mainnet',
-                    currency: 'ETH'
-                },
-                subgraph: {
-                    key: 'uniswap',
-                    url: 'https://api.thegraph.com/subgraphs/name/uniswap'
-                },
-                label: 'Orderbook 1'
-            }
-        },
-        deployers: {
-            deployer1: {
-                key: 'deployer1',
-                address: '0xDeployerAddress1',
-                network: {
-                    key: 'mainnet',
-                    rpc: 'https://mainnet.infura.io/v3/YOUR-PROJECT-ID',
-                    chainId: 1,
-                    label: 'Ethereum Mainnet',
-                    currency: 'ETH'
-                }
-            }
-        },
-        metaboards: {
-            metaboard1: 'https://example.com/metaboard1'
-        },
-        accounts: {
-            name_one: 'address_one',
-            name_two: 'address_two'
-        }
-    }
-};
-const mockSettingsStoreWritable = writable(mockConfig);
-export const mockSettingsStore = {
-    subscribe: mockSettingsStoreWritable.subscribe,
-    set: mockSettingsStoreWritable.set,
-    mockSetSubscribeValue: (value) => mockSettingsStoreWritable.set(value)
-};