order cancels

src/components/Btn.vue

@@ -1,6 +1,6 @@
 <template>
   <v-btn variant="outlined">
-    <v-icon v-if="icon" :icon="icon" :color="color"></v-icon>
+    <v-icon v-if="icon" :icon="icon" :color="color"></v-icon>&nbsp;
     <slot/>
   </v-btn>
 </template>

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'])

src/components/TokenRow.vue

@@ -10,7 +10,7 @@
     <td>
       <v-menu>
         <template v-slot:activator="{ props }">
-          <v-btn variant="plain" v-bind="props" icon="mdi-menu"/> <!-- mdi-dots-vertical -->
+          <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
         </template>
         <v-list>
           <v-list-subheader :title="token.symbol"/>