add some more stuff

rainlanguage · Dec 21, 2024 · a9f5e3b · a9f5e3b
1 parent 2a19823
commit a9f5e3b
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 117 deletions.
diff --git a/packages/ui-components/src/lib/components/deployment/DepositDropdown.svelte b/packages/ui-components/src/lib/components/deployment/DepositDropdown.svelte
@@ -59,4 +59,13 @@
 			}}
 		/>
 	{/if}
+	<button
+		class="flex-1"
+		on:click={() => {
+			const deposits = gui.getDeposits();
+			console.log('deposits:', deposits);
+		}}
+	>
+		Get Deposits
+	</button>
 </div>
diff --git a/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/wizard/DeploymentSteps.svelte
@@ -4,7 +4,14 @@
 	import SelectToken from '../SelectToken.svelte';
 	import TokenInputButtons from './TokenInputButtons.svelte';
 	import TokenOutputButtons from './TokenOutputButtons.svelte';
-	import type { WizardStep } from '../../../types/wizardSteps';
+	import type {
+		WizardStep,
+		SelectTokenStep,
+		FieldStep,
+		DepositStep,
+		TokenInputStep,
+		TokenOutputStep
+	} from '../../../types/wizardSteps';
 
 	import type {
 		DotrainOrderGui,
@@ -24,14 +31,6 @@
 	export let allDeposits: GuiDeposit[];
 	export let inputVaultIds: string[];
 	export let outputVaultIds: string[];
-
-	$: totalSteps =
-		(selectTokens?.size || 0) +
-		(allFieldDefinitions?.length || 0) +
-		(allFieldDefinitions?.length || 0) +
-		(allDeposits?.length || 0) +
-		(useCustomVaultIds && (allTokenInputs.length > 0 || allTokenOutputs.length > 0) ? 1 : 0);
-
 	export let isLimitStrat: boolean;
 	export let useCustomVaultIds: boolean;
 	export let handleAddOrder: () => Promise<void>;
@@ -42,146 +41,109 @@
 		console.log(fieldValues);
 	}
 
-	type TokenProps = {
-		token: string;
-		gui: DotrainOrderGui;
-		selectTokens: SelectTokens;
-	};
-
-	type FieldProps = {
-		fieldDefinition: GuiFieldDefinition;
-		gui: DotrainOrderGui;
-	};
-
-	type DepositProps = {
-		deposit: GuiDeposit;
-		gui: DotrainOrderGui;
-		tokenInfos: TokenInfos;
-	};
-
-	type TokenInputProps = {
-		i: number;
-		input: Vault;
-		tokenInfos: TokenInfos;
-		inputVaultIds: string[];
-		gui: DotrainOrderGui;
-	};
-
-	type TokenOutputProps = {
-		i: number;
-		output: Vault;
-		tokenInfos: TokenInfos;
-		outputVaultIds: string[];
-		gui: DotrainOrderGui;
-	};
-
-	type WizardStep<T> = {
-		type: 'tokens' | 'fields' | 'deposits' | 'tokenInput' | 'tokenOutput';
-		data: T;
-	};
-
-	let steps: (
-		| WizardStep<TokenProps>
-		| WizardStep<FieldProps>
-		| WizardStep<DepositProps>
-		| WizardStep<TokenInputProps>
-		| WizardStep<TokenOutputProps>
-	)[] = [
+	let deploymentSteps: WizardStep[] = [
 		...(selectTokens.size > 0 && isLimitStrat
 			? Array.from(selectTokens.entries()).map(
-					([token]): WizardStep<TokenProps> => ({
+					([token]): SelectTokenStep => ({
 						type: 'tokens',
-						data: { token, gui, selectTokens } as {
-							token: string;
-							gui: DotrainOrderGui;
-							selectTokens: SelectTokens;
-						}
+						token,
+						gui,
+						selectTokens
 					})
 				)
 			: []),
 
 		...allFieldDefinitions.map(
-			(fieldDefinition): WizardStep<FieldProps> => ({
+			(fieldDefinition): FieldStep => ({
 				type: 'fields',
-				data: { fieldDefinition, gui } as {
-					fieldDefinition: GuiFieldDefinition;
-					gui: DotrainOrderGui;
-				}
+				fieldDefinition,
+				gui
 			})
 		),
 
 		...allDeposits.map(
-			(deposit): WizardStep<DepositProps> => ({
+			(deposit): DepositStep => ({
 				type: 'deposits',
-				data: { deposit, gui, tokenInfos } as {
-					deposit: GuiDeposit;
-					gui: DotrainOrderGui;
-					tokenInfos: TokenInfos;
-				}
+				deposit,
+				gui,
+				tokenInfos
 			})
 		),
 
 		...allTokenInputs.map(
-			(input, i): WizardStep<TokenInputProps> => ({
+			(input, i): TokenInputStep => ({
 				type: 'tokenInput',
-				data: { input, gui, tokenInfos, i, inputVaultIds } as {
-					input: Vault;
-					gui: DotrainOrderGui;
-					tokenInfos: TokenInfos;
-					i: number;
-					inputVaultIds: string[];
-				}
+				input,
+				gui,
+				tokenInfos,
+				i,
+				inputVaultIds
 			})
 		),
 		...allTokenOutputs.map(
-			(output, i): WizardStep<TokenOutputProps> => ({
+			(output, i): TokenOutputStep => ({
 				type: 'tokenOutput',
-				data: { output, gui, tokenInfos, i, outputVaultIds } as {
-					output: Vault;
-					gui: DotrainOrderGui;
-					tokenInfos: TokenInfos;
-					i: number;
-					outputVaultIds: string[];
-				}
+				output,
+				gui,
+				tokenInfos,
+				i,
+				outputVaultIds
 			})
 		)
 	];
 
-	let currentStep = 0;
+	let currentStep = deploymentSteps[0];
+	$: console.log('current step in parent', currentStep);
+	$: console.log('all steps in parent', deploymentSteps);
 
 	const nextStep = () => {
-		if (currentStep < totalSteps - 1) currentStep++;
+		if (deploymentSteps.indexOf(currentStep) < deploymentSteps.length - 1)
+			currentStep = deploymentSteps[deploymentSteps.indexOf(currentStep) + 1];
 	};
 
 	const previousStep = () => {
-		if (currentStep > 0) currentStep--;
+		if (deploymentSteps.indexOf(currentStep) > 0)
+			currentStep = deploymentSteps[deploymentSteps.indexOf(currentStep) - 1];
 	};
 </script>
 
 <div class="flex h-[80vh] flex-col justify-between">
 	<div class="text-lg text-gray-800 dark:text-gray-200">
-		Step {currentStep + 1} of {steps.length}
+		Step {deploymentSteps.indexOf(currentStep) + 1} of {deploymentSteps.length}
 	</div>
 
-	{#if steps[currentStep].type === 'tokens'}
-		<SelectToken {...steps[currentStep].data} />
-	{:else if steps[currentStep].type === 'fields'}
-		<FieldDefinitionButtons {...steps[currentStep].data} />
-	{:else if steps[currentStep].type === 'deposits'}
-		<DepositButtons {...steps[currentStep].data} />
-	{:else if steps[currentStep].type === 'tokenInput'}
-		<TokenInputButtons {...steps[currentStep].data} />
-	{:else if steps[currentStep].type === 'tokenOutput'}
-		<TokenOutputButtons {...steps[currentStep].data} />
+	{#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}
 
+
 	<div class="flex justify-between gap-4">
-		<Button class="flex-1" on:click={previousStep} disabled={currentStep === 0}>Previous</Button>
+		<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}
 
-		{#if currentStep === steps.length - 1}
+		{#if deploymentSteps.indexOf(currentStep) === deploymentSteps.length - 1}
 			<Button class="flex-1" on:click={handleAddOrder}>Add Order</Button>
 		{:else}
-			<Button class="flex-1" on:click={nextStep} disabled={currentStep === totalSteps - 1}>
+			<Button
+				class="flex-1"
+				on:click={nextStep}
+				disabled={deploymentSteps.indexOf(currentStep) === deploymentSteps.length - 1}
+			>
 				Next
 			</Button>
 		{/if}

diff --git a/packages/ui-components/src/lib/components/deployment/wizard/DepositButtons.svelte b/packages/ui-components/src/lib/components/deployment/wizard/DepositButtons.svelte
@@ -4,15 +4,20 @@
 		type GuiDeposit,
 		type TokenInfos
 	} from '@rainlanguage/orderbook/js_api';
-	import { Label, Input, Button } from 'flowbite-svelte';
+	import { Input, Button } from 'flowbite-svelte';
+	import type { StepType } from '../../../types/wizardSteps';
 
 	export let deposit: GuiDeposit;
 	export let gui: DotrainOrderGui;
 	export let tokenInfos: TokenInfos;
+	export let type: StepType;
 
 	let showCustomInput = false;
 
+	$: console.log('deposit', deposit);
+
 	function handlePresetClick(preset: string) {
+		console.log('PRESET CLICK');
 		gui?.saveDeposit(deposit.token_name, preset);
 		showCustomInput = false;
 		gui = gui;
@@ -38,10 +43,7 @@
 			{#each deposit.presets as preset}
 				<Button
 					size="lg"
-					color={gui?.isDepositPreset(deposit.token_name) &&
-					gui?.getDeposit(deposit.token_name) === preset
-						? 'blue'
-						: 'alternative'}
+					color={gui?.isDepositPreset(deposit.token_name) ? 'blue' : 'alternative'}
 					on:click={() => handlePresetClick(preset)}
 				>
 					{preset}

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

diff --git a/packages/ui-components/src/lib/components/deployment/wizard/TokenInputButtons.svelte b/packages/ui-components/src/lib/components/deployment/wizard/TokenInputButtons.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { Input } from 'flowbite-svelte';
 	import type { TokenInfos, Vault, DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+	import type { StepType } from '../../../types/wizardSteps';
 
 	export let i: number;
 	export let input: Vault;
 	export let tokenInfos: TokenInfos;
 	export let inputVaultIds: string[];
 	export let gui: DotrainOrderGui;
+	export let type: StepType;
 </script>
 
 <div class="flex flex-grow flex-col items-center">

diff --git a/packages/ui-components/src/lib/components/deployment/wizard/TokenOutputButtons.svelte b/packages/ui-components/src/lib/components/deployment/wizard/TokenOutputButtons.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { Label, Input } from 'flowbite-svelte';
 	import type { TokenInfos, Vault, DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+	import type { StepType } from '../../../types/wizardSteps';
 
 	export let i: number;
 	export let output: Vault;
 	export let tokenInfos: TokenInfos;
 	export let outputVaultIds: string[];
 	export let gui: DotrainOrderGui;
+	export let type: StepType;
 </script>
 
 <div class="flex items-center gap-2">

diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
@@ -59,6 +59,7 @@ 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';
 
 // Functions
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';

diff --git a/packages/ui-components/src/lib/types/wizardSteps.ts b/packages/ui-components/src/lib/types/wizardSteps.ts
@@ -1,8 +1,47 @@
-import type { DotrainOrderGui, GuiDeposit, GuiFieldDefinition, SelectTokens, TokenInfos, Vault } from '@rainlanguage/orderbook/js_api';
-
-export type WizardStep =
-    | { type: 'tokens'; data: { token: string; gui: DotrainOrderGui; selectTokens: SelectTokens } }
-    | { type: 'fields'; data: { fieldDefinition: GuiFieldDefinition; gui: DotrainOrderGui } }
-    | { type: 'deposits'; data: { deposit: GuiDeposit; gui: DotrainOrderGui; tokenInfos: TokenInfos } }
-    | { type: 'tokenInput'; data: { input: Vault; gui: DotrainOrderGui; tokenInfos: TokenInfos; i: number; inputVaultIds: string[] } }
-    | { type: 'tokenOutput'; data: { output: Vault; gui: DotrainOrderGui; tokenInfos: TokenInfos; i: number; outputVaultIds: string[] } };
+import type { DotrainOrderGui, SelectTokens, GuiFieldDefinition, GuiDeposit, TokenInfos, Vault } from "@rainlanguage/orderbook/js_api";
+
+export type StepType = 'tokens' | 'fields' | 'deposits' | 'tokenInput' | 'tokenOutput';
+
+export interface BaseWizardStep {
+	type: StepType;
+}
+
+export interface SelectTokenStep extends BaseWizardStep {
+	type: 'tokens';
+	token: string;
+	gui: DotrainOrderGui;
+	selectTokens: SelectTokens;
+}
+
+export interface FieldStep extends BaseWizardStep {
+	type: 'fields';
+	fieldDefinition: GuiFieldDefinition;
+	gui: DotrainOrderGui;
+}
+
+export interface DepositStep extends BaseWizardStep {
+	type: 'deposits';
+	deposit: GuiDeposit;
+	gui: DotrainOrderGui;
+	tokenInfos: TokenInfos;
+}
+
+export interface TokenInputStep extends BaseWizardStep {
+	type: 'tokenInput';
+	input: Vault;
+	gui: DotrainOrderGui;
+	tokenInfos: TokenInfos;
+	i: number;
+	inputVaultIds: string[];
+}
+
+export interface TokenOutputStep extends BaseWizardStep {
+	type: 'tokenOutput';
+	output: Vault;
+	gui: DotrainOrderGui;
+	tokenInfos: TokenInfos;
+	i: number;
+	outputVaultIds: string[];
+}
+
+export type WizardStep = TokenStep | FieldStep | DepositStep | TokenInputStep | TokenOutputStep;