From ec22ca579db212128166bb52eb40ce3ef4a7fe29 Mon Sep 17 00:00:00 2001
From: Arda Nakisci <anakisci@gmail.com>
Date: Mon, 23 Feb 2026 12:49:04 +0300
Subject: [PATCH 1/3] Re-enable vault balance chart disabled by Issue #1989

The VaultBalanceChart was disabled as collateral damage when performance
metrics were refactored. The underlying API is unchanged and working.
---
 .../src/__tests__/VaultBalanceChart.test.ts   | 52 ++++++++---------
 .../charts/VaultBalanceChart.svelte           | 58 ++++++++-----------
 .../lib/components/detail/VaultDetail.svelte  | 14 ++---
 .../[chainId]-[orderbook]-[id]/+page.svelte   |  4 +-
 4 files changed, 58 insertions(+), 70 deletions(-)

diff --git a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
index d8040c54e0..436c800587 100644
--- a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
+++ b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
@@ -1,32 +1,30 @@
-// TODO: Issue #1989
-// import { render } from '@testing-library/svelte';
-import { test } from 'vitest';
-// import { expect, test, vi } from 'vitest';
-// import { QueryClient } from '@tanstack/svelte-query';
-// import VaultBalanceChart from '../lib/components/charts/VaultBalanceChart.svelte';
-// import type { RaindexVault } from '@rainlanguage/orderbook';
-// import { writable } from 'svelte/store';
-// import type { ComponentProps } from 'svelte';
+import { render } from '@testing-library/svelte';
+import { expect, test, vi } from 'vitest';
+import { QueryClient } from '@tanstack/svelte-query';
+import VaultBalanceChart from '../lib/components/charts/VaultBalanceChart.svelte';
+import type { RaindexVault } from '@rainlanguage/orderbook';
+import { writable } from 'svelte/store';
+import type { ComponentProps } from 'svelte';
 
-// type VaultBalanceChartProps = ComponentProps<VaultBalanceChart>;
+type VaultBalanceChartProps = ComponentProps<VaultBalanceChart>;
 
-// vi.mock('../lib/components/charts/TanstackLightweightChartLine.svelte', async () => {
-// 	const MockLightweightChart = (await import('../lib/__mocks__/MockComponent.svelte')).default;
-// 	return { default: MockLightweightChart };
-// });
+vi.mock('../lib/components/charts/TanstackLightweightChartLine.svelte', async () => {
+	const MockLightweightChart = (await import('../lib/__mocks__/MockComponent.svelte')).default;
+	return { default: MockLightweightChart };
+});
 
 test('calls getVaultBalanceChanges with correct arguments', async () => {
-	// 	const queryClient = new QueryClient();
-	// 	const mockVault: RaindexVault = {
-	// 		id: 'vault1',
-	// 		getBalanceChanges: vi.fn()
-	// 	} as unknown as RaindexVault;
-	// 	render(VaultBalanceChart, {
-	// 		props: {
-	// 			vault: mockVault,
-	// 			lightweightChartsTheme: writable({})
-	// 		} as VaultBalanceChartProps,
-	// 		context: new Map([['$$_queryClient', queryClient]])
-	// 	});
-	// 	expect(mockVault.getBalanceChanges).toHaveBeenCalledWith(1);
+	const queryClient = new QueryClient();
+	const mockVault: RaindexVault = {
+		id: 'vault1',
+		getBalanceChanges: vi.fn()
+	} as unknown as RaindexVault;
+	render(VaultBalanceChart, {
+		props: {
+			vault: mockVault,
+			lightweightChartsTheme: writable({})
+		} as VaultBalanceChartProps,
+		context: new Map([['$$_queryClient', queryClient]])
+	});
+	expect(mockVault.getBalanceChanges).toHaveBeenCalledWith(1);
 });
diff --git a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
index d4869fb874..bd7bb44801 100644
--- a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
@@ -1,39 +1,31 @@
-<!-- TODO: Issue #1989 -->
 <script lang="ts">
-	// import { timestampSecondsToUTCTimestamp } from '../../services/time';
-	// 	import type { RaindexVault, RaindexVaultBalanceChange } from '@rainlanguage/orderbook';
-	// 	import { createQuery } from '@tanstack/svelte-query';
-	// 	import TanstackLightweightChartLine from '../charts/TanstackLightweightChartLine.svelte';
-	// 	import { QKEY_VAULT_CHANGES } from '../../queries/keys';
+	import { timestampSecondsToUTCTimestamp } from '../../services/time';
+	import type { RaindexVault, RaindexVaultBalanceChange } from '@rainlanguage/orderbook';
+	import { createQuery } from '@tanstack/svelte-query';
+	import TanstackLightweightChartLine from '../charts/TanstackLightweightChartLine.svelte';
+	import { QKEY_VAULT_CHANGES } from '../../queries/keys';
 
-	// export let vault: RaindexVault;
-	// export let lightweightChartsTheme;
+	export let vault: RaindexVault;
+	export let lightweightChartsTheme;
 
-	// $: query = createQuery({
-	// 	queryKey: [vault.id, QKEY_VAULT_CHANGES + vault.id, QKEY_VAULT_CHANGES],
-	// 	queryFn: async () => {
-	// 		const result = await vault.getBalanceChanges(1);
-	// 		if (result.error) throw new Error(result.error.msg);
-	// 		return result.value;
-	// 	}
-	// });
+	$: query = createQuery({
+		queryKey: [vault.id, QKEY_VAULT_CHANGES + vault.id, QKEY_VAULT_CHANGES],
+		queryFn: async () => {
+			const result = await vault.getBalanceChanges(1);
+			if (result.error) throw new Error(result.error.msg);
+			return result.value;
+		}
+	});
 
-	// const Chart = TanstackLightweightChartLine<RaindexVaultBalanceChange>;
+	const Chart = TanstackLightweightChartLine<RaindexVaultBalanceChange>;
 </script>
 
-<!--
-{#if vault && $query.data}
-	<Chart
-		title="Balance history"
-		priceSymbol={vault.token.symbol}
-		{query}
-		timeTransform={(d) => timestampSecondsToUTCTimestamp(BigInt(d.timestamp))}
-		valueTransform={(d) => parseFloat(d.formattedNewBalance)}
-		emptyMessage="No deposits or withdrawals found"
-		{lightweightChartsTheme}
-	/>
-{/if} -->
-
-{#if false}
-	<div>TODO: Issue #1989</div>
-{/if}
+<Chart
+	title="Balance history"
+	priceSymbol={vault.token.symbol}
+	{query}
+	timeTransform={(d) => timestampSecondsToUTCTimestamp(BigInt(d.timestamp))}
+	valueTransform={(d) => parseFloat(d.formattedNewBalance)}
+	emptyMessage="No deposits or withdrawals found"
+	{lightweightChartsTheme}
+/>
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index e95296072d..c864c2e47b 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Hash, { HashType } from '../Hash.svelte';
 	import VaultBalanceChangesTable from '../tables/VaultBalanceChangesTable.svelte';
-	// TODO: Issue #1989
-	// import VaultBalanceChart from '../charts/VaultBalanceChart.svelte';
+	import VaultBalanceChart from '../charts/VaultBalanceChart.svelte';
 	import TanstackPageContentDetail from './TanstackPageContentDetail.svelte';
 	import CardProperty from '../CardProperty.svelte';
 	import { QKEY_VAULT } from '../../queries/keys';
@@ -12,11 +11,11 @@
 		type Hex,
 		type RaindexVault
 	} from '@rainlanguage/orderbook';
-	// import type { ChartTheme } from '../../utils/lightweightChartsThemes';
+	import type { ChartTheme } from '../../utils/lightweightChartsThemes';
 	import { toHex } from 'viem';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { onDestroy } from 'svelte';
-	// import type { Readable } from 'svelte/store';
+	import type { Readable } from 'svelte/store';
 	import { useQueryClient } from '@tanstack/svelte-query';
 	import OrderOrVaultHash from '../OrderOrVaultHash.svelte';
 	import Refresh from '../icon/Refresh.svelte';
@@ -35,7 +34,7 @@
 	export let id: Hex;
 	export let orderbookAddress: Address;
 	export let chainId: number;
-	// export let lightweightChartsTheme: Readable<ChartTheme> | undefined = undefined;
+	export let lightweightChartsTheme: Readable<ChartTheme> | undefined = undefined;
 
 	/**
 	 * Required callback function when deposit action is triggered for a vault
@@ -195,9 +194,8 @@
 		</CardProperty>
 	</svelte:fragment>
 
-	<svelte:fragment slot="chart">
-		<!-- TODO: Issue #1989: VaultBalanceChart temporarily disabled -->
-		<!-- <VaultBalanceChart /> -->
+	<svelte:fragment slot="chart" let:data>
+		<VaultBalanceChart vault={data} {lightweightChartsTheme} />
 	</svelte:fragment>
 
 	<svelte:fragment slot="below" let:data><VaultBalanceChangesTable vault={data} /></svelte:fragment>
diff --git a/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte
index 429d5b0b15..1052520451 100644
--- a/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte
@@ -9,7 +9,7 @@
 	} from '$lib/services/modal';
 	import { RaindexClient, type Address, type RaindexVault } from '@rainlanguage/orderbook';
 	import type { Hex } from 'viem';
-	// import { lightweightChartsTheme } from '$lib/darkMode';
+	import { lightweightChartsTheme } from '$lib/darkMode';
 	import { handleVaultWithdraw } from '$lib/services/handleVaultWithdraw';
 	import { handleVaultDeposit } from '$lib/services/handleVaultDeposit';
 
@@ -49,4 +49,4 @@
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />
 
-<VaultDetail id={parsedId} {orderbookAddress} chainId={parsedChainId} {onDeposit} {onWithdraw} />
+<VaultDetail id={parsedId} {orderbookAddress} chainId={parsedChainId} {onDeposit} {onWithdraw} {lightweightChartsTheme} />

From 51ee854b4e64c81731acf278afea8bf978551981 Mon Sep 17 00:00:00 2001
From: Arda Nakisci <anakisci@gmail.com>
Date: Thu, 26 Mar 2026 12:03:55 +0300
Subject: [PATCH 2/3] Fix frontend test suite

---
 .../test/js_api/dotrainRainlang.test.ts       |  2 --
 packages/orderbook/test/js_api/gui.test.ts    | 20 +++++++++---
 .../src/__tests__/VaultBalanceChart.test.ts   | 32 ++++++++++++++++---
 .../src/__tests__/VaultDetail.test.ts         |  5 +++
 packages/ui-components/test-setup.ts          | 13 ++++++++
 .../[chainId]-[orderbook]-[id]/+page.svelte   |  9 +++++-
 6 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/packages/orderbook/test/js_api/dotrainRainlang.test.ts b/packages/orderbook/test/js_api/dotrainRainlang.test.ts
index cb3d0b28ae..348af9fac9 100644
--- a/packages/orderbook/test/js_api/dotrainRainlang.test.ts
+++ b/packages/orderbook/test/js_api/dotrainRainlang.test.ts
@@ -159,7 +159,6 @@ describe('Rain Orderbook JS API Package Bindgen Tests - Dotrain Rainlang', async
 	});
 
 	describe('DotrainRainlang Constructor', () => {
-
 		it('should create rainlang and fetch all content successfully', async () => {
 			const rainlangContent = `http://localhost:8231/settings.yaml
 fixed-limit http://localhost:8231/fixed-limit.rain
@@ -457,7 +456,6 @@ _ _: 0 0;
 `;
 
 	describe('DotrainRainlang getOrderbookYaml', () => {
-
 		it('should return OrderbookYaml instance from settings', async () => {
 			const rainlangContent = `http://localhost:8231/settings.yaml
 test-order http://localhost:8231/order.rain`;
diff --git a/packages/orderbook/test/js_api/gui.test.ts b/packages/orderbook/test/js_api/gui.test.ts
index 4799f0aa90..5cc8fafc69 100644
--- a/packages/orderbook/test/js_api/gui.test.ts
+++ b/packages/orderbook/test/js_api/gui.test.ts
@@ -24,11 +24,21 @@ import {
 const SPEC_VERSION = OrderbookYaml.getCurrentSpecVersion().value;
 
 // Rainlang contract function selectors
-const EXPRESSION_DEPLOYER_ADDRESS_SELECTOR = toFunctionSelector('function expressionDeployerAddress() external view returns (address)');
-const INTERPRETER_ADDRESS_SELECTOR = toFunctionSelector('function interpreterAddress() external view returns (address)');
-const STORE_ADDRESS_SELECTOR = toFunctionSelector('function storeAddress() external view returns (address)');
-const PARSER_ADDRESS_SELECTOR = toFunctionSelector('function parserAddress() external view returns (address)');
-const PARSE2_SELECTOR = toFunctionSelector('function parse2(bytes calldata data) external view returns (bytes calldata bytecode)');
+const EXPRESSION_DEPLOYER_ADDRESS_SELECTOR = toFunctionSelector(
+	'function expressionDeployerAddress() external view returns (address)'
+);
+const INTERPRETER_ADDRESS_SELECTOR = toFunctionSelector(
+	'function interpreterAddress() external view returns (address)'
+);
+const STORE_ADDRESS_SELECTOR = toFunctionSelector(
+	'function storeAddress() external view returns (address)'
+);
+const PARSER_ADDRESS_SELECTOR = toFunctionSelector(
+	'function parserAddress() external view returns (address)'
+);
+const PARSE2_SELECTOR = toFunctionSelector(
+	'function parse2(bytes calldata data) external view returns (bytes calldata bytecode)'
+);
 import { getLocal } from 'mockttp';
 
 const guiConfig = `
diff --git a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
index 436c800587..27876f825a 100644
--- a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
+++ b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
@@ -1,12 +1,19 @@
-import { render } from '@testing-library/svelte';
+import { render, waitFor } from '@testing-library/svelte';
 import { expect, test, vi } from 'vitest';
 import { QueryClient } from '@tanstack/svelte-query';
 import VaultBalanceChart from '../lib/components/charts/VaultBalanceChart.svelte';
 import type { RaindexVault } from '@rainlanguage/orderbook';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import type { ComponentProps } from 'svelte';
+import { props } from '../lib/__mocks__/MockComponent';
 
 type VaultBalanceChartProps = ComponentProps<VaultBalanceChart>;
+type MockChartProps = {
+	priceSymbol?: string;
+	query: {
+		subscribe: (run: (value: unknown) => void) => () => void;
+	};
+};
 
 vi.mock('../lib/components/charts/TanstackLightweightChartLine.svelte', async () => {
 	const MockLightweightChart = (await import('../lib/__mocks__/MockComponent.svelte')).default;
@@ -17,8 +24,15 @@ test('calls getVaultBalanceChanges with correct arguments', async () => {
 	const queryClient = new QueryClient();
 	const mockVault: RaindexVault = {
 		id: 'vault1',
-		getBalanceChanges: vi.fn()
+		token: {
+			symbol: 'TKN'
+		},
+		getBalanceChanges: vi.fn().mockResolvedValue({
+			value: [],
+			error: null
+		})
 	} as unknown as RaindexVault;
+	let unsubscribe = () => {};
 	render(VaultBalanceChart, {
 		props: {
 			vault: mockVault,
@@ -26,5 +40,15 @@ test('calls getVaultBalanceChanges with correct arguments', async () => {
 		} as VaultBalanceChartProps,
 		context: new Map([['$$_queryClient', queryClient]])
 	});
-	expect(mockVault.getBalanceChanges).toHaveBeenCalledWith(1);
+
+	await waitFor(() => {
+		const mockProps = get(props) as MockChartProps;
+		expect(mockProps.priceSymbol).toBe('TKN');
+		unsubscribe = mockProps.query.subscribe(() => undefined);
+	});
+
+	await waitFor(() => {
+		expect(mockVault.getBalanceChanges).toHaveBeenCalledWith(1);
+	});
+	unsubscribe();
 });
diff --git a/packages/ui-components/src/__tests__/VaultDetail.test.ts b/packages/ui-components/src/__tests__/VaultDetail.test.ts
index 6d76742743..04ea35e7c2 100644
--- a/packages/ui-components/src/__tests__/VaultDetail.test.ts
+++ b/packages/ui-components/src/__tests__/VaultDetail.test.ts
@@ -49,6 +49,11 @@ vi.mock('$lib/services/getExplorerLink', () => ({
 	getExplorerLink: vi.fn()
 }));
 
+vi.mock('../lib/components/charts/VaultBalanceChart.svelte', async () => {
+	const MockComponent = (await import('../lib/__mocks__/MockComponent.svelte')).default;
+	return { default: MockComponent };
+});
+
 const mockErrToast = vi.fn();
 
 const defaultProps: VaultDetailProps = {
diff --git a/packages/ui-components/test-setup.ts b/packages/ui-components/test-setup.ts
index 775bce4aa4..1a601fa994 100644
--- a/packages/ui-components/test-setup.ts
+++ b/packages/ui-components/test-setup.ts
@@ -2,6 +2,19 @@ import '@testing-library/jest-dom/vitest';
 import { vi } from 'vitest';
 
 window.scrollTo = vi.fn();
+window.matchMedia =
+	window.matchMedia ||
+	((query: string) =>
+		({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn()
+		}) as MediaQueryList);
 
 vi.mock('codemirror-rainlang', () => ({
 	RainlangLR: vi.fn()
diff --git a/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte
index 1052520451..235a401279 100644
--- a/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[chainId]-[orderbook]-[id]/+page.svelte
@@ -49,4 +49,11 @@
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />
 
-<VaultDetail id={parsedId} {orderbookAddress} chainId={parsedChainId} {onDeposit} {onWithdraw} {lightweightChartsTheme} />
+<VaultDetail
+	id={parsedId}
+	{orderbookAddress}
+	chainId={parsedChainId}
+	{onDeposit}
+	{onWithdraw}
+	{lightweightChartsTheme}
+/>

From c9c2a24231c160e352f18deac3ee9f1f8f84ea8c Mon Sep 17 00:00:00 2001
From: Arda Nakisci <anakisci@gmail.com>
Date: Thu, 26 Mar 2026 12:14:54 +0300
Subject: [PATCH 3/3] Fix chart theme typing and test naming

---
 .../src/__tests__/VaultBalanceChart.test.ts         |  2 +-
 .../lib/components/charts/LightweightChart.svelte   | 13 +++++++++----
 .../lib/components/charts/OrderTradesChart.svelte   | 13 +++++++++----
 .../charts/TanstackLightweightChartLine.svelte      |  3 ++-
 .../lib/components/charts/VaultBalanceChart.svelte  |  4 +++-
 .../src/lib/components/detail/OrderDetail.svelte    |  4 +++-
 .../src/lib/components/detail/VaultDetail.svelte    |  4 ++--
 .../src/lib/utils/lightweightChartsThemes.ts        |  2 ++
 8 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
index 27876f825a..acad5f49e2 100644
--- a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
+++ b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
@@ -20,7 +20,7 @@ vi.mock('../lib/components/charts/TanstackLightweightChartLine.svelte', async ()
 	return { default: MockLightweightChart };
 });
 
-test('calls getVaultBalanceChanges with correct arguments', async () => {
+test('calls getBalanceChanges with correct arguments', async () => {
 	const queryClient = new QueryClient();
 	const mockVault: RaindexVault = {
 		id: 'vault1',
diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
index cbfa1565c9..2bf8b41833 100644
--- a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" generics="T extends keyof SeriesOptionsMap, O">
-	import type { Readable } from 'svelte/store';
+	import { readable, type Readable } from 'svelte/store';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
 
 	// eslint-disable-next-line no-undef
 	type ISeriesApiType = ISeriesApi<
@@ -37,7 +38,11 @@
 	export let title: string | undefined = undefined;
 	export let priceSymbol: string | undefined = undefined;
 	export let createSeries: (chart: IChartApi) => ISeriesApiType;
-	export let lightweightChartsTheme: Readable<Record<string, unknown>>;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
+
+	const defaultLightweightChartsTheme = readable<LightweightChartsTheme>({});
+
+	$: resolvedLightweightChartsTheme = lightweightChartsTheme ?? defaultLightweightChartsTheme;
 
 	let chartElement: HTMLElement | undefined = undefined;
 	let chart: IChartApi | undefined;
@@ -62,7 +67,7 @@
 		if (chart === undefined) return;
 
 		chart.applyOptions({
-			...$lightweightChartsTheme,
+			...$resolvedLightweightChartsTheme,
 			autoSize: true,
 			localization: {
 				priceFormatter: (p: BarPrice) =>
@@ -107,7 +112,7 @@
 
 	$: if (data || series) updateNewDataPoints();
 	$: if (timeDelta) setTimeScale();
-	$: if ($lightweightChartsTheme) setOptions();
+	$: if (chart) setOptions();
 	$: if (chartElement && data.length > 0 && !chart) setupChart();
 
 	onMount(() => {
diff --git a/packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte b/packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
index 983beace6a..fbd0150b18 100644
--- a/packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import type { Readable } from 'svelte/store';
+	import { readable, type Readable } from 'svelte/store';
 	import { type RaindexOrder } from '@rainlanguage/orderbook';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { QKEY_ORDER_TRADES_LIST } from '../../queries/keys';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
 	import {
 		CHART_COLORS,
 		extractPairsFromTrades,
@@ -33,7 +34,11 @@
 	import { onDestroy, onMount } from 'svelte';
 
 	export let order: RaindexOrder;
-	export let lightweightChartsTheme: Readable<Record<string, unknown>>;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
+
+	const defaultLightweightChartsTheme = readable<LightweightChartsTheme>({});
+
+	$: resolvedLightweightChartsTheme = lightweightChartsTheme ?? defaultLightweightChartsTheme;
 
 	let chartElement: HTMLElement | undefined = undefined;
 	let chart: IChartApi | undefined;
@@ -192,7 +197,7 @@
 	function setChartOptions() {
 		if (!chart) return;
 		chart.applyOptions({
-			...$lightweightChartsTheme,
+			...$resolvedLightweightChartsTheme,
 			autoSize: true
 		});
 	}
@@ -241,7 +246,7 @@
 
 	$: if (chartElement && trades.length > 0 && selectedPair && !chart) setupChart();
 	$: if (chart && chartData) updateChartData();
-	$: if (chart && $lightweightChartsTheme) setChartOptions();
+	$: if (chart) setChartOptions();
 
 	onMount(() => {
 		if (trades.length > 0 && selectedPair) setupChart();
diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
index 6edb2d906d..6b7abf2e8f 100644
--- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
+++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
 	import type { Readable } from 'svelte/store';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
 	import LightweightChart from './LightweightChart.svelte';
 	import type { CreateQueryResult } from '@tanstack/svelte-query';
 	import type { IChartApi, UTCTimestamp } from 'lightweight-charts';
@@ -11,7 +12,7 @@
 	export let timeTransform: (data: T) => UTCTimestamp;
 	// eslint-disable-next-line no-undef
 	export let valueTransform: (data: T) => number;
-	export let lightweightChartsTheme: Readable<Record<string, unknown>>;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
 
 	$: data = transformAndSortData($query.data ?? [], {
 		valueTransform,
diff --git a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
index bd7bb44801..44bba0bab7 100644
--- a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
@@ -4,9 +4,11 @@
 	import { createQuery } from '@tanstack/svelte-query';
 	import TanstackLightweightChartLine from '../charts/TanstackLightweightChartLine.svelte';
 	import { QKEY_VAULT_CHANGES } from '../../queries/keys';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
+	import type { Readable } from 'svelte/store';
 
 	export let vault: RaindexVault;
-	export let lightweightChartsTheme;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
 
 	$: query = createQuery({
 		queryKey: [vault.id, QKEY_VAULT_CHANGES + vault.id, QKEY_VAULT_CHANGES],
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index c67824b2ae..cb0f623b5b 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -36,11 +36,13 @@
 	} from '@rainlanguage/orderbook';
 	import { useToasts } from '$lib/providers/toasts/useToasts';
 	import { useRaindexClient } from '$lib/hooks/useRaindexClient';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
+	import type { Readable } from 'svelte/store';
 
 	export let handleQuoteDebugModal: QuoteDebugModalHandler | undefined = undefined;
 	export let handleDebugTradeModal: DebugTradeModalHandler | undefined = undefined;
 	export let codeMirrorTheme;
-	export let lightweightChartsTheme;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
 	export let orderbookAddress: Address;
 	export let orderHash: Hex;
 	export let chainId: number;
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index c864c2e47b..301404dd55 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -11,7 +11,7 @@
 		type Hex,
 		type RaindexVault
 	} from '@rainlanguage/orderbook';
-	import type { ChartTheme } from '../../utils/lightweightChartsThemes';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
 	import { toHex } from 'viem';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { onDestroy } from 'svelte';
@@ -34,7 +34,7 @@
 	export let id: Hex;
 	export let orderbookAddress: Address;
 	export let chainId: number;
-	export let lightweightChartsTheme: Readable<ChartTheme> | undefined = undefined;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
 
 	/**
 	 * Required callback function when deposit action is triggered for a vault
diff --git a/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts b/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts
index 97a9dfb192..9b164258f2 100644
--- a/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts
+++ b/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts
@@ -17,6 +17,8 @@ export interface ChartTheme {
 	};
 }
 
+export type LightweightChartsTheme = ChartTheme | Record<string, unknown>;
+
 export const darkChartTheme = {
 	layout: {
 		textColor: 'white',