upd: tippy tooltips

stabilitydao · Feb 3, 2025 · 9783050 · 9783050
1 parent 2f03227
commit 9783050
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@tanstack/query-sync-storage-persister": "^5.22.2",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-persist-client": "^5.22.2",
+    "@tippyjs/react": "^4.2.6",
     "@types/http-proxy-middleware": "^1.0.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",

diff --git a/src/modules/Vault/components/YieldRates/index.tsx b/src/modules/Vault/components/YieldRates/index.tsx
@@ -1,14 +1,18 @@
 import { memo, useState, useEffect } from "react";
 import { useStore } from "@nanostores/react";
 
+import Tippy from "@tippyjs/react";
+
 import { HoldTable, VSHoldTableCell, YieldTableCell } from "./table";
 
-import { TextModal, HeadingText } from "@ui";
+import { HeadingText } from "@ui";
 
 import { connected } from "@store";
 
 import { getTimeDifference, formatNumber } from "@utils";
 
+import "tippy.js/dist/tippy.css";
+
 import type { TVault, THoldData, TShareData } from "@types";
 
 interface IProps {
@@ -20,7 +24,8 @@ const YieldRates: React.FC<IProps> = memo(({ vault }) => {
 
   const [shareData, setShareData] = useState<TShareData>({});
 
-  const [modal, setModal] = useState<boolean>(false);
+  const vsHoldExplanation =
+    "VS HODL APR compares depositing tokens into a vault vs holding them in a wallet with its ratio and timeline.";
 
   const totalAPY = [
     { data: vault?.earningData?.apy?.latest, testID: "yieldLatestAPY" },
@@ -159,30 +164,22 @@ const YieldRates: React.FC<IProps> = memo(({ vault }) => {
           <div>
             <div className="mb-2 flex items-center gap-2">
               <p>VS HOLD</p>
-              <div className="tooltip">
+              <Tippy content={vsHoldExplanation} placement="top">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="18"
                   height="18"
                   viewBox="0 0 18 18"
                   fill="none"
-                  className="ml-1 cursor-pointer opacity-40 hover:opacity-100 transition delay-[40ms] tooltip"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setModal(true);
-                  }}
+                  className="ml-1 cursor-pointer opacity-40 hover:opacity-100 transition delay-[40ms]"
                 >
                   <circle cx="8" cy="8" r="7.5" stroke="white" />
                   <path
                     d="M7.34516 9.37249V9.3266C7.35011 8.83967 7.39958 8.45216 7.49359 8.16408C7.58759 7.876 7.72117 7.64273 7.89433 7.46427C8.06749 7.28581 8.27528 7.12138 8.5177 6.97096C8.66365 6.87918 8.79476 6.77083 8.91103 6.64591C9.02729 6.51844 9.11882 6.37185 9.18561 6.20614C9.25487 6.04043 9.2895 5.85688 9.2895 5.65547C9.2895 5.40563 9.23261 5.18893 9.11882 5.00538C9.00503 4.82182 8.85289 4.68033 8.66242 4.5809C8.47194 4.48148 8.26044 4.43176 8.02791 4.43176C7.82506 4.43176 7.62964 4.4751 7.44164 4.56178C7.25364 4.64846 7.09655 4.78485 6.9704 4.97096C6.84424 5.15707 6.77126 5.40053 6.75147 5.70136H5.81641C5.8362 5.26797 5.94504 4.89703 6.14294 4.58855C6.34331 4.28007 6.60676 4.04426 6.93329 3.88109C7.26229 3.71793 7.62717 3.63635 8.02791 3.63635C8.46328 3.63635 8.84176 3.72558 9.16335 3.90404C9.4874 4.0825 9.73725 4.32724 9.91288 4.63826C10.091 4.94929 10.18 5.30366 10.18 5.70136C10.18 5.9818 10.138 6.23546 10.0539 6.46236C9.97225 6.68925 9.85351 6.89193 9.69767 7.07039C9.5443 7.24884 9.35877 7.40691 9.14108 7.54457C8.92339 7.68479 8.749 7.83266 8.61789 7.98817C8.48678 8.14113 8.39155 8.32341 8.33218 8.53501C8.27281 8.74661 8.24065 9.01048 8.2357 9.3266V9.37249H7.34516ZM7.82012 11.6364C7.63706 11.6364 7.47998 11.5688 7.34887 11.4337C7.21777 11.2986 7.15221 11.1367 7.15221 10.948C7.15221 10.7594 7.21777 10.5975 7.34887 10.4624C7.47998 10.3272 7.63706 10.2597 7.82012 10.2597C8.00317 10.2597 8.16025 10.3272 8.29136 10.4624C8.42247 10.5975 8.48802 10.7594 8.48802 10.948C8.48802 11.0729 8.4571 11.1877 8.39526 11.2922C8.33589 11.3967 8.25549 11.4808 8.15407 11.5446C8.05512 11.6058 7.9438 11.6364 7.82012 11.6364Z"
                     fill="white"
                   />
                 </svg>
-                <div className="visible__tooltip toCenter flex items-start justify-start normal-case">
-                  VS HODL APR compares depositing tokens into a vault vs holding
-                  them in a wallet with it's ratio and timeline.
-                </div>
-              </div>
+              </Tippy>
             </div>
 
             <table className="font-manrope w-full">
@@ -255,12 +252,6 @@ const YieldRates: React.FC<IProps> = memo(({ vault }) => {
           </div>
         )}
       </div>
-      {modal && (
-        <TextModal
-          setModalState={setModal}
-          text="VS HODL APR compares depositing tokens into a vault vs holding them in a wallet with it's ratio and timeline."
-        />
-      )}
     </div>
   );
 });

diff --git a/yarn.lock b/yarn.lock
@@ -1448,6 +1448,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
+"@popperjs/core@^2.9.0":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rollup/pluginutils@^4.0.0":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
@@ -1784,6 +1789,13 @@
   dependencies:
     "@tanstack/query-core" "5.51.9"
 
+"@tippyjs/react@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
+  integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@tootallnate/once@2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -9789,6 +9801,13 @@ tinyspy@^3.0.0:
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.0.tgz#cb61644f2713cd84dee184863f4642e06ddf0585"
   integrity sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==
 
+tippy.js@^6.3.1:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 tmp-promise@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-3.0.3.tgz#60a1a1cc98c988674fcbfd23b6e3367bdeac4ce7"