fix: be able to set slippage

Author: CedrikNikita

src/components/ActionsMenu.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="actions-menu"
-    :class="{ active: showMenu }"
-    @click="showMenu = true"
-    @keydown="showMenu = true"
-  >
+  <div class="actions-menu" :class="{ active: showMenu }" @click="handleOpen" @keydown="handleOpen">
     <slot name="display" />
     <SmallModal v-if="showMenu" @close="showMenu = false">
       <slot />
@@ -19,11 +14,18 @@ export default {
   components: {
     SmallModal,
   },
+  emits: ['open'],
   data() {
     return {
       showMenu: false,
     };
   },
+  methods: {
+    handleOpen() {
+      if (!this.showMenu) this.$emit('open');
+      this.showMenu = true;
+    },
+  },
 };
 </script>
 

src/components/InputAmount.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="input-amount">
     <slot name="left" />
-    <InputField type="number" v-bind="$attrs" @input="$emit('input', $event)" />
+    <InputField
+      type="number"
+      :value="value"
+      v-bind="$attrs"
+      @update:value="$emit('update:value', $event)"
+    />
     <slot name="right" />
   </div>
 </template>
@@ -13,7 +18,10 @@ export default {
   components: {
     InputField,
   },
-  emits: ['input'],
+  props: {
+    value: { type: [String, Number], default: '' },
+  },
+  emits: ['update:value'],
 };
 </script>
 

src/components/MainWrapper.vue

@@ -9,8 +9,8 @@
       <div class="title">
         {{ title }}
       </div>
-      <div class="right" @click="settingsClickHandler" @keydown="settingsClickHandler">
-        <ActionsMenu v-if="settings">
+      <div class="right">
+        <ActionsMenu v-if="settings" @open="settingsClickHandler">
           <template #display>
             <Cog />
           </template>