SHARD-1108: Add notification for unstaking becoming available

components/molecules/NodeStatus.tsx

@@ -216,7 +216,8 @@ export const getDurationBreakdownString = (duration: number) => {
 };
 
 export const NodeStatus = ({ isWalletConnected, address }: NodeStatusProps) => {
-  const { nodeStatus, isLoading, startNode, stopNode } = useNodeStatus();
+  const { nodeStatus, isLoading, startNode, stopNode, notifyUnstake } =
+    useNodeStatus();
   // const { nodeStatusHistory } = useNodeStatusHistory(address || "");
 
   const state: NodeState = getNodeState(nodeStatus);
@@ -402,6 +403,21 @@ export const NodeStatus = ({ isWalletConnected, address }: NodeStatusProps) => {
     }
   }, [nodeStatus?.state, currentStatus]);
 
+  useEffect(() => {
+    if (notifyUnstake) {
+      setCurrentToast({
+        severity: ToastSeverity.SUCCESS,
+        title: "Node can be unstaked",
+        description: "Your node can now be unstaked.",
+        followupNotification: {
+          type: NotificationType.UNSTAKE_STATUS,
+          severity: NotificationSeverity.SUCCESS,
+          title: "Your node can now be unstaked.",
+        },
+      });
+    }
+  }, [notifyUnstake, setCurrentToast]);
+
   const toggleShowMoreInfo = () => {
     setShowMoreInfo((prevState: boolean) => !prevState);
   };

hooks/useNodeStatus.ts

@@ -1,24 +1,35 @@
 import useSWR from 'swr'
 import { fetcher } from './fetcher'
 import { NodeStatus } from '../model/node-status'
-import { useContext, useState } from 'react'
-import { useGlobals } from '../utils/globals'
-import { FetcherContext } from '../components/FetcherContextProvider';
-import { showErrorMessage } from './useToastStore'
+import { useContext, useEffect, useState } from "react";
+import { useGlobals } from "../utils/globals";
+import { FetcherContext } from "../components/FetcherContextProvider";
+import { showErrorMessage } from "./useToastStore";
 
 type NodeStatusResponse = {
   nodeStatus: NodeStatus | undefined;
   startNode: Function;
   stopNode: Function;
   isLoading: boolean;
-}
+  notifyUnstake: boolean;
+};
 
 export const useNodeStatus = (): NodeStatusResponse => {
   const { apiBase } = useGlobals()
   const nodeStatusApi = `${apiBase}/api/node/status`
   const fetcherWithContext = useContext(FetcherContext);
   const { data, mutate } = useSWR<NodeStatus>(nodeStatusApi, fetcherWithContext, { refreshInterval: 1000 })
   const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [hasShownUnstakeNotification, setHasShownUnstakeNotification] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    if (data?.stakeState?.unlocked && !hasShownUnstakeNotification) {
+      setHasShownUnstakeNotification(true);
+    } else if (!data?.stakeState?.unlocked && hasShownUnstakeNotification) {
+      setHasShownUnstakeNotification(false);
+    }
+  }, [data]);
 
   const startNode = async (): Promise<void> => {
     setIsLoading(true)
@@ -46,8 +57,9 @@ export const useNodeStatus = (): NodeStatusResponse => {
     nodeStatus: data,
     startNode,
     stopNode,
-    isLoading
-  }
+    isLoading,
+    notifyUnstake: hasShownUnstakeNotification,
+  };
 }
 
 

hooks/useNotificationsStore.ts

@@ -5,7 +5,8 @@ export enum NotificationType {
   NODE_STATUS = "NODE_STATUS",
   ERROR = "ERROR",
   REWARD = "REWARD",
-  VERSION_UPDATE = "VERSION_UPDATE"
+  VERSION_UPDATE = "VERSION_UPDATE",
+  UNSTAKE_STATUS = "UNSTAKE_STATUS",
 }
 
 export enum NotificationSeverity {