Re-enable vault balance chart disabled by Issue #1989

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`;

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 = `

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

@@ -1,32 +1,54 @@
-// 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, 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 { get, writable } from 'svelte/store';
+import type { ComponentProps } from 'svelte';
+import { props } from '../lib/__mocks__/MockComponent';
 
-// type VaultBalanceChartProps = ComponentProps<VaultBalanceChart>;
+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;
-// 	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 getBalanceChanges with correct arguments', async () => {
+	const queryClient = new QueryClient();
+	const mockVault: RaindexVault = {
+		id: 'vault1',
+		token: {
+			symbol: 'TKN'
+		},
+		getBalanceChanges: vi.fn().mockResolvedValue({
+			value: [],
+			error: null
+		})
+	} as unknown as RaindexVault;
+	let unsubscribe = () => {};
+	render(VaultBalanceChart, {
+		props: {
+			vault: mockVault,
+			lightweightChartsTheme: writable({})
+		} as VaultBalanceChartProps,
+		context: new Map([['$$_queryClient', queryClient]])
+	});
+
+	await waitFor(() => {
+		const mockProps = get(props) as MockChartProps;
+		expect(mockProps.priceSymbol).toBe('TKN');
+		unsubscribe = mockProps.query.subscribe(() => undefined);
+	});
 
-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);
+	await waitFor(() => {
+		expect(mockVault.getBalanceChanges).toHaveBeenCalledWith(1);
+	});
+	unsubscribe();
 });

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 = {

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(() => {

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();

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,

packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte

@@ -1,39 +1,33 @@
-<!-- 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';
+	import type { LightweightChartsTheme } from '../../utils/lightweightChartsThemes';
+	import type { Readable } from 'svelte/store';
 
-	// export let vault: RaindexVault;
-	// export let lightweightChartsTheme;
+	export let vault: RaindexVault;
+	export let lightweightChartsTheme: Readable<LightweightChartsTheme> | undefined = undefined;
 
-	// $: 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}
+/>

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;

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 { LightweightChartsTheme } 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<LightweightChartsTheme> | 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>

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',

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()