Merge pull request #1228 from rainlanguage/ser/deser-with-new-state-m…

…anagement

Review choices and sharing links for deployments

packages/orderbook/test/js_api/vault.test.ts

@@ -237,10 +237,7 @@ describe('Rain Orderbook JS API Package Bindgen Vault Tests', async function ()
 	it('should get deposit calldata for a vault', async () => {
 		await mockServer.forPost('/sg4').thenReply(200, JSON.stringify({ data: { order } }));
 
-		let calldata: string = await getVaultDepositCalldata(
-			vault1,
-			'500'
-		);
+		let calldata: string = await getVaultDepositCalldata(vault1, '500');
 		assert.equal(calldata.length, 330);
 	});
 

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

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import DeploymentSectionHeader from '../lib/components/deployment/DeploymentSectionHeader.svelte';
+
+describe('DeploymentSectionHeader', () => {
+	const defaultProps = {
+		title: 'Test Title',
+		description: 'Test Description',
+		open: false,
+		value: 'Test Value'
+	};
+
+	it('renders title and description', () => {
+		render(DeploymentSectionHeader, defaultProps);
+
+		expect(screen.getByText('Test Title')).toBeInTheDocument();
+		expect(screen.getByText('Test Description')).toBeInTheDocument();
+	});
+
+	it('shows value when not open', () => {
+		render(DeploymentSectionHeader, defaultProps);
+
+		expect(screen.getByTestId('header-value')).toBeInTheDocument();
+		expect(screen.getByText('Test Value')).toBeInTheDocument();
+	});
+
+	it('hides value when open', () => {
+		render(DeploymentSectionHeader, {
+			...defaultProps,
+			open: true
+		});
+
+		expect(screen.queryByTestId('header-value')).not.toBeInTheDocument();
+	});
+
+	it('hides value when value is undefined', () => {
+		render(DeploymentSectionHeader, {
+			...defaultProps,
+			value: undefined
+		});
+
+		expect(screen.queryByTestId('header-value')).not.toBeInTheDocument();
+	});
+});

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

@@ -575,7 +575,8 @@ describe('DeploymentSteps', () => {
 
 	it('shows deployment details when provided', async () => {
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
-			getSelectTokens: () => []
+			getSelectTokens: () => [],
+			getTokenInfo: vi.fn()
 		});
 
 		const deploymentDetails = {
@@ -606,7 +607,8 @@ describe('DeploymentSteps', () => {
 	it('shows select tokens section when tokens need to be selected', async () => {
 		const mockSelectTokens = ['token1', 'token2'];
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
-			getSelectTokens: () => mockSelectTokens
+			getSelectTokens: () => mockSelectTokens,
+			getTokenInfo: vi.fn()
 		});
 
 		render(DeploymentSteps, {
@@ -665,7 +667,8 @@ describe('DeploymentSteps', () => {
 				},
 				deposits: []
 			}),
-			getAllFieldDefinitions: () => []
+			getAllFieldDefinitions: () => [],
+			getTokenInfo: vi.fn()
 		});
 
 		render(DeploymentSteps, {
@@ -697,7 +700,8 @@ describe('DeploymentSteps', () => {
 				},
 				deposits: []
 			}),
-			getAllFieldDefinitions: () => []
+			getAllFieldDefinitions: () => [],
+			getTokenInfo: vi.fn()
 		});
 
 		render(DeploymentSteps, {

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

@@ -7,7 +7,9 @@ vi.mock('@rainlanguage/orderbook/js_api', () => ({
 	DotrainOrderGui: vi.fn().mockImplementation(() => ({
 		saveFieldValue: vi.fn(),
 		getFieldValue: vi.fn(),
-		isFieldPreset: vi.fn()
+		isFieldPreset: vi.fn(),
+		getAllFieldValues: vi.fn(),
+		getCurrentDeployment: vi.fn()
 	}))
 }));
 
@@ -31,7 +33,8 @@ describe('FieldDefinitionInput', () => {
 		const { getByText } = render(FieldDefinitionInput, {
 			props: {
 				fieldDefinition: mockFieldDefinition,
-				gui: mockGui
+				gui: mockGui,
+				open: true
 			}
 		});
 
@@ -43,7 +46,8 @@ describe('FieldDefinitionInput', () => {
 		const { getByText } = render(FieldDefinitionInput, {
 			props: {
 				fieldDefinition: mockFieldDefinition,
-				gui: mockGui
+				gui: mockGui,
+				open: true
 			}
 		});
 
@@ -55,7 +59,8 @@ describe('FieldDefinitionInput', () => {
 		const { getByText } = render(FieldDefinitionInput, {
 			props: {
 				fieldDefinition: mockFieldDefinition,
-				gui: mockGui
+				gui: mockGui,
+				open: true
 			}
 		});
 
@@ -71,7 +76,8 @@ describe('FieldDefinitionInput', () => {
 		const { getByPlaceholderText } = render(FieldDefinitionInput, {
 			props: {
 				fieldDefinition: mockFieldDefinition,
-				gui: mockGui
+				gui: mockGui,
+				open: true
 			}
 		});
 
@@ -93,7 +99,8 @@ describe('FieldDefinitionInput', () => {
 		const { queryByText } = render(FieldDefinitionInput, {
 			props: {
 				fieldDefinition: fastExitFieldDef,
-				gui: mockGui
+				gui: mockGui,
+				open: true
 			}
 		});
 

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

@@ -11,7 +11,11 @@ describe('SelectToken', () => {
 		saveSelectToken: vi.fn(),
 		replaceSelectToken: vi.fn(),
 		isSelectTokenSet: vi.fn(),
-		getTokenInfo: vi.fn()
+		getTokenInfo: vi.fn().mockResolvedValue({
+			symbol: 'ETH',
+			decimals: 18,
+			address: '0x456'
+		})
 	} as unknown as DotrainOrderGui;
 
 	const mockProps: SelectTokenComponentProps = {
@@ -37,10 +41,17 @@ describe('SelectToken', () => {
 
 	it('calls saveSelectToken and updates token info when input changes', async () => {
 		const user = userEvent.setup();
-		const { getByRole } = render(SelectToken, mockProps);
+		const mockGuiWithNoToken = {
+			...mockGui,
+			getTokenInfo: vi.fn().mockResolvedValue(null)
+		} as unknown as DotrainOrderGui;
+		const { getByRole } = render(SelectToken, {
+			...mockProps,
+			gui: mockGuiWithNoToken
+		});
 		const input = getByRole('textbox');
 
-		await user.clear(input);
+		await userEvent.clear(input);
 		await user.type(input, '0x456');
 
 		await waitFor(() => {

packages/ui-components/src/__tests__/TokenInputOrOutput.test.ts → packages/ui-components/src/__tests__/TokenIOInput.test.ts

@@ -1,9 +1,9 @@
 import { render, fireEvent } from '@testing-library/svelte';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import TokenInputOrOutput from '../lib/components/deployment/TokenInputOrOutput.svelte';
+import TokenIOInput from '../lib/components/deployment/TokenIOInput.svelte';
 import type { ComponentProps } from 'svelte';
 
-export type TokenInputOrOutputComponentProps = ComponentProps<TokenInputOrOutput>;
+export type TokenIOInputComponentProps = ComponentProps<TokenIOInput>;
 
 describe('TokenInput', () => {
 	const mockInput = {
@@ -23,37 +23,37 @@ describe('TokenInput', () => {
 		decimals: 18
 	};
 
-	const mockProps: TokenInputOrOutputComponentProps = {
+	const mockProps: TokenIOInputComponentProps = {
 		i: 0,
 		label: 'Input',
 		vault: mockInput,
 		vaultIds: ['vault1'],
 		gui: mockGui
-	} as unknown as TokenInputOrOutputComponentProps;
+	} as unknown as TokenIOInputComponentProps;
 
 	beforeEach(() => {
 		vi.clearAllMocks();
 		mockGui.getTokenInfo = vi.fn().mockResolvedValue(mockTokenInfo);
 	});
 
 	it('renders with correct label and no token symbol', () => {
-		const { getByText } = render(TokenInputOrOutput, mockProps);
+		const { getByText } = render(TokenIOInput, mockProps);
 		expect(getByText('Input 1')).toBeInTheDocument();
 	});
 
 	it('renders input field with correct placeholder', () => {
-		const { getByPlaceholderText } = render(TokenInputOrOutput, mockProps);
+		const { getByPlaceholderText } = render(TokenIOInput, mockProps);
 		const input = getByPlaceholderText('Enter vault ID');
 		expect(input).toBeInTheDocument();
 	});
 
 	it('displays the correct vault ID value', () => {
-		const { getByDisplayValue } = render(TokenInputOrOutput, mockProps);
+		const { getByDisplayValue } = render(TokenIOInput, mockProps);
 		expect(getByDisplayValue('vault1')).toBeInTheDocument();
 	});
 
 	it('calls setVaultId when input changes', async () => {
-		const { getByPlaceholderText } = render(TokenInputOrOutput, mockProps);
+		const { getByPlaceholderText } = render(TokenIOInput, mockProps);
 		const input = getByPlaceholderText('Enter vault ID');
 
 		await fireEvent.change(input, { target: { value: 'vault1' } });
@@ -65,8 +65,8 @@ describe('TokenInput', () => {
 		const propsWithoutGui = {
 			...mockProps,
 			gui: undefined
-		} as unknown as TokenInputOrOutputComponentProps;
-		const { getByPlaceholderText } = render(TokenInputOrOutput, propsWithoutGui);
+		} as unknown as TokenIOInputComponentProps;
+		const { getByPlaceholderText } = render(TokenIOInput, propsWithoutGui);
 		const input = getByPlaceholderText('Enter vault ID');
 
 		await fireEvent.change(input, { target: { value: 'newVault' } });
@@ -80,8 +80,8 @@ describe('TokenInput', () => {
 			vault: { token: { address: '0x789' } }
 		};
 		const { getByText } = render(
-			TokenInputOrOutput,
-			propsWithUnknownToken as unknown as TokenInputOrOutputComponentProps
+			TokenIOInput,
+			propsWithUnknownToken as unknown as TokenIOInputComponentProps
 		);
 		expect(getByText('Input 1')).toBeInTheDocument();
 	});
@@ -94,9 +94,9 @@ describe('TokenInput', () => {
 					key: '0x456'
 				}
 			}
-		} as unknown as TokenInputOrOutputComponentProps;
+		} as unknown as TokenIOInputComponentProps;
 
-		const { findByText } = render(TokenInputOrOutput, propsWithTokenKey);
+		const { findByText } = render(TokenIOInput, propsWithTokenKey);
 
 		const labelWithSymbol = await findByText('Input 1 (MOCK)');
 		expect(labelWithSymbol).toBeInTheDocument();

packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte

@@ -8,6 +8,7 @@
 		DepositAndAddOrderCalldataResult
 	} from '@rainlanguage/orderbook/js_api';
 	import type { Hex } from 'viem';
+	import { page } from '$app/stores';
 
 	export let dotrain: string;
 	export let key: string;
@@ -22,6 +23,7 @@
 		orderbookAddress: Hex;
 		chainId: number;
 	}) => void;
+	const stateFromUrl = $page.url.searchParams.get('state') || '';
 </script>
 
 <DeploymentSteps
@@ -32,4 +34,5 @@
 	{wagmiConnected}
 	{appKitModal}
 	{handleDeployModal}
+	{stateFromUrl}
 />

packages/ui-components/src/lib/components/deployment/DeploymentSectionHeader.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
+	import { fade } from 'svelte/transition';
+
 	export let title: string;
 	export let description: string = '';
+	export let open: boolean;
+	export let value: string | undefined;
 </script>
 
-<div class="max-w-2xl text-left">
-	<h1 class="break-words text-2xl font-bold text-gray-900 lg:text-3xl dark:text-white">{title}</h1>
-	<p class="lg:text-2xltext-gray-600 break-words text-xl dark:text-gray-400">
-		{description}
-	</p>
+<div class="flex w-full items-center justify-between gap-12 pr-6">
+	<div class="max-w-xl flex-grow text-left">
+		<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
+			{title}
+		</h1>
+		<p class="break-words text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
+			{description}
+		</p>
+	</div>
+
+	{#if !open && value}
+		<span data-testid="header-value" in:fade class="text-right text-base font-semibold lg:text-lg">
+			{value}
+		</span>
+	{/if}
 </div>