@rainlanguage/ui-components 0.0.1-alpha.207 → 0.0.1-alpha.209

package/dist/components/detail/OrderDetail.svelte

@@ -43,6 +43,7 @@ export let onRemove;
 export let onDeposit;
 export let onWithdraw;
 export let onWithdrawAll = void 0;
+export let onTakeOrder = void 0;
 let codeMirrorDisabled = true;
 let codeMirrorStyles = {};
 const queryClient = useQueryClient();
@@ -102,14 +103,19 @@ const formatGuiState = (guiState) => {
 			</div>
 
 			<div class="flex items-center gap-2">
-				{#if matchesAccount(data.owner)}
-					{#if data.active}
-						<Button
-							on:click={() => onRemove(raindexClient, data)}
-							data-testid="remove-button"
-							aria-label="Remove order">Remove</Button
-						>
-					{/if}
+				{#if matchesAccount(data.owner) && data.active}
+					<Button
+						on:click={() => onRemove(raindexClient, data)}
+						data-testid="remove-button"
+						aria-label="Remove order">Remove</Button
+					>
+				{/if}
+				{#if data.active && onTakeOrder}
+					<Button
+						on:click={() => onTakeOrder(raindexClient, data)}
+						data-testid="take-order-button"
+						aria-label="Take order">Take Order</Button
+					>
 				{/if}
 
 				<Refresh

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

@@ -23,6 +23,9 @@ declare const __propDef: {
         /** Callback function when withdraw all action is triggered for a vault
              * @param vaultsList The VaultsList struct containing the vaults to withdraw from
              */ onWithdrawAll?: ((raindexClient: RaindexClient, vaultsList: RaindexVaultsList) => void) | undefined;
+        /** Callback function when take order action is triggered
+             * @param order The order to take
+             */ onTakeOrder?: ((raindexClient: RaindexClient, order: RaindexOrder) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/tables/OrdersListTable.svelte

@@ -1,5 +1,6 @@
 <script>import { getNetworkName } from "../../utils/getNetworkName";
 import { goto } from "$app/navigation";
+import { DotsVerticalOutline } from "flowbite-svelte-icons";
 import { createInfiniteQuery, createQuery } from "@tanstack/svelte-query";
 import { RaindexOrder } from "@rainlanguage/orderbook";
 import TanstackAppTable from "../TanstackAppTable.svelte";
@@ -9,9 +10,20 @@ import Hash, { HashType } from "../Hash.svelte";
 import VaultCard from "../VaultCard.svelte";
 import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
 import { QKEY_ORDERS, QKEY_TOKENS } from "../../queries/keys";
-import { Badge, TableBodyCell, TableHeadCell } from "flowbite-svelte";
+import {
+  Badge,
+  Button,
+  Dropdown,
+  DropdownItem,
+  TableBodyCell,
+  TableHeadCell
+} 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 handleTakeOrderModal = void 0;
 export let selectedChainIds;
 export let activeAccountsItems;
 export let showInactiveOrders;
@@ -21,7 +33,7 @@ export let hideInactiveOrdersVaults;
 export let showMyItemsOnly;
 export let activeTokens;
 export let activeOrderbookAddresses;
-const { account } = useAccount();
+const { matchesAccount, account } = useAccount();
 const raindexClient = useRaindexClient();
 $: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $account ? [$account] : [];
 $: tokensQuery = createQuery({
@@ -115,21 +127,42 @@ const AppTable = TanstackAppTable;
 	</svelte:fragment>
 
 	<svelte:fragment slot="head">
-		<TableHeadCell data-testid="orderListHeadingOrderInfo" padding="p-4" class="w-[15%]"
-			>Order Info</TableHeadCell
-		>
-		<TableHeadCell data-testid="orderListHeadingAddresses" padding="p-4" class="w-[20%]"
-			>Addresses</TableHeadCell
-		>
-		<TableHeadCell data-testid="orderListHeadingInputs" padding="px-2 py-4" class="w-[27.5%]"
-			>Input Token(s)</TableHeadCell
-		>
-		<TableHeadCell data-testid="orderListHeadingOutputs" padding="px-2 py-4" class="w-[27.5%]"
-			>Output Token(s)</TableHeadCell
-		>
-		<TableHeadCell data-testid="orderListHeadingTrades" padding="px-2 py-4" class="w-[10%]"
-			>Trades</TableHeadCell
-		>
+		{#if $account && (handleTakeOrderModal || handleOrderRemoveModal)}
+			<TableHeadCell data-testid="orderListHeadingOrderInfo" padding="p-4" class="w-[15%]"
+				>Order Info</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingAddresses" padding="p-4" class="w-[18%]"
+				>Addresses</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingInputs" padding="px-2 py-4" class="w-[23.5%]"
+				>Input Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingOutputs" padding="px-2 py-4" class="w-[23.5%]"
+				>Output Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingTrades" padding="px-2 py-4" class="w-[10%]"
+				>Trades</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingActions" padding="px-2 py-4" class="w-[10%]"
+				>Actions</TableHeadCell
+			>
+		{:else}
+			<TableHeadCell data-testid="orderListHeadingOrderInfo" padding="p-4" class="w-[15%]"
+				>Order Info</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingAddresses" padding="p-4" class="w-[20%]"
+				>Addresses</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingInputs" padding="px-2 py-4" class="w-[27.5%]"
+				>Input Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingOutputs" padding="px-2 py-4" class="w-[27.5%]"
+				>Output Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingTrades" padding="px-2 py-4" class="w-[10%]"
+				>Trades</TableHeadCell
+			>
+		{/if}
 	</svelte:fragment>
 
 	<svelte:fragment slot="bodyRow" let:item>
@@ -194,5 +227,47 @@ const AppTable = TanstackAppTable;
 		<TableBodyCell data-testid="orderListRowTrades" tdClass="break-word p-2">
 			{item.tradesCount > 99 ? '>99' : item.tradesCount}
 		</TableBodyCell>
+		{#if $account && (handleTakeOrderModal || handleOrderRemoveModal)}
+			<TableBodyCell data-testid="orderListRowActions" tdClass="px-2 py-2">
+				{#if item.active}
+					{#if handleTakeOrderModal}
+						<Button
+							size="xs"
+							data-testid={`order-take-${item.id}`}
+							on:click={(e) => {
+								e.stopPropagation();
+								handleTakeOrderModal(item, $query.refetch, context);
+							}}
+						>
+							Take Order
+						</Button>
+					{/if}
+					{#if matchesAccount(item.owner) && handleOrderRemoveModal}
+						<div data-testid="wallet-actions">
+							<Button
+								color="alternative"
+								outline={false}
+								data-testid={`order-menu-${item.id}`}
+								id={`order-menu-${item.id}`}
+								class="border-none px-2"
+								on:click={(e) => {
+									e.stopPropagation();
+								}}
+							>
+								<DotsVerticalOutline class="dark:text-white" />
+							</Button>
+							<Dropdown placement="bottom-end" triggeredBy={`#order-menu-${item.id}`}>
+								<DropdownItem
+									on:click={(e) => {
+										e.stopPropagation();
+										handleOrderRemoveModal(item, $query.refetch, context);
+									}}>Remove</DropdownItem
+								>
+							</Dropdown>
+						</div>
+					{/if}
+				{/if}
+			</TableBodyCell>
+		{/if}
 	</svelte:fragment>
 </AppTable>

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

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { AppStoresInterface } from '../../types/appStores';
 declare const __propDef: {
     props: {
+        handleOrderRemoveModal?: any;
+        handleTakeOrderModal?: any;
         selectedChainIds: AppStoresInterface["selectedChainIds"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"] | undefined;
         showInactiveOrders: AppStoresInterface["showInactiveOrders"];

package/dist/providers/transactions/TransactionManager.d.ts

@@ -184,6 +184,27 @@ export declare class TransactionManager {
         orderbook: Address;
         raindexClient: RaindexClient;
     }): Promise<Transaction>;
+    /**
+     * Creates and initializes a new transaction for taking orders.
+     * @param args - Configuration for the take order transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.queryKey - The hash of the order being taken (used for query invalidation).
+     * @param args.entity - The `RaindexOrder` entity associated with this transaction.
+     * @returns A new Transaction instance configured for taking orders.
+     * @example
+     * const tx = await manager.createTakeOrderTransaction({
+     *   txHash: '0x123...',
+     *   chainId: 1,
+     *   queryKey: '0x456...', // Order hash
+     *   entity: raindexOrderInstance,
+     *   raindexClient: clientInstance
+     * });
+     */
+    createTakeOrderTransaction(args: InternalTransactionArgs & {
+        entity: RaindexOrder;
+        raindexClient: RaindexClient;
+    }): Promise<Transaction>;
     /**
      * Creates, initializes, and executes a new transaction instance.
      * @param args - Configuration for the transaction.

package/dist/providers/transactions/TransactionManager.js

@@ -407,6 +407,49 @@ export class TransactionManager {
             awaitIndexingFn
         });
     }
+    /**
+     * Creates and initializes a new transaction for taking orders.
+     * @param args - Configuration for the take order transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.queryKey - The hash of the order being taken (used for query invalidation).
+     * @param args.entity - The `RaindexOrder` entity associated with this transaction.
+     * @returns A new Transaction instance configured for taking orders.
+     * @example
+     * const tx = await manager.createTakeOrderTransaction({
+     *   txHash: '0x123...',
+     *   chainId: 1,
+     *   queryKey: '0x456...', // Order hash
+     *   entity: raindexOrderInstance,
+     *   raindexClient: clientInstance
+     * });
+     */
+    async createTakeOrderTransaction(args) {
+        const name = TransactionName.TAKE_ORDER;
+        const errorMessage = 'Take order failed.';
+        const successMessage = 'Order taken successfully.';
+        const { chainId, entity: { orderbook }, queryKey, txHash, raindexClient } = args;
+        const explorerLink = await getExplorerLink(txHash, chainId, 'tx');
+        const toastLinks = [
+            {
+                link: explorerLink,
+                label: 'View on explorer'
+            }
+        ];
+        const awaitIndexingFn = createSdkIndexingFn({
+            call: () => raindexClient.getTransaction(chainId, orderbook, txHash),
+            isSuccess: (tx) => !!tx
+        });
+        return this.createTransaction({
+            ...args,
+            name,
+            errorMessage,
+            successMessage,
+            queryKey,
+            toastLinks,
+            awaitIndexingFn
+        });
+    }
     /**
      * Creates, initializes, and executes a new transaction instance.
      * @param args - Configuration for the transaction.

package/dist/types/transaction.d.ts

@@ -33,7 +33,8 @@ export declare enum TransactionName {
     WITHDRAWAL = "Vault Withdrawal",
     WITHDRAWAL_MULTIPLE = "Vaults Withdrawal",
     APPROVAL = "Token Approval",
-    DEPOSIT = "Vault Deposit"
+    DEPOSIT = "Vault Deposit",
+    TAKE_ORDER = "Take Order"
 }
 export declare enum TransactionStatusMessage {
     IDLE = "Idle",

package/dist/types/transaction.js

@@ -5,6 +5,7 @@ export var TransactionName;
     TransactionName["WITHDRAWAL_MULTIPLE"] = "Vaults Withdrawal";
     TransactionName["APPROVAL"] = "Token Approval";
     TransactionName["DEPOSIT"] = "Vault Deposit";
+    TransactionName["TAKE_ORDER"] = "Take Order";
 })(TransactionName || (TransactionName = {}));
 export var TransactionStatusMessage;
 (function (TransactionStatusMessage) {

package/package.json

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