rate limit DCA

src/components/chart/ChartOrder.vue

@@ -3,33 +3,13 @@
   <row-bar :color="color">
     <color-band :color="color"/>
     <div style="width: 100%" class="justify-start align-content-start">
-      <v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="order.amount" variant="outlined"
-                    density="compact"
-                    :hint="available" :persistent-hint="true"
-                    min="0"
-                    class="amount py-2" :color="color"
-                    :label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
-      >
-        <template #prepend>
-          <v-btn variant="outlined" :color="color" class="ml-3"
-              :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s"
-              @click="order.buy=!order.buy"/>
-        </template>
-        <template #prepend-inner>
-          <v-btn variant="text" text="max" class="px-0" size="small"
-                 :disabled="!maxAmount || order.amountIsTokenA===order.buy && !co.price" @click="setMax"/>
-        </template>
-        <template #append-inner>
-          <v-btn :text="order.amountIsTokenA?co.baseToken.s:co.quoteToken.s+' worth'"
-                 :color="color" variant="text" @click="toggleAmountToken"/>
-        </template>
-      </v-text-field>
+      <order-amount :order="props.order" :color="color"/>
       <template v-for="b in builders">
         <builder-factory :order="order" :builder="b"/>
       </template>
       <div class="my-3">
         <div v-if="order.builders.length===0">  <!--todo remove gralpha limitation of one builder-->
-          <v-tooltip text="Spread order across time" location="top">
+          <v-tooltip text="Up to 1000 equal parts spread across time" location="top">
             <template v-slot:activator="{ props }">
               <span v-bind="props">
                 <v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
@@ -50,6 +30,13 @@
               </span>
             </template>
           </v-tooltip>
+          <v-tooltip text="Up to 10 weighted parts spaced out in time" location="top">
+            <template v-slot:activator="{ props }">
+              <span v-bind="props">
+                <v-btn :color="color" variant="text" prepend-icon="mdi-reorder-vertical" @click="build(order,'DateBuilder')">Dates</v-btn>
+              </span>
+            </template>
+          </v-tooltip>
           <v-tooltip text="Coming Soon! Stoplosses and Takeprofits" location="top">
             <template v-slot:activator="{ props }">
               <span v-bind="props">
@@ -69,13 +56,14 @@
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
 import {builderFuncs, newBuilder, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {useOrderStore, useStore} from "@/store/store.js";
-import {computed, onUnmounted, onUpdated, ref, watchEffect} from "vue";
-import {lightenColor, lightenColor2, toPrecision} from "@/misc.js";
+import {computed, onUnmounted, onUpdated, watchEffect} from "vue";
+import {toPrecision} from "@/misc.js";
 import {useTheme} from "vuetify";
 import RowBar from "@/components/chart/RowBar.vue";
 import ColorBand from "@/components/chart/ColorBand.vue";
 import Color from "color";
 import {newOrder} from "@/blockchain/orderlib.js";
+import OrderAmount from "@/components/chart/OrderAmount.vue";
 
 const props = defineProps(['order'])
 const s = useStore()
@@ -199,55 +187,5 @@ const color = computed(()=>new Color(props.order.buy?theme.value.colors.success:
 // const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
 // const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
 
-const inToken = computed( ()=>props.order.buy ? co.quoteToken : co.baseToken )
-const maxAmount = computed(()=>{
-  const token = inToken.value;
-  if (!token)
-    return null
-  const balance = s.balances[token.a]
-  if( !balance )
-    return null
-  const divisor = os.amountIsTotal ? 1 : os.tranches
-  return balance / 10**token.d / divisor
-})
-const available = computed(()=>{
-  const max = maxAmount.value
-  return max === null ? '' : `Available: ${maxAmount.value} ${tokenIn.value.s}`
-})
-
-const lastMaxValue = ref(-1)
-
-function setMax() {
-  let amount = maxAmount.value
-  if (amount) {
-    const order = props.order
-    const price = co.price
-    if (order.amountIsTokenA===order.buy) {
-      if (order.buy)
-        amount /= price
-      else
-        amount *= price
-    }
-    amount = Number(amount.toPrecision(7))
-    lastMaxValue.value = amount
-    order.amount = amount
-  }
-}
-
-function toggleAmountToken() {
-  const order = props.order
-  order.amountIsTokenA=!order.amountIsTokenA
-  if (order.amount === lastMaxValue.value)
-    setMax()
-}
-
 </script>
 
-<style scoped lang="scss">
-.amount {
-  max-width: 30em;
-  div.v-field {
-    padding-left: 0;
-  }
-}
-</style>