Test import (#2178)

* REMOVE: watcher * ADD: lazyloading component * ADD: dplg no reponse * FIX: format
stereum-dev · Feb 5, 2025 · 17418f6 · 17418f6
1 parent 8f8bfd1
commit 17418f6
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 20 deletions.
diff --git a/launcher/src/components/UI/staking-page/StakingScreen.vue b/launcher/src/components/UI/staking-page/StakingScreen.vue
@@ -46,7 +46,7 @@ import { useServices } from "@/store/services";
 import { useSetups } from "@/store/setups";
 import { useStakingStore } from "@/store/theStaking";
 import { saveAs } from "file-saver";
-import { computed, onMounted, onUnmounted, watch, watchEffect } from "vue";
+import { computed, onMounted, onUnmounted, watch } from "vue";
 import ControlService from "../../../store/ControlService";
 import ImportRemote from "./components/modals/ImportRemote.vue";
 import ImportValidator from "./components/modals/ImportValidator.vue";
@@ -128,6 +128,9 @@ onMounted(async () => {
   stakingStore.forceRefresh = true;
   getServerView();
   await listKeys();
+  if (stakingStore.keys.length > 0 && setupStore.allSetups.length > 0) {
+    getKeySetupColor();
+  }
 });
 
 // *************** Methods *****************
@@ -739,12 +742,6 @@ const confirmImportRemoteKeys = async () => {
 
 //****End of Client Commands Buttons ****
 
-watchEffect(() => {
-  if (stakingStore.keys.length > 0 && setupStore.allSetups.length > 0) {
-    getKeySetupColor();
-  }
-});
-
 onUnmounted(() => {
   setupStore.selectedSetup = null;
   getServerView();

diff --git a/launcher/src/components/UI/staking-page/components/list/ListBody.vue b/launcher/src/components/UI/staking-page/components/list/ListBody.vue
@@ -58,6 +58,7 @@
           "
           :key="key"
           :item="key"
+          @remove-dplg="removeDoppelGangerManually"
         />
 
         <GroupRow
@@ -84,8 +85,8 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onUnmounted } from "vue";
-import KeyRow from "./rows/KeyRow.vue";
+import { ref, computed, watch, onUnmounted, defineAsyncComponent } from "vue";
+// import KeyRow from "./rows/KeyRow.vue";
 import PreviewKey from "./rows/PreviewKey.vue";
 import GroupRow from "./rows/GroupRow.vue";
 import SkeletonRow from "./rows/SkeletonRow.vue";
@@ -95,6 +96,8 @@ import RemoteList from "./RemoteList.vue";
 import { useStakingStore } from "@/store/theStaking";
 import { useSetups } from "@/store/setups";
 
+const KeyRow = defineAsyncComponent(() => import("./rows/KeyRow.vue"));
+
 const emit = defineEmits([
   "onDrop",
   "removeSingle",
@@ -204,9 +207,13 @@ watch(
   async () => {
     removeDuplicatedDoppelgangerKeys();
   },
-  { deep: true }
+  { once: true }
 );
 
+const removeDoppelGangerManually = (pubkey) => {
+  stakingStore.doppelgangerKeys = stakingStore.doppelgangerKeys.filter((item) => item.pubkey !== pubkey);
+};
+
 function isKeyInGroup(key) {
   return stakingStore.validatorKeyGroups.some((group) => group.keys.some((groupKey) => groupKey.key === key.key));
 }
@@ -242,7 +249,7 @@ function onDrop(event) {
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 5px;
   height: 5px;
   cursor: pointer;
 }

diff --git a/launcher/src/components/UI/staking-page/components/list/rows/DoppelGCheckRow.vue b/launcher/src/components/UI/staking-page/components/list/rows/DoppelGCheckRow.vue
@@ -1,7 +1,8 @@
 import { computed, ref, onMounted, watchEffect } from 'vue';
 <template>
   <div
-    class="w-full h-8 rounded-full grid grid-cols-24 items-center p-1 cursor-pointer animate__animated animate animate__slideInLeft bg-gray-400"
+    class="w-full h-8 rounded-full grid grid-cols-24 items-center p-1 cursor-pointer animate__animated animate animate__slideInLeft"
+    :class="isRemoveBtnActive ? 'bg-red-500' : 'bg-gray-400'"
   >
     <div
       class="w-6 h-6 rounded-full cursor-pointer bg-white col-start-1 col-span-1 self-center overflow-hidden flex justify-center items-center"
@@ -13,11 +14,21 @@ import { computed, ref, onMounted, watchEffect } from 'vue';
       @mouseenter="footerStore.cursorLocation = `${props.item.pubkey} `"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <span class="text-sm font-semibold text-gray-800 text-left">{{ formattedPubKey }} </span>
+      <span v-if="isRemoveBtnActive" class="text-sm font-normal text-gray-200 text-left"
+        >No repsone. Please check manually in the logs.
+      </span>
+      <span v-else class="text-sm font-semibold text-gray-800 text-left">{{ formattedPubKey }} </span>
     </div>
 
     <div class="w-full h-full col-start-18 col-span-full flex justify-center items-center">
-      <span class="w-full bg-[#1d1e1f] rounded-full px-4 py-[3px] text-xs font-semibold text-red-400 text-center">
+      <span
+        v-if="isRemoveBtnActive"
+        class="w-full bg-[#1d1e1f] rounded-full px-4 py-[3px] text-xs font-semibold text-gray-200 text-center hover:bg-red-700 cursor-pointer active:scale-95"
+        @click="removeDoppelGanger"
+      >
+        {{ displayText }}
+      </span>
+      <span v-else class="w-full bg-[#1d1e1f] rounded-full px-4 py-[3px] text-xs font-semibold text-red-400 text-center">
         {{ displayText }}
       </span>
     </div>
@@ -35,6 +46,7 @@ const footerStore = useFooter();
 const stakingStore = useStakingStore();
 const displayText = ref("Doppelganger Protection");
 const isProtectionActive = ref(false);
+const isRemoveBtnActive = ref(false);
 
 const props = defineProps({
   item: {
@@ -43,18 +55,39 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["removeDplg"]);
+
 const formattedPubKey = computed(() => {
   return useTruncate(props.item.pubkey, 20, 20);
 });
 
+// const warningText = () => {
+//   setTimeout(() => {
+//     displayText.value = "Waiting for response";
+//   }, 900000);
+//   setTimeout(() => {
+//     displayText.value = "No response";
+//   }, 1800000);
+
+//   setTimeout(() => {
+//     displayText.value = "Click To Remove";
+//     isRemoveBtnActive.value = true;
+//     removeDoppelGanger();
+//   }, 86400000);
+// };
+
 const warningText = () => {
   setTimeout(() => {
     displayText.value = "Waiting for response";
-  }, 900000);
+  }, 30000);
   setTimeout(() => {
     displayText.value = "No response";
-    stakingStore.doppelgangerKeys = [];
-  }, 1800000);
+  }, 50000);
+
+  setTimeout(() => {
+    displayText.value = "Click To Remove";
+    isRemoveBtnActive.value = true;
+  }, 60000);
 };
 
 watchEffect(() => {
@@ -66,14 +99,18 @@ watchEffect(() => {
 let fetchInterval = null;
 
 const fetchKeysWhileDplProtection = async () => {
-  if (stakingStore.doppelgangerKeys.length > 0) {
+  if (stakingStore.doppelgangerKeys) {
     await useListKeys(true);
   }
 };
 
+const removeDoppelGanger = () => {
+  emit("removeDplg", props.item.pubkey);
+};
+
 onMounted(() => {
   isProtectionActive.value = true;
-  fetchKeysWhileDplProtection();
+  isRemoveBtnActive.value = false;
   fetchInterval = setInterval(fetchKeysWhileDplProtection, 30000);
 });
 

diff --git a/launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue b/launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue
@@ -139,7 +139,6 @@ const getActionButton = computed(() => {
 const getDescriptionClass = (line) => {
   let className;
   if (line && line.toLowerCase().includes("failed" || "error" || "invalid" || "incorrect")) {
-    stakingStore.doppelgangerKeys = [];
     className = "text-red-400";
   } else if (line && line.includes("duplicate")) {
     className = "text-amber-400";