order status subscriptions

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>

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>

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',

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)
+})

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">

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>