Add cached settings for listViewOrderbookFilters

packages/ui-components/src/lib/index.ts

@@ -117,6 +117,12 @@ export { lightCodeMirrorTheme, darkCodeMirrorTheme } from './utils/codeMirrorThe
 
 // 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';

packages/ui-components/src/lib/storesGeneric/cachedWritableStore.ts

@@ -0,0 +1,137 @@
+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<T>(
+	key: string,
+	defaultValue: T,
+	serialize: (value: T) => string,
+	deserialize: (serialized: string) => T
+) {
+	const getCache = () => {
+		try {
+			const cached = localStorage.getItem(key);
+			return cached !== null ? deserialize(cached) : defaultValue;
+		} catch {
+			return defaultValue;
+		}
+	};
+	const setCache = (value?: T) => {
+		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<T>(getCache());
+
+	data.subscribe((value) => {
+		setCache(value);
+	});
+
+	return data;
+}
+
+export const cachedWritableString = (key: string, defaultValue = '') =>
+	cachedWritableStore<string>(
+		key,
+		defaultValue,
+		(v) => v,
+		(v) => v
+	);
+export const cachedWritableInt = (key: string, defaultValue = 0) =>
+	cachedWritableStore<number>(
+		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 = <T>(
+	key: string,
+	defaultValue: T | undefined = undefined,
+	serialize: (value: T) => string,
+	deserialize: (serialized: string) => T
+) =>
+	cachedWritableStore<T | undefined>(
+		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: string, defaultValue = undefined) =>
+	cachedWritableOptionalStore<number>(
+		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: string, defaultValue = undefined) =>
+	cachedWritableOptionalStore<string>(
+		key,
+		defaultValue,
+		(v) => v,
+		(v) => v
+	);

packages/webapp/src/lib/stores/settings.ts

@@ -0,0 +1,103 @@
+import { cachedWritableStore, type ConfigSource } from '@rainlanguage/ui-components';
+
+/**
+ * A persistent store that holds the application configuration settings.
+ *
+ * This store is saved to local storage and persists between sessions.
+ *
+ * @default undefined - No configuration is set by default
+ * @returns A writable store containing the application configuration
+ */
+export const settings = cachedWritableStore<ConfigSource | undefined>(
+	'settings',
+	undefined,
+	(value) => JSON.stringify(value),
+	(str) => {
+		try {
+			return JSON.parse(str) as ConfigSource;
+		} catch {
+			return undefined;
+		}
+	}
+);
+
+/**
+ * A persistent store that controls whether vaults with zero balance should be hidden in the UI.
+ *
+ * This setting is saved to local storage and persists between sessions.
+ *
+ * @default true - Zero balance vaults are hidden by default
+ * @returns A writable store containing a boolean value
+ */
+export const hideZeroBalanceVaults = cachedWritableStore<boolean>(
+	'settings.hideZeroBalanceVaults',
+	true, // default value is true
+	(value) => JSON.stringify(value),
+	(str) => {
+		try {
+			const value = JSON.parse(str);
+			return typeof value === 'boolean' ? value : true;
+		} catch {
+			return true;
+		}
+	}
+);
+
+/**
+ * A persistent store that controls whether to show only the user's items in lists.
+ *
+ * This setting is saved to local storage and persists between sessions.
+ *
+ * @default false - All items are shown by default
+ * @returns A writable store containing a boolean value
+ */
+export const showMyItemsOnly = cachedWritableStore<boolean>(
+	'settings.showMyItemsOnly',
+	false,
+	(value) => JSON.stringify(value),
+	(str) => {
+		try {
+			const value = JSON.parse(str);
+			return typeof value === 'boolean' ? value : false;
+		} catch {
+			return false;
+		}
+	}
+);
+
+/**
+ * A persistent store that holds active subgraph URLs for different networks/orderbooks.
+ *
+ * This store maps network/orderbook identifiers to their corresponding subgraph URLs.
+ * The setting is saved to local storage and persists between sessions.
+ *
+ * @default {} - Empty object by default
+ * @returns A writable store containing a record of subgraph URLs
+ */
+export const activeSubgraphs = cachedWritableStore<Record<string, string>>(
+	'settings.activeSubgraphs',
+	{},
+	JSON.stringify,
+	(s) => {
+		try {
+			return JSON.parse(s);
+		} catch {
+			return {};
+		}
+	}
+);
+
+/**
+ * A persistent store that holds the currently selected order hash.
+ *
+ * This setting is saved to local storage and persists between sessions.
+ *
+ * @default "" - Empty string by default
+ * @returns A writable store containing the order hash string
+ */
+export const orderHash = cachedWritableStore<string>(
+	'settings.orderHash',
+	'',
+	(value) => value,
+	(str) => str || ''
+);

packages/webapp/src/routes/+layout.svelte

@@ -14,6 +14,10 @@
 	import LoadingWrapper from '$lib/components/LoadingWrapper.svelte';
 	import { WalletProvider } from '@rainlanguage/ui-components';
 	import { signerAddress } from '$lib/stores/wagmi';
+	import { settings as cachedSettings } from '$lib/stores/settings';
+
+	const { settings } = $page.data.stores;
+	cachedSettings.set(settings);
 
 	// Query client for caching
 	const queryClient = new QueryClient({

packages/webapp/src/routes/orders/+page.svelte

@@ -2,23 +2,17 @@
 	import { page } from '$app/stores';
 	import { OrdersListTable, PageHeader } from '@rainlanguage/ui-components';
 	import type { AppStoresInterface } from '@rainlanguage/ui-components';
-	import { connected } from '$lib/stores/wagmi.ts';
-	import { writable } from 'svelte/store';
+	import { activeSubgraphs, orderHash, showMyItemsOnly } from '$lib/stores/settings';
 
 	const {
-		activeSubgraphs,
 		settings,
 		accounts,
 		activeAccountsItems,
 		activeOrderStatus,
-		orderHash,
 		hideZeroBalanceVaults,
 		activeNetworkRef,
-		activeOrderbookRef,
-		showMyItemsOnly = writable(false)
+		activeOrderbookRef
 	}: AppStoresInterface = $page.data.stores;
-
-	$: showMyItemsOnly.set($connected);
 </script>
 
 <PageHeader title={'Orders'} pathname={$page.url.pathname} />

packages/webapp/src/routes/vaults/+page.svelte

@@ -2,24 +2,20 @@
 	import { PageHeader, VaultsListTable } from '@rainlanguage/ui-components';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
-	import { connected } from '$lib/stores/wagmi';
-	import { writable } from 'svelte/store';
+	import { hideZeroBalanceVaults, showMyItemsOnly, orderHash } from '$lib/stores/settings';
+	import { activeSubgraphs } from '$lib/stores/settings';
 
 	const {
 		activeOrderbook,
 		subgraphUrl,
-		orderHash,
-		activeSubgraphs,
 		settings,
 		accounts,
 		activeAccountsItems,
 		activeOrderStatus,
-		hideZeroBalanceVaults,
 		activeNetworkRef,
 		activeOrderbookRef,
 		activeAccounts,
-		activeNetworkOrderbooks,
-		showMyItemsOnly = writable(false)
+		activeNetworkOrderbooks
 	} = $page.data.stores;
 
 	export async function resetActiveNetworkRef() {
@@ -48,8 +44,6 @@
 			resetActiveOrderbookRef();
 		}
 	});
-
-	$: showMyItemsOnly.set($connected);
 </script>
 
 <PageHeader title="Vaults" pathname={$page.url.pathname} />

tauri-app/src/lib/mocks/mockConfigSource.ts

@@ -0,0 +1,37 @@
+import type { ConfigSource } from '@rainlanguage/orderbook';
+
+export const mockConfigSource: ConfigSource = {
+  networks: {
+    mainnet: {
+      rpc: 'https://mainnet.infura.io/v3/YOUR-PROJECT-ID',
+      'chain-id': 1,
+      label: 'Ethereum Mainnet',
+      currency: 'ETH',
+    },
+  },
+  subgraphs: {
+    mainnet: 'https://api.thegraph.com/subgraphs/name/mainnet',
+  },
+  orderbooks: {
+    orderbook1: {
+      address: '0xOrderbookAddress1',
+      network: 'mainnet',
+      subgraph: 'uniswap',
+      label: 'Orderbook 1',
+    },
+  },
+  deployers: {
+    deployer1: {
+      address: '0xDeployerAddress1',
+      network: 'mainnet',
+      label: 'Deployer 1',
+    },
+  },
+  metaboards: {
+    metaboard1: 'https://example.com/metaboard1',
+  },
+  accounts: {
+    name_one: 'address_one',
+    name_two: 'address_two',
+  },
+};