@rainlanguage/ui-components 0.0.1-alpha.8 → 0.0.1-alpha.80

package/dist/components/deployment/SelectToken.svelte

@@ -2,16 +2,21 @@
 import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
 import { Spinner } from "flowbite-svelte";
 import { onMount } from "svelte";
+import { useGui } from "../../hooks/useGui";
 export let token;
-export let gui;
 export let onSelectTokenSelect;
 let inputValue = null;
 let tokenInfo = null;
 let error = "";
 let checking = false;
+const gui = useGui();
 onMount(async () => {
   try {
-    tokenInfo = await gui?.getTokenInfo(token.key);
+    let result = await gui.getTokenInfo(token.key);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    tokenInfo = result.value;
     if (tokenInfo?.address) {
       inputValue = tokenInfo.address;
     }
@@ -21,7 +26,11 @@ onMount(async () => {
 async function getInfoForSelectedToken() {
   error = "";
   try {
-    tokenInfo = await gui.getTokenInfo(token.key);
+    let result = await gui.getTokenInfo(token.key);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    tokenInfo = result.value;
     error = "";
   } catch {
     return error = "No token exists at this address.";

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

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { DotrainOrderGui, GuiSelectTokensCfg } from '@rainlanguage/orderbook/js_api';
+import type { GuiSelectTokensCfg } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         token: GuiSelectTokensCfg;
-        gui: DotrainOrderGui;
         onSelectTokenSelect: () => void;
     };
     events: {

package/dist/components/deployment/StrategyPage.svelte

@@ -1,5 +1,5 @@
 <script>import { fade } from "svelte/transition";
-import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
+import { DotrainOrderGui } from "@rainlanguage/orderbook";
 import DeploymentsSection from "./DeploymentsSection.svelte";
 import SvelteMarkdown from "svelte-markdown";
 export let strategyName = "";
@@ -21,7 +21,11 @@ const fetchMarkdownContent = async (url) => {
 };
 const getStrategyWithMarkdown = async () => {
   try {
-    const strategyDetails = await DotrainOrderGui.getStrategyDetails(dotrain);
+    const result = await DotrainOrderGui.getStrategyDetails(dotrain);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    const strategyDetails = result.value;
     if (strategyDetails.description && isMarkdownUrl(strategyDetails.description)) {
       await fetchMarkdownContent(strategyDetails.description);
     }

package/dist/components/deployment/TokenIOInput.svelte

@@ -1,17 +1,22 @@
 <script>import { Input } from "flowbite-svelte";
-import {
-} from "@rainlanguage/orderbook/js_api";
+import {} from "@rainlanguage/orderbook";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";
+import { useGui } from "../../hooks/useGui";
+const gui = useGui();
 export let i;
 export let label;
 export let vault;
-export let gui;
 let tokenInfo = null;
 let inputValue = "";
 let error = "";
 onMount(() => {
-  const vaultIds = gui.getVaultIds();
+  const result = gui.getVaultIds();
+  if (result.error) {
+    error = result.error.msg;
+    return;
+  }
+  const vaultIds = result.value;
   if (label === "Input") {
     inputValue = vaultIds.get("input")?.[i];
   } else if (label === "Output") {
@@ -21,7 +26,12 @@ onMount(() => {
 const handleGetTokenInfo = async () => {
   if (!vault.token?.key) return;
   try {
-    tokenInfo = await gui?.getTokenInfo(vault.token?.key);
+    let result = await gui.getTokenInfo(vault.token?.key);
+    if (result.error) {
+      error = result.error.msg;
+      return;
+    }
+    tokenInfo = result.value;
   } catch (e) {
     const errorMessage = e.message ? e.message : "Error getting token info.";
     error = errorMessage;

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

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

package/dist/components/deployment/handleDeployment.d.ts

@@ -0,0 +1,11 @@
+import type { DotrainOrderGui } from '@rainlanguage/orderbook';
+import type { DeploymentArgs } from '../../types/transaction';
+export declare enum AddOrderErrors {
+    ADD_ORDER_FAILED = "Failed to add order",
+    MISSING_GUI = "Order GUI is required",
+    MISSING_CONFIG = "Wagmi config is required",
+    NO_ACCOUNT_CONNECTED = "No wallet address found",
+    ERROR_GETTING_ARGS = "Error getting deployment transaction args",
+    ERROR_GETTING_NETWORK_KEY = "Error getting network key"
+}
+export declare function handleDeployment(gui: DotrainOrderGui, account: string | null, subgraphUrl?: string): Promise<DeploymentArgs>;

package/dist/components/deployment/handleDeployment.js

@@ -0,0 +1,33 @@
+export var AddOrderErrors;
+(function (AddOrderErrors) {
+    AddOrderErrors["ADD_ORDER_FAILED"] = "Failed to add order";
+    AddOrderErrors["MISSING_GUI"] = "Order GUI is required";
+    AddOrderErrors["MISSING_CONFIG"] = "Wagmi config is required";
+    AddOrderErrors["NO_ACCOUNT_CONNECTED"] = "No wallet address found";
+    AddOrderErrors["ERROR_GETTING_ARGS"] = "Error getting deployment transaction args";
+    AddOrderErrors["ERROR_GETTING_NETWORK_KEY"] = "Error getting network key";
+})(AddOrderErrors || (AddOrderErrors = {}));
+export async function handleDeployment(gui, account, subgraphUrl) {
+    const networkKeyResult = gui.getNetworkKey();
+    if (networkKeyResult.error) {
+        throw new Error(AddOrderErrors.ERROR_GETTING_NETWORK_KEY);
+    }
+    const network = networkKeyResult.value;
+    if (!account) {
+        throw new Error(AddOrderErrors.NO_ACCOUNT_CONNECTED);
+    }
+    const result = await gui.getDeploymentTransactionArgs(account);
+    if (result.error) {
+        throw new Error(result.error.msg);
+    }
+    const { approvals, deploymentCalldata, orderbookAddress, chainId } = result.value;
+    return {
+        approvals,
+        deploymentCalldata,
+        // Cast to Hex, since js_api returns a string
+        orderbookAddress: orderbookAddress,
+        chainId,
+        network,
+        subgraphUrl
+    };
+}

package/dist/components/detail/OrderDetail.svelte

@@ -10,18 +10,22 @@ import ButtonVaultLink from "../ButtonVaultLink.svelte";
 import OrderVaultsVolTable from "../tables/OrderVaultsVolTable.svelte";
 import { QKEY_ORDER } from "../../queries/keys";
 import CodeMirrorRainlang from "../CodeMirrorRainlang.svelte";
-import { getOrderByHash } from "@rainlanguage/orderbook/js_api";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import { Button, TabItem, Tabs, Tooltip } from "flowbite-svelte";
 import { onDestroy } from "svelte";
 import OrderApy from "../tables/OrderAPY.svelte";
 import { page } from "$app/stores";
-import DepositOrWithdrawButtons from "./DepositOrWithdrawButtons.svelte";
 import Refresh from "../icon/Refresh.svelte";
-import { invalidateIdQuery } from "../../queries/queryClient";
-import { InfoCircleOutline } from "flowbite-svelte-icons";
-export let handleDepositOrWithdrawModal = void 0;
-export let handleOrderRemoveModal = void 0;
+import { invalidateTanstackQueries } from "../../queries/queryClient";
+import {
+  ArrowDownToBracketOutline,
+  ArrowUpFromBracketOutline,
+  InfoCircleOutline
+} from "flowbite-svelte-icons";
+import { useAccount } from "../../providers/wallet/useAccount";
+import {
+  getOrderByHash
+} from "@rainlanguage/orderbook";
 export let handleQuoteDebugModal = void 0;
 export const handleDebugTradeModal = void 0;
 export let colorTheme;
@@ -31,12 +35,13 @@ export let orderbookAddress;
 export let orderHash;
 export let rpcUrl;
 export let subgraphUrl;
-export let chainId;
-export let wagmiConfig = void 0;
-export let signerAddress = void 0;
+export let onRemove;
+export let onDeposit;
+export let onWithdraw;
 let codeMirrorDisabled = true;
 let codeMirrorStyles = {};
 const queryClient = useQueryClient();
+const { matchesAccount } = useAccount();
 $: orderDetailQuery = createQuery({
   queryKey: [orderHash, QKEY_ORDER + orderHash],
   queryFn: () => {
@@ -45,7 +50,7 @@ $: orderDetailQuery = createQuery({
   enabled: !!subgraphUrl
 });
 const interval = setInterval(async () => {
-  await invalidateIdQuery(queryClient, orderHash);
+  await invalidateTanstackQueries(queryClient, [orderHash]);
 }, 1e4);
 onDestroy(() => {
   clearInterval(interval);
@@ -63,33 +68,23 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 					<span class="font-light">Order</span>
 					<Hash shorten value={data.order.orderHash} />
 				</div>
-
 				<BadgeActive active={data.order.active} large />
 			</div>
 
 			<div class="flex items-center gap-2">
-				{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
-					<Button
-						data-testid="remove-button"
-						color="dark"
-						on:click={() =>
-							handleOrderRemoveModal({
-								open: true,
-								args: {
-									order: data.order,
-									onRemove: $orderDetailQuery.refetch,
-									chainId,
-									orderbookAddress,
-									subgraphUrl
-								}
-							})}
-						disabled={!handleOrderRemoveModal}
-					>
-						Remove
-					</Button>
+				{#if matchesAccount(data.order.owner)}
+					{#if data.order.active}
+						<Button
+							on:click={() => onRemove(data.order)}
+							data-testid="remove-button"
+							aria-label="Remove order">Remove</Button
+						>
+					{/if}
 				{/if}
+
 				<Refresh
-					on:click={async () => await invalidateIdQuery(queryClient, orderHash)}
+					testId="top-refresh"
+					on:click={() => invalidateTanstackQueries(queryClient, [orderHash])}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
 			</div>
@@ -118,7 +113,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 				</svelte:fragment>
 			</CardProperty>
 
-			{#each [{ key: 'Input vaults', type: 'inputs' }, { key: 'Output vaults', type: 'outputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
+			{#each [{ key: 'Output vaults', type: 'outputs' }, { key: 'Input vaults', type: 'inputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
 				{#if data.vaults.get(type)?.length !== 0}
 					<CardProperty>
 						<svelte:fragment slot="key"
@@ -135,15 +130,25 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 								{#each data.vaults.get(type) || [] as vault}
 									<ButtonVaultLink tokenVault={vault} {subgraphName}>
 										<svelte:fragment slot="buttons">
-											{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
-												<DepositOrWithdrawButtons
-													{vault}
-													{chainId}
-													{rpcUrl}
-													query={orderDetailQuery}
-													{handleDepositOrWithdrawModal}
-													{subgraphUrl}
-												/>
+											{#if matchesAccount(vault.owner)}
+												<div class="flex gap-1">
+													<Button
+														color="light"
+														size="xs"
+														data-testid="deposit-button"
+														on:click={() => onDeposit(vault)}
+													>
+														<ArrowDownToBracketOutline size="xs" />
+													</Button>
+													<Button
+														color="light"
+														size="xs"
+														data-testid="withdraw-button"
+														on:click={() => onWithdraw(vault)}
+													>
+														<ArrowUpFromBracketOutline size="xs" />
+													</Button>
+												</div>
 											{/if}
 										</svelte:fragment>
 									</ButtonVaultLink>

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

@@ -1,12 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
-import type { Config } from 'wagmi';
 import type { Hex } from 'viem';
-import type { DepositOrWithdrawModalProps, OrderRemoveModalProps, QuoteDebugModalHandler, DebugTradeModalHandler } from '../../types/modal';
+import type { QuoteDebugModalHandler, DebugTradeModalHandler } from '../../types/modal';
+import { type SgOrder, type SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        handleDepositOrWithdrawModal?: ((props: DepositOrWithdrawModalProps) => void) | undefined;
-        handleOrderRemoveModal?: ((props: OrderRemoveModalProps) => void) | undefined;
         handleQuoteDebugModal?: QuoteDebugModalHandler | undefined;
         handleDebugTradeModal?: DebugTradeModalHandler | undefined;
         colorTheme: any;
@@ -16,9 +13,15 @@ declare const __propDef: {
         orderHash: string;
         rpcUrl: string;
         subgraphUrl: string;
-        chainId: number | undefined;
-        wagmiConfig?: Writable<Config> | undefined;
-        signerAddress?: Writable<string | null> | undefined;
+        /** Callback function when remove action is triggered for an order
+             * @param order The order to remove
+             */ onRemove: (order: SgOrder) => void;
+        /** Callback function when deposit action is triggered for a vault
+             * @param vault The vault to deposit into
+             */ onDeposit: (vault: SgVault) => void;
+        /** 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/detail/TanstackOrderQuote.svelte

@@ -1,7 +1,7 @@
-<script generics="T">import { invalidateIdQuery } from "../../queries/queryClient";
+<script generics="T">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 +11,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;
@@ -23,7 +23,7 @@ export let handleQuoteDebugModal = void 0;
 let enabled = true;
 const queryClient = useQueryClient();
 const refreshQuotes = async () => {
-  await invalidateIdQuery(queryClient, id);
+  invalidateTanstackQueries(queryClient, [id, QKEY_ORDER_QUOTE + id]);
 };
 $: orderQuoteQuery = createQuery({
   queryKey: [id, QKEY_ORDER_QUOTE + id],
@@ -36,7 +36,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,37 +1,32 @@
-<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";
 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;
+export let onDeposit;
+export let onWithdraw;
 const subgraphUrl = $settings?.subgraphs?.[network] || "";
-const chainId = $settings?.networks?.[network]?.["chain-id"] || 0;
-const rpcUrl = $settings?.networks?.[network]?.["rpc"] || "";
 const queryClient = useQueryClient();
+const { matchesAccount } = useAccount();
 $: vaultDetailQuery = createQuery({
   queryKey: [id, QKEY_VAULT + id],
   queryFn: () => {
@@ -44,11 +39,7 @@ 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);
@@ -64,32 +55,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={() => invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id])}
 				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
 			/>
 		</div>
@@ -108,7 +97,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 +141,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;
+        /**
+             * 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.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from 'svelte/store';
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+import type { ConfigSource } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         settings: ConfigSource;

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/InputRegistryUrl.svelte

@@ -7,12 +7,12 @@ const loadRegistryUrl = () => {
 };
 </script>
 
-<div class="flex w-full items-start gap-4">
+<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>
+	<Button class="text-nowrap" on:click={loadRegistryUrl}>Load registry URL</Button>
 </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";