Retain registry URLs in local storage

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

@@ -0,0 +1,83 @@
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { vi } from 'vitest';
+import InputRegistryUrl from '../lib/components/input/InputRegistryUrl.svelte';
+import userEvent from '@testing-library/user-event';
+
+describe('InputRegistryUrl', () => {
+	const mockPushState = vi.fn();
+	const mockReload = vi.fn();
+	const mockLocalStorageSetItem = vi.fn();
+
+	beforeEach(() => {
+		vi.stubGlobal('localStorage', {
+			setItem: mockLocalStorageSetItem
+		});
+
+		Object.defineProperty(window, 'location', {
+			value: {
+				pathname: '/test-path',
+				reload: mockReload
+			},
+			writable: true
+		});
+
+		window.history.pushState = mockPushState;
+
+		mockPushState.mockClear();
+		mockReload.mockClear();
+		mockLocalStorageSetItem.mockClear();
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it('should render input and button', () => {
+		render(InputRegistryUrl, { props: { newRegistryUrl: '' } });
+
+		const input = screen.getByPlaceholderText('Enter URL to raw strategy registry file');
+		const button = screen.getByText('Load Registry URL');
+
+		expect(input).toBeInTheDocument();
+		expect(button).toBeInTheDocument();
+	});
+
+	it('should bind input value to newRegistryUrl prop', async () => {
+		const screen = render(InputRegistryUrl, { props: { newRegistryUrl: '' } });
+
+		const input = screen.getByPlaceholderText('Enter URL to raw strategy registry file');
+		const testUrl = 'https://example.com/registry.json';
+
+		await userEvent.type(input, testUrl);
+
+		expect(input).toHaveValue(testUrl);
+	});
+
+	it('should handle registry URL loading when button is clicked', async () => {
+		const testUrl = 'https://example.com/registry.json';
+		render(InputRegistryUrl, { props: { newRegistryUrl: testUrl } });
+
+		const button = screen.getByText('Load Registry URL');
+		await fireEvent.click(button);
+
+		// Verify URL update
+		expect(mockPushState).toHaveBeenCalledWith({}, '', '/test-path?registry=' + testUrl);
+
+		// Verify page reload
+		expect(mockReload).toHaveBeenCalled();
+
+		// Verify localStorage update
+		expect(mockLocalStorageSetItem).toHaveBeenCalledWith('registry', testUrl);
+	});
+
+	it('should handle empty URL', async () => {
+		render(InputRegistryUrl, { props: { newRegistryUrl: '' } });
+
+		const button = screen.getByText('Load Registry URL');
+		await fireEvent.click(button);
+
+		expect(mockPushState).toHaveBeenCalledWith({}, '', '/test-path?registry=');
+		expect(mockReload).toHaveBeenCalled();
+		expect(mockLocalStorageSetItem).toHaveBeenCalledWith('registry', '');
+	});
+});

packages/ui-components/src/lib/components/input/InputRegistryUrl.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Button, Input } from 'flowbite-svelte';
+
+	export let newRegistryUrl: string;
+
+	const loadRegistryUrl = () => {
+		window.history.pushState({}, '', window.location.pathname + '?registry=' + newRegistryUrl);
+		window.location.reload();
+		localStorage.setItem('registry', newRegistryUrl);
+	};
+</script>
+
+<div class="flex w-full items-start gap-4">
+	<Input
+		id="strategy-url"
+		type="url"
+		placeholder="Enter URL to raw strategy registry file"
+		bind:value={newRegistryUrl}
+	/>
+	<Button class="text-nowrap" on:click={loadRegistryUrl}>Load Registry URL</Button>
+</div>

packages/ui-components/src/lib/index.ts

@@ -63,7 +63,7 @@ export { default as InputTokenAmount } from './components/input/InputTokenAmount
 export { default as WalletConnect } from './components/wallet/WalletConnect.svelte';
 export { default as StrategyShortTile } from './components/deployment/StrategyShortTile.svelte';
 export { default as DisclaimerModal } from './components/deployment/DisclaimerModal.svelte';
-
+export { default as InputRegistryUrl } from './components/input/InputRegistryUrl.svelte';
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
 export type {

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

@@ -1,24 +1,17 @@
 <script lang="ts">
-	import { PageHeader, StrategyShortTile } from '@rainlanguage/ui-components';
-	import { Button, Input, Toggle } from 'flowbite-svelte';
+	import { PageHeader, StrategyShortTile, InputRegistryUrl } from '@rainlanguage/ui-components';
+	import { Toggle } from 'flowbite-svelte';
 	import { page } from '$app/stores';
 
 	const { strategyDetails } = $page.data;
 
-	let newRegistryUrl = '';
-	let advancedMode = false;
-
-	const loadRegistryUrl = () => {
-		// add the registry url to the url params
-		window.history.pushState({}, '', window.location.pathname + '?registry=' + newRegistryUrl);
-		// reload the page
-		window.location.reload();
-	};
+	let newRegistryUrl = localStorage.getItem('registry') || '';
+	let advancedMode = localStorage.getItem('registry') ? true : false;
 </script>
 
 <PageHeader title={$page.data.name || 'Deploy'} pathname={$page.url.pathname}>
 	<svelte:fragment slot="actions">
-		<Toggle on:change={() => (advancedMode = !advancedMode)}>
+		<Toggle checked={advancedMode} on:change={() => (advancedMode = !advancedMode)}>
 			<span class="whitespace-nowrap">Advanced mode</span>
 		</Toggle></svelte:fragment
 	>
@@ -27,15 +20,7 @@
 <div class="flex items-start justify-end gap-4">
 	{#if advancedMode}
 		<div class="mb-12 flex w-2/3 flex-col items-start gap-4">
-			<div class="flex w-full items-start gap-4">
-				<Input
-					id="strategy-url"
-					type="url"
-					placeholder="Enter URL to raw strategy registry file"
-					bind:value={newRegistryUrl}
-				/>
-				<Button class="text-nowrap" on:click={loadRegistryUrl}>Load Registry URL</Button>
-			</div>
+			<InputRegistryUrl bind:newRegistryUrl />
 		</div>
 	{/if}
 </div>