order cancels

src/components/Orders.vue

@@ -24,6 +24,7 @@
         <td>
           {{pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)}}
           <btn v-if="pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)!==''" size="small"
+               variant="plain"
                @click="inverted[[vaultAddr,index]] = !inverted[[vaultAddr,index]]">
             {{pair(inTokenAddr, outTokenAddr, vaultAddr,index)}}
           </btn>
@@ -31,10 +32,13 @@
         <td>
           <v-chip v-if="state===-1" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
           <v-chip v-if="state===0" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
-          <v-chip v-if="state===1" prepend-icon="mdi-close" color="red">Canceled</v-chip>
+          <v-chip v-if="state===1" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
           <v-chip v-if="state===2" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
           <v-chip v-if="state===3" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
         </td>
+        <td>
+          <btn v-if="state===0" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)">Cancel</btn>
+        </td>
       </tr>
     </tbody>
   </v-table>
@@ -46,6 +50,7 @@ import {useStore} from "@/store/store";
 import {computed, reactive} from "vue";
 import {token} from "@/blockchain/token.js";
 import Btn from "@/components/Btn.vue"
+import {cancelOrder} from "@/blockchain/wallet.js";
 
 const s = useStore()
 const props = defineProps(['vault'])