From 3356fa8dbd0a2f76190e73f5fd842ddf9e83eafb Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Mon, 23 Dec 2024 11:59:35 +0100
Subject: [PATCH] adding steps

---
 .../deployment/wizard/DeploymentSteps.svelte  |  86 ++--------
 .../wizard/FieldDefinitionButtons.svelte      |  25 ++-
 .../deployment/wizard/deploymentStore.ts      |  30 ++++
 .../deployment/wizard/getDeploymentSteps.ts   |  76 +++++++++
 packages/ui-components/src/lib/index.ts       |   9 +-
 .../src/lib/types/deploymentSteps.ts          | 156 +++++++++---------
 .../src/lib/types/wizardSteps.ts              |   9 +-
 7 files changed, 238 insertions(+), 153 deletions(-)
 create mode 100644 packages/ui-components/src/lib/components/deployment/wizard/deploymentStore.ts
 create mode 100644 packages/ui-components/src/lib/components/deployment/wizard/getDeploymentSteps.ts

diff --git a/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte
index 177e65b75..3c469daff 100644
--- a/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte
+++ b/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}
diff --git a/packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte b/packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte
index b4f81df15..078101eef 100644
--- a/packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte
+++ b/packages/ui-components/src/lib/components/deployment/wizard/FieldDefinitionButtons.svelte
@@ -1,12 +1,21 @@
 <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) {
@@ -14,9 +23,19 @@
 			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() {
diff --git a/packages/ui-components/src/lib/components/deployment/wizard/deploymentStore.ts b/packages/ui-components/src/lib/components/deployment/wizard/deploymentStore.ts
new file mode 100644
index 000000000..0f75de832
--- /dev/null
+++ b/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();
diff --git a/packages/ui-components/src/lib/components/deployment/wizard/getDeploymentSteps.ts b/packages/ui-components/src/lib/components/deployment/wizard/getDeploymentSteps.ts
new file mode 100644
index 000000000..ee64cfb25
--- /dev/null
+++ b/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;
+};
+
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 38ba47fe8..499585443 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/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';
diff --git a/packages/ui-components/src/lib/types/deploymentSteps.ts b/packages/ui-components/src/lib/types/deploymentSteps.ts
index c1949c118..00c17b7f9 100644
--- a/packages/ui-components/src/lib/types/deploymentSteps.ts
+++ b/packages/ui-components/src/lib/types/deploymentSteps.ts
@@ -1,82 +1,82 @@
 export type DeploymentStep = {
-  label: string;
-  type: 'tokens' | 'fields' | 'deposits' | 'vaults';
-  fields: any[];  // Changed from 'items' to 'fields'
-}
+	label: string;
+	type: 'tokens' | 'fields' | 'deposits' | 'vaults';
+	fields: any[]; // Changed from 'items' to 'fields'
+};
 
 // Example object:
 const exampleDeploymentSteps = {
-  selectTokens: {
-    label: "Select Tokens",
-    type: "tokens",
-    fields: [
-      { token: "USDC", address: "0x0000000000000000000000000000000000000000" },
-      { token: "WETH", address: "0x0000000000000000000000000000000000000000" }
-    ]
-  },
-  fieldDefinitions: {
-    label: "Field Values",
-    type: "fields",
-    fields: [
-      {
-        name: "Price",
-        binding: "price",
-        presets: [
-          { id: "preset1", name: "Market Price" },
-          { id: "preset2", name: "Custom Price" }
-        ]
-      },
-      {
-        name: "Amount",
-        binding: "amount",
-        presets: [
-          { id: "small", name: "Small" },
-          { id: "medium", name: "Medium" },
-          { id: "large", name: "Large" }
-        ]
-      }
-    ]
-  },
-  deposits: {
-    label: "Deposits",
-    type: "deposits",
-    fields: [
-      {
-        token_name: "USDC",
-        token: {
-          address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
-          name: "USD Coin",
-          symbol: "USDC",
-          decimals: 6
-        },
-        presets: ["100", "1000", "10000"]
-      }
-    ]
-  },
-  vaults: {
-    label: "Vault IDs",
-    type: "vaults",
-    fields: [
-      {
-        type: "input",
-        index: 0,
-        id: "1",
-        tokenInfo: {
-          name: "USD Coin",
-          symbol: "USDC",
-          decimals: 6
-        }
-      },
-      {
-        type: "output",
-        index: 0,
-        id: "2",
-        tokenInfo: {
-          name: "Wrapped Ether",
-          symbol: "WETH",
-          decimals: 18
-        }
-      }
-    ]
-  }
-};
\ No newline at end of file
+	selectTokens: {
+		label: 'Select Tokens',
+		type: 'tokens',
+		fields: [
+			{ token: 'USDC', address: '0x0000000000000000000000000000000000000000' },
+			{ token: 'WETH', address: '0x0000000000000000000000000000000000000000' }
+		]
+	},
+	fieldDefinitions: {
+		label: 'Field Values',
+		type: 'fields',
+		fields: [
+			{
+				name: 'Price',
+				binding: 'price',
+				presets: [
+					{ id: 'preset1', name: 'Market Price' },
+					{ id: 'preset2', name: 'Custom Price' }
+				]
+			},
+			{
+				name: 'Amount',
+				binding: 'amount',
+				presets: [
+					{ id: 'small', name: 'Small' },
+					{ id: 'medium', name: 'Medium' },
+					{ id: 'large', name: 'Large' }
+				]
+			}
+		]
+	},
+	deposits: {
+		label: 'Deposits',
+		type: 'deposits',
+		fields: [
+			{
+				token_name: 'USDC',
+				token: {
+					address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+					name: 'USD Coin',
+					symbol: 'USDC',
+					decimals: 6
+				},
+				presets: ['100', '1000', '10000']
+			}
+		]
+	},
+	vaults: {
+		label: 'Vault IDs',
+		type: 'vaults',
+		fields: [
+			{
+				type: 'input',
+				index: 0,
+				id: '1',
+				tokenInfo: {
+					name: 'USD Coin',
+					symbol: 'USDC',
+					decimals: 6
+				}
+			},
+			{
+				type: 'output',
+				index: 0,
+				id: '2',
+				tokenInfo: {
+					name: 'Wrapped Ether',
+					symbol: 'WETH',
+					decimals: 18
+				}
+			}
+		]
+	}
+};
diff --git a/packages/ui-components/src/lib/types/wizardSteps.ts b/packages/ui-components/src/lib/types/wizardSteps.ts
index de5678918..5162f33ef 100644
--- a/packages/ui-components/src/lib/types/wizardSteps.ts
+++ b/packages/ui-components/src/lib/types/wizardSteps.ts
@@ -1,4 +1,11 @@
-import type { DotrainOrderGui, SelectTokens, GuiFieldDefinition, GuiDeposit, TokenInfos, Vault } from "@rainlanguage/orderbook/js_api";
+import type {
+	DotrainOrderGui,
+	SelectTokens,
+	GuiFieldDefinition,
+	GuiDeposit,
+	TokenInfos,
+	Vault
+} from '@rainlanguage/orderbook/js_api';
 
 export type StepType = 'tokens' | 'fields' | 'deposits' | 'tokenInput' | 'tokenOutput';