Merge pull request #1245 from rainlanguage/1225-filtering-by-connecte…

…d-wallet

Create CheckboxMyItemsOnly.svelte

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

@@ -0,0 +1,54 @@
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import { get, writable, type Writable } from 'svelte/store';
+import { beforeEach, expect, test, describe } from 'vitest';
+import CheckboxMyItemsOnly from '../lib/components/CheckboxMyItemsOnly.svelte';
+
+describe('CheckboxMyItemsOnly', () => {
+	let showMyItemsOnly: Writable<boolean>;
+	let context: 'orders' | 'vaults';
+	let signerAddress: Writable<string | null> | undefined;
+	beforeEach(() => {
+		showMyItemsOnly = writable(true);
+		context = 'orders';
+	});
+
+	test('renders correctly on orders page', () => {
+		render(CheckboxMyItemsOnly, {
+			props: {
+				showMyItemsOnly,
+				context,
+				signerAddress
+			}
+		});
+		expect(screen.getByText('Only show my orders')).toBeInTheDocument();
+	});
+	test('renders correctly on vaults page', () => {
+		render(CheckboxMyItemsOnly, {
+			props: {
+				showMyItemsOnly,
+				context: 'vaults',
+				signerAddress
+			}
+		});
+		expect(screen.getByText('Only show my vaults')).toBeInTheDocument();
+	});
+
+	test('toggles store value when clicked', async () => {
+		render(CheckboxMyItemsOnly, {
+			props: {
+				showMyItemsOnly,
+				context,
+				signerAddress
+			}
+		});
+
+		const checkbox = screen.getByRole('checkbox');
+		expect(get(showMyItemsOnly)).toBe(true);
+
+		await fireEvent.click(checkbox);
+		expect(get(showMyItemsOnly)).toBe(false);
+		//
+		await fireEvent.click(checkbox);
+		expect(get(showMyItemsOnly)).toBe(true);
+	});
+});

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

@@ -39,7 +39,9 @@ describe('ListViewOrderbookFilters', () => {
 		orderHash: writable(''),
 		isVaultsPage: false,
 		isOrdersPage: false,
-		query
+		query,
+		showMyItemsOnly: writable(false),
+		signerAddress: writable('')
 	} as ListViewOrderbookFiltersProps;
 
 	beforeEach(() => {
@@ -64,7 +66,7 @@ describe('ListViewOrderbookFilters', () => {
 		render(ListViewOrderbookFilters, defaultProps);
 
 		expect(screen.getByTestId('no-networks-alert')).toBeInTheDocument();
-		expect(screen.queryByTestId('accounts-dropdown')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('my-items-only')).not.toBeInTheDocument();
 	});
 
 	test('shows vault-specific components on vault page', () => {
@@ -90,9 +92,15 @@ describe('ListViewOrderbookFilters', () => {
 	});
 
 	test('shows common components when networks exist', () => {
-		render(ListViewOrderbookFilters, defaultProps);
+		const props = {
+			...defaultProps,
+			signerAddress: writable('0x123'),
+			showMyItemsOnly: writable(true),
+			activeAccountsItems: undefined,
+			accounts: undefined
+		};
+		render(ListViewOrderbookFilters, props);
 
-		expect(screen.getByTestId('accounts-dropdown')).toBeInTheDocument();
 		expect(screen.getByTestId('subgraphs-dropdown')).toBeInTheDocument();
 	});
 

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

@@ -21,6 +21,7 @@ const mockSignerAddressWritable = writable<string>('');
 const mockChainIdWritable = writable<number>(0);
 const mockConnectedWritable = writable<boolean>(false);
 const mockWagmiConfigWritable = writable<Config>(mockWeb3Config);
+const mockShowMyItemsOnlyWritable = writable<boolean>(false);
 
 export const mockWalletAddressMatchesOrBlankStore = {
 	subscribe: mockWalletAddressMatchesOrBlankWritable.subscribe,
@@ -122,3 +123,9 @@ export const mockWagmiConfigStore = {
 	update: mockWagmiConfigWritable.update,
 	mockSetSubscribeValue: (value: Config): void => mockWagmiConfigWritable.set(value)
 };
+
+export const mockShowMyItemsOnlyStore = {
+	subscribe: mockShowMyItemsOnlyWritable.subscribe,
+	set: mockShowMyItemsOnlyWritable.set,
+	mockSetSubscribeValue: (value: boolean): void => mockShowMyItemsOnlyWritable.set(value)
+};

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Checkbox, Label } from 'flowbite-svelte';
+	import type { Writable } from 'svelte/store';
+
+	export let showMyItemsOnly: Writable<boolean>;
+	export let context: 'orders' | 'vaults';
+	export let signerAddress: Writable<string | null> | undefined;
+
+	function handleShowMyItemsChange() {
+		$showMyItemsOnly = !$showMyItemsOnly;
+	}
+</script>
+
+<div data-testid="show-my-items-checkbox" class="flex items-center gap-x-2">
+	<Label
+		for="show-my-items"
+		class="cursor-pointer whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300"
+	>
+		Only show my {context}
+	</Label>
+	<Checkbox
+		id="show-my-items"
+		checked={$showMyItemsOnly}
+		on:change={handleShowMyItemsChange}
+		disabled={!$signerAddress}
+	/>
+</div>

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

@@ -1,23 +1,25 @@
 <script lang="ts" generics="T">
 	import { isEmpty } from 'lodash';
-	import { Alert } from 'flowbite-svelte';
+	import { Alert, Tooltip } from 'flowbite-svelte';
 	import DropdownActiveSubgraphs from './dropdown/DropdownActiveSubgraphs.svelte';
 	import DropdownOrderStatus from './dropdown/DropdownOrderStatus.svelte';
 	import DropdownOrderListAccounts from './dropdown/DropdownOrderListAccounts.svelte';
 	import InputOrderHash from './input/InputOrderHash.svelte';
 	import CheckboxZeroBalanceVault from './CheckboxZeroBalanceVault.svelte';
 	import type { Readable, Writable } from 'svelte/store';
 	import type { ConfigSource } from '../typeshare/config';
-
+	import CheckboxMyItemsOnly from '$lib/components/CheckboxMyItemsOnly.svelte';
 	export let settings: Writable<ConfigSource | undefined>;
-	export let accounts: Readable<Record<string, string>>;
+	export let accounts: Readable<Record<string, string>> | undefined;
 	export let hideZeroBalanceVaults: Writable<boolean>;
-	export let activeAccountsItems: Writable<Record<string, string>>;
+	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 orderHash: Writable<string>;
 	export let isVaultsPage: boolean;
 	export let isOrdersPage: boolean;
+	export let signerAddress: Writable<string | null> | undefined;
 </script>
 
 <div
@@ -29,6 +31,18 @@
 			No networks added to <a class="underline" href="/settings">settings</a>
 		</Alert>
 	{:else}
+		{#if $accounts && !Object.values($accounts).length}
+			<div class="mt-4 w-full lg:w-auto" data-testid="my-items-only">
+				<CheckboxMyItemsOnly
+					context={isVaultsPage ? 'vaults' : 'orders'}
+					{showMyItemsOnly}
+					{signerAddress}
+				/>
+				{#if !$signerAddress}
+					<Tooltip>Connect a wallet to filter by {isVaultsPage ? 'vault' : 'order'} owner</Tooltip>
+				{/if}
+			</div>
+		{/if}
 		{#if isVaultsPage}
 			<div class="mt-4 w-full lg:w-auto">
 				<CheckboxZeroBalanceVault {hideZeroBalanceVaults} />
@@ -39,7 +53,9 @@
 			<InputOrderHash {orderHash} />
 			<DropdownOrderStatus {activeOrderStatus} />
 		{/if}
-		<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
+		{#if $accounts && Object.values($accounts).length > 0}
+			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
+		{/if}
 		<DropdownActiveSubgraphs settings={$settings} {activeSubgraphs} />
 	{/if}
 </div>

packages/ui-components/src/lib/components/dropdown/DropdownOrderListAccounts.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import DropdownCheckbox from './DropdownCheckbox.svelte';
 	import type { Writable, Readable } from 'svelte/store';
-	export let accounts: Readable<Record<string, string>>;
-	export let activeAccountsItems: Writable<Record<string, string>>;
+	export let accounts: Readable<Record<string, string>> | undefined;
+	export let activeAccountsItems: Writable<Record<string, string>> | undefined;
 	$: options = $accounts;
 </script>
 

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

@@ -19,6 +19,7 @@
 		TableBodyCell,
 		TableHeadCell
 	} from 'flowbite-svelte';
+	import type { Writable } from 'svelte/store';
 
 	// Optional props only used in tauri-app
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,12 +30,14 @@
 
 	export let activeSubgraphs: AppStoresInterface['activeSubgraphs'];
 	export let settings: AppStoresInterface['settings'];
-	export let accounts: AppStoresInterface['accounts'];
-	export let activeAccountsItems: AppStoresInterface['activeAccountsItems'];
+	export let accounts: AppStoresInterface['accounts'] | undefined;
+	export let activeAccountsItems: AppStoresInterface['activeAccountsItems'] | undefined;
 	export let activeOrderStatus: AppStoresInterface['activeOrderStatus'];
 	export let orderHash: AppStoresInterface['orderHash'];
 	export let hideZeroBalanceVaults: AppStoresInterface['hideZeroBalanceVaults'];
+	export let showMyItemsOnly: AppStoresInterface['showMyItemsOnly'];
 	export let currentRoute: string;
+	export let signerAddress: Writable<string | null> | undefined;
 	export let activeNetworkRef: AppStoresInterface['activeNetworkRef'];
 	export let activeOrderbookRef: AppStoresInterface['activeOrderbookRef'];
 
@@ -46,8 +49,11 @@
 	})) as MultiSubgraphArgs[];
 
 	$: owners =
-		Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : [];
-
+		$activeAccountsItems && Object.values($activeAccountsItems).length > 0
+			? Object.values($activeAccountsItems)
+			: $showMyItemsOnly && $signerAddress
+				? [$signerAddress]
+				: [];
 	$: query = createInfiniteQuery({
 		queryKey: [
 			QKEY_ORDERS,
@@ -88,11 +94,13 @@
 	{settings}
 	{accounts}
 	{activeAccountsItems}
+	{showMyItemsOnly}
 	{activeOrderStatus}
 	{orderHash}
 	{hideZeroBalanceVaults}
 	{isVaultsPage}
 	{isOrdersPage}
+	{signerAddress}
 />
 
 <AppTable

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

@@ -18,13 +18,14 @@
 		type MultiSubgraphArgs,
 		type VaultWithSubgraphName
 	} from '@rainlanguage/orderbook/js_api';
-	import type { Writable, Readable } from 'svelte/store';
+	import { type Writable, type Readable } from 'svelte/store';
+	import type { AppStoresInterface } from '$lib/types/appStores.ts';
 
 	export let activeOrderbook: Readable<OrderbookConfigSource | undefined>;
 	export let subgraphUrl: Readable<string | undefined>;
+	export let accounts: AppStoresInterface['accounts'] | undefined;
+	export let activeAccountsItems: AppStoresInterface['activeAccountsItems'] | undefined;
 	export let orderHash: Writable<string>;
-	export let accounts: Readable<Record<string, string>>;
-	export let activeAccountsItems: Writable<Record<string, string>>;
 	export let activeSubgraphs: Writable<Record<string, string>>;
 	export let settings: Writable<ConfigSource | undefined>;
 	export let activeOrderStatus: Writable<boolean | undefined>;
@@ -41,6 +42,8 @@
 	export let handleWithdrawModal: ((vault: Vault, refetch: () => void) => void) | undefined =
 		undefined;
 	export let currentRoute: string;
+	export let showMyItemsOnly: AppStoresInterface['showMyItemsOnly'];
+	export let signerAddress: Writable<string | null> | undefined;
 
 	$: multiSubgraphArgs = Object.entries(
 		Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : ($settings?.subgraphs ?? {})
@@ -50,8 +53,11 @@
 	})) as MultiSubgraphArgs[];
 
 	$: owners =
-		Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : [];
-
+		$activeAccountsItems && Object.values($activeAccountsItems).length > 0
+			? Object.values($activeAccountsItems)
+			: $showMyItemsOnly && $signerAddress
+				? [$signerAddress]
+				: [];
 	$: query = createInfiniteQuery({
 		queryKey: [
 			QKEY_VAULTS,
@@ -97,11 +103,13 @@
 		{settings}
 		{accounts}
 		{activeAccountsItems}
+		{showMyItemsOnly}
 		{activeOrderStatus}
 		{orderHash}
 		{hideZeroBalanceVaults}
 		{isVaultsPage}
 		{isOrdersPage}
+		{signerAddress}
 	/>
 	<AppTable
 		{query}

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

@@ -16,4 +16,5 @@ export interface AppStoresInterface {
 	activeAccounts: Readable<{
 		[k: string]: string;
 	}>;
+	showMyItemsOnly: Writable<boolean>;
 }

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

@@ -2,6 +2,9 @@
 	import { page } from '$app/stores';
 	import { OrdersListTable } from '@rainlanguage/ui-components';
 	import type { AppStoresInterface } from '@rainlanguage/ui-components';
+	import { signerAddress } from '$lib/stores/wagmi';
+	import { connected } from '$lib/stores/wagmi.ts';
+	import { writable } from 'svelte/store';
 
 	const {
 		activeSubgraphs,
@@ -12,10 +15,12 @@
 		orderHash,
 		hideZeroBalanceVaults,
 		activeNetworkRef,
-		activeOrderbookRef
+		activeOrderbookRef,
+		showMyItemsOnly = writable(false)
 	}: AppStoresInterface = $page.data.stores;
 
 	$: currentRoute = $page.url.pathname;
+	$: showMyItemsOnly.set($connected);
 </script>
 
 <OrdersListTable
@@ -25,6 +30,8 @@
 	{settings}
 	{accounts}
 	{activeAccountsItems}
+	{showMyItemsOnly}
+	{signerAddress}
 	{activeOrderStatus}
 	{orderHash}
 	{hideZeroBalanceVaults}