diff --git a/components/molecules/NodeStatus.tsx b/components/molecules/NodeStatus.tsx index d7e14e4..838d721 100644 --- a/components/molecules/NodeStatus.tsx +++ b/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); }; diff --git a/hooks/useNodeStatus.ts b/hooks/useNodeStatus.ts index b35544e..5bdaea2 100644 --- a/hooks/useNodeStatus.ts +++ b/hooks/useNodeStatus.ts @@ -1,17 +1,18 @@ 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() @@ -19,6 +20,16 @@ export const useNodeStatus = (): NodeStatusResponse => { const fetcherWithContext = useContext(FetcherContext); const { data, mutate } = useSWR(nodeStatusApi, fetcherWithContext, { refreshInterval: 1000 }) const [isLoading, setIsLoading] = useState(false) + const [hasShownUnstakeNotification, setHasShownUnstakeNotification] = + useState(false); + + useEffect(() => { + if (data?.stakeState?.unlocked && !hasShownUnstakeNotification) { + setHasShownUnstakeNotification(true); + } else if (!data?.stakeState?.unlocked && hasShownUnstakeNotification) { + setHasShownUnstakeNotification(false); + } + }, [data]); const startNode = async (): Promise => { setIsLoading(true) @@ -46,8 +57,9 @@ export const useNodeStatus = (): NodeStatusResponse => { nodeStatus: data, startNode, stopNode, - isLoading - } + isLoading, + notifyUnstake: hasShownUnstakeNotification, + }; } diff --git a/hooks/useNotificationsStore.ts b/hooks/useNotificationsStore.ts index e7cb7aa..d66ae09 100644 --- a/hooks/useNotificationsStore.ts +++ b/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 {