Add cached settings for listViewOrderbookFilters

packages/ui-components/src/__tests__/ListViewOrderbookFilters.test.ts

@@ -46,7 +46,7 @@ describe('ListViewOrderbookFilters', () => {
 		hideZeroBalanceVaults: writable(false),
 		activeAccountsItems: writable({}),
 		activeSubgraphs: writable({}),
-		activeOrderStatus: writable(undefined),
+		activeOrderStatus: writable(true),
 		orderHash: writable(''),
 		showMyItemsOnly: writable(false)
 	} as ListViewOrderbookFiltersProps;

packages/ui-components/src/lib/__mocks__/stores.ts

@@ -27,7 +27,7 @@ const mockSettingsWritable = writable<ConfigSource | undefined>(settingsFixture)
 const mockActiveSubgraphsWritable = writable<Record<string, string>>({});
 const mockAccountsWritable = writable<Record<string, string>>({});
 const mockActiveAccountsItemsWritable = writable<Record<string, string>>({});
-const mockActiveOrderStatusWritable = writable<boolean | undefined>(undefined);
+const mockActiveOrderStatusWritable = writable<boolean>(true);
 const mockOrderHashWritable = writable<string>('');
 const mockHideZeroBalanceVaultsWritable = writable<boolean>(false);
 const mockActiveNetworkRefWritable = writable<string>('');
@@ -66,8 +66,7 @@ export const mockActiveAccountsItemsStore = {
 export const mockActiveOrderStatusStore = {
 	subscribe: mockActiveOrderStatusWritable.subscribe,
 	set: mockActiveOrderStatusWritable.set,
-	mockSetSubscribeValue: (value: boolean | undefined): void =>
-		mockActiveOrderStatusWritable.set(value)
+	mockSetSubscribeValue: (value: boolean): void => mockActiveOrderStatusWritable.set(value)
 };
 
 export const mockOrderHashStore = {

packages/ui-components/src/lib/components/ListViewOrderbookFilters.svelte

@@ -19,7 +19,7 @@
 	export let activeAccountsItems: Writable<Record<string, string>> | undefined;
 	export let showMyItemsOnly: Writable<boolean>;
 	export let activeSubgraphs: Writable<Record<string, string>>;
-	export let activeOrderStatus: Writable<boolean | undefined>;
+	export let activeOrderStatus: Writable<boolean>;
 	export let orderHash: Writable<string>;
 
 	$: isVaultsPage = $page.url.pathname === '/vaults';

packages/ui-components/src/lib/components/checkbox/CheckboxActiveOrders.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { Checkbox } from 'flowbite-svelte';
 	import type { Writable } from 'svelte/store';
-	export let activeOrderStatus: Writable<boolean | undefined>;
+	export let activeOrderStatus: Writable<boolean>;
+	let checked: boolean = $activeOrderStatus ? false : true;
 
-	let includeInactive = $activeOrderStatus;
-	$: activeOrderStatus.set(includeInactive ? undefined : true);
+	function handleChange() {
+		$activeOrderStatus = $activeOrderStatus ? false : true;
+	}
 </script>
 
 <div data-testid="order-status-checkbox">
-	<Checkbox bind:checked={includeInactive}>Include inactive orders</Checkbox>
+	<Checkbox {checked} on:change={handleChange}>Include inactive orders</Checkbox>
 </div>

packages/ui-components/src/lib/components/tables/OrdersListTable.svelte

@@ -69,7 +69,7 @@
 				multiSubgraphArgs,
 				{
 					owners,
-					active: $activeOrderStatus,
+					active: !$activeOrderStatus ? undefined : true,
 					orderHash: $orderHash || undefined
 				},
 				{ page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE }

packages/ui-components/src/lib/components/tables/VaultsListTable.svelte

@@ -29,7 +29,7 @@
 	export let orderHash: Writable<string>;
 	export let activeSubgraphs: Writable<Record<string, string>>;
 	export let settings: Writable<ConfigSource | undefined>;
-	export let activeOrderStatus: Writable<boolean | undefined>;
+	export let activeOrderStatus: Writable<boolean>;
 	export let hideZeroBalanceVaults: Writable<boolean>;
 	export let activeNetworkRef: Writable<string | undefined>;
 	export let activeOrderbookRef: Writable<string | undefined>;

packages/ui-components/src/lib/types/appStores.ts

@@ -5,7 +5,7 @@ export interface AppStoresInterface {
 	activeSubgraphs: Writable<Record<string, string>>;
 	accounts: Readable<Record<string, string>>;
 	activeAccountsItems: Writable<Record<string, string>>;
-	activeOrderStatus: Writable<boolean | undefined>;
+	activeOrderStatus: Writable<boolean>;
 	orderHash: Writable<string>;
 	hideZeroBalanceVaults: Writable<boolean>;
 	activeNetworkRef: Writable<string | undefined>;

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

@@ -1,4 +1,25 @@
-import { cachedWritableStore } from '@rainlanguage/ui-components';
+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.
@@ -21,3 +42,84 @@ export const hideZeroBalanceVaults = cachedWritableStore<boolean>(
 		}
 	}
 );
+
+/**
+ * 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 || ''
+);
+
+/**
+ * A persistent store that holds the currently show/hide setting for inactive orders.
+ *
+ * This setting is saved to local storage and persists between sessions.
+ *
+ * @default false - Inactive orders are hidden by default
+ * @returns A writable store containing a boolean value
+ */
+export const activeOrderStatus = cachedWritableStore<boolean>(
+	'settings.activeOrderStatus',
+	true,
+	(value) => JSON.stringify(value),
+	(str) => {
+		try {
+			const value = JSON.parse(str);
+			return typeof value === 'boolean' ? value : true;
+		} catch {
+			return true;
+		}
+	}
+);

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,21 @@
 	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,
+		activeOrderStatus
+	} 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 } from '$lib/stores/settings';
+	import { hideZeroBalanceVaults, showMyItemsOnly, orderHash } from '$lib/stores/settings';
+	import { activeSubgraphs } from '$lib/stores/settings';
 
 	const {
 		activeOrderbook,
 		subgraphUrl,
-		orderHash,
 		settings,
 		accounts,
 		activeAccountsItems,
 		activeOrderStatus,
 		activeNetworkRef,
 		activeOrderbookRef,
 		activeAccounts,
-		activeNetworkOrderbooks,
-		showMyItemsOnly = writable(false),
-		activeSubgraphs
+		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/stores/settings.ts

@@ -238,16 +238,16 @@ export async function resetActiveNetworkRef() {
   }
 }
 
-export const activeOrderStatus = cachedWritableStore<boolean | undefined>(
+export const activeOrderStatus = cachedWritableStore<boolean>(
   'settings.activeOrderStatus',
-  undefined,
+  true,
   (value) => JSON.stringify(value),
   (str) => {
     try {
-      const parsed = JSON.parse(str);
-      return typeof parsed === 'boolean' ? parsed : undefined;
+      const value = JSON.parse(str);
+      return typeof value === 'boolean' ? value : true;
     } catch {
-      return undefined;
+      return true;
     }
   },
 );