Fix for dApps selection during staking

src/staking-v3/components/vote/VotingWizard.vue

@@ -74,10 +74,10 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { WizardItem } from './types';
-import { DappVote, mapToDappVote } from '../../logic';
+import type { WizardItem } from './types';
+import { type DappVote, mapToDappVote } from '../../logic';
 import { useSelectableComponent, useVote, useDapps, useDappStaking } from 'src/staking-v3/hooks';
-import ChooseAmountsPanel, { StakeInfo } from './enter-amount/ChooseAmountsPanel.vue';
+import ChooseAmountsPanel, { type StakeInfo } from './enter-amount/ChooseAmountsPanel.vue';
 import ReviewPanel from './review/ReviewPanel.vue';
 import ChooseDappsPanel from './choose-dapps/ChooseDappsPanel.vue';
 import WizardSteps from './WizardSteps.vue';
@@ -87,9 +87,9 @@ import ModalRestake from './re-stake/ModalRestake.vue';
 import { useNetworkInfo } from 'src/hooks';
 
 enum Steps {
-  ChooseDapps,
-  AddAmount,
-  Review,
+  ChooseDapps = 0,
+  AddAmount = 1,
+  Review = 2,
 }
 
 export default defineComponent({

src/staking-v3/components/vote/choose-dapps/ChooseDappsPanel.vue

@@ -2,11 +2,11 @@
   <div class="main-container">
     <dapp-search :title="title" :search-term="searchTerm" :on-search="handleSearch" />
     <choose-category
-      v-if="currentView === View.Category"
+      v-show="currentView === View.Category"
       :on-category-selected="handleCategorySelected"
     />
     <dapps-list
-      v-if="currentView === View.Dapps"
+      v-show="currentView === View.Dapps"
       :dapps="dapps"
       :category="currentCategory"
       :filter="searchTerm"
@@ -23,18 +23,18 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed, ref, PropType } from 'vue';
+import { defineComponent, computed, ref, type PropType } from 'vue';
 import DappsList from './DappsList.vue';
 import ChooseCategory from './ChooseCategory.vue';
 import DappSearch from './DappSearch.vue';
 import GoBackButton from '../GoBackButton.vue';
-import { DappVote, mapToDappVote } from '../../../logic';
+import { type DappVote, mapToDappVote } from '../../../logic';
 import { useDapps } from 'src/staking-v3/hooks';
 import { useI18n } from 'vue-i18n';
 
 enum View {
-  Category,
-  Dapps,
+  Category = 0,
+  Dapps = 1,
 }
 
 export default defineComponent({

src/staking-v3/components/vote/choose-dapps/DappSearch.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
   props: {

src/staking-v3/components/vote/choose-dapps/DappsList.vue

@@ -40,10 +40,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, computed } from 'vue';
+import { defineComponent, type PropType, ref, computed } from 'vue';
 import { useDappStaking } from 'src/staking-v3/hooks';
 import DappIcon from '../DappIcon.vue';
-import { DappVote } from '../../../logic';
+import type { DappVote } from '../../../logic';
 import FormatBalance from 'src/components/common/FormatBalance.vue';
 
 // Import Swiper
@@ -97,13 +97,16 @@ export default defineComponent({
       }
       if (props.category) {
         return props.dapps.filter((dapp) => categoryFilter(dapp, props.category));
-      } else if (props.filter) {
+      }
+
+      if (props.filter) {
         return props.dapps.filter((dapp) =>
           dapp.name.toLowerCase().includes(props.filter.toLowerCase())
         );
-      } else {
-        return props.dapps;
       }
+
+      return props.dapps;
+
     });
 
     const selectedIndexes = ref<number[]>([]);
@@ -112,29 +115,33 @@ export default defineComponent({
       () => constants.value?.maxNumberOfStakedContracts ?? 0
     );
 
+    const globalDappIndex = (filteredIndex: number): number =>
+      props.dapps.findIndex((dapp) => dapp === filteredDapps.value[filteredIndex]);
+
     const handleItemSelected = (index: number): void => {
-      const indexToRemove = selectedIndexes.value.indexOf(index);
+      const dappIndex = globalDappIndex(index);
+      const indexToRemove = selectedIndexes.value.indexOf(dappIndex);
       if (indexToRemove >= 0) {
         selectedIndexes.value.splice(indexToRemove, 1);
       } else {
         if (selectedIndexes.value.length <= maxDappsToSelect.value) {
-          selectedIndexes.value.push(index);
+          selectedIndexes.value.push(dappIndex);
         }
       }
+
       if (props.onDappsSelected) {
         props.onDappsSelected(
-          selectedIndexes.value.map((selectedIndex) => filteredDapps.value[selectedIndex])
+          selectedIndexes.value.map((selectedIndex) => props.dapps[selectedIndex])
         );
       }
     };
 
     const getSelectionOrder = (index: number): number | undefined => {
-      const number = selectedIndexes.value.indexOf(index) + 1;
-
+      const number = selectedIndexes.value.indexOf(globalDappIndex(index)) + 1;
       return number === 0 ? undefined : number;
     };
 
-    const isItemSelected = (index: number): boolean => selectedIndexes.value.includes(index);
+    const isItemSelected = (index: number): boolean => selectedIndexes.value.includes(globalDappIndex(index));
 
     return {
       modules: [Grid, Navigation],