adding steps

packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte

@@ -4,14 +4,6 @@
 	import SelectToken from '../SelectToken.svelte';
 	import TokenInputButtons from './TokenInputButtons.svelte';
 	import TokenOutputButtons from './TokenOutputButtons.svelte';
-	import type {
-		WizardStep,
-		SelectTokenStep,
-		FieldStep,
-		DepositStep,
-		TokenInputStep,
-		TokenOutputStep
-	} from '../../../types/wizardSteps';
 
 	import type {
 		DotrainOrderGui,
@@ -22,6 +14,8 @@
 		Vault
 	} from '@rainlanguage/orderbook/js_api';
 	import { Button } from 'flowbite-svelte';
+	import { getDeploymentSteps } from './getDeploymentSteps';
+	import deploymentStore from './deploymentStore';
 	export let gui: DotrainOrderGui;
 
 	export let selectTokens: SelectTokens;
@@ -36,65 +30,24 @@
 	export let handleAddOrder: () => Promise<void>;
 	export let tokenInfos: TokenInfos;
 
-	$: if (currentStep) {
-		const fieldValues = gui.getAllFieldValues();
-		console.log(fieldValues);
-	}
-
-	let deploymentSteps: WizardStep[] = [
-		...(selectTokens.size > 0 && isLimitStrat
-			? Array.from(selectTokens.entries()).map(
-					([token]): SelectTokenStep => ({
-						type: 'tokens',
-						token,
-						gui,
-						selectTokens
-					})
-				)
-			: []),
+	let deploymentSteps = getDeploymentSteps(
+		selectTokens,
+		isLimitStrat,
+		allFieldDefinitions,
+		gui,
+		allDeposits,
+		allTokenInputs,
+		allTokenOutputs,
+		inputVaultIds,
+		outputVaultIds,
+		tokenInfos
+	);
 
-		...allFieldDefinitions.map(
-			(fieldDefinition): FieldStep => ({
-				type: 'fields',
-				fieldDefinition,
-				gui
-			})
-		),
+	deploymentStore.populateDeploymentSteps(deploymentSteps);
 
-		...allDeposits.map(
-			(deposit): DepositStep => ({
-				type: 'deposits',
-				deposit,
-				gui,
-				tokenInfos
-			})
-		),
-
-		...allTokenInputs.map(
-			(input, i): TokenInputStep => ({
-				type: 'tokenInput',
-				input,
-				gui,
-				tokenInfos,
-				i,
-				inputVaultIds
-			})
-		),
-		...allTokenOutputs.map(
-			(output, i): TokenOutputStep => ({
-				type: 'tokenOutput',
-				output,
-				gui,
-				tokenInfos,
-				i,
-				outputVaultIds
-			})
-		)
-	];
+	$: console.log('DEPLOYMENT STEPS', $deploymentStore.deploymentSteps);
 
 	let currentStep = deploymentSteps[0];
-	$: console.log('current step in parent', currentStep);
-	$: console.log('all steps in parent', deploymentSteps);
 
 	const nextStep = () => {
 		if (deploymentSteps.indexOf(currentStep) < deploymentSteps.length - 1)
@@ -124,14 +77,7 @@
 		<TokenOutputButtons {...currentStep} />
 	{/if}
 
-
 	<div class="flex justify-between gap-4">
-		<Button class="flex-1" on:click={() => {
-			const deposits = gui.getDeposits();
-			console.log('deposits:', deposits);
-		}}>
-			Get Deposits
-		</Button>
 		{#if deploymentSteps.indexOf(currentStep) > 0}
 			<Button class="flex-1" on:click={previousStep}>Previous</Button>
 		{/if}

packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte

@@ -1,22 +1,41 @@
 <script lang="ts">
 	import { Input, Button } from 'flowbite-svelte';
 	import { DotrainOrderGui, type GuiFieldDefinition } from '@rainlanguage/orderbook/js_api';
-	import type { StepType } from '../../../types/wizardSteps';
+	import deploymentStore from './deploymentStore';
 
 	export let fieldDefinition: GuiFieldDefinition;
 	export let gui: DotrainOrderGui;
-	export let type: StepType;
+	export let step;
 
+	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
+			}
+		});
+		console.log('this field value', thisFieldValue);
+
 		showCustomInput = false;
 		gui = gui;
-		console.log('FIELD VALS', gui.getAllFieldValues());
 	}
 
 	function handleCustomClick() {

packages/ui-components/src/lib/components/deployment/wizard/deploymentStore.ts

@@ -0,0 +1,30 @@
+import { writable } from 'svelte/store';
+import type { WizardStep } from '../../../types/wizardSteps';
+
+const initialState: {
+	deploymentSteps: WizardStep[];
+} = {
+	deploymentSteps: [],
+
+};
+
+const deploymentStore = () => {
+	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 });
+	};
+    // For adding a property (binding) to the current step
+	const updateDeploymentStep = (step: WizardStep) => {
+		update((state) => ({ ...state, step }));
+	};
+	return {
+		subscribe,
+		reset,
+		updateDeploymentStep,
+		populateDeploymentSteps
+	};
+};
+
+export default deploymentStore();

packages/ui-components/src/lib/components/deployment/wizard/getDeploymentSteps.ts

@@ -0,0 +1,76 @@
+import type { TokenOutputStep } from "$lib/types/wizardSteps";
+
+import type { DepositStep, FieldStep, TokenInputStep } from "$lib/types/wizardSteps";
+
+import type { SelectTokenStep } from "$lib/types/wizardSteps";
+
+import type { DotrainOrderGui, GuiFieldDefinition, TokenInfos, Vault , GuiDeposit} from '@rainlanguage/orderbook/js_api';
+import type { WizardStep } from '../../../types/wizardSteps';
+
+export const getDeploymentSteps = (
+	selectTokens: Map<string, string>,
+	isLimitStrat: boolean,
+	allFieldDefinitions: GuiFieldDefinition[],
+	gui: DotrainOrderGui,
+	allDeposits: GuiDeposit[],
+	allTokenInputs: Vault[],
+	allTokenOutputs: Vault[],
+	inputVaultIds: string[],
+	outputVaultIds: string[],
+	tokenInfos: TokenInfos
+) => {
+	const deploymentSteps: WizardStep[] = [
+		...(selectTokens.size > 0 && isLimitStrat
+			? Array.from(selectTokens.entries()).map(
+					([token]): SelectTokenStep => ({
+						type: 'tokens',
+						token,
+						gui,
+						selectTokens
+					})
+				)
+			: []),
+
+		...allFieldDefinitions.map(
+			(fieldDefinition): FieldStep => ({
+				type: 'fields',
+				fieldDefinition,
+				gui
+			})
+		),
+
+		...allDeposits.map(
+			(deposit): DepositStep => ({
+				type: 'deposits',
+				deposit,
+				gui,
+				tokenInfos
+			})
+		),
+
+		...allTokenInputs.map(
+			(input, i): TokenInputStep => ({
+				type: 'tokenInput',
+				input,
+				gui,
+				tokenInfos,
+				i,
+				inputVaultIds
+			})
+		),
+
+		...allTokenOutputs.map(
+			(output, i): TokenOutputStep => ({
+				type: 'tokenOutput',
+				output,
+				gui,
+					tokenInfos,
+					i,
+					outputVaultIds
+			})
+		)
+	];
+
+	return deploymentSteps;
+};
+

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

@@ -59,7 +59,14 @@ export { default as TokenOutputButtons } from './components/deployment/wizard/To
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
 export type { ConfigSource, OrderbookConfigSource, OrderbookRef } from './typeshare/config';
-export type { WizardStep, SelectTokenStep, FieldStep, DepositStep, TokenInputStep, TokenOutputStep } from './types/wizardSteps';
+export type {
+	WizardStep,
+	SelectTokenStep,
+	FieldStep,
+	DepositStep,
+	TokenInputStep,
+	TokenOutputStep
+} from './types/wizardSteps';
 
 // Functions
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';