FIX: validator widgets wiring

stereum-dev · Oct 29, 2024 · cacdf3e · cacdf3e
1 parent 4ae92a9
commit cacdf3e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 23 deletions.
diff --git a/launcher/src/components/UI/control-page/components/widgets/ConnectedClientPair.vue b/launcher/src/components/UI/control-page/components/widgets/ConnectedClientPair.vue
@@ -7,12 +7,12 @@
         <div class="icon-bar h-full w-6 flex justify-center items-center">
           <img
             class="w-5 h-5"
-            :src="setupStore.relatedValidatorPairs[0]?.pairs[0]?.consensusService.icon || '/path/to/default-icon.png'"
+            :src="setupStore.relatedValidatorPairs?.pairs[0]?.consensusService.icon || '/path/to/default-icon.png'"
             alt=""
           />
         </div>
         <span class="client-name w-24 text-gray-200 uppercase text-[50%] flex justify-start items-center pl-2">
-          {{ setupStore.relatedValidatorPairs[0]?.pairs[0]?.consensusService.name || "Unknown Consensus Client" }}
+          {{ setupStore.relatedValidatorPairs?.pairs[0]?.consensusService.name || "Unknown Consensus Client" }}
         </span>
       </div>
 
@@ -22,12 +22,12 @@
         <div class="icon-bar h-full w-6 flex justify-center items-center">
           <img
             class="w-5 h-5"
-            :src="setupStore.relatedValidatorPairs[0]?.pairs[0]?.executionService.icon || '/path/to/default-icon.png'"
+            :src="setupStore.relatedValidatorPairs?.pairs[0]?.executionService.icon || '/path/to/default-icon.png'"
             alt=""
           />
         </div>
         <span class="client-name w-24 text-gray-200 uppercase text-[50%] flex justify-start items-center pl-2">
-          {{ setupStore.relatedValidatorPairs[0]?.pairs[0]?.executionService.name || "Unknown Execution Client" }}
+          {{ setupStore.relatedValidatorPairs?.pairs[0]?.executionService.name || "Unknown Execution Client" }}
         </span>
       </div>
     </div>

diff --git a/launcher/src/components/UI/control-page/components/widgets/SelectServiceWidget.vue b/launcher/src/components/UI/control-page/components/widgets/SelectServiceWidget.vue
@@ -216,23 +216,43 @@ const allValidatorPairs = computed(() => {
   }
 });
 
+const filteredValidatorServices = computed(() => {
+  const servicesToCheck = setupStore.selectedSetup
+    ? setupStore.selectedSetup.services
+    : setupStore.allSetups.flatMap((setup) => setup.services || []);
+
+  return servicesToCheck.filter((service) => service.category === "validator");
+});
+
+const selectedValidatorService = computed(() => {
+  return filteredValidatorServices.value.length > 0 ? filteredValidatorServices.value[currentIndex.value] : null;
+});
+
+const setupStoreRelatedValidatorPairs = computed(() => {
+  if (!selectedValidatorService.value) return null;
+
+  const relatedPairs = allValidatorPairs.value.find((pair) => pair.validator.id === selectedValidatorService.value.id);
+
+  return relatedPairs || null;
+});
+
 watch(
-  allValidatorPairs,
-  (newPair, oldPair) => {
-    if (JSON.stringify(newPair) !== JSON.stringify(oldPair)) {
-      setupStore.relatedValidatorPairs = newPair;
-      console.log("relatedValidatorPairs", setupStore.relatedValidatorPairs);
-    }
+  setupStoreRelatedValidatorPairs,
+  (newPairs) => {
+    setupStore.relatedValidatorPairs = newPairs;
   },
-  { immediate: true, deep: true }
+  { immediate: true }
 );
 
-const filteredValidatorServices = computed(() => {
-  const setup = setupStore.selectedSetup;
-  return setup?.services.filter((service) => service.category === "validator") || [];
-});
-
-const selectedValidatorService = computed(() => filteredValidatorServices.value[currentIndex.value] || null);
+watch(
+  () => setupStore.selectedSetup,
+  (newSetup) => {
+    if (newSetup) {
+      currentIndex.value = 0;
+    }
+  },
+  { immediate: true }
+);
 
 const formattedValidatorNo = computed(() => stakingStore.keys.length.toString().padStart(3, "0"));
 
@@ -272,7 +292,6 @@ const nextValidator = () => {
 watch(
   selectedPair,
   (newPair, oldPair) => {
-    // Check if newPair is different from oldPair
     if (JSON.stringify(newPair) !== JSON.stringify(oldPair)) {
       setupStore.selectedServicePairs = newPair;
     }

diff --git a/launcher/src/components/UI/control-page/components/widgets/TheStaking.vue b/launcher/src/components/UI/control-page/components/widgets/TheStaking.vue
@@ -76,7 +76,7 @@ export default {
       nodataMessage: "nodataMessage",
     }),
     ...mapState(useSetups, {
-      selectedSetup: "selectedSetup",
+      relatedValidatorPairs: "relatedValidatorPairs",
     }),
     formattedBalance() {
       return this.totalBalance.toFixed(5);
@@ -90,7 +90,7 @@ export default {
     },
 
     setSelectedCurrency() {
-      switch (this.selectedSetup?.network) {
+      switch (this.relatedValidatorPairs?.network) {
         case "gnosis":
           return "/img/icon/control-page-icons/network-currency-icons/network-currency-icons-gnosis-mainnet.png";
         case "sepolia":

diff --git a/launcher/src/components/UI/control-page/sections/SidebarRight.vue b/launcher/src/components/UI/control-page/sections/SidebarRight.vue
@@ -28,8 +28,7 @@ watch(
   () => controlStore.pickedService,
   (newValue) => {
     pickedService.value = newValue === "vld" ? false : true;
-  }
+  },
+  { immediate: true }
 );
 </script>
-
-<style scoped></style>