@rainlanguage/ui-components 0.0.1-alpha.13 → 0.0.1-alpha.131

package/dist/components/detail/TanstackOrderQuote.svelte

@@ -1,7 +1,8 @@
-<script generics="T">import { invalidateIdQuery } from "../../queries/queryClient";
+<script generics="T">import { useToasts } from "../../providers/toasts/useToasts";
+import { invalidateTanstackQueries } from "../../queries/queryClient";
 import Refresh from "../icon/Refresh.svelte";
 import EditableSpan from "../EditableSpan.svelte";
-import { getOrderQuote } from "@rainlanguage/orderbook/quote";
+import { getOrderQuote } from "@rainlanguage/orderbook";
 import { QKEY_ORDER_QUOTE } from "../../queries/keys";
 import { formatUnits, hexToNumber, isHex } from "viem";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
@@ -11,10 +12,10 @@ import {
   TableBodyCell,
   TableBodyRow,
   TableHead,
-  TableHeadCell,
-  Tooltip
+  TableHeadCell
 } from "flowbite-svelte";
 import { BugOutline, PauseSolid, PlaySolid } from "flowbite-svelte-icons";
+import Tooltip from "../Tooltip.svelte";
 export let id;
 export let order;
 export let rpcUrl;
@@ -22,12 +23,21 @@ export let orderbookAddress;
 export let handleQuoteDebugModal = void 0;
 let enabled = true;
 const queryClient = useQueryClient();
+const { errToast } = useToasts();
 const refreshQuotes = async () => {
-  await invalidateIdQuery(queryClient, id);
+  try {
+    await invalidateTanstackQueries(queryClient, [id, QKEY_ORDER_QUOTE + id]);
+  } catch {
+    errToast("Failed to refresh");
+  }
 };
 $: orderQuoteQuery = createQuery({
   queryKey: [id, QKEY_ORDER_QUOTE + id],
-  queryFn: () => getOrderQuote([order], rpcUrl),
+  queryFn: async () => {
+    const result = await getOrderQuote([order], rpcUrl);
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
+  },
   enabled: !!id && enabled
 });
 let blockNumber;
@@ -36,7 +46,7 @@ $: orderModalArg = order;
 
 <div class="mt-4">
 	<div class="mb-4 flex items-center justify-between">
-		<h2 class="text-lg font-semibold">Order Quotes</h2>
+		<h2 class="text-lg font-semibold">Order quotes</h2>
 		<div class="flex items-center gap-x-1">
 			{#if $orderQuoteQuery.data && $orderQuoteQuery.data.length > 0 && isHex($orderQuoteQuery.data[0].blockNumber)}
 				<EditableSpan

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Hex } from 'viem';
-import type { SgOrder } from '@rainlanguage/orderbook/js_api';
+import type { SgOrder } from '@rainlanguage/orderbook';
 declare class __sveltets_Render<T> {
     props(): {
         id: string;

package/dist/components/detail/VaultDetail.svelte

@@ -1,41 +1,40 @@
-<script>import { Button } from "flowbite-svelte";
-import { bigintStringToHex } from "../../utils/hex";
+<script>import { bigintStringToHex } from "../../utils/hex";
 import Hash, { HashType } from "../Hash.svelte";
 import VaultBalanceChangesTable from "../tables/VaultBalanceChangesTable.svelte";
 import VaultBalanceChart from "../charts/VaultBalanceChart.svelte";
 import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
 import CardProperty from "../CardProperty.svelte";
 import { QKEY_VAULT } from "../../queries/keys";
-import { getVault } from "@rainlanguage/orderbook/js_api";
+import { getVault } from "@rainlanguage/orderbook";
 import { formatUnits } from "viem";
 import { createQuery } from "@tanstack/svelte-query";
 import { onDestroy } from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
-import { ArrowDownOutline, ArrowUpOutline } from "flowbite-svelte-icons";
 import OrderOrVaultHash from "../OrderOrVaultHash.svelte";
-import DepositOrWithdrawButtons from "./DepositOrWithdrawButtons.svelte";
 import Refresh from "../icon/Refresh.svelte";
-import { invalidateIdQuery } from "../../queries/queryClient";
-export let handleDepositOrWithdrawModal = void 0;
+import { invalidateTanstackQueries } from "../../queries/queryClient";
+import { useAccount } from "../../providers/wallet/useAccount";
+import { Button } from "flowbite-svelte";
+import { ArrowDownToBracketOutline, ArrowUpFromBracketOutline } from "flowbite-svelte-icons";
+import { useToasts } from "../../providers/toasts/useToasts";
 export let id;
 export let network;
-export let walletAddressMatchesOrBlank = void 0;
-export let handleDepositModal = void 0;
-export let handleWithdrawModal = void 0;
 export let lightweightChartsTheme = void 0;
 export let activeNetworkRef;
 export let activeOrderbookRef;
 export let settings;
-export let wagmiConfig = void 0;
-export let signerAddress = void 0;
-const subgraphUrl = $settings?.subgraphs?.[network] || "";
-const chainId = $settings?.networks?.[network]?.["chain-id"] || 0;
-const rpcUrl = $settings?.networks?.[network]?.["rpc"] || "";
+export let onDeposit;
+export let onWithdraw;
+const subgraphUrl = $settings.orderbook.subgraphs[network].url || "";
 const queryClient = useQueryClient();
+const { matchesAccount } = useAccount();
+const { errToast } = useToasts();
 $: vaultDetailQuery = createQuery({
   queryKey: [id, QKEY_VAULT + id],
-  queryFn: () => {
-    return getVault(subgraphUrl || "", id);
+  queryFn: async () => {
+    const result = await getVault(subgraphUrl || "", id);
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
   },
   enabled: !!subgraphUrl
 });
@@ -44,15 +43,18 @@ const updateActiveNetworkAndOrderbook = (subgraphName) => {
   activeOrderbookRef.set(subgraphName);
 };
 const interval = setInterval(async () => {
-  await queryClient.invalidateQueries({
-    queryKey: [id],
-    refetchType: "active",
-    exact: false
-  });
+  invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id]);
 }, 5e3);
 onDestroy(() => {
   clearInterval(interval);
 });
+const handleRefresh = async () => {
+  try {
+    await invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
 </script>
 
 <TanstackPageContentDetail query={vaultDetailQuery} emptyMessage="Vault not found">
@@ -64,32 +66,30 @@ onDestroy(() => {
 			{data.token.name}
 		</div>
 		<div class="flex items-center gap-2">
-			{#if $wagmiConfig && handleDepositOrWithdrawModal && $signerAddress === data.owner}
-				<DepositOrWithdrawButtons
-					vault={data}
-					{chainId}
-					{rpcUrl}
-					query={vaultDetailQuery}
-					{handleDepositOrWithdrawModal}
-					{subgraphUrl}
-				/>
-			{:else if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank?.(data.owner)}
+			{#if matchesAccount(data.owner)}
 				<Button
-					data-testid="vaultDetailDepositButton"
-					color="dark"
-					on:click={() => handleDepositModal(data, $vaultDetailQuery.refetch)}
-					><ArrowDownOutline size="xs" class="mr-2" />Deposit</Button
+					color="light"
+					size="xs"
+					data-testid="deposit-button"
+					aria-label="Deposit to vault"
+					on:click={() => onDeposit(data)}
 				>
+					<ArrowDownToBracketOutline size="xs" />
+				</Button>
 				<Button
-					data-testid="vaultDetailWithdrawButton"
-					color="dark"
-					on:click={() => handleWithdrawModal(data, $vaultDetailQuery.refetch)}
-					><ArrowUpOutline size="xs" class="mr-2" />Withdraw</Button
+					color="light"
+					size="xs"
+					data-testid="withdraw-button"
+					aria-label="Withdraw from vault"
+					on:click={() => onWithdraw(data)}
 				>
+					<ArrowUpFromBracketOutline size="xs" />
+				</Button>
 			{/if}
 
 			<Refresh
-				on:click={async () => await invalidateIdQuery(queryClient, id)}
+				testId="top-refresh"
+				on:click={handleRefresh}
 				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
 			/>
 		</div>
@@ -108,7 +108,7 @@ onDestroy(() => {
 		</CardProperty>
 
 		<CardProperty data-testid="vaultDetailOwnerAddress">
-			<svelte:fragment slot="key">Owner Address</svelte:fragment>
+			<svelte:fragment slot="key">Owner address</svelte:fragment>
 			<svelte:fragment slot="value">
 				<Hash type={HashType.Wallet} value={data.owner} />
 			</svelte:fragment>
@@ -152,7 +152,7 @@ onDestroy(() => {
 		<CardProperty>
 			<svelte:fragment slot="key">Orders as output</svelte:fragment>
 			<svelte:fragment slot="value">
-				<p data-testid="vaulDetailOrdersAsOutput" class="flex flex-wrap justify-start">
+				<p data-testid="vaultDetailOrdersAsOutput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsOutput && data.ordersAsOutput.length > 0}
 						{#each data.ordersAsOutput as order}
 							<OrderOrVaultHash

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

@@ -1,24 +1,24 @@
 import { SvelteComponent } from "svelte";
+import { type SgVault } from '@rainlanguage/orderbook';
 import type { ChartTheme } from '../../utils/lightweightChartsThemes';
-import type { Readable, Writable } from 'svelte/store';
-import type { SgVault } from '@rainlanguage/orderbook/js_api';
+import type { Readable } from 'svelte/store';
 import type { AppStoresInterface } from '../../types/appStores';
-import type { Config } from 'wagmi';
-import type { DepositOrWithdrawModalProps } from '../../types/modal';
 declare const __propDef: {
     props: {
-        handleDepositOrWithdrawModal?: ((args: DepositOrWithdrawModalProps) => void) | undefined;
         id: string;
         network: string;
-        walletAddressMatchesOrBlank?: Readable<(otherAddress: string) => boolean> | undefined;
-        handleDepositModal?: ((vault: SgVault, onDeposit: () => void) => void) | undefined;
-        handleWithdrawModal?: ((vault: SgVault, onWithdraw: () => void) => void) | undefined;
         lightweightChartsTheme?: Readable<ChartTheme> | undefined;
         activeNetworkRef: AppStoresInterface["activeNetworkRef"];
         activeOrderbookRef: AppStoresInterface["activeOrderbookRef"];
-        settings: any;
-        wagmiConfig?: Writable<Config> | undefined;
-        signerAddress?: Writable<string | null> | undefined;
+        settings: AppStoresInterface["settings"];
+        /**
+             * Required callback function when deposit action is triggered for a vault
+             * @param vault The vault to deposit into
+             */ onDeposit: (vault: SgVault) => void;
+        /**
+             * Required callback function when withdraw action is triggered for a vault
+             * @param vault The vault to withdraw from
+             */ onWithdraw: (vault: SgVault) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/dropdown/DropdownActiveSubgraphs.svelte

@@ -1,7 +1,7 @@
 <script>import DropdownCheckbox from "./DropdownCheckbox.svelte";
 export let settings;
 export let activeSubgraphs;
-$: dropdownOptions = Object.keys(settings?.subgraphs ?? {}).reduce(
+$: dropdownOptions = Object.keys(settings.orderbook.subgraphs ?? {}).reduce(
   (acc, key) => ({
     ...acc,
     [key]: key
@@ -12,7 +12,7 @@ function handleStatusChange(event) {
   let items = Object.keys(event.detail);
   activeSubgraphs.set(
     Object.values(items).reduce(
-      (acc, key) => ({ ...acc, [key]: (settings?.subgraphs ?? {})[key] }),
+      (acc, key) => ({ ...acc, [key]: (settings.orderbook.subgraphs ?? {})[key] }),
       {}
     )
   );

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+import type { NewConfig } from '@rainlanguage/orderbook';
+import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
-        settings: ConfigSource;
-        activeSubgraphs: Writable<Record<string, string>>;
+        settings: NewConfig;
+        activeSubgraphs: AppStoresInterface["activeSubgraphs"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/dropdown/DropdownOrderListAccounts.svelte

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

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { Writable, Readable } from 'svelte/store';
+import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
-        accounts: Readable<Record<string, string>> | undefined;
-        activeAccountsItems: Writable<Record<string, string>> | undefined;
+        accounts: AppStoresInterface["accounts"];
+        activeAccountsItems: AppStoresInterface["activeAccountsItems"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/icon/Refresh.svelte

@@ -12,10 +12,11 @@ export let size = ctx.size || "md";
 export let role = ctx.role || "img";
 export let ariaLabel = "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}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         role?: AriaRole | undefined;
         ariaLabel?: 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,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
+import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
-        orderHash: Writable<string>;
+        orderHash: AppStoresInterface["orderHash"];
         value?: string;
     };
     events: {

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="strategy-url"
+			type="url"
+			placeholder="Enter URL to raw strategy 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

@@ -39,7 +39,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}

package/dist/components/tables/OrderAPY.svelte

@@ -1,7 +1,7 @@
 <script>import { createInfiniteQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_ORDER_APY } from "../../queries/keys";
-import { getOrderPerformance } from "@rainlanguage/orderbook/js_api";
+import { getOrderPerformance } from "@rainlanguage/orderbook";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import ApyTimeFilters from "../charts/APYTimeFilters.svelte";
 import { bigintStringToPercentage } from "../../utils/number";
@@ -14,14 +14,9 @@ $: queryEndTime = endTimestamp ? BigInt(endTimestamp) : void 0;
 $: orderPerformance = createInfiniteQuery({
   queryKey: [id, QKEY_ORDER_APY + id],
   queryFn: async () => {
-    return [
-      await getOrderPerformance(
-        subgraphUrl || "",
-        id,
-        queryStartTime,
-        queryEndTime
-      )
-    ];
+    const result = await getOrderPerformance(subgraphUrl || "", id, queryStartTime, queryEndTime);
+    if (result.error) throw new Error(result.error.msg);
+    return [result.value];
   },
   initialPageParam: 0,
   getNextPageParam: () => void 0,

package/dist/components/tables/OrderTradesListTable.svelte

@@ -1,10 +1,10 @@
 <script>import { createInfiniteQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
-import { getOrderTradesList, getOrderTradesCount } from "@rainlanguage/orderbook/js_api";
+import { getOrderTradesList, getOrderTradesCount } from "@rainlanguage/orderbook";
 import { DEFAULT_PAGE_SIZE } from "../../queries/constants";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
-import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import { formatTimestampSecondsAsLocal } from "../../services/time";
 import Hash, { HashType } from "../Hash.svelte";
 import { formatUnits } from "viem";
 import { BugOutline } from "flowbite-svelte-icons";
@@ -20,7 +20,7 @@ $: orderTradesQuery = createInfiniteQuery({
   queryKey: [id, QKEY_ORDER_TRADES_LIST + id],
   queryFn: async ({ pageParam }) => {
     tradesCount = void 0;
-    const [count, trades] = await Promise.all([
+    const [countResult, tradesResult] = await Promise.all([
       getOrderTradesCount(
         subgraphUrl || "",
         id,
@@ -35,6 +35,10 @@ $: orderTradesQuery = createInfiniteQuery({
         endTimestamp ? BigInt(endTimestamp) : void 0
       )
     ]);
+    if (countResult.error) throw new Error(countResult.error.msg);
+    if (tradesResult.error) throw new Error(tradesResult.error.msg);
+    const count = countResult.value;
+    const trades = tradesResult.value;
     if (typeof count === "number") {
       tradesCount = count;
     }

package/dist/components/tables/OrderVaultsVolTable.svelte

@@ -1,7 +1,7 @@
 <script>import { createInfiniteQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_VAULTS_VOL_LIST } from "../../queries/keys";
-import { getOrderVaultsVolume } from "@rainlanguage/orderbook/js_api";
+import { getOrderVaultsVolume } from "@rainlanguage/orderbook";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import Hash, { HashType } from "../Hash.svelte";
 import { formatUnits } from "viem";
@@ -15,7 +15,16 @@ $: queryStartTime = startTimestamp ? BigInt(startTimestamp) : void 0;
 $: queryEndTime = endTimestamp ? BigInt(endTimestamp) : void 0;
 $: vaultsVol = createInfiniteQuery({
   queryKey: [id, QKEY_VAULTS_VOL_LIST + id],
-  queryFn: () => getOrderVaultsVolume(subgraphUrl || "", id, queryStartTime, queryEndTime),
+  queryFn: async () => {
+    const result = await getOrderVaultsVolume(
+      subgraphUrl || "",
+      id,
+      queryStartTime,
+      queryEndTime
+    );
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
+  },
   initialPageParam: 0,
   getNextPageParam: () => void 0,
   enabled: !!subgraphUrl