crypto-data/src/routes/dashboard/bybit/+page.svelte

<script lang="ts">
	import * as Tabs from '$lib/components/ui/tabs/index.js'
	import * as Form from '$lib/components/ui/form'
	import * as Select from '$lib/components/ui/select'
	import { Input } from '$lib/components/ui/input'
	import { superForm } from 'sveltekit-superforms'
	import { zod } from 'sveltekit-superforms/adapters'
	import {
		closePositionSchema,
		formSchema,
		percentSchema,
	} from './schema'
	import { Slider } from '$lib/components/ui/slider/index.js'
	import { JsonView } from '@zerodevx/svelte-json-view'
	import copy from 'copy-to-clipboard'
	import json5 from 'json5'
	import { toast } from 'svelte-sonner'

	let { data } = $props()

	const form = superForm(data.form, {
		resetForm: false,
		SPA: true,
		validators: zod(formSchema),
		onSubmit: ({}) => {
			copy(
				json5.stringify(
					{
						type: 'Flat',
						...$formData,
						qty: $formData.qty.toString(),
						takeProfit: $formData.takeProfit.toString(),
						stopLoss: $formData.stopLoss.toString(),
					},
					null,
					2,
				),
			)
			toast.success('Copied to Clipboard')
		},
	})

	const { form: formData, enhance } = form

	const percentForm = superForm(data.percentForm, {
		resetForm: false,
		SPA: true,
		validators: zod(percentSchema),
		onSubmit: ({}) => {
			copy(
				JSON.stringify(
					{
						type: 'Percent',
						...$percentFormData,
						entryPrice: '{trigger_entry_value}',
						qtyPercent: $percentFormData.qtyPercent.toString(),
						takeProfitPercent:
							$percentFormData.takeProfitPercent.toString(),
						stopLossPercent:
							$percentFormData.stopLossPercent.toString(),
					},
					null,
					2,
				),
			)
			toast.success('Copied to Clipboard')
		},
	})

	const { form: percentFormData, enhance: percentEnhance } =
		percentForm

	const closePositionForm = superForm(data.closePositionForm, {
		resetForm: false,
		SPA: true,
		validators: zod(closePositionSchema),
		onSubmit: ({}) => {
			copy(
				JSON.stringify(
					{
						type: 'Close Position',
						...$closePositionFormData,
						entryPrice: '{trigger_entry_value}',
					},
					null,
					2,
				),
			)
			toast.success('Copied to Clipboard')
		},
	})

	const {
		form: closePositionFormData,
		enhance: closePositionEnhance,
	} = closePositionForm
</script>

<div class="flex flex-1 flex-col items-center justify-center">
	<Tabs.Root value="percent" class="w-[400px]">
		<Tabs.List class="grid w-full grid-cols-2">
			<Tabs.Trigger value="flat">Flat</Tabs.Trigger>
			<Tabs.Trigger value="percent">Percent</Tabs.Trigger>
			<Tabs.Trigger value="close">Close</Tabs.Trigger>
		</Tabs.List>
		<Tabs.Content value="flat">
			<form method="POST" use:enhance class="grid grid-cols-2 gap-4">
				<Form.Field {form} name="key">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Key</Form.Label>
							<Input {...props} bind:value={$formData.key} />
						{/snippet}
					</Form.Control>
					<Form.Description>Key</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field {form} name="secret">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Secret</Form.Label>
							<Input {...props} bind:value={$formData.secret} />
						{/snippet}
					</Form.Control>
					<Form.Description>Secret</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field {form} name="symbol">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Symbol</Form.Label>
							<Input {...props} bind:value={$formData.symbol} />
						{/snippet}
					</Form.Control>
					<Form.Description>Symbol</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field {form} name="side">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Side</Form.Label>
							<Select.Root
								type="single"
								bind:value={$formData.side}
								name={props.name}>
								<Select.Trigger {...props}>
									{$formData.side ?? 'Select a side'}
								</Select.Trigger>
								<Select.Content>
									<Select.Item value={'Buy'} label={'Buy'} />
									<Select.Item value={'Sell'} label={'Sell'} />
								</Select.Content>
							</Select.Root>
						{/snippet}
					</Form.Control>
					<Form.Description>Side</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field {form} name="qty">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Quantity</Form.Label>
							<Input
								type="number"
								{...props}
								bind:value={$formData.qty} />
						{/snippet}
					</Form.Control>
					<Form.Description>Quantity</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field {form} name="takeProfit">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Take Profit</Form.Label>
							<Input
								type="number"
								{...props}
								bind:value={$formData.takeProfit} />
						{/snippet}
					</Form.Control>
					<Form.Description>Take Profit</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field {form} name="stopLoss">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Stop Loss</Form.Label>
							<Input
								type="number"
								{...props}
								bind:value={$formData.stopLoss} />
						{/snippet}
					</Form.Control>
					<Form.Description>Stop Loss</Form.Description>
					<Form.FieldErrors />
				</Form.Field>

				<Form.Button class="col-span-2">Copy</Form.Button>
			</form>
			<JsonView
				json={{
					type: 'Flat',
					...$formData,
					qty: $formData.qty.toString(),
					takeProfit: $formData.takeProfit.toString(),
					stopLoss: $formData.stopLoss.toString(),
				}} />
		</Tabs.Content>
		<Tabs.Content value="percent">
			<form
				method="POST"
				use:percentEnhance
				class="grid grid-cols-2 gap-4">
				<Form.Field form={percentForm} name="key">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Key</Form.Label>
							<Input {...props} bind:value={$percentFormData.key} />
						{/snippet}
					</Form.Control>
					<Form.Description>Key</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field form={percentForm} name="secret">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Secret</Form.Label>
							<Input
								{...props}
								bind:value={$percentFormData.secret} />
						{/snippet}
					</Form.Control>
					<Form.Description>Secret</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field form={percentForm} name="symbol">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Symbol</Form.Label>
							<Input
								{...props}
								bind:value={$percentFormData.symbol} />
						{/snippet}
					</Form.Control>
					<Form.Description>Symbol</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field form={percentForm} name="side">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Side</Form.Label>
							<Select.Root
								type="single"
								bind:value={$percentFormData.side}
								name={props.name}>
								<Select.Trigger {...props}>
									{$percentFormData.side ?? 'Select a side'}
								</Select.Trigger>
								<Select.Content>
									<Select.Item value={'Buy'} label={'Buy'} />
									<Select.Item value={'Sell'} label={'Sell'} />
								</Select.Content>
							</Select.Root>
						{/snippet}
					</Form.Control>
					<Form.Description>Side</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field form={percentForm} name="qtyPercent">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Quantity (%)</Form.Label>
							<Input
								type="number"
								{...props}
								step={0.1}
								bind:value={$percentFormData.qtyPercent} />
						{/snippet}
					</Form.Control>
					<Form.Description>Quantity</Form.Description>
					<Form.FieldErrors />
					<Slider
						type="single"
						bind:value={$percentFormData.qtyPercent}
						max={100}
						step={0.1} />
				</Form.Field>
				<Form.Field form={percentForm} name="takeProfitPercent">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Take Profit (%)</Form.Label>
							<Input
								type="number"
								{...props}
								step={0.1}
								bind:value={$percentFormData.takeProfitPercent} />
						{/snippet}
					</Form.Control>
					<Form.Description>Take Profit</Form.Description>
					<Form.FieldErrors />
					<Slider
						type="single"
						bind:value={$percentFormData.takeProfitPercent}
						max={100}
						step={0.1} />
				</Form.Field>
				<Form.Field form={percentForm} name="stopLossPercent">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Stop Loss (%)</Form.Label>
							<Input
								type="number"
								{...props}
								step={0.1}
								bind:value={$percentFormData.stopLossPercent} />
						{/snippet}
					</Form.Control>
					<Form.Description>Stop Loss</Form.Description>
					<Form.FieldErrors />
					<Slider
						type="single"
						bind:value={$percentFormData.stopLossPercent}
						max={100}
						step={0.1} />
				</Form.Field>

				<Form.Button class="col-span-2">Copy</Form.Button>
			</form>
			<JsonView
				json={{
					type: 'Percent',
					...$percentFormData,
					entryPrice: '{trigger_entry_value}',
					qtyPercent: $percentFormData.qtyPercent.toString(),
					takeProfitPercent:
						$percentFormData.takeProfitPercent.toString(),
					stopLossPercent:
						$percentFormData.stopLossPercent.toString(),
				}} />
		</Tabs.Content>
		<Tabs.Content value="close">
			<form
				method="POST"
				use:closePositionEnhance
				class="grid grid-cols-2 gap-4">
				<Form.Field form={closePositionForm} name="key">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Key</Form.Label>
							<Input {...props} bind:value={$percentFormData.key} />
						{/snippet}
					</Form.Control>
					<Form.Description>Key</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field form={closePositionForm} name="secret">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Secret</Form.Label>
							<Input
								{...props}
								bind:value={$percentFormData.secret} />
						{/snippet}
					</Form.Control>
					<Form.Description>Secret</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Field form={closePositionForm} name="symbol">
					<Form.Control>
						{#snippet children({ props })}
							<Form.Label>Symbol</Form.Label>
							<Input
								{...props}
								bind:value={$percentFormData.symbol} />
						{/snippet}
					</Form.Control>
					<Form.Description>Symbol</Form.Description>
					<Form.FieldErrors />
				</Form.Field>
				<Form.Button class="col-span-2">Copy</Form.Button>
			</form>
			<JsonView
				json={{
					type: 'Close Position',
					...$closePositionFormData,
					entryPrice: '{trigger_entry_value}',
				}} />
		</Tabs.Content>
	</Tabs.Root>
</div>