order sharing

src/components/chart/ChartOrder.vue

@@ -77,6 +77,7 @@ const co = useChartOrderStore()
 
 const marketBuilder = newBuilder('MarketBuilder')
 
+console.log('chart order', props.order)
 const builders = computed(()=>props.order.builders.length > 0 ? props.order.builders : [marketBuilder])
 const tokenIn = computed(()=>props.order.buy ? co.quoteToken : co.baseToken)
 const tokenOut = computed(()=>props.order.buy ? co.baseToken : co.quoteToken)

src/components/chart/ChartPlaceOrder.vue

@@ -8,6 +8,12 @@
         </v-btn>
         <v-btn variant="text" prepend-icon="mdi-delete" v-if="co.orders.length>0"
                      :disabled="!orderChanged" @click="resetOrder">Reset</v-btn>
+        <v-btn id="share-btn" variant="text" prepend-icon="mdi-share" v-if="co.orders.length>0"
+               :disabled="sharing"
+               @click="shareOrder">{{sharing?'Preparing...':'Share'}}</v-btn>
+        <v-tooltip activator="#share-btn" text="Copied share link!" v-model="showSharedTooltip"
+                   :open-on-hover="false" :open-on-click="false"
+        />
       </template>
       <div class="overflow-y-auto">
         <needs-chart>
@@ -66,6 +72,7 @@ import NeedsChart from "@/components/NeedsChart.vue";
 import {PlaceOrderTransaction} from "@/blockchain/transaction.js";
 import {errorSuggestsMissingVault} from "@/misc.js";
 import {track} from "@/track.js";
+import {getShareUrl} from "@/share.js";
 
 const s = useStore()
 const co = useChartOrderStore()
@@ -196,6 +203,34 @@ async function doPlaceOrder() {
   }
 }
 
+const sharing = ref(false)
+const showSharedTooltip = ref(false)
+const showShareDialog = ref(false)
+const shareUrl = ref(null)
+
+function shareOrder() {
+  sharing.value = true
+  getShareUrl().then(url => {
+    shareUrl.value = url
+    sharing.value = false
+    navigator.permissions.query({name: "clipboard-write"}).then((permission) => {
+      const permitted = permission.state === "granted" || permission.state === "prompt"
+      if (!permitted) {
+        showShareDialog.value = true
+      } else {
+        navigator.clipboard.writeText(url)
+            .then(() => {
+              showSharedTooltip.value = true
+              setTimeout(() => showSharedTooltip.value = false, 3000)
+            })
+            .catch(() => {
+              showShareDialog.value = true
+            })
+      }
+    }).catch(() => null)
+  })
+}
+
 </script>
 
 <style lang="scss"> // NOT scoped

src/components/chart/DateBuilder.vue

@@ -177,10 +177,8 @@ function update(a, b, updateA, updateB) {
       a = maxA
   }
   _timeEndpoints.value = [a, b]
-  const newBuilder = {...props.builder}
-  newBuilder.timeA = a
-  newBuilder.timeB = b
-  emit('update:builder', newBuilder)
+  props.builder.timeA = a
+  props.builder.timeB = b
 }
 
 const flipped = computed(()=>{

src/components/chart/DiagonalBuilder.vue

@@ -98,7 +98,7 @@
 
 <script setup>
 import {applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
-import {sideColor} from "@/misc.js";
+import {sideColor, toPrecisionOrNull} from "@/misc.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
 import {computed, ref} from "vue";
@@ -210,7 +210,7 @@ const time1A = computed({
 })
 
 const price1A = computed({
-  get() { return _endpoints.value[0] === null ? null : _endpoints.value[0][1] },
+  get() { return toPrecisionOrNull(_endpoints.value[0] === null ? null : _endpoints.value[0][1], 6) },
   set(v) {
     const flatline0 = _endpoints.value[0];
     update(
@@ -232,7 +232,7 @@ const time1B = computed({
 })
 
 const price1B = computed({
-  get() { return _endpoints.value[0] === null ? null : _endpoints.value[0][3] },
+  get() { return toPrecisionOrNull(_endpoints.value[0] === null ? null : _endpoints.value[0][3], 6) },
   set(v) {
     const flatline0 = _endpoints.value[0];
     update(
@@ -254,7 +254,7 @@ const time2A = computed({
 })
 
 const price2A = computed({
-  get() { return _endpoints.value[1] === null ? null : _endpoints.value[1][1] },
+  get() { return toPrecisionOrNull(_endpoints.value[1] === null ? null : _endpoints.value[1][1], 6) },
   set(v) {
     const flatline = _endpoints.value[1];
     update(
@@ -276,7 +276,7 @@ const time2B = computed({
 })
 
 const price2B = computed({
-  get() { return _endpoints.value[1] === null ? null : _endpoints.value[1][3] },
+  get() { return toPrecisionOrNull(_endpoints.value[1] === null ? null : _endpoints.value[1][3], 6) },
   set(v) {
     const flatline = _endpoints.value[1];
     update(
@@ -289,10 +289,8 @@ const price2B = computed({
 function update(a, b) { // a and b are lines of two points
   if (!vectorEquals(props.builder.lineA, a) || !vectorEquals(props.builder.lineB, b)) {
     _endpoints.value = [flattenLine(a), flattenLine(b)]
-    const newBuilder = {...props.builder}
-    newBuilder.lineA = a
-    newBuilder.lineB = b
-    emit('update:builder', newBuilder)
+    props.builder.lineA = a
+    props.builder.lineB = b
   }
 }
 

src/components/chart/LimitBuilder.vue

@@ -21,7 +21,7 @@
           <td class="weight" style="vertical-align: bottom">{{ allocationTexts[higherIndex] }}</td>
         </tr>
         <tr v-for="i in innerIndexes" class="ml-5">
-          <td class="pl-5">{{ prices[i] }}</td>
+          <td class="pl-5">{{ toPrecision(prices[i],6) }}</td>
           <td class="weight">{{ allocationTexts[i] }}</td>
         </tr>
       </template>
@@ -54,6 +54,7 @@ import {computed, ref} from "vue";
 import {allocationText, HLine} from "@/charts/shape.js";
 import OneTimeHint from "@/components/OneTimeHint.vue";
 import {track} from "@/track.js";
+import {toPrecision, toPrecisionOrNull} from "@/misc.js";
 
 const s = useStore()
 const os = useOrderStore()
@@ -138,10 +139,8 @@ const priceEndpoints = computed({
 
 function update(a, b) {
     _priceEndpoints.value = [a, b]
-    const newBuilder = {...props.builder}
-    newBuilder.priceA = a
-    newBuilder.priceB = b
-    emit('update:builder', newBuilder)
+    props.builder.priceA = a
+    props.builder.priceB = b
 }
 
 const flipped = computed(()=>{
@@ -151,7 +150,7 @@ const flipped = computed(()=>{
 })
 
 const higherPrice = computed({
-  get() { return flipped.value ? priceA.value : priceB.value },
+  get() { return toPrecisionOrNull(flipped.value ? priceA.value : priceB.value, 6) },
   set(v) {
     if (flipped.value)
       priceA.value = v
@@ -172,9 +171,7 @@ const innerIndexes = computed(()=>{
 })
 
 const lowerPrice = computed({
-  get() {
-    return !flipped.value ? priceA.value : priceB.value
-  },
+  get() {return toPrecisionOrNull(!flipped.value ? priceA.value : priceB.value, 6)},
   set(v) {
     if (!flipped.value)
       priceA.value = v

src/components/chart/RungBuilder.vue

@@ -126,7 +126,7 @@ const balance100 = computed( {
 watchEffect(()=>{
   const rungs = props.builder.rungs
   // const prev = props.builder.valid
-  props.builder.valid = rungs >= 1 && endpoints.value[0] && (rungs < 2 || endpoints.value[1])
+  props.builder.valid = rungs >= 1 && endpoints.value[0] > 0 && (rungs < 2 || endpoints.value[1])
   // console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
 })
 
@@ -457,6 +457,8 @@ function deleteShapes() {
 
 if (!endpoints.value[0])
   shapeA.createOrDraw(); // initiate drawing mode
+else
+  adjustShapes()
 
 </script>
 

src/components/chart/Shared.vue

@@ -0,0 +1,14 @@
+<template>
+</template>
+
+<script setup>
+import {loadShareUrl} from "@/share.js";
+import router from "@/router/index.js";
+
+loadShareUrl()
+router.replace('/order')
+</script>
+
+<style scoped lang="scss">
+
+</style>