Fix slippage and tokens storing issues

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>

src/store/index.js

@@ -385,7 +385,17 @@ export default createStore({
         wallet,
         lang,
         aeternity: { providedLiquidity, slippage, deadline },
-        tokens: { userTokens, providers },
+        // Persist only lightweight provider metadata to avoid localStorage overflow.
+        // Do NOT persist large token lists; they are fetched on demand.
+        tokens: {
+          userTokens,
+          providers: (providers || []).map(({ name, icon, active }) => ({
+            name,
+            icon,
+            active,
+            tokens: [],
+          })),
+        },
         hasSeenOnboarding,
       }),
     }),

src/store/modules/tokens.js

@@ -103,6 +103,11 @@ export default {
   actions: {
     async fetchAllTokens({ commit, rootGetters: { activeNetwork }, state: { providers } }) {
       if (activeNetwork) {
+        const existingProvider = providers.find((p) => p.name === 'AE Middleware List');
+        const hasTokensForNetwork = existingProvider?.tokens?.some(
+          (t) => t.networkId === activeNetwork.networkId,
+        );
+        if (hasTokensForNetwork) return;
         const tokens = await fetchAllPages(
           () =>
             fetchJson(`${activeNetwork.middlewareUrl}/v3/aex9?by=name&limit=100&direction=forward`),