From 09dc9965a4d041dde187dfa127aa1729004e06a4 Mon Sep 17 00:00:00 2001
From: Jeff Smale <6363749+jeffsmale90@users.noreply.github.com>
Date: Thu, 8 Dec 2022 11:34:10 +1300
Subject: [PATCH] Use react-tooltip component for homescreen tooltip

---
 package-lock.json                          | 26 ++++++++++++++++++++++
 package.json                               |  1 +
 src/renderer/screens/startup/HomeScreen.js | 16 ++++++-------
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6eb924cc4..e36a55f35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35403,6 +35403,32 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-tooltip": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.5.1.tgz",
+      "integrity": "sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==",
+      "requires": {
+        "prop-types": "^15.8.1",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        },
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
+      }
+    },
     "react-virtualized": {
       "version": "9.21.2",
       "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.2.tgz",
diff --git a/package.json b/package.json
index 6ef4471c5..08b248c44 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "react-syntax-highlighter": "11.0.2",
+    "react-tooltip": "4.5.1",
     "react-virtualized": "^9.21.0",
     "redux": "4.0.4",
     "redux-logger": "^2.7.4",
diff --git a/src/renderer/screens/startup/HomeScreen.js b/src/renderer/screens/startup/HomeScreen.js
index 7f2b69fb9..0df7c9053 100644
--- a/src/renderer/screens/startup/HomeScreen.js
+++ b/src/renderer/screens/startup/HomeScreen.js
@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import { Scrollbars } from "react-custom-scrollbars";
-import Warning from "../../../renderer/icons/warning.svg";
 import * as pkg from "../../../../package.json";
 
 import OnlyIf from "../../../renderer/components/only-if/OnlyIf";
@@ -24,6 +23,8 @@ import ChainIcon from "../../icons/chain.svg";
 import MenuIcon from "../../icons/list.svg";
 import TrashIcon from "../../icons/trash-icon.svg";
 import SettingsIcon from "../../icons/settings.svg";
+import WarningIcon from "../../../renderer/icons/warning.svg";
+import ReactTooltip from "react-tooltip";
 
 class HomeScreen extends Component {
   constructor(props) {
@@ -141,14 +142,10 @@ class HomeScreen extends Component {
               <span>
                 {workspaceInfo.name} ({workspaceInfo.flavor})
                 <OnlyIf test={workspaceInfo.isLegacy}>
-                  <span className="popover-container">
-                    <span className="popover">
-                      This workspace was created with an old version of Ganache.
-                      <br />
-                      Create a new workspace to take advantage of Ganache v7.
-                    </span>
-                    <Warning />
-                  </span>
+                  <WarningIcon data-tip="This workspace was created with an old version of Ganache.
+                    <br />
+                    Create a new workspace to take advantage of Ganache v7."
+                    data-multiline={true}/>
                 </OnlyIf>
               </span>
               <div
@@ -269,6 +266,7 @@ class HomeScreen extends Component {
         >
           <UpdateModal />
         </OnlyIf>
+        <ReactTooltip />
       </React.Fragment>
     );
   }