From 52a90c009f16c887004905ee2e9d9a2f13ab90de Mon Sep 17 00:00:00 2001
From: Izumi Hoshino <admin@chiamine.jp>
Date: Thu, 16 Nov 2023 02:38:16 +0900
Subject: [PATCH] Added tooltip for missing sps

---
 .../gui/src/components/farm/FarmHealth.tsx    | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/gui/src/components/farm/FarmHealth.tsx b/packages/gui/src/components/farm/FarmHealth.tsx
index 7f70f7057a..792ded9238 100644
--- a/packages/gui/src/components/farm/FarmHealth.tsx
+++ b/packages/gui/src/components/farm/FarmHealth.tsx
@@ -309,25 +309,38 @@ function FarmHealth() {
     if (isLoadingMissingSps) {
       return <CircularProgress color="secondary" size={14} />;
     }
+
+    const tooltipTitle = (
+      <Box>
+        <Trans>
+          The increasing number of missing signage points suggests that you were either disconnected from or
+          significantly distant from a timelord in your fullNode network. The total number of missing SPs serves as an
+          indicator of potential rewards you could have claimed. A common reason for missing SPs is typically that the
+          fullNode is out of sync due to network issues
+        </Trans>
+        {Boolean(missingSpsData?.totalMissingSps) && (
+          <Button size="small" onClick={() => resetMissingSps()}>
+            <Trans>Reset</Trans>
+          </Button>
+        )}
+      </Box>
+    );
+
     if (!missingSpsData?.totalMissingSps) {
       return (
-        <Box>
-          <Typography variant="body2">
-            <Trans>Missing signage points</Trans>
-          </Typography>
-          <StateIndicator state={State.SUCCESS} indicator reversed>
-            <Trans>None</Trans>
-          </StateIndicator>
-        </Box>
+        <Tooltip title={tooltipTitle}>
+          <Box>
+            <Typography variant="body2">
+              <Trans>Missing signage points</Trans>
+            </Typography>
+            <StateIndicator state={State.SUCCESS} indicator reversed>
+              <Trans>None</Trans>
+            </StateIndicator>
+          </Box>
+        </Tooltip>
       );
     }
 
-    const tooltipTitle = (
-      <Button size="small" onClick={() => resetMissingSps()}>
-        <Trans>Reset</Trans>
-      </Button>
-    );
-
     return (
       <Tooltip title={tooltipTitle}>
         <Box>