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

package/dist/utils/constructHashLink.js

@@ -0,0 +1,110 @@
+import fc from 'fast-check';
+import { test } from '@fast-check/vitest';
+function isOrder(obj) {
+    return obj && 'orderHash' in obj;
+}
+/**
+ * Constructs a link path for an order or vault based on its type and network
+ * @param orderOrVault - The order or vault object
+ * @param type - The type of resource ('orders' or 'vaults')
+ * @param network - The network name
+ * @returns The constructed link path
+ */
+export function constructHashLink(orderOrVault, type, network) {
+    if (!orderOrVault) {
+        return `/${type}/${network}`;
+    }
+    const slug = isOrder(orderOrVault) ? orderOrVault.orderHash : orderOrVault?.id;
+    return `/${type}/${network}-${slug || ''}`;
+}
+/**
+ * Determines if an order or vault is active
+ * @param orderOrVault - The order or vault object
+ * @returns True if the order is active, false otherwise
+ */
+export function isOrderOrVaultActive(orderOrVault) {
+    const _isOrder = isOrder(orderOrVault);
+    return _isOrder ? orderOrVault.active : false;
+}
+/**
+ * Extracts the hash value from an order or vault
+ * @param orderOrVault - The order or vault object
+ * @returns The hash value
+ */
+export function extractHash(orderOrVault) {
+    const _isOrder = isOrder(orderOrVault);
+    return _isOrder ? orderOrVault.orderHash : orderOrVault?.id || '';
+}
+if (import.meta.vitest) {
+    const { expect, it, describe } = import.meta.vitest;
+    describe('constructHashLink', () => {
+        test.prop([
+            fc.record({
+                orderHash: fc.string(),
+                active: fc.boolean()
+            }),
+            fc.oneof(fc.constant('orders'), fc.constant('vaults')),
+            fc.string()
+        ])('constructs correct link for orders', (order, type, network) => {
+            const result = constructHashLink(order, type, network);
+            expect(result).toBe(`/${type}/${network}-${order.orderHash}`);
+        });
+        test.prop([
+            fc.record({
+                id: fc.string(),
+                owner: fc.string()
+            }),
+            fc.oneof(fc.constant('orders'), fc.constant('vaults')),
+            fc.string()
+        ])('constructs correct link for vaults', (vault, type, network) => {
+            const result = constructHashLink(vault, type, network);
+            expect(result).toBe(`/${type}/${network}-${vault.id}`);
+        });
+    });
+    describe('isOrderOrVaultActive', () => {
+        test.prop([
+            fc.record({
+                orderHash: fc.string(),
+                active: fc.boolean()
+            })
+        ])('returns correct active status for orders', (order) => {
+            const result = isOrderOrVaultActive(order);
+            expect(result).toBe(order.active);
+        });
+        test.prop([
+            fc.record({
+                id: fc.string(),
+                owner: fc.string()
+            })
+        ])('returns false for vaults', (vault) => {
+            const result = isOrderOrVaultActive(vault);
+            expect(result).toBe(false);
+        });
+    });
+    describe('extractHash', () => {
+        test.prop([
+            fc.record({
+                orderHash: fc.string(),
+                active: fc.boolean()
+            })
+        ])('extracts hash from orders', (order) => {
+            const result = extractHash(order);
+            expect(result).toBe(order.orderHash);
+        });
+        test.prop([
+            fc.record({
+                id: fc.string(),
+                owner: fc.string()
+            })
+        ])('extracts hash from vaults', (vault) => {
+            const result = extractHash(vault);
+            expect(result).toBe(vault.id);
+        });
+        it('handles undefined vault id', () => {
+            // Create a partial vault object with undefined id
+            const vault = { id: undefined };
+            const result = extractHash(vault);
+            expect(result).toBe('');
+        });
+    });
+}

package/dist/utils/vault.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.8",
+	"version": "0.0.1-alpha.80",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -49,38 +49,38 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@codemirror/lang-yaml": "^6.0.0",
-		"@fontsource/dm-sans": "^5.0.18",
-		"@imask/svelte": "^7.3.0",
-		"@observablehq/plot": "^0.6.13",
-		"@rainlanguage/orderbook": "^0.0.1-alpha.7",
-		"@reown/appkit": "^1.6.4",
-		"@reown/appkit-adapter-wagmi": "^1.6.4",
-		"@sentry/sveltekit": "^7.107.0",
-		"@square/svelte-store": "^1.0.18",
-		"@sveltejs/kit": "^2.0.0",
-		"@tanstack/svelte-query": "^5.59.20",
-		"@wagmi/core": "^2.16.3",
-		"@walletconnect/ethereum-provider": "^2.11.3",
-		"@walletconnect/modal": "^2.6.2",
-		"@web3modal/ethers5": "^4.1.1",
-		"camelcase-keys": "^9.1.3",
-		"codemirror-rainlang": "^3.0.13",
-		"dayjs": "^1.11.13",
-		"ethers": "^5.7.2",
-		"flowbite": "^2.2.1",
-		"flowbite-svelte": "^0.44.21",
-		"flowbite-svelte-icons": "^0.4.5",
-		"fuse.js": "^7.0.0",
-		"lightweight-charts": "^4.1.3",
-		"lodash": "^4.17.21",
-		"svelte": "^4.2.7",
-		"svelte-codemirror-editor": "^1.3.0",
-		"svelte-markdown": "^0.4.1",
-		"tailwind-merge": "^2.5.4",
-		"thememirror": "^2.0.1",
-		"uuid": "^9.0.1",
-		"viem": "^2.22.8",
-		"wagmi": "^2.14.7"
+		"@codemirror/lang-yaml": "6.1.1",
+		"@fontsource/dm-sans": "5.1.0",
+		"@imask/svelte": "7.6.1",
+		"@observablehq/plot": "0.6.16",
+		"@rainlanguage/orderbook": "0.0.1-alpha.80",
+		"@reown/appkit": "1.6.4",
+		"@reown/appkit-adapter-wagmi": "1.6.4",
+		"@sentry/sveltekit": "7.120.0",
+		"@square/svelte-store": "1.0.18",
+		"@sveltejs/kit": "2.8.1",
+		"@tanstack/svelte-query": "5.59.20",
+		"@wagmi/core": "2.16.3",
+		"@walletconnect/ethereum-provider": "2.17.2",
+		"@walletconnect/modal": "2.7.0",
+		"@web3modal/ethers5": "4.2.3",
+		"camelcase-keys": "9.1.3",
+		"codemirror-rainlang": "3.0.13",
+		"dayjs": "1.11.13",
+		"ethers": "5.7.2",
+		"flowbite": "2.5.2",
+		"flowbite-svelte": "0.44.24",
+		"flowbite-svelte-icons": "0.4.5",
+		"fuse.js": "7.0.0",
+		"lightweight-charts": "4.2.1",
+		"lodash": "4.17.21",
+		"svelte": "4.2.19",
+		"svelte-codemirror-editor": "1.4.1",
+		"svelte-markdown": "0.4.1",
+		"tailwind-merge": "2.5.4",
+		"thememirror": "2.0.1",
+		"uuid": "9.0.1",
+		"viem": "2.24.3",
+		"wagmi": "2.14.7"
 	}
 }

package/dist/components/deployment/DepositsSection.svelte

@@ -1,8 +0,0 @@
-<script>import DepositInput from "./DepositInput.svelte";
-export let allDepositFields;
-export let gui;
-</script>
-
-{#each allDepositFields as deposit}
-	<DepositInput bind:deposit {gui} />
-{/each}

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

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { DotrainOrderGui, GuiDepositCfg } from '@rainlanguage/orderbook/js_api';
-declare const __propDef: {
-    props: {
-        allDepositFields: GuiDepositCfg[];
-        gui: DotrainOrderGui;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DepositsSectionProps = typeof __propDef.props;
-export type DepositsSectionEvents = typeof __propDef.events;
-export type DepositsSectionSlots = typeof __propDef.slots;
-export default class DepositsSection extends SvelteComponent<DepositsSectionProps, DepositsSectionEvents, DepositsSectionSlots> {
-}
-export {};

package/dist/components/deployment/FieldDefinitionsSection.svelte

@@ -1,9 +0,0 @@
-<script>import FieldDefinitionInput from "./FieldDefinitionInput.svelte";
-import {} from "@rainlanguage/orderbook/js_api";
-export let allFieldDefinitions;
-export let gui;
-</script>
-
-{#each allFieldDefinitions as fieldDefinition}
-	<FieldDefinitionInput {fieldDefinition} {gui} />
-{/each}

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

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type DotrainOrderGui, type GuiFieldDefinitionCfg } from '@rainlanguage/orderbook/js_api';
-declare const __propDef: {
-    props: {
-        allFieldDefinitions: GuiFieldDefinitionCfg[];
-        gui: DotrainOrderGui;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FieldDefinitionsSectionProps = typeof __propDef.props;
-export type FieldDefinitionsSectionEvents = typeof __propDef.events;
-export type FieldDefinitionsSectionSlots = typeof __propDef.slots;
-export default class FieldDefinitionsSection extends SvelteComponent<FieldDefinitionsSectionProps, FieldDefinitionsSectionEvents, FieldDefinitionsSectionSlots> {
-}
-export {};

package/dist/components/deployment/SelectTokensSection.svelte

@@ -1,17 +0,0 @@
-<script>import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
-import SelectToken from "./SelectToken.svelte";
-import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
-export let gui;
-export let selectTokens;
-export let onSelectTokenSelect;
-</script>
-
-<div class="flex w-full flex-col gap-4">
-	<DeploymentSectionHeader
-		title="Select Tokens"
-		description="Select the tokens that you want to use in your order."
-	/>
-	{#each selectTokens as token}
-		<SelectToken {token} bind:gui {onSelectTokenSelect} />
-	{/each}
-</div>

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

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { DotrainOrderGui, type SelectTokens } from '@rainlanguage/orderbook/js_api';
-declare const __propDef: {
-    props: {
-        gui: DotrainOrderGui;
-        selectTokens: SelectTokens;
-        onSelectTokenSelect: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SelectTokensSectionProps = typeof __propDef.props;
-export type SelectTokensSectionEvents = typeof __propDef.events;
-export type SelectTokensSectionSlots = typeof __propDef.slots;
-export default class SelectTokensSection extends SvelteComponent<SelectTokensSectionProps, SelectTokensSectionEvents, SelectTokensSectionSlots> {
-}
-export {};

package/dist/components/deployment/TokenIOSection.svelte

@@ -1,17 +0,0 @@
-<script>import TokenIOInput from "./TokenIOInput.svelte";
-export let allTokenInputs = [];
-export let allTokenOutputs = [];
-export let gui;
-</script>
-
-{#if allTokenInputs.length > 0}
-	{#each allTokenInputs as input, i}
-		<TokenIOInput {i} label="Input" vault={input} {gui} />
-	{/each}
-{/if}
-
-{#if allTokenOutputs.length > 0}
-	{#each allTokenOutputs as output, i}
-		<TokenIOInput {i} label="Output" vault={output} {gui} />
-	{/each}
-{/if}

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

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { DotrainOrderGui, OrderIOCfg } from '@rainlanguage/orderbook/js_api';
-declare const __propDef: {
-    props: {
-        allTokenInputs?: OrderIOCfg[];
-        allTokenOutputs?: OrderIOCfg[];
-        gui: DotrainOrderGui;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TokenIoSectionProps = typeof __propDef.props;
-export type TokenIoSectionEvents = typeof __propDef.events;
-export type TokenIoSectionSlots = typeof __propDef.slots;
-export default class TokenIoSection extends SvelteComponent<TokenIoSectionProps, TokenIoSectionEvents, TokenIoSectionSlots> {
-}
-export {};

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

@@ -1,17 +0,0 @@
-import type { Config } from '@wagmi/core';
-import type { DepositAndAddOrderCalldataResult, DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
-import type { Hex } from 'viem';
-import type { ExtendedApprovalCalldata } from '../../stores/transactionStore';
-export declare enum AddOrderErrors {
-    ADD_ORDER_FAILED = "Failed to add order",
-    MISSING_GUI = "Order GUI is required",
-    MISSING_CONFIG = "Wagmi config is required",
-    NO_WALLET = "No wallet address found"
-}
-export interface HandleAddOrderResult {
-    approvals: ExtendedApprovalCalldata[];
-    deploymentCalldata: DepositAndAddOrderCalldataResult;
-    orderbookAddress: Hex;
-    chainId: number;
-}
-export declare function getDeploymentTransactionArgs(gui: DotrainOrderGui, wagmiConfig: Config | undefined): Promise<HandleAddOrderResult>;

package/dist/components/deployment/getDeploymentTransactionArgs.js

@@ -1,24 +0,0 @@
-import { getAccount } from '@wagmi/core';
-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_WALLET"] = "No wallet address found";
-})(AddOrderErrors || (AddOrderErrors = {}));
-export async function getDeploymentTransactionArgs(gui, wagmiConfig) {
-    if (!wagmiConfig) {
-        throw new Error(AddOrderErrors.MISSING_CONFIG);
-    }
-    const { address } = getAccount(wagmiConfig);
-    if (!address) {
-        throw new Error(AddOrderErrors.NO_WALLET);
-    }
-    const { approvals, deploymentCalldata, orderbookAddress, chainId } = await gui.getDeploymentTransactionArgs(address);
-    return {
-        approvals,
-        deploymentCalldata,
-        orderbookAddress: orderbookAddress,
-        chainId
-    };
-}

package/dist/components/detail/DepositOrWithdrawButtons.svelte

@@ -1,44 +0,0 @@
-<script>import { Button } from "flowbite-svelte";
-import { ArrowDownOutline, ArrowUpOutline } from "flowbite-svelte-icons";
-export let handleDepositOrWithdrawModal;
-export let vault;
-export let chainId;
-export let rpcUrl;
-export let query;
-export let subgraphUrl;
-</script>
-
-<Button
-	data-testid="depositOrWithdrawButton"
-	color="light"
-	size="xs"
-	on:click={() =>
-		handleDepositOrWithdrawModal({
-			open: true,
-			args: {
-				vault,
-				onDepositOrWithdraw: $query.refetch,
-				action: 'deposit',
-				chainId,
-				rpcUrl,
-				subgraphUrl
-			}
-		})}><ArrowUpOutline size="xs" /></Button
->
-<Button
-	data-testid="depositOrWithdrawButton"
-	color="light"
-	size="xs"
-	on:click={() =>
-		handleDepositOrWithdrawModal({
-			open: true,
-			args: {
-				vault,
-				onDepositOrWithdraw: $query.refetch,
-				action: 'withdraw',
-				chainId,
-				rpcUrl,
-				subgraphUrl
-			}
-		})}><ArrowDownOutline size="xs" /></Button
->

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

@@ -1,26 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { SgVault } from '@rainlanguage/orderbook/js_api';
-import type { CreateQueryResult } from '@tanstack/svelte-query';
-import type { DepositOrWithdrawModalProps } from '../../types/modal';
-declare const __propDef: {
-    props: {
-        handleDepositOrWithdrawModal: (props: DepositOrWithdrawModalProps) => void;
-        vault: SgVault;
-        chainId: number;
-        rpcUrl: string;
-        query: CreateQueryResult;
-        subgraphUrl: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DepositOrWithdrawButtonsProps = typeof __propDef.props;
-export type DepositOrWithdrawButtonsEvents = typeof __propDef.events;
-export type DepositOrWithdrawButtonsSlots = typeof __propDef.slots;
-export default class DepositOrWithdrawButtons extends SvelteComponent<DepositOrWithdrawButtonsProps, DepositOrWithdrawButtonsEvents, DepositOrWithdrawButtonsSlots> {
-}
-export {};

package/dist/components/dropdown/DropdownOrderStatus.svelte

@@ -1,31 +0,0 @@
-<script>import DropdownCheckbox from "./DropdownCheckbox.svelte";
-export let activeOrderStatus;
-const orderStatusOptions = {
-  Active: "active",
-  Inactive: "inactive"
-};
-function handleStatusChange(event) {
-  let status = void 0;
-  let items = Object.keys(event.detail);
-  if (items.length === 0 || items.length === 2) {
-    status = void 0;
-  } else if (items.includes("Active")) {
-    status = true;
-  } else if (items.includes("Inactive")) {
-    status = false;
-  }
-  activeOrderStatus.set(status);
-}
-$: value = $activeOrderStatus === void 0 ? {} : $activeOrderStatus ? { Active: "active" } : { Inactive: "inactive" };
-</script>
-
-<div data-testid="order-status-dropdown">
-	<DropdownCheckbox
-		options={orderStatusOptions}
-		on:change={handleStatusChange}
-		label="Status"
-		showAllLabel={false}
-		onlyTitle={true}
-		{value}
-	/>
-</div>

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

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
-declare const __propDef: {
-    props: {
-        activeOrderStatus: Writable<boolean | undefined>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DropdownOrderStatusProps = typeof __propDef.props;
-export type DropdownOrderStatusEvents = typeof __propDef.events;
-export type DropdownOrderStatusSlots = typeof __propDef.slots;
-export default class DropdownOrderStatus extends SvelteComponent<DropdownOrderStatusProps, DropdownOrderStatusEvents, DropdownOrderStatusSlots> {
-}
-export {};