66 lines
2.1 KiB
Vue
66 lines
2.1 KiB
Vue
<template>
|
|
<!-- todo slippage
|
|
<row-bar :color="builder.color">
|
|
<div class="bg-grey-lighten-1" style="width:1em"> </div>
|
|
<div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
|
|
<div>
|
|
<v-text-field type="number" v-model="builder.slippage"
|
|
density="compact" hide-details class="mx-1 my-2" variant="outlined"
|
|
label="Max Slippage" min="0" max="100" step="0.01"
|
|
style="width: 9em;"
|
|
clearable
|
|
>
|
|
<template v-slot:append-inner>%</template>
|
|
</v-text-field>
|
|
</div>
|
|
</row-bar>
|
|
-->
|
|
</template>
|
|
|
|
<script setup>
|
|
import {builderDefaults, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
|
|
import {computed, onMounted, onUnmounted} from "vue";
|
|
import {DEFAULT_SLIPPAGE, newTranche} from "@/blockchain/orderlib.js";
|
|
|
|
const co = useChartOrderStore()
|
|
const props = defineProps(['order', 'builder'])
|
|
const emit = defineEmits(['update:builder'])
|
|
|
|
// Fields must be defined in order to be reactive
|
|
builderDefaults(props.builder, {valid: true, slippage: DEFAULT_SLIPPAGE,})
|
|
|
|
// slippage is expressed in % but the underlying builder value is an unadjusted ratio, so we convert by a factor of
|
|
// 100 in and out
|
|
const slippage = computed({
|
|
get() {console.log('slip',props.builder,props.builder.slippage); return props.builder.slippage*100},
|
|
set(v) {props.builder.slippage=v/100; emit('update:builder', props.builder)}
|
|
})
|
|
|
|
const MIN_SLIPPAGE = 0.01;
|
|
|
|
function buildTranches() {
|
|
let warnings = []
|
|
if (slippage.value < MIN_SLIPPAGE)
|
|
warnings.push('Slippage will be set to the minimum of 0.01%')
|
|
const slip = Math.max(slippage.value, MIN_SLIPPAGE)
|
|
return {
|
|
tranches: [newTranche({marketOrder: true, slippage: slip / 100})],
|
|
warnings,
|
|
}
|
|
}
|
|
|
|
onMounted(() => builderFuncs[props.builder.id] = buildTranches)
|
|
onUnmounted(() => delete builderFuncs[props.builder.id])
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.v-slider.v-input--vertical > .v-input__control) {
|
|
min-height: 5em !important;
|
|
}
|
|
//:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
|
|
// background-color: inherit !important;
|
|
//}
|
|
</style>
|
|
|