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

package/dist/providers/registry/RegistryManager.js

@@ -0,0 +1,133 @@
+/**
+ * Manages registry URL settings, persisting values in localStorage and URL parameters
+ */
+export class RegistryManager {
+    /** The default registry URL to fall back to */
+    defaultRegistry;
+    /** The currently selected registry URL */
+    currentRegistry;
+    /** Key used for localStorage and URL parameters */
+    static STORAGE_KEY = 'registry';
+    /**
+     * Create a new RegistryManager
+     * @param defaultRegistry The default registry URL to use.
+     */
+    constructor(defaultRegistry) {
+        this.defaultRegistry = defaultRegistry;
+        this.currentRegistry = this.loadRegistryFromStorageOrUrl();
+    }
+    /**
+     * Initialize registry from URL param or local storage
+     * @returns The registry URL to use
+     */
+    loadRegistryFromStorageOrUrl() {
+        const urlParam = this.getRegistryParamFromUrl();
+        if (urlParam) {
+            this.setRegistryToLocalStorage(urlParam);
+            return urlParam;
+        }
+        return this.getRegistryFromLocalStorage() ?? this.defaultRegistry;
+    }
+    /**
+     * Get the registry from the URL param
+     * @returns The registry value from URL or null if not present
+     * @throws Error if URL parsing fails
+     */
+    getRegistryParamFromUrl() {
+        try {
+            return new URL(window.location.href).searchParams.get(RegistryManager.STORAGE_KEY);
+        }
+        catch (error) {
+            throw new Error('Failed to get registry parameter: ' +
+                (error instanceof Error ? error.message : String(error)));
+        }
+    }
+    /**
+     * Save the registry to local storage
+     * @param registry The registry URL to save
+     * @throws Error if localStorage is not available
+     */
+    setRegistryToLocalStorage(registry) {
+        try {
+            localStorage.setItem(RegistryManager.STORAGE_KEY, registry);
+        }
+        catch (error) {
+            throw new Error('Failed to save to localStorage: ' +
+                (error instanceof Error ? error.message : String(error)));
+        }
+    }
+    /**
+     * Retrieve the registry from local storage
+     * @returns The stored registry URL or null if not found
+     * @throws Error if localStorage is not available
+     */
+    getRegistryFromLocalStorage() {
+        try {
+            return localStorage.getItem(RegistryManager.STORAGE_KEY);
+        }
+        catch (error) {
+            throw new Error('Failed to access localStorage: ' + (error instanceof Error ? error.message : String(error)));
+        }
+    }
+    /**
+     * Get the currently active registry
+     * @returns The current registry URL, falling back to default if not set
+     */
+    getCurrentRegistry() {
+        return this.currentRegistry ?? this.defaultRegistry;
+    }
+    /**
+     * Set the registry and update both localStorage and URL
+     * @param registry The new registry URL to set
+     */
+    setRegistry(registry) {
+        this.currentRegistry = registry;
+        this.setRegistryToLocalStorage(registry);
+        this.updateUrlWithRegistry();
+    }
+    /**
+     * Reset to the default registry, clearing both localStorage and URL param
+     * @throws Error if localStorage is not available
+     */
+    resetToDefault() {
+        this.currentRegistry = this.defaultRegistry;
+        try {
+            localStorage.removeItem(RegistryManager.STORAGE_KEY);
+        }
+        catch (error) {
+            throw new Error('Failed to clear registry from localStorage: ' +
+                (error instanceof Error ? error.message : String(error)));
+        }
+        this.updateUrlWithRegistry(null);
+    }
+    /**
+     * Update the URL param to reflect the current or specified registry
+     * @param value The registry value to set in URL, defaults to current registry
+     * @throws Error if URL manipulation fails
+     */
+    updateUrlWithRegistry(value = this.currentRegistry) {
+        try {
+            const url = new URL(window.location.href);
+            if (value) {
+                url.searchParams.set(RegistryManager.STORAGE_KEY, value);
+            }
+            else {
+                url.searchParams.delete(RegistryManager.STORAGE_KEY);
+            }
+            window.history.pushState({}, '', url.toString());
+        }
+        catch (error) {
+            throw new Error('Failed to update URL parameter: ' +
+                (error instanceof Error ? error.message : String(error)));
+        }
+    }
+    /**
+     * Check if the current registry is custom (different from the default)
+     * @returns True if using a non-default registry
+     */
+    isCustomRegistry() {
+        return (this.currentRegistry !== undefined &&
+            this.currentRegistry !== null &&
+            this.currentRegistry !== this.defaultRegistry);
+    }
+}

package/dist/providers/registry/RegistryProvider.svelte

@@ -0,0 +1,6 @@
+<script>import { setRegistryContext } from "./context";
+export let registryManager;
+setRegistryContext(registryManager);
+</script>
+
+<slot />

package/dist/providers/registry/RegistryProvider.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { RegistryManager } from './RegistryManager';
+declare const __propDef: {
+    props: {
+        registryManager: RegistryManager;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type RegistryProviderProps = typeof __propDef.props;
+export type RegistryProviderEvents = typeof __propDef.events;
+export type RegistryProviderSlots = typeof __propDef.slots;
+export default class RegistryProvider extends SvelteComponent<RegistryProviderProps, RegistryProviderEvents, RegistryProviderSlots> {
+}
+export {};

package/dist/providers/registry/context.d.ts

@@ -0,0 +1,10 @@
+import type { RegistryManager } from './RegistryManager';
+export declare const REGISTRY_KEY = "registry_key";
+/**
+ * Retrieves the registry manager directly from Svelte's context
+ */
+export declare const getRegistryContext: () => RegistryManager;
+/**
+ * Sets the registry manager in Svelte's context
+ */
+export declare const setRegistryContext: (registry: RegistryManager) => void;

package/dist/providers/registry/context.js

@@ -0,0 +1,46 @@
+import { getContext, setContext } from 'svelte';
+export const REGISTRY_KEY = 'registry_key';
+/**
+ * Retrieves the registry manager directly from Svelte's context
+ */
+export const getRegistryContext = () => {
+    const registry = getContext(REGISTRY_KEY);
+    if (!registry) {
+        throw new Error('No registry manager was found in Svelte context. Did you forget to wrap your component with RegistryProvider?');
+    }
+    return registry;
+};
+/**
+ * Sets the registry manager in Svelte's context
+ */
+export const setRegistryContext = (registry) => {
+    setContext(REGISTRY_KEY, registry);
+};
+if (import.meta.vitest) {
+    const { describe, it, expect, vi, beforeEach } = import.meta.vitest;
+    vi.mock('svelte', async (importOriginal) => ({
+        ...(await importOriginal()),
+        getContext: vi.fn()
+    }));
+    describe('getRegistryContext', () => {
+        const mockGetContext = vi.mocked(getContext);
+        beforeEach(() => {
+            mockGetContext.mockReset();
+        });
+        it('should return the registry from context when it exists', () => {
+            const mockRegistry = {};
+            mockGetContext.mockImplementation((key) => {
+                if (key === REGISTRY_KEY)
+                    return mockRegistry;
+                return undefined;
+            });
+            const result = getRegistryContext();
+            expect(mockGetContext).toHaveBeenCalledWith(REGISTRY_KEY);
+            expect(result).toEqual(mockRegistry);
+        });
+        it('should throw an error when registry is not in context', () => {
+            mockGetContext.mockReturnValue(undefined);
+            expect(() => getRegistryContext()).toThrow('No registry manager was found in Svelte context. Did you forget to wrap your component with RegistryProvider?');
+        });
+    });
+}

package/dist/providers/registry/useRegistry.d.ts

@@ -0,0 +1,7 @@
+import type { RegistryManager } from './RegistryManager';
+/**
+ * Hook to access registry manager information from context
+ * Must be used within a component that is a child of RegistryProvider
+ * @returns An object containing the registry manager
+ */
+export declare function useRegistry(): RegistryManager;

package/dist/providers/registry/useRegistry.js

@@ -0,0 +1,29 @@
+import { getRegistryContext } from './context';
+/**
+ * Hook to access registry manager information from context
+ * Must be used within a component that is a child of RegistryProvider
+ * @returns An object containing the registry manager
+ */
+export function useRegistry() {
+    const registry = getRegistryContext();
+    return registry;
+}
+if (import.meta.vitest) {
+    const { describe, it, expect, vi, beforeEach } = import.meta.vitest;
+    vi.mock('./context', () => ({
+        getRegistryContext: vi.fn()
+    }));
+    describe('useRegistry', () => {
+        const mockGetRegistryContext = vi.mocked(getRegistryContext);
+        beforeEach(() => {
+            mockGetRegistryContext.mockReset();
+        });
+        it('should return registry', () => {
+            const mockRegistry = {};
+            mockGetRegistryContext.mockReturnValue(mockRegistry);
+            const result = useRegistry();
+            expect(mockGetRegistryContext).toHaveBeenCalled();
+            expect(result).toEqual(mockRegistry);
+        });
+    });
+}

package/dist/providers/toasts/ToastProvider.svelte

@@ -0,0 +1,17 @@
+<script>import ToastDetail from "../../components/ToastDetail.svelte";
+import { setToastsContext } from "./context";
+import { writable } from "svelte/store";
+import { fade } from "svelte/transition";
+const toasts = writable([]);
+setToastsContext(toasts);
+</script>
+
+<div class="fixed right-4 top-4 z-[100]">
+	{#each $toasts as toast, i}
+		<div out:fade data-testid="toast">
+			<ToastDetail {toast} {i} />
+		</div>
+	{/each}
+</div>
+
+<slot />

package/dist/providers/toasts/ToastProvider.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ToastProviderProps = typeof __propDef.props;
+export type ToastProviderEvents = typeof __propDef.events;
+export type ToastProviderSlots = typeof __propDef.slots;
+export default class ToastProvider extends SvelteComponent<ToastProviderProps, ToastProviderEvents, ToastProviderSlots> {
+}
+export {};

package/dist/providers/toasts/context.d.ts

@@ -0,0 +1,14 @@
+import { type Writable } from 'svelte/store';
+import type { ToastProps } from '../../types/toast';
+export declare const TOASTS_KEY = "rain:ui-components:toasts";
+/**
+ * Retrieves the toasts store from Svelte's context
+ */
+export declare function getToastsContext(): Writable<ToastProps[]>;
+/**
+ * Sets the toasts store in Svelte's context
+ *
+ * @param {Writable<ToastProps[]>} toasts - The writable store containing all active toast notifications
+ * @returns {void}
+ */
+export declare function setToastsContext(toasts: Writable<ToastProps[]>): void;

package/dist/providers/toasts/context.js

@@ -0,0 +1,22 @@
+import { getContext, setContext } from 'svelte';
+import {} from 'svelte/store';
+export const TOASTS_KEY = 'rain:ui-components:toasts';
+/**
+ * Retrieves the toasts store from Svelte's context
+ */
+export function getToastsContext() {
+    const toasts = getContext(TOASTS_KEY);
+    if (!toasts) {
+        throw new Error('No toasts context found. Did you forget to wrap your component with ToastProvider?');
+    }
+    return toasts;
+}
+/**
+ * Sets the toasts store in Svelte's context
+ *
+ * @param {Writable<ToastProps[]>} toasts - The writable store containing all active toast notifications
+ * @returns {void}
+ */
+export function setToastsContext(toasts) {
+    setContext(TOASTS_KEY, toasts);
+}

package/dist/providers/toasts/useToasts.d.ts

@@ -0,0 +1,16 @@
+import type { ToastProps } from '../../types/toast';
+/**
+ * Hook for managing toast notifications in the application.
+ * Provides functionality to add, remove, and access toast notifications.
+ *
+ * @returns {Object} An object containing:
+ *   - toasts: Writable store containing all active toast notifications
+ *   - addToast: Function to add a new toast notification
+ *   - removeToast: Function to remove a toast notification by index
+ */
+export declare function useToasts(): {
+    toasts: import("svelte/store").Writable<ToastProps[]>;
+    addToast: (toast: ToastProps) => void;
+    removeToast: (index: number) => void;
+    errToast: (message: string, detail?: string) => void;
+};

package/dist/providers/toasts/useToasts.js

@@ -0,0 +1,63 @@
+import { getToastsContext } from './context';
+/**
+ * Hook for managing toast notifications in the application.
+ * Provides functionality to add, remove, and access toast notifications.
+ *
+ * @returns {Object} An object containing:
+ *   - toasts: Writable store containing all active toast notifications
+ *   - addToast: Function to add a new toast notification
+ *   - removeToast: Function to remove a toast notification by index
+ */
+export function useToasts() {
+    const toasts = getToastsContext();
+    /**
+     * Removes a toast notification by its index from the toasts store
+     *
+     * @param {number} index - The index of the toast to remove
+     * @returns {void}
+     */
+    const removeToast = (index) => {
+        toasts.update((toasts) => {
+            if (index < 0 || index >= toasts.length) {
+                return toasts;
+            }
+            return toasts.filter((_, i) => i !== index);
+        });
+    };
+    /**
+     * Adds a new toast notification to the toasts store
+     *
+     * @param {ToastProps} toast - The toast configuration object containing:
+     *   - message: The text to display in the toast
+     *   - type: The type of toast (success, error, warning, info)
+     *   - color: The color theme of the toast (green, red, yellow, blue)
+     *   - links: Optional array of links to display in the toast
+     * @returns {void}
+     */
+    const addToast = (toast) => {
+        toasts.update((toasts) => {
+            const updatedToasts = [...toasts, toast];
+            return updatedToasts;
+        });
+    };
+    /**
+     * Adds a standardized error toast notification
+     *
+     * @param message - The error message to display
+     * @param detail - The detail of the error
+     */
+    const errToast = (message, detail) => {
+        addToast({
+            message,
+            detail,
+            type: 'error',
+            color: 'red'
+        });
+    };
+    return {
+        toasts,
+        addToast,
+        removeToast,
+        errToast
+    };
+}

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

@@ -0,0 +1,183 @@
+import { type Readable } from 'svelte/store';
+import type { QueryClient } from '@tanstack/svelte-query';
+import { type Transaction } from '../../models/Transaction';
+import type { InternalTransactionArgs } from '../../types/transaction';
+import type { Config } from '@wagmi/core';
+import type { ToastProps } from '../../types/toast';
+import { type SgVault, type SgOrder } from '@rainlanguage/orderbook';
+/**
+ * Function type for adding toast notifications to the UI.
+ * @param toast - The toast notification configuration object.
+ * @param toast.message - The message text to display in the toast.
+ * @param toast.type - The type of toast notification ('success', 'error', or 'info').
+ * @param toast.color - The color theme of the toast.
+ * @param toast.links - Optional array of links to display in the toast.
+ */
+export type AddToastFunction = (toast: Omit<ToastProps, 'id'>) => void;
+/**
+ * Manages blockchain transactions with toast notifications and query invalidation.
+ * Handles transaction lifecycle, status updates, and UI feedback.
+ * Provides functionality for creating, tracking, and managing blockchain transactions.
+ */
+export declare class TransactionManager {
+    /** Writable store tracking all active transactions. */
+    private transactions;
+    /** Query client for cache invalidation after successful transactions. */
+    private queryClient;
+    /** Function to display toast notifications in the UI. */
+    private addToast;
+    /** Wagmi configuration for blockchain interactions. */
+    private wagmiConfig;
+    /**
+     * Initializes a new TransactionManager instance.
+     * @param queryClient - Query client for cache invalidation.
+     * @param addToast - Function to display toast notifications.
+     * @param wagmiConfig - Wagmi configuration for blockchain interactions.
+     */
+    constructor(queryClient: QueryClient, addToast: AddToastFunction, wagmiConfig: Config);
+    /**
+     * Creates and initializes a new transaction for removing an order from the orderbook.
+     * @param args - Configuration for the remove order transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.networkKey - Network identifier string (e.g., 'mainnet', 'arbitrum').
+     * @param args.queryKey - The hash of the order to be removed (used for query invalidation and UI links).
+     * @param args.subgraphUrl - URL of the subgraph to query for transaction status.
+     * @param args.entity - The `SgOrder` entity associated with this transaction.
+     * @returns A new Transaction instance configured for order removal.
+     * @example
+     * const tx = await manager.createRemoveOrderTransaction({
+     *   txHash: '0x123...',
+     *   chainId: 1,
+     *   subgraphUrl: 'https://api.thegraph.com/subgraphs/name/...',
+     *   networkKey: 'mainnet',
+     *   queryKey: '0x456...', // Order hash
+     *   entity: sgOrderInstance
+     * });
+     */
+    createRemoveOrderTransaction(args: InternalTransactionArgs & {
+        subgraphUrl: string;
+        entity: SgOrder;
+    }): Promise<Transaction>;
+    /**
+     * Creates and initializes a new transaction for withdrawing funds from a vault.
+     * @param args - Configuration for the withdrawal transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.networkKey - Network identifier string.
+     * @param args.queryKey - The ID of the vault from which funds are withdrawn (used for query invalidation and UI links).
+     * @param args.subgraphUrl - URL of the subgraph to query for transaction status.
+     * @param args.entity - The `SgVault` entity associated with this transaction.
+     * @returns A new Transaction instance configured for withdrawal.
+     * @example
+     * const tx = await manager.createWithdrawTransaction({
+     *   txHash: '0x123...',
+     *   chainId: 1,
+     *   subgraphUrl: 'https://api.thegraph.com/subgraphs/name/...',
+     *   networkKey: 'mainnet',
+     *   queryKey: '0x789...', // Vault ID
+     *   entity: sgVaultInstance
+     * });
+     */
+    createWithdrawTransaction(args: InternalTransactionArgs & {
+        subgraphUrl: string;
+        entity: SgVault;
+    }): Promise<Transaction>;
+    /**
+     * Creates and initializes a new transaction for approving token spend.
+     * @param args - Configuration for the approval transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.networkKey - Network identifier string.
+     * @param args.queryKey - The ID of the vault or context for which approval is made (used for query invalidation and UI links).
+     * @param args.tokenSymbol - The symbol of the token being approved.
+     * @param args.entity - The `SgVault` entity associated with this transaction. (Optional, used for approvals to pre-existing vaults).
+     * @returns A new Transaction instance configured for token approval.
+     * @example
+     * const tx = await manager.createApprovalTransaction({
+     *   txHash: '0xabc...',
+     *   chainId: 1,
+     *   networkKey: 'mainnet',
+     *   queryKey: '0x789...', // Vault ID
+     *   entity: sgVaultInstance
+     * });
+     */
+    createApprovalTransaction(args: InternalTransactionArgs & {
+        entity?: SgVault;
+    }): Promise<Transaction>;
+    /**
+     * Creates and initializes a new transaction for depositing funds into a vault.
+     * @param args - Configuration for the deposit transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.networkKey - Network identifier string.
+     * @param args.queryKey - The ID of the vault into which funds are deposited (used for query invalidation and UI links).
+     * @param args.entity - The `SgVault` entity associated with this transaction.
+     * @param args.amount - The amount of tokens being deposited.
+     * @param args.subgraphUrl - URL of the subgraph to query for transaction status.
+     * @returns A new Transaction instance configured for deposit.
+     * @example
+     * const tx = await manager.createDepositTransaction({
+     *   txHash: '0xdef...',
+     *   chainId: 1,
+     *   subgraphUrl: 'https://api.thegraph.com/subgraphs/name/...',
+     *   networkKey: 'mainnet',
+     *   queryKey: '0x789...', // Vault ID
+     *   entity: sgVaultInstance,
+     *   amount: 1000n
+     * });
+     */
+    createDepositTransaction(args: InternalTransactionArgs & {
+        amount: bigint;
+        entity: SgVault;
+        subgraphUrl: string;
+    }): Promise<Transaction>;
+    /**
+     * Creates and initializes a new transaction for deploying a strategy.
+     * @param args - Configuration for the deployment transaction.
+     * @param args.txHash - Hash of the transaction to track.
+     * @param args.chainId - Chain ID where the transaction is being executed.
+     * @param args.networkKey - Network identifier string.
+     * @param args.queryKey - The ID of the vault into which funds are deposited (used for query invalidation and UI links).
+     * @param args.subgraphUrl - URL of the subgraph to query for transaction status.
+     * @returns A new Transaction instance configured for deposit.
+     * @example
+     * const tx = await manager.createAddOrderTransaction({
+     *   txHash: '0xdeploytxhash',
+     *   chainId: 1,
+     *   networkKey: 'mainnet',
+     *   queryKey: '0x789...', // Vault ID
+     *   subgraphUrl: 'https://api.thegraph.com/subgraphs/name/...',
+     * });
+     */
+    createAddOrderTransaction(args: InternalTransactionArgs & {
+        subgraphUrl: string;
+    }): Promise<Transaction>;
+    /**
+     * Creates, initializes, and executes a new transaction instance.
+     * @param args - Configuration for the transaction.
+     * @param args.name - Name or title of the transaction.
+     * @param args.errorMessage - Message to display on transaction failure.
+     * @param args.successMessage - Message to display on transaction success.
+     * @param args.queryKey - Key used for query invalidation.
+     * @param args.toastLinks - Array of links to display in toast notifications.
+     * @param args.awaitSubgraphConfig - Optional configuration for awaiting subgraph indexing.
+     * @returns A new Transaction instance that has been initialized and started.
+     * @private
+     */
+    private createTransaction;
+    /**
+     * Retrieves the store containing all active transactions.
+     * @returns A readable store containing all active Transaction instances.
+     * @example
+     * const transactionsStore = manager.getTransactions();
+     * transactionsStore.subscribe(transactions => console.log(transactions));
+     */
+    getTransactions(): Readable<Transaction[]>;
+    /**
+     * Removes all transactions from the store, resetting the transaction tracking state.
+     * @example
+     * manager.clearTransactions(); // Clear all tracked transactions
+     */
+    clearTransactions(): void;
+}