bugfixes

src/blockchain/wallet.js

@@ -278,16 +278,17 @@ export const PendingOrderState = {
 
 
 export async function pendOrder(order) {
-  console.log('order', JSON.stringify(order))
   const s = useStore()
-  useWalletStore().pendingOrders.splice(0,0,{
+  const pend = {
     id: uuid(),
     chainId: s.chainId,
     placementTime: Date.now()/1000,
     vault: s.vaults.length ? s.vaults[0] : null,
     state: PendingOrderState.Submitted,
     order
-  })
+  };
+  useWalletStore().pendingOrders.splice(0,0, pend)
+  console.log('pending order', pend.id, JSON.stringify(order))
   ensureVault()
 }
 
@@ -322,7 +323,7 @@ export function flushOrders(vault) {
     if (pend.vault === null)
       pend.vault = vault
     if (pend.state === PendingOrderState.Submitted) {
-      console.log('pending', pend)
+      console.log('flushing order', pend.id)
       pendOrderAsTransaction(pend)
       pend.state = PendingOrderState.Signing
       needsFlush = true
@@ -345,25 +346,29 @@ function pendOrderAsTransaction(pend) {
       pend.state = PendingOrderState.Rejected
       return null
     }
-    console.log('placing order', pend)
+    console.log('placing order', pend.id)
     const tx = await contract.placeDexorder(pend.order) // todo update status
     pend.tx = tx
+    pend.state = PendingOrderState.Sent
+    console.log(`order ${pend.id} sent transaction`, tx)
     tx.wait().then((txReceipt)=>{
+      console.log('mined order', pend.id, txReceipt)
+      pend.receipt = txReceipt
       const ws = useWalletStore();
-      ws.pendingOrders = ws.pendingOrders.filter((o)=>o!==pend)
+      ws.pendingOrders = ws.pendingOrders.filter((p)=>p!==pend)  // remove pend since order was mined
     })
     return tx
   },
   (e) => {
     if( e.info?.error?.code === 4001 ) {
-      console.log(`user rejected transaction`)
+      console.log(`wallet refused order`, pend.id)
       pend.state = PendingOrderState.Rejected
       return true  // returning true means we handled the error.  any other return value will dump to console.
     }
   })
 }
 
-
+0
 export function pendTransaction(sender, errHandler) {
   const s = useStore()
   s.transactionSenders.push([sender,errHandler])
@@ -409,7 +414,9 @@ function doSendTransaction(sender, signer, errHandler) {
   sender(signer).then((tx)=>{
     if (tx!==null) {
       console.log('sent transaction', tx)
-      tx.wait().then((tr)=>console.log('tx receipt',tr))
+      tx.wait().then((tr)=>{
+        console.log('tx receipt',tr)
+      })
     }
   }).catch(async (e)=>{
     let dumpErr = true

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">
+        <suspense>
-          <span>
+          <span v-if="item.order.amountIsInput">
-            <token-amount :addr="item.order.tokenIn" :amount="item.filledIn" :raw="true"/>
+            <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">
+        <suspense>
-          <token-symbol :addr="item.order.tokenIn"/>
+          <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">
+        <suspense>
-          <span>
+          <span v-if="!item.order.amountIsInput">
-            <token-amount :addr="item.order.tokenOut" :amount="item.filledOut" :raw="true"/>
+            <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">
+        <suspense>
-          <token-symbol :addr="item.order.tokenOut"/>
+          <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">
+                  <suspense>
-                    <span>
+                    <span v-if="item.state > OrderState.Signing">
-                      <token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
+                      <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++)
+    // equal weighted
-      result.push(1 / r)
+    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++)
+    for (let i = 0; i < n; i++)
-      result.push((1 - s * (2 * i / (r - 1) - 1)) / r)
+      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">

src/router/index.js

@@ -11,7 +11,8 @@ const routes = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartPlaceOrder.vue'),
+        // component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartPlaceOrder.vue'),
+        component: () => import(/* webpackChunkName: "vaultview" */ '@/components/chart/ChartVault.vue'),
       },
       {
         path: '/order',

src/views/OrdersView.vue

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