add steps store

rainlanguage · Dec 23, 2024 · 43fa259 · 43fa259
1 parent 3356fa8
commit 43fa259
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 59 deletions.
diff --git a/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte
@@ -15,7 +15,7 @@
 	} from '@rainlanguage/orderbook/js_api';
 	import { Button } from 'flowbite-svelte';
 	import { getDeploymentSteps } from './getDeploymentSteps';
-	import deploymentStore from './deploymentStore';
+	import deploymentStepsStore from './deploymentStepsStore';
 	export let gui: DotrainOrderGui;
 
 	export let selectTokens: SelectTokens;
@@ -43,52 +43,54 @@
 		tokenInfos
 	);
 
-	deploymentStore.populateDeploymentSteps(deploymentSteps);
+	deploymentStepsStore.populateDeploymentSteps(deploymentSteps);
 
-	$: console.log('DEPLOYMENT STEPS', $deploymentStore.deploymentSteps);
+	$: console.log($deploymentStepsStore);
 
-	let currentStep = deploymentSteps[0];
+	$: currentStep = 0;
 
 	const nextStep = () => {
-		if (deploymentSteps.indexOf(currentStep) < deploymentSteps.length - 1)
-			currentStep = deploymentSteps[deploymentSteps.indexOf(currentStep) + 1];
+		if (currentStep < deploymentSteps.length - 1) {
+			currentStep++;
+		}
 	};
 
 	const previousStep = () => {
-		if (deploymentSteps.indexOf(currentStep) > 0)
-			currentStep = deploymentSteps[deploymentSteps.indexOf(currentStep) - 1];
+		if (currentStep > 0) {
+			currentStep--;
+		}
 	};
 </script>
 
 <div class="flex h-[80vh] flex-col justify-between">
 	<div class="text-lg text-gray-800 dark:text-gray-200">
-		Step {deploymentSteps.indexOf(currentStep) + 1} of {deploymentSteps.length}
+		Step {currentStep + 1} of {deploymentSteps.length}
 	</div>
 
-	{#if currentStep.type === 'tokens'}
-		<SelectToken {...currentStep} />
-	{:else if currentStep.type === 'fields'}
-		<FieldDefinitionButtons {...currentStep} />
-	{:else if currentStep.type === 'deposits'}
-		<DepositButtons {...currentStep} />
-	{:else if currentStep.type === 'tokenInput'}
-		<TokenInputButtons {...currentStep} />
-	{:else if currentStep.type === 'tokenOutput'}
-		<TokenOutputButtons {...currentStep} />
+	{#if deploymentSteps[currentStep].type === 'tokens'}
+		<SelectToken {...deploymentSteps[currentStep]} />
+	{:else if deploymentSteps[currentStep].type === 'fields'}
+		<FieldDefinitionButtons {...deploymentSteps[currentStep]} {currentStep} />
+	{:else if deploymentSteps[currentStep].type === 'deposits'}
+		<DepositButtons {...deploymentSteps[currentStep]} />
+	{:else if deploymentSteps[currentStep].type === 'tokenInput'}
+		<TokenInputButtons {...deploymentSteps[currentStep]} />
+	{:else if deploymentSteps[currentStep].type === 'tokenOutput'}
+		<TokenOutputButtons {...deploymentSteps[currentStep]} />
 	{/if}
 
 	<div class="flex justify-between gap-4">
-		{#if deploymentSteps.indexOf(currentStep) > 0}
+		{#if currentStep > 0}
 			<Button class="flex-1" on:click={previousStep}>Previous</Button>
 		{/if}
 
-		{#if deploymentSteps.indexOf(currentStep) === deploymentSteps.length - 1}
+		{#if currentStep === deploymentSteps.length - 1}
 			<Button class="flex-1" on:click={handleAddOrder}>Add Order</Button>
 		{:else}
 			<Button
 				class="flex-1"
 				on:click={nextStep}
-				disabled={deploymentSteps.indexOf(currentStep) === deploymentSteps.length - 1}
+				disabled={currentStep === deploymentSteps.length - 1}
 			>
 				Next
 			</Button>

diff --git a/packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte b/packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte
@@ -1,43 +1,43 @@
 <script lang="ts">
 	import { Input, Button } from 'flowbite-svelte';
 	import { DotrainOrderGui, type GuiFieldDefinition } from '@rainlanguage/orderbook/js_api';
-	import deploymentStore from './deploymentStore';
+	import deploymentStepsStore from './deploymentStepsStore';
 
 	export let fieldDefinition: GuiFieldDefinition;
 	export let gui: DotrainOrderGui;
-	export let step;
+	export let currentStep: number;
 
-	const fieldDefinitionSteps = $deploymentStore.deploymentSteps.filter(
-		(step) => step.type === 'fields'
-	);
-	const currentFieldDefinitionStep = fieldDefinitionSteps.find(
-		(step) => step.fieldDefinition.binding === fieldDefinition.binding
-	);
-
-	$: console.log('curent field def step', currentFieldDefinitionStep);
-	$: console.log('field def steps', fieldDefinitionSteps);
 	let showCustomInput = false;
 
 	function handlePresetClick(presetId: string) {
 		gui?.saveFieldValue(fieldDefinition.binding, {
 			isPreset: true,
 			value: presetId
 		});
-		const fieldValues = gui.getAllFieldValues();
-		const thisFieldValue = fieldValues.find((val) => val.binding === fieldDefinition.binding);
-		deploymentStore.updateDeploymentStep({
-			...currentFieldDefinitionStep,
-			fieldDefinition: {
-				...currentFieldDefinitionStep.fieldDefinition,
-				value: thisFieldValue?.value
-			}
+		const thisFieldValue = gui.getFieldValue(fieldDefinition.binding);
+
+		deploymentStepsStore.updateDeploymentStep(currentStep, {
+			...$deploymentStepsStore[currentStep],
+			fieldValue: thisFieldValue
 		});
-		console.log('this field value', thisFieldValue);
 
 		showCustomInput = false;
 		gui = gui;
 	}
 
+	function handleCustomInputChange(value: string) {
+		gui?.saveFieldValue(fieldDefinition.binding, {
+			isPreset: false,
+			value: value
+		});
+		const thisFieldValue = gui.getFieldValue(fieldDefinition.binding);
+
+		deploymentStepsStore.updateDeploymentStep(currentStep, {
+			...$deploymentStepsStore[currentStep],
+			fieldValue: thisFieldValue
+		});
+	}
+
 	function handleCustomClick() {
 		showCustomInput = true;
 		gui?.saveFieldValue(fieldDefinition.binding, {
@@ -88,18 +88,15 @@
 		{/if}
 	</div>
 	{#if fieldDefinition.binding !== 'is-fast-exit'}
-		{#if !gui?.isFieldPreset(fieldDefinition.binding)}
+		{#if !gui?.isFieldPreset(fieldDefinition.binding) || showCustomInput}
 			<div class="mt-8 w-full max-w-md">
 				<Input
 					class="text-center text-lg"
 					size="lg"
 					placeholder="Enter custom value"
-					on:change={({ currentTarget }) => {
+					on:input={({ currentTarget }) => {
 						if (currentTarget instanceof HTMLInputElement) {
-							gui?.saveFieldValue(fieldDefinition.binding, {
-								isPreset: false,
-								value: currentTarget.value
-							});
+							handleCustomInputChange(currentTarget.value);
 						}
 					}}
 				/>

diff --git a/...ents/deployment/wizard/deploymentStore.ts → ...deployment/wizard/deploymentStepsStore.ts b/...ents/deployment/wizard/deploymentStore.ts → ...deployment/wizard/deploymentStepsStore.ts
@@ -1,24 +1,26 @@
 import { writable } from 'svelte/store';
 import type { WizardStep } from '../../../types/wizardSteps';
 
-const initialState: {
-	deploymentSteps: WizardStep[];
-} = {
-	deploymentSteps: [],
+const initialState: WizardStep[] = []
 
-};
-
-const deploymentStore = () => {
+const deploymentStepsStore = () => {
 	const { subscribe, set, update } = writable(initialState);
     const reset = () => set(initialState);
+
     // For getting an array of steps from the various input types (deposit, token, vault)
 	const populateDeploymentSteps = (steps: WizardStep[]) => {
-		set({ deploymentSteps: steps });
+		update(() => ( steps ));
 	};
+
     // For adding a property (binding) to the current step
-	const updateDeploymentStep = (step: WizardStep) => {
-		update((state) => ({ ...state, step }));
+	const updateDeploymentStep = (index: number, updatedStep: WizardStep) => {
+        update((state) => {
+            const newSteps = [...state];
+            newSteps[index] = updatedStep;
+            return newSteps
+        });
 	};
+
 	return {
 		subscribe,
 		reset,
@@ -27,4 +29,4 @@ const deploymentStore = () => {
 	};
 };
 
-export default deploymentStore();
+export default deploymentStepsStore();