@rainlanguage/ui-components 0.0.1-alpha.76 → 0.0.1-alpha.78

package/dist/index.d.ts

@@ -82,6 +82,7 @@ export { QKEY_VAULTS, QKEY_VAULT, QKEY_VAULT_CHANGES, QKEY_ORDERS, QKEY_ORDER, Q
 export { darkChartTheme, lightChartTheme } from './utils/lightweightChartsThemes';
 export { lightCodeMirrorTheme, darkCodeMirrorTheme } from './utils/codeMirrorThemes';
 export { default as transactionStore } from './stores/transactionStore';
+export { cachedWritableStore, cachedWritableIntOptional, cachedWritableStringOptional, cachedWritableString } from './storesGeneric/cachedWritableStore';
 export { default as logoLight } from './assets/logo-light.svg';
 export { default as logoDark } from './assets/logo-dark.svg';
 export { default as GuiProvider } from './providers/GuiProvider.svelte';

package/dist/index.js

@@ -81,6 +81,7 @@ export { darkChartTheme, lightChartTheme } from './utils/lightweightChartsThemes
 export { lightCodeMirrorTheme, darkCodeMirrorTheme } from './utils/codeMirrorThemes';
 // Stores
 export { default as transactionStore } from './stores/transactionStore';
+export { cachedWritableStore, cachedWritableIntOptional, cachedWritableStringOptional, cachedWritableString } from './storesGeneric/cachedWritableStore';
 // Assets
 export { default as logoLight } from './assets/logo-light.svg';
 export { default as logoDark } from './assets/logo-dark.svg';

package/dist/services/awaitTransactionIndexing.d.ts

@@ -0,0 +1,163 @@
+/**
+ * @module awaitTransactionIndexing
+ * @description Utilities for waiting for transactions to be indexed by a subgraph
+ */
+import type { SgAddOrderWithOrder, SgRemoveOrderWithOrder, SgTransaction } from '@rainlanguage/orderbook';
+/**
+ * Error message when subgraph indexing times out
+ */
+export declare const TIMEOUT_ERROR = "The subgraph took too long to respond. Your transaction may still be processing.";
+/**
+ * Result of a subgraph indexing operation
+ * @template T The type of data returned by the subgraph
+ */
+export type IndexingResult<T> = {
+    /**
+     * The successful result of the indexing operation
+     */
+    value?: {
+        /**
+         * The transaction hash
+         */
+        txHash: string;
+        /**
+         * Message to display on successful indexing
+         */
+        successMessage: string;
+        /**
+         * Optional order hash if available
+         */
+        orderHash?: string;
+        /**
+         * Optional network key
+         */
+        network?: string;
+        /**
+         * Optional data returned from the subgraph
+         */
+        data?: T;
+    };
+    /**
+     * Error message if indexing failed
+     */
+    error?: string;
+};
+/**
+ * Generic function to handle waiting for subgraph indexing
+ * Returns a promise that resolves with an object containing either value or error
+ *
+ * @template T The type of data returned by the subgraph
+ * @param options Configuration options for the indexing operation
+ * @returns Promise resolving to an IndexingResult
+ */
+export declare const awaitSubgraphIndexing: <T>(options: {
+    /**
+     * URL of the subgraph to query
+     */
+    subgraphUrl: string;
+    /**
+     * Transaction hash to check for indexing
+     */
+    txHash: string;
+    /**
+     * Message to display on successful indexing
+     */
+    successMessage: string;
+    /**
+     * Maximum number of attempts before timing out
+     */
+    maxAttempts?: number;
+    /**
+     * Interval between attempts in milliseconds
+     */
+    interval?: number;
+    /**
+     * Optional network identifier
+     */
+    network?: string;
+    /**
+     * Function to fetch data from the subgraph
+     * @param subgraphUrl URL of the subgraph
+     * @param txHash Transaction hash to query
+     */
+    fetchData: (subgraphUrl: string, txHash: string) => Promise<T | null | undefined>;
+    /**
+     * Function to determine if the fetched data indicates success
+     * @param data The data returned from the subgraph
+     */
+    isSuccess: (data: T) => boolean;
+}) => Promise<IndexingResult<T>>;
+/**
+ * Configuration for transaction indexing
+ * @template T The type of data returned by the subgraph
+ */
+export interface TransactionConfig<T> {
+    /**
+     * URL of the subgraph to query
+     */
+    subgraphUrl: string;
+    /**
+     * Transaction hash to check for indexing
+     */
+    txHash: string;
+    /**
+     * Message to display on successful indexing
+     */
+    successMessage: string;
+    /**
+     * Optional network key
+     */
+    network?: string;
+    /**
+     * Maximum number of attempts before timing out
+     */
+    maxAttempts?: number;
+    /**
+     * Interval between attempts in milliseconds
+     */
+    interval?: number;
+    /**
+     * Function to fetch data from the subgraph
+     */
+    fetchData: (subgraphUrl: string, txHash: string) => Promise<T>;
+    /**
+     * Function to determine if the fetched data indicates success
+     */
+    isSuccess: (data: T) => boolean;
+}
+/**
+ * Creates a configuration for checking general transaction indexing
+ *
+ * @param subgraphUrl URL of the subgraph to query
+ * @param txHash Transaction hash to check for indexing
+ * @param successMessage Message to display on successful indexing
+ * @param network Optional network key
+ * @param maxAttempts Maximum number of attempts before timing out
+ * @param interval Interval between attempts in milliseconds
+ * @returns Configuration for transaction indexing
+ */
+export declare const getTransactionConfig: (subgraphUrl: string, txHash: string, successMessage: string, network?: string, maxAttempts?: number, interval?: number) => TransactionConfig<SgTransaction>;
+/**
+ * Creates a configuration for checking new order indexing
+ *
+ * @param subgraphUrl URL of the subgraph to query
+ * @param txHash Transaction hash to check for indexing
+ * @param successMessage Message to display on successful indexing
+ * @param network Optional network key
+ * @param maxAttempts Maximum number of attempts before timing out
+ * @param interval Interval between attempts in milliseconds
+ * @returns Configuration for new order indexing
+ */
+export declare const getNewOrderConfig: (subgraphUrl: string, txHash: string, successMessage: string, network?: string, maxAttempts?: number, interval?: number) => TransactionConfig<SgAddOrderWithOrder[]>;
+/**
+ * Creates a configuration for checking order removal indexing
+ *
+ * @param subgraphUrl URL of the subgraph to query
+ * @param txHash Transaction hash to check for indexing
+ * @param successMessage Message to display on successful indexing
+ * @param network Optional network key
+ * @param maxAttempts Maximum number of attempts before timing out
+ * @param interval Interval between attempts in milliseconds
+ * @returns Configuration for order removal indexing
+ */
+export declare const getRemoveOrderConfig: (subgraphUrl: string, txHash: string, successMessage: string, network?: string, maxAttempts?: number, interval?: number) => TransactionConfig<SgRemoveOrderWithOrder[]>;

package/dist/services/awaitTransactionIndexing.js

@@ -0,0 +1,120 @@
+/**
+ * @module awaitTransactionIndexing
+ * @description Utilities for waiting for transactions to be indexed by a subgraph
+ */
+import { getTransaction, getTransactionAddOrders, getTransactionRemoveOrders } from '@rainlanguage/orderbook';
+/**
+ * Error message when subgraph indexing times out
+ */
+export const TIMEOUT_ERROR = 'The subgraph took too long to respond. Your transaction may still be processing.';
+/**
+ * Generic function to handle waiting for subgraph indexing
+ * Returns a promise that resolves with an object containing either value or error
+ *
+ * @template T The type of data returned by the subgraph
+ * @param options Configuration options for the indexing operation
+ * @returns Promise resolving to an IndexingResult
+ */
+export const awaitSubgraphIndexing = async (options) => {
+    const { subgraphUrl, txHash, successMessage, maxAttempts = 10, interval = 1000, network, fetchData, isSuccess } = options;
+    return new Promise((resolve) => {
+        let attempts = 0;
+        const checkInterval = setInterval(async () => {
+            attempts++;
+            try {
+                const data = await fetchData(subgraphUrl, txHash);
+                if (data && isSuccess(data)) {
+                    clearInterval(checkInterval);
+                    let orderHash;
+                    // Extract orderHash from order data if it exists in the expected format
+                    if (Array.isArray(data) && data.length > 0 && data[0]?.order?.orderHash) {
+                        orderHash = data[0].order.orderHash;
+                    }
+                    resolve({
+                        value: {
+                            txHash,
+                            successMessage,
+                            orderHash,
+                            network,
+                            data
+                        }
+                    });
+                    return;
+                }
+            }
+            catch {
+                // Continue with the next attempt
+            }
+            if (attempts >= maxAttempts) {
+                clearInterval(checkInterval);
+                resolve({
+                    error: TIMEOUT_ERROR
+                });
+                return;
+            }
+        }, interval);
+    });
+};
+/**
+ * Creates a configuration for checking general transaction indexing
+ *
+ * @param subgraphUrl URL of the subgraph to query
+ * @param txHash Transaction hash to check for indexing
+ * @param successMessage Message to display on successful indexing
+ * @param network Optional network key
+ * @param maxAttempts Maximum number of attempts before timing out
+ * @param interval Interval between attempts in milliseconds
+ * @returns Configuration for transaction indexing
+ */
+export const getTransactionConfig = (subgraphUrl, txHash, successMessage, network, maxAttempts, interval) => ({
+    subgraphUrl,
+    txHash,
+    successMessage,
+    network,
+    maxAttempts,
+    interval,
+    fetchData: getTransaction,
+    isSuccess: (tx) => !!tx
+});
+/**
+ * Creates a configuration for checking new order indexing
+ *
+ * @param subgraphUrl URL of the subgraph to query
+ * @param txHash Transaction hash to check for indexing
+ * @param successMessage Message to display on successful indexing
+ * @param network Optional network key
+ * @param maxAttempts Maximum number of attempts before timing out
+ * @param interval Interval between attempts in milliseconds
+ * @returns Configuration for new order indexing
+ */
+export const getNewOrderConfig = (subgraphUrl, txHash, successMessage, network, maxAttempts, interval) => ({
+    subgraphUrl,
+    txHash,
+    successMessage,
+    network,
+    maxAttempts,
+    interval,
+    fetchData: getTransactionAddOrders,
+    isSuccess: (addOrders) => addOrders?.length > 0
+});
+/**
+ * Creates a configuration for checking order removal indexing
+ *
+ * @param subgraphUrl URL of the subgraph to query
+ * @param txHash Transaction hash to check for indexing
+ * @param successMessage Message to display on successful indexing
+ * @param network Optional network key
+ * @param maxAttempts Maximum number of attempts before timing out
+ * @param interval Interval between attempts in milliseconds
+ * @returns Configuration for order removal indexing
+ */
+export const getRemoveOrderConfig = (subgraphUrl, txHash, successMessage, network, maxAttempts, interval) => ({
+    subgraphUrl,
+    txHash,
+    successMessage,
+    network,
+    maxAttempts,
+    interval,
+    fetchData: getTransactionRemoveOrders,
+    isSuccess: (removeOrders) => removeOrders?.length > 0
+});

package/dist/stores/transactionStore.js

@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 import { sendTransaction, switchChain, waitForTransactionReceipt } from '@wagmi/core';
-import { getTransaction, getTransactionAddOrders, getTransactionRemoveOrders } from '@rainlanguage/orderbook';
 import { getExplorerLink } from '../services/getExplorerLink';
+import { awaitSubgraphIndexing, getNewOrderConfig, getRemoveOrderConfig, getTransactionConfig } from '../services/awaitTransactionIndexing';
 export const ADDRESS_ZERO = '0x0000000000000000000000000000000000000000';
 export const ONE = BigInt('1000000000000000000');
 export var TransactionStatus;
@@ -52,24 +52,13 @@ const transactionStore = () => {
             status: TransactionStatus.PENDING_SUBGRAPH,
             message: 'Waiting for transaction to be indexed...'
         }));
-        let attempts = 0;
-        let newTx;
-        const interval = setInterval(async () => {
-            attempts++;
-            try {
-                newTx = await getTransaction(subgraphUrl, txHash);
-                if (newTx) {
-                    clearInterval(interval);
-                    transactionSuccess(txHash, successMessage);
-                }
-            }
-            catch {
-                if (attempts >= 10) {
-                    clearInterval(interval);
-                    return transactionError(TransactionErrorMessage.TIMEOUT);
-                }
-            }
-        }, 1000);
+        const result = await awaitSubgraphIndexing(getTransactionConfig(subgraphUrl, txHash, successMessage));
+        if (result.error) {
+            return transactionError(TransactionErrorMessage.TIMEOUT);
+        }
+        if (result.value) {
+            return transactionSuccess(result.value.txHash, result.value.successMessage);
+        }
     };
     const awaitNewOrderIndexing = async (subgraphUrl, txHash, network) => {
         update((state) => ({
@@ -77,23 +66,13 @@ const transactionStore = () => {
             status: TransactionStatus.PENDING_SUBGRAPH,
             message: 'Waiting for new order to be indexed...'
         }));
-        let attempts = 0;
-        const interval = setInterval(async () => {
-            attempts++;
-            try {
-                const addOrders = await getTransactionAddOrders(subgraphUrl, txHash);
-                if (addOrders?.length > 0) {
-                    clearInterval(interval);
-                    return transactionSuccess(txHash, '', addOrders[0].order.orderHash, network);
-                }
-            }
-            catch {
-                if (attempts >= 10) {
-                    clearInterval(interval);
-                    return transactionError(TransactionErrorMessage.TIMEOUT);
-                }
-            }
-        }, 1000);
+        const result = await awaitSubgraphIndexing(getNewOrderConfig(subgraphUrl, txHash, '', network));
+        if (result.error) {
+            return transactionError(TransactionErrorMessage.TIMEOUT);
+        }
+        if (result.value) {
+            return transactionSuccess(result.value.txHash, result.value.successMessage, result.value.orderHash, result.value.network);
+        }
     };
     const awaitRemoveOrderIndexing = async (subgraphUrl, txHash) => {
         update((state) => ({
@@ -101,23 +80,13 @@ const transactionStore = () => {
             status: TransactionStatus.PENDING_SUBGRAPH,
             message: 'Waiting for order removal to be indexed...'
         }));
-        let attempts = 0;
-        const interval = setInterval(async () => {
-            attempts++;
-            try {
-                const removeOrders = await getTransactionRemoveOrders(subgraphUrl, txHash);
-                if (removeOrders?.length > 0) {
-                    clearInterval(interval);
-                    return transactionSuccess(txHash, 'Order removed successfully');
-                }
-            }
-            catch {
-                if (attempts >= 10) {
-                    clearInterval(interval);
-                    return transactionError(TransactionErrorMessage.TIMEOUT);
-                }
-            }
-        }, 1000);
+        const result = await awaitSubgraphIndexing(getRemoveOrderConfig(subgraphUrl, txHash, 'Order removed successfully'));
+        if (result.error) {
+            return transactionError(TransactionErrorMessage.TIMEOUT);
+        }
+        if (result.value) {
+            return transactionSuccess(result.value.txHash, result.value.successMessage);
+        }
     };
     const checkingWalletAllowance = (message) => update((state) => ({
         ...state,

package/dist/storesGeneric/cachedWritableStore.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Creates a writable Svelte store that persists its value to localStorage.
+ *
+ * @template T - The type of the value stored in the store
+ * @param {string} key - The localStorage key used to store the value
+ * @param {T} defaultValue - The default value to use when no value is found in localStorage
+ * @param {function(T): string} serialize - Function to convert the store value to a string for storage
+ * @param {function(string): T} deserialize - Function to convert the stored string back to the original type
+ * @returns {import('svelte/store').Writable<T>} A writable store that automatically syncs with localStorage
+ *
+ * @example
+ * // Create a store for a boolean value
+ * const darkMode = cachedWritableStore(
+ *   'darkMode',
+ *   false,
+ *   value => JSON.stringify(value),
+ *   str => JSON.parse(str)
+ * );
+ *
+ * // Create a store for a complex object
+ * const userPreferences = cachedWritableStore(
+ *   'userPrefs',
+ *   { theme: 'light', fontSize: 14 },
+ *   value => JSON.stringify(value),
+ *   str => JSON.parse(str)
+ * );
+ */
+export declare function cachedWritableStore<T>(key: string, defaultValue: T, serialize: (value: T) => string, deserialize: (serialized: string) => T): import("svelte/store").Writable<T>;
+export declare const cachedWritableString: (key: string, defaultValue?: string) => import("svelte/store").Writable<string>;
+export declare const cachedWritableInt: (key: string, defaultValue?: number) => import("svelte/store").Writable<number>;
+/**
+ * Creates a writable store that can hold an optional value of type T and persists to localStorage.
+ *
+ * @template T - The type of the value stored
+ * @param {string} key - The localStorage key to use for persistence
+ * @param {T | undefined} defaultValue - The default value if nothing is found in localStorage
+ * @param {function} serialize - Function to convert the value to a string for storage
+ * @param {function} deserialize - Function to convert the stored string back to a value
+ * @returns A writable store that persists to localStorage and can hold undefined values
+ */
+export declare const cachedWritableOptionalStore: <T>(key: string, defaultValue: T | undefined, serialize: (value: T) => string, deserialize: (serialized: string) => T) => import("svelte/store").Writable<T | undefined>;
+/**
+ * Creates a writable store that can hold an optional number value and persists to localStorage.
+ *
+ * @param {string} key - The localStorage key to use for persistence
+ * @param {number | undefined} defaultValue - The default value if nothing is found in localStorage
+ * @returns A writable store that persists to localStorage and can hold an optional number
+ */
+export declare const cachedWritableIntOptional: (key: string, defaultValue?: undefined) => import("svelte/store").Writable<number | undefined>;
+/**
+ * Creates a writable store that can hold an optional string value and persists to localStorage.
+ *
+ * @param {string} key - The localStorage key to use for persistence
+ * @param {string | undefined} defaultValue - The default value if nothing is found in localStorage
+ * @returns A writable store that persists to localStorage and can hold an optional string
+ */
+export declare const cachedWritableStringOptional: (key: string, defaultValue?: undefined) => import("svelte/store").Writable<string | undefined>;

package/dist/storesGeneric/cachedWritableStore.js

@@ -0,0 +1,93 @@
+import { writable } from 'svelte/store';
+/**
+ * Creates a writable Svelte store that persists its value to localStorage.
+ *
+ * @template T - The type of the value stored in the store
+ * @param {string} key - The localStorage key used to store the value
+ * @param {T} defaultValue - The default value to use when no value is found in localStorage
+ * @param {function(T): string} serialize - Function to convert the store value to a string for storage
+ * @param {function(string): T} deserialize - Function to convert the stored string back to the original type
+ * @returns {import('svelte/store').Writable<T>} A writable store that automatically syncs with localStorage
+ *
+ * @example
+ * // Create a store for a boolean value
+ * const darkMode = cachedWritableStore(
+ *   'darkMode',
+ *   false,
+ *   value => JSON.stringify(value),
+ *   str => JSON.parse(str)
+ * );
+ *
+ * // Create a store for a complex object
+ * const userPreferences = cachedWritableStore(
+ *   'userPrefs',
+ *   { theme: 'light', fontSize: 14 },
+ *   value => JSON.stringify(value),
+ *   str => JSON.parse(str)
+ * );
+ */
+export function cachedWritableStore(key, defaultValue, serialize, deserialize) {
+    const getCache = () => {
+        try {
+            const cached = localStorage.getItem(key);
+            return cached !== null ? deserialize(cached) : defaultValue;
+        }
+        catch {
+            return defaultValue;
+        }
+    };
+    const setCache = (value) => {
+        try {
+            if (value !== undefined) {
+                localStorage.setItem(key, serialize(value));
+            }
+            else {
+                localStorage.removeItem(key);
+            }
+        }
+        catch {
+            // Silently ignore localStorage errors to allow the application to function
+            // without persistence in environments where localStorage is unavailable
+        }
+    };
+    const data = writable(getCache());
+    data.subscribe((value) => {
+        setCache(value);
+    });
+    return data;
+}
+export const cachedWritableString = (key, defaultValue = '') => cachedWritableStore(key, defaultValue, (v) => v, (v) => v);
+export const cachedWritableInt = (key, defaultValue = 0) => cachedWritableStore(key, defaultValue, (v) => v.toString(), (v) => {
+    const parsed = Number.parseInt(v);
+    return isNaN(parsed) ? defaultValue : parsed;
+});
+/**
+ * Creates a writable store that can hold an optional value of type T and persists to localStorage.
+ *
+ * @template T - The type of the value stored
+ * @param {string} key - The localStorage key to use for persistence
+ * @param {T | undefined} defaultValue - The default value if nothing is found in localStorage
+ * @param {function} serialize - Function to convert the value to a string for storage
+ * @param {function} deserialize - Function to convert the stored string back to a value
+ * @returns A writable store that persists to localStorage and can hold undefined values
+ */
+export const cachedWritableOptionalStore = (key, defaultValue = undefined, serialize, deserialize) => cachedWritableStore(key, defaultValue, (v) => (v !== undefined ? serialize(v) : ''), (v) => (v !== '' ? deserialize(v) : undefined));
+/**
+ * Creates a writable store that can hold an optional number value and persists to localStorage.
+ *
+ * @param {string} key - The localStorage key to use for persistence
+ * @param {number | undefined} defaultValue - The default value if nothing is found in localStorage
+ * @returns A writable store that persists to localStorage and can hold an optional number
+ */
+export const cachedWritableIntOptional = (key, defaultValue = undefined) => cachedWritableOptionalStore(key, defaultValue, (v) => v.toString(), (v) => {
+    const parsed = Number.parseInt(v);
+    return isNaN(parsed) ? (defaultValue ?? 0) : parsed;
+});
+/**
+ * Creates a writable store that can hold an optional string value and persists to localStorage.
+ *
+ * @param {string} key - The localStorage key to use for persistence
+ * @param {string | undefined} defaultValue - The default value if nothing is found in localStorage
+ * @returns A writable store that persists to localStorage and can hold an optional string
+ */
+export const cachedWritableStringOptional = (key, defaultValue = undefined) => cachedWritableOptionalStore(key, defaultValue, (v) => v, (v) => v);

package/package.json

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