ADD: doppelganger key check mechanism for diff services (#1620)

* ADD: export btn to remove modal * ADD: export exit msg backend * ADD: export message button * small fix * ADD: save fn * ADD: export validator exit message * ADD: doppelganger preview key * FIX: doppelganger preview keys * FIX: updating doppelganger keys * REMOVE: logs * REFACTOR: updating dp key * FIX: some fixes --------- Co-authored-by: gbayasgalan <[email protected]>
stereum-dev · Jan 3, 2024 · 0054f06 · 0054f06
1 parent 98794e9
commit 0054f06
Show file tree

Hide file tree

Showing 19 changed files with 426 additions and 96 deletions.
diff --git a/launcher/public/img/icon/the-staking/export.png b/launcher/public/img/icon/the-staking/export.png
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1084,6 +1084,10 @@ video {
   grid-column-end: 15;
 }
 
+.col-end-16{
+  grid-column-end: 16;
+}
+
 .col-end-17{
   grid-column-end: 17;
 }
@@ -1625,10 +1629,22 @@ video {
   height: 100vh;
 }
 
+.max-h-10{
+  max-height: 2.5rem;
+}
+
+.max-h-12{
+  max-height: 3rem;
+}
+
 .max-h-28{
   max-height: 7rem;
 }
 
+.max-h-32{
+  max-height: 8rem;
+}
+
 .max-h-36{
   max-height: 9rem;
 }
@@ -1697,6 +1713,10 @@ video {
   max-height: 40px;
 }
 
+.max-h-\[423px\]{
+  max-height: 423px;
+}
+
 .max-h-\[428px\]{
   max-height: 428px;
 }
@@ -1725,10 +1745,6 @@ video {
   max-height: 100%;
 }
 
-.max-h-12{
-  max-height: 3rem;
-}
-
 .min-h-11{
   min-height: 2.75rem;
 }
@@ -2494,10 +2510,6 @@ video {
   overflow: hidden;
 }
 
-.overflow-x-auto{
-  overflow-x: auto;
-}
-
 .overflow-y-auto{
   overflow-y: auto;
 }
@@ -2703,6 +2715,10 @@ video {
   border-top-width: 2px;
 }
 
+.border-t{
+  border-top-width: 1px;
+}
+
 .border-dashed{
   border-style: dashed;
 }
@@ -2860,6 +2876,10 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-b-transparent{
+  border-bottom-color: transparent;
+}
+
 .border-l-gray-200{
   --tw-border-opacity: 1;
   border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -2974,6 +2994,11 @@ video {
   background-color: rgb(28 32 33 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#1d1e1f\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 30 31 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#1d1f20\]{
   --tw-bg-opacity: 1;
   background-color: rgb(29 31 32 / var(--tw-bg-opacity));
@@ -3358,6 +3383,41 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#243535\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 53 53 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#2f3337\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(47 51 55 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#202225\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(32 34 37 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#36393e\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(54 57 62 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#2d3035\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 48 53 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#353a3e\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 58 62 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#495056\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(73 80 86 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-b{
   background-image: -webkit-gradient(linear, left top, left bottom, from(var(--tw-gradient-stops)));
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
@@ -3521,6 +3581,11 @@ video {
   padding-bottom: 2px;
 }
 
+.py-\[3px\]{
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
 .pb-1{
   padding-bottom: 0.25rem;
 }
@@ -3888,6 +3953,16 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
+.text-\[\#e6e4e4\]{
+  --tw-text-opacity: 1;
+  color: rgb(230 228 228 / var(--tw-text-opacity));
+}
+
+.text-amber-200{
+  --tw-text-opacity: 1;
+  color: rgb(253 230 138 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-400\/70::-webkit-input-placeholder{
   color: rgb(156 163 175 / 0.7);
 }

diff --git a/launcher/src/backend/Monitoring.js b/launcher/src/backend/Monitoring.js
@@ -426,11 +426,11 @@ export class Monitoring {
     var query =
       rpc_method.trim().indexOf("{") < 0
         ? JSON.stringify({
-          jsonrpc: "2.0",
-          method: rpc_method.trim(),
-          params: rpc_params,
-          id: 1,
-        })
+            jsonrpc: "2.0",
+            method: rpc_method.trim(),
+            params: rpc_params,
+            id: 1,
+          })
         : rpc_method;
 
     // Define default response
@@ -1761,10 +1761,20 @@ export class Monitoring {
       const finalizedResult = await this.queryBeaconApi(baseURL, "/eth/v1/beacon/states/head/finality_checkpoints");
       const finalizedEpoch = finalizedResult.data.api_reponse.data.finalized.epoch;
 
-
       // Get attestation rewards for given validators
-      const attestationResult = await this.queryBeaconApi(baseURL, "/eth/v1/beacon/rewards/attestations/" + finalizedEpoch, validators, "POST")
-      const rewardsPerValidator = attestationResult.data.api_reponse.data.total_rewards.map(data => { return { ...data, total_rewards: parseInt(data.head) + parseInt(data.source) + parseInt(data.target) + parseInt(data.inactivity) } });
+      const attestationResult = await this.queryBeaconApi(
+        baseURL,
+        "/eth/v1/beacon/rewards/attestations/" + finalizedEpoch,
+        validators,
+        "POST"
+      );
+      const rewardsPerValidator = attestationResult.data.api_reponse.data.total_rewards.map((data) => {
+        return {
+          ...data,
+          total_rewards:
+            parseInt(data.head) + parseInt(data.source) + parseInt(data.target) + parseInt(data.inactivity),
+        };
+      });
 
       return { finalized_epoch: finalizedEpoch, rewards: rewardsPerValidator };
     } catch (error) {
@@ -1788,7 +1798,7 @@ export class Monitoring {
       const baseURL = `http://127.0.0.1:${beaconResult.data.port}`;
 
       // Get attestation rewards for given validators
-      const blockResult = await this.queryBeaconApi(baseURL, "/eth/v1/beacon/rewards/blocks/" + slot)
+      const blockResult = await this.queryBeaconApi(baseURL, "/eth/v1/beacon/rewards/blocks/" + slot);
       return blockResult.data.api_reponse.data;
     } catch (error) {
       log.error("Getting Block Rewards Failed:\n" + error);
@@ -1811,7 +1821,12 @@ export class Monitoring {
       const baseURL = `http://127.0.0.1:${beaconResult.data.port}`;
 
       // Get attestation rewards for given validators
-      const blockResult = await this.queryBeaconApi(baseURL, "/eth/v1/beacon/rewards/sync_committee/" + slot, validators, "POST")
+      const blockResult = await this.queryBeaconApi(
+        baseURL,
+        "/eth/v1/beacon/rewards/sync_committee/" + slot,
+        validators,
+        "POST"
+      );
       return blockResult.data.api_httpcode == 200 ? blockResult.data.api_reponse.data : [];
     } catch (error) {
       log.error("Getting Block Rewards Failed:\n" + error);
@@ -2590,8 +2605,8 @@ export class Monitoring {
     const addr_type = Array.isArray(addr)
       ? "arr"
       : typeof addr === "string" && ["public", "local"].includes(addr)
-        ? "str"
-        : "invalid";
+      ? "str"
+      : "invalid";
     addr = addr_type == "str" ? addr.toLowerCase().trim() : addr;
     if (addr_type == "invalid") {
       return {
@@ -2679,7 +2694,7 @@ export class Monitoring {
     for (let i = 0; i < serviceInfos.length; i++) {
       const hashDependencies =
         serviceInfos[i].config.dependencies.consensusClients.length ||
-          serviceInfos[i].config.dependencies.executionClients.length
+        serviceInfos[i].config.dependencies.executionClients.length
           ? "yes"
           : "no";
       easyInfos.push({

diff --git a/launcher/src/backend/ValidatorAccountManager.js b/launcher/src/backend/ValidatorAccountManager.js
@@ -61,7 +61,6 @@ export class ValidatorAccountManager {
           );
 
           if (latestEpochsResponse.status === 200 && latestEpochsResponse.data.data.length > 0) {
-
             for (let i = 0; i < 2; i++) {
               if (latestEpochsResponse.data.data[i].status === 1 && isActiveRunning.indexOf(pubkey) === -1) {
                 isActiveRunning.push(pubkey);
@@ -632,7 +631,7 @@ export class ValidatorAccountManager {
 
   async getExitValidatorMessage(pubkey, serviceID) {
     const ref = StringUtils.createRandomString(); //Create a random string to identify the task
-    this.nodeConnection.taskManager.otherTasksHandler(ref, `Exit msg for ${pubkey.substring(0, 6)}..`);
+    this.nodeConnection.taskManager.otherTasksHandler(ref, `Exit msg for ${pubkey?.substring(0, 6)}..`);
     try {
       let service = await this.nodeConnection.readServiceConfiguration(serviceID);
       const result = await this.keymanagerAPI(service, "POST", `/eth/v1/validator/${pubkey}/voluntary_exit`, []);
@@ -650,7 +649,6 @@ export class ValidatorAccountManager {
       //Push successful task
       this.nodeConnection.taskManager.otherTasksHandler(ref, `Get signed voluntary exit message`, true, data);
       this.nodeConnection.taskManager.otherTasksHandler(ref);
-
       return data;
     } catch (error) {
       this.nodeConnection.taskManager.otherTasksHandler(

diff --git a/launcher/src/background.js b/launcher/src/background.js
@@ -426,6 +426,10 @@ ipcMain.handle("exitValidatorAccount", async (event, args) => {
   return await monitoring.exitValidatorAccount(args.pubkey, args.serviceID);
 });
 
+ipcMain.handle("getExitValidatorMessage", async (event, args) => {
+  return await validatorAccountManager.getExitValidatorMessage(args.pubkey, args.serviceID);
+});
+
 ipcMain.handle("exportConfig", async () => {
   return await serviceManager.exportConfig();
 });

diff --git a/launcher/src/components/UI/node-page/components/logs/LogBody.vue b/launcher/src/components/UI/node-page/components/logs/LogBody.vue
@@ -1,23 +1,23 @@
 <template>
   <div
-    class="w-full h-full col-start-1 col-span-full row-start-2 row-end-12 grid grid-cols-24 grid-rows-12 bg-[#263238]"
+    class="w-full h-full col-start-1 col-span-full row-start-2 row-end-12 grid grid-cols-24 grid-rows-12 bg-[#2d3035]"
   >
     <LogSidebar />
     <div
-      class="w-full h-full col-start-2 col-span-full row-start-1 row-span-full overflow-x-hidden overflow-y-auto max-h-[409px] p-1 flex flex-col justify-start items-start space-y-1 bg-gray-300"
+      class="w-full h-full col-start-2 col-span-full row-start-1 row-span-full overflow-x-hidden overflow-y-auto max-h-[409px] p-1 flex flex-col justify-start items-start space-y-1 bg-[#202225]"
     >
       <div
         v-for="(log, index) in limitedLogs"
         :key="index"
-        :class="`w-full h-full min-h-11 max-h-12 flex justify-start items-center gap-x-2 px-1 py-2 relative cursor-pointer ${
-          index % 2 === 0 ? 'bg-[#bcc0c2] text-[#333333]' : 'bg-gray-700 text-[#ffffff]'
+        :class="`w-full h-full min-h-11 max-h-12 flex justify-start items-center gap-x-2 px-1 py-2 relative cursor-pointer text-[#e6e4e4] ${
+          index % 2 === 0 ? 'bg-[#495056] ' : 'bg-[#202225]'
         }  overflow-y-hidden overflow-x-scroll whitespace-pre text-nowrap`"
         @click="copy(log)"
         @mouseenter="hoveredLogIndex = index"
         @mouseleave="hoveredLogIndex = null"
       >
-        <span class="text-md font-semibold text-red-500">#{{ logsList.length - index }}</span>
-        <span class="text-md font-semibold">{{ log }}</span>
+        <span class="text-sm font-semibold text-gray-400">#{{ logsList.length - index }}</span>
+        <span class="text-sm font-semibold">{{ log }}</span>
         <img
           v-if="hoveredLogIndex === index"
           class="w-7 h-7 sticky left-[920px] p-1 bg-[#171D22] rounded-md shadow-md shadow-[#191a1b] animate__animated animate__slideInDown cursor-pointer active:scale-90 transition-all ease-in-out duration-150 z-10"
@@ -76,22 +76,24 @@ const copy = async (log) => {
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
+  background-color: transparent;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #888;
+  background-color: transparent;
   border-radius: 5px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #a0a0a0;
+  background: #333639;
+
   border-radius: 5px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #1e1f1f;
+  background: #69b3f8;
 }
 </style>
diff --git a/launcher/src/components/UI/node-page/components/logs/LogFooter.vue b/launcher/src/components/UI/node-page/components/logs/LogFooter.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="w-full h-full col-start-1 col-span-full row-start-12 row-span-1 grid grid-cols-12 bg-[#263238] p-1">
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-12 row-span-1 grid grid-cols-12 bg-[#2d3035] border-t border-gray-500 p-1"
+  >
     <div class="w-full h-full col-start-1 col-end-6 flex justify-center items-center space-x-2">
       <span class="text-sm text-gray-400 font-semibold">Service ID:</span>
-      <span class="text-gray-200 text-sm font-semibold">
+      <span class="text-amber-200 text-sm font-semibold">
         {{ client?.config?.serviceID }}
       </span>
     </div>
@@ -16,9 +18,9 @@
       />
     </div>
     <div
-      class="w-full h-full col-start-8 col-span-full flex justify-center items-center border border-gray-400 rounded-md"
+      class="w-full h-full col-start-8 col-span-full flex justify-center items-center border border-gray-400 rounded-md bg-gray-200"
     >
-      <div class="w-8 flex justify-evenly items-center px-1 relative bg-[#263238] rounded-sm">
+      <div class="w-8 flex justify-evenly items-center px-1 relative bg-gray-200 rounded-sm">
         <svg
           aria-hidden="true"
           class="w-5 h-5 text-gray-500 dark:text-gray-400"
@@ -36,7 +38,7 @@
       <input
         v-model="nodeStore.searchLogs"
         type="search"
-        class="z-10 text-gray-400 text-sm rounded-full block w-full px-2 py-1 placeholder-gray-500 bg-transparent"
+        class="z-10 text-gray-700 text-sm rounded-full block w-full px-2 py-1 placeholder-gray-500 bg-transparent"
         placeholder="Search"
       />
     </div>