add state

rainlanguage · Jan 27, 2025 · 13feca5 · 13feca5
1 parent 70603dc
commit 13feca5
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 75 deletions.
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+	import type { Writable } from 'svelte/store';
+	import type { Config } from '@wagmi/core';
 	import DeploymentSteps from './DeploymentSteps.svelte';
 
 	export let dotrain: string;
 	export let key: string;
 	export let name: string;
 	export let description: string;
+	export let wagmiConfig: Writable<Config | undefined>;
+	export let wagmiConnected: Writable<boolean>;
 </script>
 
-<DeploymentSteps {dotrain} deployment={key} deploymentDetails={{ name, description }} />
+<DeploymentSteps {dotrain} deployment={key} deploymentDetails={{ name, description }} {wagmiConfig} {wagmiConnected}/>
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -22,6 +22,12 @@
 	import { getAccount, sendTransaction, type Config } from '@wagmi/core';
 	import { type Writable } from 'svelte/store';
 	import { goto } from '$app/navigation';
+	import { disableScrollHandling } from '$app/navigation';
+	import { onMount } from 'svelte';
+	onMount(async () => {
+		disableScrollHandling();
+		init(deployment);
+	});
 
 	enum DeploymentStepErrors {
 		NO_GUI = 'Error loading GUI',
@@ -50,8 +56,10 @@
 	};
 
 	export let dotrain: string;
-	export let deployment: string;
 	export let deploymentDetails: NameAndDescription;
+	export let deployment: string;
+	export let wagmiConfig: Writable<Config | undefined>;
+	export let wagmiConnected: Writable<boolean>;
 
 	let error: DeploymentStepErrors | null = null;
 	let errorDetails: string | null = null;
@@ -67,34 +75,32 @@
 	let stateFromUrl = $page.url.searchParams.get('state');
 	let addOrderError: DeploymentStepErrors | null = null;
 	let addOrderErrorDetails: string | null = null;
-	export let wagmiConfig: Writable<Config | undefined>;
-	export let wagmiConnected: Writable<boolean>;
 
-	$: if (deployment) {
-		handleDeploymentChange(deployment);
-	}
-
-	async function handleDeploymentChange(deployment: string) {
+	async function init(deployment: string) {
 		hasDeserialized = false;
 		if (!deployment || !dotrain) return;
 		error = null;
 		errorDetails = null;
 
-		try {
+		if (!stateFromUrl) {
 			gui = await DotrainOrderGui.chooseDeployment(dotrain, deployment);
-
-			if (gui) {
-				try {
-					selectTokens = await gui.getSelectTokens();
-				} catch (e) {
-					error = DeploymentStepErrors.NO_SELECT_TOKENS;
-					return (errorDetails = e instanceof Error ? e.message : 'Unknown error');
-				}
-			}
-		} catch (e) {
-			error = DeploymentStepErrors.DEPLOYMENT_ERROR;
-			return (errorDetails = e instanceof Error ? e.message : 'Unknown error');
+		} else {
+			console.log('deserializing state from url', stateFromUrl);
+			gui = await DotrainOrderGui.deserializeState(dotrain, stateFromUrl);
+			selectTokens = await gui.getSelectTokens();
+			await gui.getAllFieldValues();
+			await gui.getDeposits();
+			await gui.getCurrentDeployment();
+			console.log(gui.getAllFieldValues());
 		}
+		// if (gui) {
+		// 	try {
+		// 		selectTokens = await gui.getSelectTokens();
+		// 	} catch (e) {
+		// 		error = DeploymentStepErrors.NO_SELECT_TOKENS;
+		// 		return (errorDetails = e instanceof Error ? e.message : 'Unknown error');
+		// 	}
+		// }
 	}
 
 	function getAllFieldDefinitions() {
@@ -142,34 +148,46 @@
 		}
 	}
 
+	function initializeVaultIdArrays() {
+		if (!gui) return;
+		const deployment = gui.getCurrentDeployment();
+		inputVaultIds = new Array(deployment.deployment.order.inputs.length).fill('');
+		outputVaultIds = new Array(deployment.deployment.order.outputs.length).fill('');
+	}
+
 	$: if (selectTokens?.length === 0 || allTokensSelected) {
 		updateFields();
 	}
 
+	// $: if (selectTokens?.length && hasDeserialized) {
+	// 	handleSerializeState(gui);
+	// }
+
+	async function handleSerializeState(gui: DotrainOrderGui) {
+		try {
+			const serializedState = await gui.serializeState();
+			if (serializedState) {
+				$page.url.searchParams.set('state', serializedState);
+				goto(`?${$page.url.searchParams.toString()}`, { noScroll: true });
+			}
+		} catch (e) {
+			console.error('Failed to serialize GUI:', e);
+		}
+	}
+
 	async function updateFields() {
 		try {
+			console.log('updating fields');
 			error = null;
 			errorDetails = null;
+
 			await Promise.all([
 				initializeVaultIdArrays(),
 				getAllDepositFields(),
 				getAllFieldDefinitions(),
 				getAllTokenInputs(),
 				getAllTokenOutputs()
 			]);
-			console.log(hasDeserialized);
-			if (stateFromUrl && !hasDeserialized && gui) {
-				console.log('deserializing state from url', stateFromUrl);
-				try {
-					gui.deserializeState(stateFromUrl);
-					hasDeserialized = true;
-				} catch (e) {
-					error = DeploymentStepErrors.DESERIALIZE_FAILED;
-					errorDetails = e instanceof Error ? e.message : 'Unknown error';
-				}
-			} else {
-				hasDeserialized = true;
-			}
 		} catch (e) {
 			error = DeploymentStepErrors.DESERIALIZE_FAILED;
 			errorDetails = e instanceof Error ? e.message : 'Unknown error';
@@ -185,7 +203,7 @@
 		return chain;
 	}
 
-	async function handleAddOrderWagmi() {
+	async function handleAddOrder() {
 		try {
 			if (!gui || !$wagmiConfig) return;
 			const { address } = getAccount($wagmiConfig);
@@ -209,30 +227,6 @@
 			addOrderErrorDetails = e instanceof Error ? e.message : 'Unknown error';
 		}
 	}
-
-	function initializeVaultIdArrays() {
-		if (!gui) return;
-		const deployment = gui.getCurrentDeployment();
-		inputVaultIds = new Array(deployment.deployment.order.inputs.length).fill('');
-		outputVaultIds = new Array(deployment.deployment.order.outputs.length).fill('');
-	}
-
-	$: if (gui && hasDeserialized) {
-		console.log('serializing state', gui);
-		handleSerializeState(gui);
-	}
-
-	async function handleSerializeState(gui: DotrainOrderGui) {
-		try {
-			const serializedState = await DotrainOrderGui.serializeState(gui);
-			if (serializedState) {
-				$page.url.searchParams.set('state', serializedState);
-				goto(`?${$page.url.searchParams.toString()}`);
-			}
-		} catch (e) {
-			console.error('Failed to serialize GUI:', e);
-		}
-	}
 </script>
 
 <div>
@@ -264,7 +258,13 @@
 						/>
 						<div class="flex w-full flex-col gap-4">
 							{#each selectTokens as tokenKey}
-								<SelectToken {tokenKey} bind:gui bind:selectTokens bind:allTokensSelected />
+								<SelectToken
+									{tokenKey}
+									bind:gui
+									bind:selectTokens
+									bind:allTokensSelected
+									on:change={() => handleSerializeState(gui)}
+								/>
 							{/each}
 						</div>
 					</div>
@@ -274,15 +274,19 @@
 					{#if allFieldDefinitions.length > 0}
 						<div class="flex w-full flex-col items-center gap-24">
 							{#each allFieldDefinitions as fieldDefinition}
-								<FieldDefinitionInput {fieldDefinition} bind:gui />
+								<FieldDefinitionInput
+									{fieldDefinition}
+									bind:gui
+									on:change={() => handleSerializeState(gui)}
+								/>
 							{/each}
 						</div>
 					{/if}
 
 					{#if allDepositFields.length > 0}
 						<div class="flex w-full flex-col items-center gap-24">
 							{#each allDepositFields as deposit}
-								<DepositInput bind:deposit bind:gui />
+								<DepositInput bind:deposit bind:gui on:change={() => handleSerializeState(gui)} />
 							{/each}
 						</div>
 					{/if}
@@ -300,6 +304,7 @@
 										vault={input}
 										vaultIds={inputVaultIds}
 										bind:gui
+										on:change={() => handleSerializeState(gui)}
 									/>
 								{/each}
 							{/if}
@@ -312,14 +317,15 @@
 										vault={output}
 										vaultIds={outputVaultIds}
 										bind:gui
+										on:change={() => handleSerializeState(gui)}
 									/>
 								{/each}
 							{/if}
 						</div>
 					{/if}
 					<div class="flex flex-col gap-2">
 						{#if $wagmiConnected}
-							<Button size="lg" on:click={handleAddOrderWagmi}>Deploy Strategy with Wagmi</Button>
+							<Button size="lg" on:click={handleAddOrder}>Deploy Strategy with Wagmi</Button>
 						{:else}
 							<slot name="wallet-connect" />
 						{/if}

diff --git a/packages/ui-components/src/lib/components/deployment/FieldDefinitionInput.svelte b/packages/ui-components/src/lib/components/deployment/FieldDefinitionInput.svelte
@@ -11,9 +11,18 @@
 
 	export let fieldDefinition: GuiFieldDefinition;
 	export let gui: DotrainOrderGui;
+
 	let currentFieldDefinition: GuiPreset | undefined;
 	let inputValue: string | null = null;
 
+	$: if (gui) {
+		try {
+			currentFieldDefinition = gui.getFieldValue(fieldDefinition.binding);
+		} catch (e) {
+			currentFieldDefinition = undefined;
+		}
+	}
+
 	function handlePresetClick(preset: GuiPreset) {
 		inputValue = preset.value;
 		gui?.saveFieldValue(fieldDefinition.binding, {

diff --git a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { DeploymentPage } from '@rainlanguage/ui-components';
+	import { wagmiConfig, connected } from '$lib/stores/wagmi';
 
 	const { dotrain, key, name, description } = $page.data;
 
@@ -15,5 +16,5 @@
 {#if !dotrain || !key}
 	<div>Deployment not found. Redirecting to deployments page...</div>
 {:else}
-	<DeploymentPage {dotrain} {key} {name} {description} />
+	<DeploymentPage {dotrain} {key} {name} {description} {wagmiConfig} wagmiConnected={connected} />
 {/if}
diff --git a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.ts b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.ts
@@ -1,5 +1,6 @@
 import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
 
 export const load: PageLoad = async ({ fetch, params }) => {
 	try {
@@ -45,17 +46,9 @@ export const load: PageLoad = async ({ fetch, params }) => {
 				description
 			};
 		} else {
-			return {
-				dotrain: null,
-				strategyName: null,
-				deploymentKey: null
-			};
+			throw redirect(307, '/deploy');
 		}
 	} catch {
-		return {
-			dotrain: null,
-			strategyName: null,
-			deploymentKey: null
-		};
+		throw redirect(307, '/deploy');
 	}
 };