fill notifications and chart autoupdate

src/blockchain/uniswap.js

@@ -31,7 +31,7 @@ export function uniswapV3PoolAddress(chainId, tokenAddrA, tokenAddrB, fee) {
 
 export function uniswapV3AveragePrice(amountIn, amountOut, fee) {
     if (amountIn === 0n || amountOut === 0n) return null
-    const fmtX18 = {decimals: 18, width: 256, signed: false};
+    const fmtX18 = {decimals: 18, width: 512, signed: false};
     let result = FixedNumber.fromValue(amountOut, 0, fmtX18)
         .div(FixedNumber.fromValue(amountIn, 0, fmtX18)).toUnsafeFloat()
     result /= (1 - fee / 1_000_000) // adjust for pool fee

src/charts/ordershapes.js

@@ -13,14 +13,12 @@ export class OrderShapes {
     }
 
     update(orderStatus) {
-        // todo delete old shapes
         for (const old of this.trancheShapes)
             old.delete()
         this.status = orderStatus
         this.trancheShapes = [];
         for (let i = 0; i < orderStatus.trancheStatus.length; i++)
             this.trancheShapes.push(new TrancheShapes(this.symbol, this.status, i));
-        // todo TV shape group
     }
 
     show() {for (const t of this.trancheShapes) t.show();}

src/components/Status.vue

@@ -373,6 +373,10 @@ const orders = computed(()=>{
   }
   result.sort((a,b)=>b.startTime-a.startTime)
   // console.log('orders', result)
+  for( const st of result ) {
+    if( st.id in orderShapes )
+      orderShapes[st.id].update(st)
+  }
   return result
 })
 

src/notify.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright ©2024 Dexorder LLC. All Rights Reserved.
+ */
+
+import {getToken} from "@/blockchain/token.js";
+
+let native = false // whether native browser notifications are allowed
+
+Notification.requestPermission()
+  .then(permission => {
+    console.log(`notification permission: ${permission}`);
+    native = permission === 'granted'
+  })
+  .catch(error => {
+    console.error(`notification permission error: ${error}`);
+    native = false;
+  });
+
+
+export function notify(title, message=null) {
+    if (native) {
+        const options = {
+            renotify: true,
+            tag: title,
+        }
+        if (message!==null)
+            options.body = message
+        new Notification(title, options)
+    }
+    console.log('notify:', title, message)
+}
+
+
+export async function notifyFillEvent(chainId, status, trancheIndex, fill) {
+    let low = status.order.tokenIn
+    let high = status.order.tokenOut
+    if (high<low)
+        [high, low] = [low, high]
+    const baseAddr = status.order.inverted ? high : low
+    const quoteAddr = status.order.inverted ? low : high
+    const buy = status.order.tokenIn === quoteAddr
+    const [base, quote] = await Promise.all([getToken(chainId, baseAddr), getToken(chainId, quoteAddr)]);
+    const baseAmount = (buy ? fill.filledOut : fill.filledIn) * 10**-base.d
+    const quoteAmount = (buy ? fill.filledIn : fill.filledOut) * 10**-quote.d
+    const average = quoteAmount / baseAmount
+    const title = `${buy?"Bought":"Sold"} ${baseAmount.toPrecision(5)} ${base.s}`;
+    const msg = title +
+        ` for ${quoteAmount.toPrecision(5)} ${quote.s} average ${average.toPrecision(5)} ${base.s}/${quote.s}}`;
+    // todo buy/sell arrow icon
+    notify(title)
+}

src/socket.js

@@ -3,6 +3,7 @@ import {useStore} from "@/store/store.js";
 import {flushOrders} from "@/blockchain/wallet.js";
 import {parseElaboratedOrderStatus} from "@/blockchain/orderlib.js";
 import { DataFeed } from "./charts/datafeed";
+import {notify, notifyFillEvent} from "@/notify.js";
 
 export const socket = io(import.meta.env.VITE_WS_URL || undefined, {transports: ["websocket"]})
 
@@ -103,12 +104,19 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
         let filledIn = 0n
         let filledOut = 0n
         const [activationTime, fills] = filled[i];
-        ts.fills = []
-        for (const fill of fills) {
+        const numOld = ts.fills.length;
+        for (let i=0; i<fills.length; i++) {
+            const fill = fills[i]
             const [tx, time, fi, fo, fee] = fill
             filledIn += fi
             filledOut += fo
-            ts.fills.push({tx, time, filledIn:fi, filledOut:fo, fee, filled:status.order.amountIsInput?fi:fo})
+            if (i<=numOld) {
+                // new fill detected
+                const f = {tx, time, filledIn: fi, filledOut: fo, fee, filled: status.order.amountIsInput ? fi : fo};
+                console.log('new fill', f)
+                notifyFillEvent(chainId, status, i, f).catch((e)=>console.log('fill notification error', e))
+                ts.fills.push(f)
+            }
         }
         ts.filledIn = filledIn
         ts.filledOut = filledOut