bugfixes

src/components/CopyButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip :model-value="!error&&copied" :open-on-hover="false">
+  <v-tooltip :model-value="!error&&copied" :open-on-hover="false" location="top">
     <template v-slot:activator="{ props }">
       <span v-bind="props" style="cursor: pointer" @click="copy()">
         <v-btn v-bind="props" v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()"

src/components/PairPrice.vue

@@ -21,6 +21,7 @@ const s = useStore()
 const prefs = usePrefStore()
 
 async function token(obj) {
+  if (!obj) return null
   return obj.a ? obj : await getToken(s.chainId, obj)
 }
 

src/components/Pulse.vue

@@ -0,0 +1,55 @@
+<template>
+  <span ref="element">
+    <slot/>
+  </span>
+</template>
+
+<script setup>
+import {ref, watchEffect} from "vue";
+
+const props = defineProps(['touch', 'color'])
+
+const element = ref(null)
+let lastValue = props.touch
+
+function pulse() {
+  if (props.touch === lastValue) return
+  console.log(`value changed from ${lastValue} to ${props.touch}`)
+  lastValue = props.touch
+  const e = element.value;
+  console.log('element', e)
+  if (!e.classList.contains('pulse')) {
+    // add class for the first time
+    console.log('first pulse')
+    e.classList.add('pulse')
+  }
+  else {
+    // restart
+    console.log('reset pulse')
+    e.getAnimations().forEach((a) => {
+      console.log('animation', a)
+      a.cancel();
+      a.play();
+    })
+  }
+}
+
+watchEffect(pulse)
+</script>
+
+<style scoped lang="scss">
+.pulse {
+  animation: forwards;
+  animation-duration: 1s;
+  animation-name: pulse;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: gray;
+  }
+  100% {
+    background-color: white;
+  }
+}
+</style>

src/components/Status.vue

@@ -4,27 +4,31 @@
                   item-selectable="selectable" :show-select="false" :show-expand="true">
       <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
       <template v-slot:item.input="{ item }">
-        <suspense v-if="item.order.amountIsInput">
-          <span>
-            <token-amount :addr="item.order.tokenIn" :amount="item.filledIn" :raw="true"/>
+        <suspense>
+          <span v-if="item.order.amountIsInput">
+            <pulse :touch="item.filledIn">
+              <token-amount :addr="item.order.tokenIn" :amount="item.filledIn" :raw="true"/>
+            </pulse>
             /
             <token-amount :addr="item.order.tokenIn" :amount="item.order.amount"/>
           </span>
         </suspense>
-        <suspense v-if="!item.order.amountIsInput">
-          <token-symbol :addr="item.order.tokenIn"/>
+        <suspense>
+          <token-symbol :addr="item.order.tokenIn" v-if="!item.order.amountIsInput"/>
         </suspense>
       </template>
       <template v-slot:item.output="{ item }">
-        <suspense v-if="!item.order.amountIsInput">
-          <span>
-            <token-amount :addr="item.order.tokenOut" :amount="item.filledOut" :raw="true"/>
+        <suspense>
+          <span v-if="!item.order.amountIsInput">
+            <pulse :touch="item.filledOut">
+              <token-amount :addr="item.order.tokenOut" :amount="item.filledOut" :raw="true"/>
+            </pulse>
             /
             <token-amount :addr="item.order.tokenOut" :amount="item.order.amount"/>
           </span>
         </suspense>
-        <suspense v-if="item.order.amountIsInput">
-          <token-symbol :addr="item.order.tokenOut"/>
+        <suspense>
+          <token-symbol :addr="item.order.tokenOut" v-if="item.order.amountIsInput"/>
         </suspense>
       </template>
 <!--
@@ -87,9 +91,11 @@
               <tr v-for="(t, i) in item.order.tranches">
                 <td class="text-right">Tranche {{ i + 1 }}</td>
                 <td class="text-center w-33">
-                  <suspense v-if="item.state > OrderState.Signing">
-                    <span>
-                      <token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
+                  <suspense>
+                    <span v-if="item.state > OrderState.Signing">
+                      <pulse :touch="item.trancheFilled[i]">
+                        <token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
+                      </pulse>
                       /
                     </span>
                   </suspense>
@@ -136,6 +142,7 @@ import Btn from "@/components/Btn.vue"
 import {cancelAll, cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
 import {dateString, pairPriceAddr} from "@/misc.js";
 import {isOpen, OrderState} from "@/blockchain/orderlib.js";
+import Pulse from "@/components/Pulse.vue";
 
 const s = useStore()
 const ws = useWalletStore()

src/components/chart/ChartStatus.vue

@@ -12,7 +12,7 @@
 
 import ToolbarPane from "@/components/chart/ToolbarPane.vue";
 import NeedsProvider from "@/components/NeedsProvider.vue";
-import Orders from "@/components/Orders.vue";
+import Orders from "@/components/Status.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 </script>
 

src/components/chart/LimitBuilder.vue

@@ -285,24 +285,25 @@ const prices = computed(()=>{
 
 
 const weights = computed(() => {
-  const r = props.builder.rungs
+  const n = props.builder.rungs
   const s = -props.builder.skew
-  if (r === 1) return [1]
+  if (n === 1) return [1]
   const result = []
   if (s === 0) {
-    for (let i = 0; i < r; i++)
-      result.push(1 / r)
+    // equal weighted
+    for (let i = 0; i < n; i++)
+      result.push(1 / n)
   } else if (s === 1) {
     result.push(1)
-    for (let i = 1; i < r; i++)
+    for (let i = 1; i < n; i++)
       result.push(0)
   } else if (s === -1) {
-    for (let i = 1; i < r; i++)
+    for (let i = 1; i < n; i++)
       result.push(0)
     result.push(1)
   } else {
-    for (let i = 0; i < r; i++)
-      result.push((1 - s * (2 * i / (r - 1) - 1)) / r)
+    for (let i = 0; i < n; i++)
+      result.push((1 - s * (2 * i / (n - 1) - 1)) / n)
   }
   return result
 })

src/components/chart/ToolbarButton.vue

@@ -12,7 +12,8 @@ import {computed} from "vue";
 import {useRoute} from "vue-router";
 
 const props = defineProps(['icon', 'path', 'tooltip'])
-const isCurrent = computed(() => useRoute().path === props.path)
+const route = useRoute();
+const isCurrent = computed(() => route.path === props.path)
 </script>
 
 <style scoped lang="scss">