Improve: FeeRecipient Handling

launcher/src/backend/ValidatorAccountManager.js

@@ -302,9 +302,9 @@ export class ValidatorAccountManager {
       if (picked) return data.slashing_protection;
       return data;
     } catch (err) {
-      this.nodeConnection.taskManager.otherTasksHandler(ref, `Deleting Keys Failed`, false, "Deleting Validators Failed:\n" + err);
+      this.nodeConnection.taskManager.otherTasksHandler(ref, `Deleting Keys Failed`, false, "Deleting Validators Failed:\n" + JSON.stringify(err));
       this.nodeConnection.taskManager.otherTasksHandler(ref);
-      log.error("Deleting Validators Failed:\n", err);
+      log.error("Deleting Validators Failed:\n", JSON.stringify(err));
       return err;
     }
   }

launcher/src/components/UI/staking-page/StakingScreen.vue

@@ -19,6 +19,7 @@
         @reset-name="resetValidatorKeyName"
         @withdraw-single="withdrawModalHandler"
         @confirm-feerecepient="confirmFeeRecepient"
+        @delete-feerecepient="deleteFeeRecepient"
         @delete-preview="deletePreviewKey"
         @confirm-graffiti="confirmEnteredGrafiti"
         @confirm-remote="confirmImportRemoteKeys"
@@ -447,13 +448,21 @@
       pubkey: key.key,
       address: stakingStore.enteredFeeRecipientAddress,
     });
-    stakingStore.enteredFeeRecipientAddress = "";
-  } else {
+  }
+  key.selected = false;
+  stakingStore.enteredFeeRecipientAddress = "";
+  stakingStore.setActivePanel(null);
+};
+
+const deleteFeeRecepient = async (item) => {
+  const key = stakingStore.selectKeyForFee;
+  if (key){
     await ControlService.deleteFeeRecipient({
       serviceID: key.validatorID,
       pubkey: key.key,
     });
   }
+  key.selected = false;
   stakingStore.enteredFeeRecipientAddress = "";
   stakingStore.setActivePanel(null);
 };

launcher/src/components/UI/staking-page/components/list/ListPanels.vue

@@ -74,6 +74,7 @@ const emit = defineEmits([
   "removeGroup",
   "confirmRename",
   "confirmFeerecepient",
+  "deleteFeerecepient",
   "resetName",
   "confirmGraffiti",
   "confirmRemote",
@@ -133,6 +134,7 @@ watchEffect(() => {
         confirmRename: (newName) => emit("confirmRename", newName),
         resetName: (item) => emit("resetName", item),
         confirmFeerecepient: (item) => emit("confirmFeerecepient", item),
+        deleteFeerecepient: (item) => emit("deleteFeerecepient", item),
         confirmGraffiti: (graffiti) => emit("confirmGraffiti", graffiti),
         confirmRemote: () => emit("confirmRemote"),
       },

launcher/src/components/UI/staking-page/components/list/panels/FeePanel.vue

@@ -13,7 +13,18 @@
 
       <p class="mt-2 text-sm text-red-700">{{ alertMessage }}</p>
     </div>
-    <div class="w-full h-full grid grid-cols-12 grid-rows-1 py-[2px]">
+    <div
+      v-if="infoMessage !== ''"
+      role="info"
+      class="absolute -top-[90px] left-14 w-2/3 max-h-36 rounded border-s-4 p-4 z-60 bg-gray-100 border-gray-400 "
+    >
+      <div class="flex items-center gap-2 text-info-800">
+        <strong class="block font-medium">Info</strong>
+      </div>
+
+      <p class="mt-2 text-sm">{{ infoMessage }}</p>
+    </div>
+    <div class="w-full h-full grid grid-cols-13 grid-rows-1 py-[2px]">
       <img
         class="w-6 h-6 self-center col-start-1 col-span-1 justify-self-center"
         src="/img/icon/staking-page-icons/option-fee-recepient.png"
@@ -49,21 +60,30 @@
           <img class="w-4 h-4" src="/img/icon/staking-page-icons/check.png" alt="Check Icon" @mousedown.prevent />
         </div>
       </div>
+      <div class="col-start-13 col-span-1 flex justify-center items-center p-1">
+        <div
+          class="w-6 h-6 rounded-md bg-[#171D22] p-1 flex justify-center items-center hover:scale-110 border border-[#171D22] active:scale-100 hover:shadow-md hover:shadow-[#101214] hover:border-[#3f4851] active:shadow-none transition-all duration-150"
+          @click="deleteFeerecepient"
+        >
+          <img class="w-4 h-4" src="/img/icon/edit-node-icons/service-delete.png" alt="Check Icon" @mousedown.prevent />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
 import { ref, watch, computed } from "vue";
 import { useStakingStore } from "@/store/theStaking";
 
-const emit = defineEmits(["confirmFeerecepient"]);
+const emit = defineEmits(["confirmFeerecepient","deleteFeerecepient"]);
 const stakingStore = useStakingStore();
 
 const validName = ref("");
 const alertMessage = ref("");
 const isAddressValid = ref(false);
 
 const feeRecepientAddress = computed(() => stakingStore.enteredFeeRecipientAddress);
+const infoMessage = computed(() => stakingStore.feeRecipientInfoMessage || "");
 
 const inputClass = computed(() => {
   if (!feeRecepientAddress.value) {
@@ -82,7 +102,7 @@ watch(feeRecepientAddress, (newValue) => {
   const isValidEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(trimmedName);
 
   if (!trimmedName) {
-    alertMessage.value = "Please enter a wallet address";
+    alertMessage.value = "";
     isAddressValid.value = false;
   } else if (!isValidEthereumAddress) {
     alertMessage.value = "Invalid wallet address";
@@ -97,11 +117,16 @@ watch(feeRecepientAddress, (newValue) => {
 
 const confirmFeerecepient = () => {
   if (!isAddressValid.value) return;
+  stakingStore.feeRecipientInfoMessage = `Applying new fee recipient address...`;
   emit("confirmFeerecepient", stakingStore.feeRecepientAddress);
 };
 const cancelFeeRecepient = () => {
   stakingStore.keys.find((key) => key.key === stakingStore.selectKeyForFee.key).selected = false;
   stakingStore.enteredFeeRecipientAddress = "";
   stakingStore.setActivePanel(null);
 };
+const deleteFeerecepient = () => {
+  stakingStore.feeRecipientInfoMessage = `Deleting current fee recipient address...`;
+  emit("deleteFeerecepient");
+};
 </script>

launcher/src/components/UI/staking-page/components/list/rows/KeyRow.vue

@@ -203,6 +203,8 @@ import { useSetups } from "@/store/setups";
 import { useFooter } from "@/store/theFooter";
 import { useStakingStore } from "@/store/theStaking";
 import { computed } from "vue";
+import ControlService from '@/store/ControlService';
+
 
 const props = defineProps({
   item: {
@@ -448,7 +450,12 @@ const withdrawHandler = () => {
   stakingStore.setActiveModal("withdraw");
 };
 
-const FeeRecepient = () => {
+const FeeRecepient = async () => {
+  stakingStore.feeRecipientInfoMessage = "Loading fee recipient address...";
+  ControlService.getFeeRecipient({serviceID: props.item.validatorID, pubkey: props.item.key})
+    .then((res) => {
+      stakingStore.feeRecipientInfoMessage = res.data?.ethaddress || "";
+    })
   props.item.selected = true;
   stakingStore.selectKeyForFee = props.item;
   stakingStore.setActivePanel(null);

launcher/src/components/UI/staking-page/sections/ListSection.vue

@@ -25,6 +25,7 @@
         @confirm-rename="confirmRename"
         @reset-name="resetName"
         @confirm-feerecepient="confirmFeerecepient"
+        @delete-feerecepient="deleteFeerecepient"
         @confirm-graffiti="confirmGraffiti"
         @confirm-remote="confirmRemote"
         @remove-group="removeGroup"
@@ -57,6 +58,7 @@
   "confirmRename",
   "renameSingle",
   "confirmFeerecepient",
+  "deleteFeerecepient",
   "deletePreview",
   "resetName",
   "confirmGraffiti",
@@ -112,6 +114,10 @@
   emit("confirmFeerecepient", item);
 };
 
+const deleteFeerecepient = (item) => {
+  emit("deleteFeerecepient");
+};
+
 const confirmGraffiti = (item) => {
   emit("confirmGraffiti", item);
 };