test and add inputRegistryUrl

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

@@ -0,0 +1,91 @@
+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 { component } = 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,22 +20,14 @@
 <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>
 <div class="flex w-full max-w-6xl flex-col gap-y-6">
 	<div class="text-4xl font-semibold text-gray-900 dark:text-white">Strategies</div>
 
-	<div class="flex flex-col rounded-3xl bg-primary-100 p-12 dark:bg-primary-900">
+	<div class="bg-primary-100 dark:bg-primary-900 flex flex-col rounded-3xl p-12">
 		<h1 class="text-xl font-semibold text-gray-900 dark:text-white">
 			Raindex empowers you to take full control of your trading strategies. All the strategies here
 			are non-custodial, perpetual, and automated strategies built with our open-source, DeFi-native