fees.js; DCABuilder gas warning

src/components/chart/DCABuilder.vue

@@ -11,6 +11,7 @@
         <div>
           <v-text-field label="Split into" type="number" variant="outlined"
                         aria-valuemin="1" aria-valuemax="100" min="1" max="1000" step="1"
+                        :hint="partsGasHint" :persistent-hint="true"
                         v-model="parts" v-auto-select class="parts mr-3">
             <template v-slot:append-inner>
               parts
@@ -45,16 +46,17 @@
 <script setup>
 import {builderDefaults, DEFAULT_SLIPPAGE, useChartOrderStore} from "@/orderbuild.js";
 import {allocationText, ShapeType} from "@/charts/shape.js";
-import {sideColor, vAutoSelect} from "@/misc.js";
+import {sideColor, SingletonCoroutine, toPrecision, vAutoSelect} from "@/misc.js";
 import {useStore} from "@/store/store.js";
 import {computed, ref, watchEffect} from "vue";
-import {createShape, deleteShapeId, widget} from "@/charts/chart.js";
+import {createShape, deleteShapeId, dragging, widget} from "@/charts/chart.js";
 import AbsoluteTimeEntry from "@/components/AbsoluteTimeEntry.vue";
 import BuilderPanel from "@/components/chart/BuilderPanel.vue";
 import {ohlcStart} from "@/charts/chart-misc.js";
 import Color from "color";
 import OrderAmount from "@/components/chart/OrderAmount.vue";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
+import {getFeeSchedule} from "@/fees.js";
 
 const s = useStore()
 const co = useChartOrderStore()
@@ -72,6 +74,7 @@ const defaultTranches = 10
 
 builderDefaults(props.builder, {
   startTime: s.clock, // todo relative 0
+  endTime: s.clock + defaultTranches * co.intervalSecs,
   interval: co.intervalSecs,
   tranches: defaultTranches,
   percentage: 100/defaultTranches,
@@ -116,6 +119,17 @@ const parts = computed({
   }
 })
 
+const sched = ref(null)
+const schedFetcher = new SingletonCoroutine(async (vault)=>sched.value = vault === null ? null : await getFeeSchedule(vault))
+
+const partsGasHint = computed(()=>{
+  if (sched.value === null) {
+    schedFetcher.invoke(s.vault)
+    return null
+  }
+  return toPrecision(Number(sched.value.gasFee) * parts.value / 1e18) + ' ETH gas fee'
+})
+
 const intervalIsTotal = ref(false)
 const displayedInterval = computed({
   get() {
@@ -165,7 +179,6 @@ const endTime = computed({
 
 const barStart = computed(()=>ohlcStart(startTime.value, props.builder.interval))
 const barEnd = computed(()=>ohlcStart(endTime.value, props.builder.interval))
-let shapeWidth = barEnd.value - barStart.value // NOT reactively computed. We compare in onPoints()
 
 function emitUpdatedPoints(a, b) {
   const updates = {}
@@ -234,7 +247,6 @@ function emitUpdate(changes) {
 
 const text = computed(()=>{
   const o = props.order
-  console.log('check text', o.buy, o.amountIsTokenA)
   return allocationText(o.buy, 1, o.amount, co.selectedSymbol.base.s,
       o.amountIsTokenA ? null : co.selectedSymbol.quote.s, parts.value, '\n')
 })
@@ -260,6 +272,14 @@ setProperties()
 
 watchEffect(setProperties)
 
+watchEffect(()=>{
+  const curBarStart = ohlcStart(s.clock, co.intervalSecs);
+  if (curBarStart > barStart.value && !dragging) { // check dragging late to ensure reactivity on bar start
+    const delta = curBarStart - props.builder.startTime
+    setPoints([{time: props.builder.startTime + delta}, {time: props.builder.endTime + delta}])
+  }
+})
+
 function deleteShapes() {
   deleteShapeId(shapeId)
 }
@@ -272,7 +292,7 @@ td.weight {
   padding-right: 1em;
 }
 .parts {
-  width: 8em;
+  width: 10em;
 }
 .interval {
   width: 22em;

src/components/chart/GasMeter.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+
+</style>