From 754fd383013bc8cf5a927a91198d10393a5bef64 Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Mon, 6 Nov 2023 23:49:08 -0400
Subject: [PATCH] order status subscriptions

---
 src/components/Orders.vue      | 27 +++++++++++++++++++++++++++
 src/layouts/default/AppBar.vue |  3 ++-
 src/router/index.js            |  8 ++++++++
 src/socket.js                  | 26 +++++++++++++++++++++++---
 src/views/OrdersView.vue       |  4 ++--
 src/views/TwapView.vue         | 11 +++++++++++
 6 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Orders.vue
 create mode 100644 src/views/TwapView.vue

diff --git a/src/components/Orders.vue b/src/components/Orders.vue
new file mode 100644
index 0000000..da757f2
--- /dev/null
+++ b/src/components/Orders.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-table>
+    <thead>
+      <tr>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="order in orders">
+        <td></td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store";
+
+const s = useStore()
+const orders = 0; // todo tim here
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index d379ea6..18a1601 100644
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@@ -9,7 +9,8 @@
     </v-app-bar-title>
 
     <v-btn icon="mdi-safe-square-outline" text="Vault" @click="$router.push('/vault')"></v-btn>
-    <v-btn icon="mdi-swap-horizontal-circle-outline" text="Orders" @click="$router.push('/orders')"></v-btn>
+    <v-btn icon="mdi-swap-horizontal-circle-outline" text="New Order" @click="$router.push('/twap')"></v-btn>
+    <v-btn icon="mdi-menu" text="Order Status" @click="$router.push('/orders')"></v-btn>
 
   </v-app-bar>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index 6e4dbc8..fb534b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,6 +22,14 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "ordersview" */ '@/views/OrdersView.vue'),
       },
+      {
+        path: '/twap',
+        name: 'TWAP',
+        // 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: "ordersview" */ '@/views/TwapView.vue'),
+      },
       {
         path: '/vault',
         name: 'Vault',
diff --git a/src/socket.js b/src/socket.js
index 30a65f5..d1e10e2 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -24,8 +24,10 @@ socket.on('welcome', async (data) => {
         onChainChanged(network.chainId)
 })
 
-socket.on('p', async (pool, price) => {
+socket.on('p', async (chainId, pool, price) => {
     const s = useStore()
+    if( s.chainId !== chainId )
+        return
     const prices = {}
     prices[pool] = price
     console.log('pool price', pool, price)
@@ -34,8 +36,10 @@ socket.on('p', async (pool, price) => {
     s.poolPrices = poolPrices
 })
 
-socket.on('vb', async (vault, balances) => {
+socket.on('vb', async (chainId, vault, balances) => {
     const s = useStore()
+    if( s.chainId !== chainId )
+        return
     console.log('vb', vault, balances)
     const vb = {}
     vb[vault] = JSON.parse(balances)
@@ -43,8 +47,10 @@ socket.on('vb', async (vault, balances) => {
     console.log('vault balances', vault, vb)
 })
 
-socket.on('vaults', (vaults)=>{
+socket.on('vaults', (chainId, owner, vaults)=>{
     const s = useStore()
+    if( s.chainId !== chainId || s.account !== owner )
+        return
     console.log('vaults', vaults)
     s.vaults = vaults
     if( vaults.length ) {
@@ -52,3 +58,17 @@ socket.on('vaults', (vaults)=>{
         flushOrders(vault)
     }
 })
+
+socket.on( 'o', (chainId, vault, orderIndex, status)=>{
+    const s = useStore()
+    if( s.chainId !== chainId )
+        return
+    console.log('o', chainId, vault, orderIndex, status)
+})
+
+socket.on( 'of', (chainId, vault, orderIndex, fills)=>{
+    const s = useStore()
+    if( s.chainId !== chainId )
+        return
+    console.log('of', chainId, vault, orderIndex, fills)
+})
diff --git a/src/views/OrdersView.vue b/src/views/OrdersView.vue
index 253c6aa..62fed4c 100644
--- a/src/views/OrdersView.vue
+++ b/src/views/OrdersView.vue
@@ -1,9 +1,9 @@
 <template>
-  <TimedOrder/>
+  <orders/>
 </template>
 
 <script setup>
-import TimedOrder from "@/components/TimedOrderEntry.vue";
+import Orders from "@/components/Orders.vue";
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/TwapView.vue b/src/views/TwapView.vue
new file mode 100644
index 0000000..4124a91
--- /dev/null
+++ b/src/views/TwapView.vue
@@ -0,0 +1,11 @@
+<template>
+  <timed-order/>
+</template>
+
+<script setup>
+import TimedOrder from "@/components/TimedOrderEntry.vue";
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+</style>