cancel all on toolbar / disable

src/components/Status.vue

@@ -134,25 +134,24 @@
         </tr>
       </template>
     </v-data-table>
-    <btn icon="mdi-delete-alert" color="red" class="mx-3 mb-3" @click="cancelAll(vaultAddr)">Cancel All Orders</btn>
   </div>
 </template>
 
 <script setup>
 import LinePrice from "@/components/LinePrice.vue";
-
-const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
-const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
-const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
 import {FixedNumber} from "ethers";
 import {useStore} from "@/store/store";
 import {computed, defineAsyncComponent, ref} from "vue";
 import Btn from "@/components/Btn.vue"
-import {cancelAll, cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
-import {dateString, pairPriceAddr} from "@/misc.js";
+import {cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
+import {dateString} from "@/misc.js";
 import {isOpen, OrderState} from "@/blockchain/orderlib.js";
 import Pulse from "@/components/Pulse.vue";
 
+const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
+const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
+const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
+
 const s = useStore()
 const ws = useWalletStore()
 const props = defineProps(['vault'])

src/components/chart/ChartPlaceOrder.vue

@@ -1,6 +1,6 @@
 <template>
     <toolbar-pane title="Order">
-      <template v-slot:toolbar>
+      <template #toolbar>
 <!--        <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>-->
         <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
                :color="orderColor" v-if="co.orders.length>0" :disabled="!valid">

src/components/chart/ChartStatus.vue

@@ -1,5 +1,10 @@
 <template>
   <toolbar-pane title="Status" icon="mdi-format-list-bulleted-square">
+    <template #toolbar>
+      <v-btn variant="text" v-if="s.vault" prepend-icon="mdi-delete-alert" color="red"
+             @click="cancelAll(s.vault)" :disabled="!anyOrdersOpen"
+             text="Cancel All"/>
+    </template>
     <needs-signer>
       <orders/>
     </needs-signer>
@@ -11,6 +16,21 @@
 import ToolbarPane from "@/components/chart/ToolbarPane.vue";
 import Orders from "@/components/Status.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
+import {cancelAll} from "@/blockchain/wallet.js";
+import {useStore} from "@/store/store.js";
+import {computed} from "vue";
+import {isOpen} from "@/blockchain/orderlib.js";
+
+const s = useStore()
+
+const anyOrdersOpen = computed(()=>{
+  console.log('vo', s.vaultOrders)
+  for ( const order of Object.values(s.vaultOrders) )
+    if ( isOpen(order.state) )
+      return true
+  return false
+})
+
 </script>
 
 <style scoped lang="scss">

src/components/chart/RungBuilder.vue

@@ -72,12 +72,10 @@ const skew100 = computed( {
 
 // validity checks
 watchEffect(()=>{
-  const order = props.order
-  const builder = props.builder
-  props.builder.valid &&=
-      order && builder &&
-      builder.rungs >= 1 && valueA.value &&
-      (builder.rungs < 2 || valueB.value)
+  const rungs = props.builder.rungs
+  const prev = props.builder.valid
+  props.builder.valid = rungs >= 1 && valueA.value && (rungs < 2 || valueB.value)
+  console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
 })
 
 

src/store/store.js

@@ -94,6 +94,7 @@ export const useStore = defineStore('app', ()=> {
 
   const vault = computed(() => vaults.value.length === 0 ? null : vaults.value[0] )
   const balances = computed( () => vault.value === null ? {} : vaultBalances.value[vault.value] || {} )
+  const vaultOrders = computed(()=> vault.value === null || (!vault.value in orders.value) ? {} : orders.value[vault.value] )
   const tokens = computed(getTokens)
   const factory = computed(() => !chain.value ? null : chain.value.factory)
   const helper = computed(() => {console.log('chain helper', chain.value); return !chain.value ? null : chain.value.helper})
@@ -125,7 +126,8 @@ export const useStore = defineStore('app', ()=> {
 
   return {
     nav, chainId, chainInfo, chain, provider, providerRef, vaultInitCodeHash, account, vaults, transactionSenders,
-    errors, extraTokens, poolPrices, vaultBalances, orders, vault, tokens, factory, helper, mockenv, mockCoins,
+    errors, extraTokens, poolPrices, vaultBalances, orders, vault, vaultOrders, tokens, factory, helper,
+    mockenv, mockCoins,
     removeTransactionSender, error, closeError, addToken, clock, balances,
   }
 })