SHARD-230: fix nodes status info messages

components/StakeForm.tsx

@@ -80,12 +80,12 @@ export default function StakeForm({
         signer.getTransactionCount(),
       ]);
       console.log("BLOB: ", blobData);
-      console.log(stakeAmount,totalStaked);
+      console.log(stakeAmount, totalStaked);
       const value = ethers.BigNumber.from(data.stake);
 
       const totalStakeBigNumber = ethers.BigNumber.from(totalStaked);
       const stakeAmountBigNumber = ethers.utils.parseUnits(stakeAmount, "ether")
-      
+
       console.log(totalStakeBigNumber, stakeAmountBigNumber)
       if (totalStakeBigNumber.lt(stakeAmountBigNumber) && value.lt(stakeAmountBigNumber)) {
         errorFlag = true;
@@ -200,9 +200,8 @@ export default function StakeForm({
         onChange={(e) => handleStakeChange(e)}
       />
       <div
-        className={`flex items-center mb-5 ${
-          !data.stakeOk ? "text-red-500" : ""
-        }`}
+        className={`flex items-center mb-5 ${!data.stakeOk ? "text-red-500" : ""
+          }`}
       >
         <div className="ml-2 font-semibold">
           Stake requirement: {stakeAmount}
@@ -213,9 +212,8 @@ export default function StakeForm({
         <LoadingButton
           onClick={async () => sendTransaction()}
           isLoading={isLoading}
-          className={`btn btn-primary ${
-            isLoading || !data.stakeOk ? "btn-disabled" : ""
-          }`}
+          className={`btn btn-primary ${isLoading || !data.stakeOk ? "btn-disabled" : ""
+            }`}
         >
           Stake
           <ArrowRightIcon className="h-5 w-5 inline ml-2" />

components/atoms/NodeStatusUpdate.tsx

@@ -1,52 +1,40 @@
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import useStatusUpdateStore from "../../hooks/useStatusUpdateStore";
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import useStatusUpdateStore from '../../hooks/useStatusUpdateStore';
+import { NodeStatus } from '../../model/node-status';
+import { useNodeStatus } from '../../hooks/useNodeStatus';
 
-const getStatusUpdateText = (status: string) => {
-  let statusUpdateText = "";
-  switch (status) {
-    case "active":
-      statusUpdateText =
-        "Hey there! While you were away, you were moved into the validating queue.";
-      break;
-    case "stopped":
-      statusUpdateText =
-        "Your node stopped unexpectedly while you were away. Please start the node to start earning rewards.";
-      break;
-    case "need-stake":
-      statusUpdateText =
-        "Your node is on standby as you do not have any staked SHM. Please stake a minimum of 10 SHM to start validating.";
-      break;
-    case "waiting-for-network":
-      statusUpdateText =
-        "Your node is trying to connect to the Shardeum network. If this status persists please reach out to us.";
-      break;
-    case "ready":
-      statusUpdateText =
-        "Your node is ready to join the network. It will be selected for validation soon.";
-      break;
-    case "selected":
-      statusUpdateText =
-        "Your node has been selected for validation and will start validating shortly.";
-      break;
-    case "standby":
-      statusUpdateText =
-        "Your node is currently on standby. It will be activated when needed by the network.";
-      break;
-    case "syncing":
-      statusUpdateText =
-        "Your node is currently syncing with the network. This process may take some time.";
-      break;
-    default:
-      break;
+const getStatusUpdateText = (nodeStatus: NodeStatus | undefined) => {
+  const status = nodeStatus?.state;
+  if (status === 'stopped' && nodeStatus?.exitStatus !== 'Exited cleanly') {
+    if (nodeStatus?.exitMessage) {
+      return <span>
+        Your node stopped unexpectedly: {nodeStatus.exitMessage}
+        <br/>
+        Please start the node to start earning rewards.
+      </span>;
+    }
+    return 'Your node stopped unexpectedly. Please start the node to start earning rewards.';
+  } else if (status === 'need-stake') {
+    return 'Your node is on standby as you do not have any staked SHM. Please stake a minimum of 10 SHM to start validating.';
+  } else if (status === 'waiting-for-network') {
+    return 'Your node is trying to connect to the Shardeum network. If this status persists please reach out to us.';
+  } else if (status === 'ready') {
+    return 'Your node is ready to join the network. It will be selected for validation soon.';
+  } else if (status === 'selected') {
+    return 'Your node has been selected for validation and will start validating shortly.';
+  } else if (status === 'standby') {
+    return 'Your node is currently on standby. It will be activated when needed by the network.';
+  } else if (status === 'syncing') {
+    return 'Your node is currently syncing with the network. This process may take some time.';
   }
-  return statusUpdateText;
+  return
 };
 
 const getBgColor = (state: string) => {
   switch (state) {
     case "active":
     case "selected":
-    case "ready": 
+    case "ready":
       return "successBg";
     case "stopped":
       return "dangerBg";
@@ -81,11 +69,13 @@ const getBorderColor = (state: string) => {
 };
 
 export const NodeStatusUpdate = () => {
+  const { nodeStatus } = useNodeStatus()
   const { currentStatus, reset } = useStatusUpdateStore((state: any) => ({
     currentStatus: state.currentStatus,
     reset: state.reset,
   }));
 
+  const statusUpdateText = getStatusUpdateText(nodeStatus);
   return (
     <div>
       {/* This hidden div ensures that Tailwind CSS classes are included in the final build */}
@@ -115,14 +105,14 @@ export const NodeStatusUpdate = () => {
           8
         </span>
       </div>
-      {currentStatus && (
+      {statusUpdateText && (
         <div
           className={`absolute top-0 left-10 flex gap-x-2 items-center px-4 py-2 rounded bg-${getBgColor(
             currentStatus
           )} border border-${getBorderColor(currentStatus)} border-t-0`}
         >
           <span className="bodyFg font-light text-xs ">
-            {getStatusUpdateText(currentStatus)}
+            {statusUpdateText}
           </span>
           <div>
             <XMarkIcon className="h-3 w-3 cursor-pointer" onClick={reset} />

components/molecules/NodeStatus.tsx

@@ -14,7 +14,6 @@ import {
   NotificationSeverity,
   NotificationType,
 } from "../../hooks/useNotificationsStore";
-import { wasLoggedOutKey } from "../../services/auth.service";
 import useStatusUpdateStore from "../../hooks/useStatusUpdateStore";
 
 export enum NodeState {
@@ -293,17 +292,12 @@ export const NodeStatus = ({ isWalletConnected, address }: NodeStatusProps) => {
     resetToast();
 
     if (previousNodeState !== currentNodeState) {
-      const wasLoggedOut = localStorage.getItem(wasLoggedOutKey) === "true";
       if (
-        wasLoggedOut &&
         ["active", "stopped", "waiting-for-network", "need-stake", "standby", "ready", "selected"].includes(
           nodeStatus?.state || ""
         )
       ) {
         setCurrentStatus(nodeStatus?.state || "");
-        localStorage.removeItem(wasLoggedOutKey);
-      } else if (!wasLoggedOut) {
-        setCurrentStatus("");
       }
 
       switch (nodeStatus?.state) {

components/molecules/NodeStatusRibbon.tsx

@@ -9,7 +9,6 @@ import { ExpansionArrow } from "../atoms/ExpansionArrow";
 import useModalStore from "../../hooks/useModalStore";
 import { OverviewSidebar } from "../organisms/OverviewSidebar";
 import { MobileModalWrapper } from "../layouts/MobileModalWrapper";
-import { wasLoggedOutKey } from "../../services/auth.service";
 import {
   getNodeState,
   getTitle,
@@ -85,17 +84,12 @@ export const NodeStatusRibbon = () => {
     const currentNodeState = nodeStatus?.state || previousNodeState;
     resetToast();
     if (previousNodeState !== currentNodeState) {
-      const wasLoggedOut = localStorage.getItem(wasLoggedOutKey) === "true";
-      if (
-        wasLoggedOut &&
-        ["active", "stopped", "waiting-for-network", "need-stake", "ready", "selected"].includes(
-          nodeStatus?.state || ""
-        )
+      if (["active", "stopped", "waiting-for-network", "need-stake", "ready", "selected"].includes(
+        nodeStatus?.state || ""
+      )
       ) {
-        if (wasLoggedOut) {
-          setCurrentStatus(nodeStatus?.state || "");
-          localStorage.removeItem(wasLoggedOutKey);
-        }
+        console.log('nodeStatus?.state', nodeStatus?.state);
+        setCurrentStatus(nodeStatus?.state || "");
       }
 
       switch (nodeStatus?.state) {
@@ -190,7 +184,7 @@ export const NodeStatusRibbon = () => {
         <span className="bg-readyBg text-xl text-readyFg border border-b-readyBg">
           8
         </span>
-        
+
       </div>
       <div
         className={`h-12 shadow flex items-center bg-${titleBgColor} border border-b-${borderColor}`}

model/node-status.ts

@@ -11,7 +11,7 @@ export interface NodeStatus {
     | "waiting-for-network"
     | "ready"
     | "selected";
-  exitStatus: "Exit with warning" | "Exited cleanly" | "Exit with error";
+  exitStatus: ExitStatus;
   exitMessage: string;
   totalTimeValidating: number;
   lastActive: string;
@@ -36,3 +36,5 @@ export interface NodeStatus {
     publicKey: string;
   };
 }
+
+export type ExitStatus =  "Exit with warning" | "Exited cleanly" | "Exit with error"

services/auth.service.ts

@@ -2,7 +2,6 @@ import Router from 'next/router'
 import { hashSha256 } from '../utils/sha256-hash';
 import { fetcher } from '../hooks/fetcher';
 const isLoggedInKey = 'isLoggedIn'
-export const wasLoggedOutKey = 'wasLoggedOut'
 export const isFirstTimeUserKey = 'isFirstTimeUser'
 
 export async function getCsrfToken(): Promise<string> {
@@ -54,7 +53,6 @@ async function logout(apiBase: string) {
     throw new Error('Error logging out!');
   }
   localStorage.removeItem(isLoggedInKey)
-  localStorage.setItem(wasLoggedOutKey, "true")
   Router.push('/login')
 }