Merge pull request #75 from SocketDotTech/fix/replace-tooltip-lib

feat: replaced tippy with floating-ui lib

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socket.tech/plugin",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -24,11 +24,11 @@
     "chromatic": "npx chromatic --project-token=12c9df8b6cf2"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.25.0",
     "@react-spring/web": "^9.5.0",
     "@reduxjs/toolkit": "^1.8.2",
     "@socket.tech/ll-core": "^0.1.10",
     "@socket.tech/socket-v2-sdk": "^1.23.1",
-    "@tippyjs/react": "^4.2.6",
     "ethers": "^5.6.9",
     "react-feather": "^2.0.10",
     "react-redux": "^8.0.2",

src/components/OpRewards.tsx

@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from "react";
 import { Gift, Info } from "react-feather";
 import { useDispatch, useSelector } from "react-redux";
 import { useTransition } from "@react-spring/web";
-import Tippy from "@tippyjs/react";
 import { ethers } from "ethers";
 
 import { setIsOpRewardModalOpen } from "../state/modals";
@@ -13,6 +12,7 @@ import { useOpRebatesData } from "../hooks/apis/useOpRebatesData";
 // components
 import { Modal } from "./common/Modal";
 import { Button } from "./common/Button";
+import { Tooltip } from "./common/Tooltip";
 
 export const OpRewards = () => {
   const dispatch = useDispatch();
@@ -100,16 +100,19 @@ export const OpRewardsModal = () => {
               <div className="skt-w skt-w-px-3 skt-w-pt-3">
                 <p className="skt-w skt-w-text-sm skt-w-text-widget-primary skt-w-font-medium skt-w-flex skt-w-items-center">
                   Rewards Earned{" "}
-                  <Tippy content="OP rewards for bridging to Optimism can be claimed on Socketscan">
+                  <Tooltip
+                    tooltipContent="OP rewards for bridging to Optimism can be claimed on
+                      Socketscan"
+                  >
                     <Info className="skt-w skt-w-w-4 skt-w-h-4 skt-w-ml-1" />
-                  </Tippy>
+                  </Tooltip>
                 </p>
                 <p className="skt-w skt-w-text-widget-secondary stk-w-font-medium skt-w-mb-4 skt-w-mt-2 skt-w-flex skt-w-items-center">
-                  <Tippy content={rewardsEarnedInToken}>
+                  <Tooltip tooltipContent={rewardsEarnedInToken}>
                     <span className="skt-w skt-w-pr-1">
-                      {truncateDecimalValue(rewardsEarnedInToken, 4)}{" "}
+                      {truncateDecimalValue(rewardsEarnedInToken, 4)}
                     </span>
-                  </Tippy>
+                  </Tooltip>
                   {data?.asset?.symbol}{" "}
                   <img
                     src={data?.asset?.logoURI}

src/components/Refuel.tsx

@@ -5,7 +5,7 @@ import { enableRefuel } from "../state/quotesSlice";
 import { CustomizeContext } from "../providers/CustomizeProvider";
 import useMappedChainData from "../hooks/useMappedChainData";
 import { HelpCircle } from "react-feather";
-import { Popover } from "./common/Popover";
+import { Tooltip } from "./common/Tooltip";
 
 export const Refuel = ({ selectivelyShowRefuel }) => {
   const [isChecked, setIsChecked] = useState(false);
@@ -44,13 +44,9 @@ export const Refuel = ({ selectivelyShowRefuel }) => {
       <div className="skt-w-mr-1">
         <div className="skt-w skt-w-text-sm skt-w-text-widget-primary skt-w-font-medium skt-w-flex skt-w-items-center">
           Enable Refuel
-          <Popover
-            content="With Refuel, you can swap native tokens on the source chain for native tokens to transact on the destination chain"
-            classNames="skt-w--top-14"
-            cursor="cursor-help"
-          >
+          <Tooltip tooltipContent="With Refuel, you can swap native tokens on the source chain for native tokens to transact on the destination chain">
             <HelpCircle className="skt-w skt-w-ml-1.5 skt-w-w-4 skt-w-h-4 skt-w-opacity-70" />
-          </Popover>
+          </Tooltip>
         </div>
         <p className="skt-w skt-w-text-xs skt-w-text-widget-secondary skt-w-mt-0.5">
           {destChainId === 1 ? (

src/components/RouteDetails/ReviewModal.tsx

@@ -2,7 +2,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { ReactNode, useContext, useEffect, useState } from "react";
 import { CustomizeContext } from "../../providers/CustomizeProvider";
 import { BRIDGE_DISPLAY_NAMES, UserTxType } from "../../consts/";
-import Tippy from "@tippyjs/react";
 import { ChevronUp, Edit, Info } from "react-feather";
 
 // components
@@ -11,6 +10,7 @@ import { Modal } from "../common/Modal";
 import { InnerCard } from "../common/InnerCard";
 import { TxStepDetails } from "../TxModal/TxStepDetails";
 import { TokenDetailsRow } from "../common/TokenDetailsRow";
+import { Tooltip } from "../common/Tooltip";
 
 // actions
 import { setIsSettingsModalOpen, setIsTxModalOpen } from "../../state/modals";
@@ -130,9 +130,9 @@ export const ReviewModal = ({
   const OpRebateLabel = (
     <span className="skt-w skt-w-flex skt-w-items-center">
       OP Rewards
-      <Tippy content="Estimated rewards for bridging to Optimism.">
+      <Tooltip tooltipContent="Estimated rewards for bridging to Optimism.">
         <Info className="skt-w skt-w-ml-1.5 skt-w-w-4 skt-w-h-4" />
-      </Tippy>
+      </Tooltip>
     </span>
   );
 

src/components/Settings/SingleTx.tsx

@@ -7,6 +7,7 @@ import { setSingleTxOnly } from "../../state/quotesSlice";
 import { CheckBox } from "../common/CheckBox";
 import { Popover } from "../common/Popover";
 import { SubTitle } from "./SubTitle";
+import { Tooltip } from "../common/Tooltip";
 
 export const SingleTx = () => {
   const dispatch = useDispatch();
@@ -32,13 +33,9 @@ export const SingleTx = () => {
     <div className="skt-w skt-w-flex skt-w-items-center skt-w-relative skt-w-mt-6 skt-w-justify-between">
       <div className="skt-w skt-w-flex skt-w-items-center skt-w-mb-1.5">
         <SubTitle>Single Transaction Mode</SubTitle>
-        <Popover
-          content="Only select routes with one user transaction i.e. direct bridge or source chain swap + bridge."
-          classNames="skt-w-bottom-8"
-          cursor="cursor-help"
-        >
+        <Tooltip tooltipContent="Only select routes with one user transaction i.e. direct bridge or source chain swap + bridge.">
           <Info className="skt-w-ml-1.5 skt-w-w-4 skt-w-h-4 skt-w-text-widget-secondary" />
-        </Popover>
+        </Tooltip>
       </div>
       <span className="skt-w-px-1"></span>
       <CheckBox

src/components/Settings/SwapSlippage.tsx

@@ -10,7 +10,7 @@ import { RadioCheckbox } from "../common/RadioCheckbox";
 import { useDispatch, useSelector } from "react-redux";
 import { DisclaimerBox } from "../common/DisclaimerBox";
 import { SubTitle } from "./SubTitle";
-import { Popover } from "../common/Popover";
+import { Tooltip } from "../common/Tooltip";
 
 export const SwapSlippage = () => {
   const [buttonInput, setButtonInput] = useState<number | null>(null);
@@ -105,13 +105,9 @@ export const SwapSlippage = () => {
       <div className="skt-w-flex skt-w-justify-between skt-w-relative">
         <div className="skt-w skt-w-flex skt-w-items-center skt-w-mb-1.5">
           <SubTitle>Swap Slippage</SubTitle>
-          <Popover
-            content="Your swap transaction will revert if the price changes unfavourably by more than this percentage."
-            classNames="skt-w-bottom-8"
-            cursor="cursor-help"
-          >
+          <Tooltip tooltipContent="Your swap transaction will revert if the price changes unfavourably by more than this percentage.">
             <Info className="skt-w-ml-1.5 skt-w-w-4 skt-w-h-4 skt-w-text-widget-secondary" />
-          </Popover>
+          </Tooltip>
         </div>
         {buttonInput || customInput ? (
           <span className="skt-w-text-xs skt-w-text-widget-secondary skt-w-ml-3">

src/components/TokenInput/RefuelAmount.tsx

@@ -1,7 +1,7 @@
 import { Info } from "react-feather";
 import { formatCurrencyAmount, truncateDecimalValue } from "../../utils/";
 import { useSelector } from "react-redux";
-import Tippy from "@tippyjs/react";
+import { Tooltip } from "../common/Tooltip";
 
 export const RefuelAmount = ({ src = false }: { src?: boolean }) => {
   const bestRoute = useSelector((state: any) => state.quotes.bestRoute);
@@ -32,15 +32,15 @@ export const RefuelAmount = ({ src = false }: { src?: boolean }) => {
         )}
 
         {/* OP Rebate Amount */}
-        {!src && opRebateData && opRebateData?.amount != '0' && (
+        {!src && opRebateData && opRebateData?.amount != "0" && (
           <span className="skt-w-text-widget-secondary skt-w-inline-flex skt-w-items-center">
             {" "}
             + {truncateDecimalValue(opRebateAmountFormatted, 3)} OP{" "}
-            <Tippy content="Estimated rewards for bridging to Optimism.">
+            <Tooltip tooltipContent="Estimated rewards for bridging to Optimism.">
               <span className="skt-w-w-3 skt-w-h-3">
                 <Info className="skt-w-w-3 skt-w-h-3 skt-w-rounded-full skt-w-ml-1" />{" "}
               </span>
-            </Tippy>
+            </Tooltip>
           </span>
         )}
       </span>

src/components/TokenInput/index.tsx

@@ -26,7 +26,7 @@ export const TokenInput = (props: TokenInputProps) => {
     tokenToDisable,
   } = props;
   return (
-    <div className="skt-w skt-w-flex skt-w-items-center skt-w-justify-between skt-w-mt-2.5 skt-w-overflow-hidden skt-w-pb-[1.125rem]">
+    <div className="skt-w skt-w-flex skt-w-items-center skt-w-justify-between skt-w-mt-2.5 skt-w-pb-[1.125rem]">
       <div className="skt-w skt-w-flex skt-w-flex-1">
         <div className="stk-w skt-w-flex skt-w-flex-col skt-w-relative">
           <input

src/components/common/Tooltip.tsx

@@ -0,0 +1,53 @@
+import {
+  useFloating,
+  useHover,
+  useInteractions,
+  offset,
+  flip,
+  shift,
+} from "@floating-ui/react";
+import { ReactNode, useState } from "react";
+
+export const Tooltip = ({
+  children,
+  tooltipContent,
+}: {
+  children: ReactNode;
+  tooltipContent: ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset(5), flip(), shift()],
+  });
+
+  const hover = useHover(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+
+  return (
+    <>
+      <div
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        className="skt-w skt-w-flex"
+      >
+        {children}
+      </div>
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={floatingStyles}
+          className="skt-w-px-3 skt-w-z-50"
+          {...getFloatingProps()}
+        >
+          <div className="skt-w skt-w-text-xs skt-w-text-white skt-w-text-left skt-w-bg-[#262636] skt-w-border skt-w-border-widget-secondary-text skt-w-border-opacity-40 skt-w-rounded-md skt-w-p-2">
+            {tooltipContent}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

yarn.lock

@@ -1875,6 +1875,43 @@
     "@ethersproject/properties" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/dom@^1.3.0":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
+  integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
+  dependencies:
+    "@floating-ui/dom" "^1.3.0"
+
+"@floating-ui/react@^0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.0.tgz#2dcc79b0892b570641484355ca27a0f25793c12b"
+  integrity sha512-0ulipo5ZTmCpTlVPjIbLyqReO7S3gwyQSiIm0TjKU5LPN97BmMZ2crJZcNMQ4GZz/V4qurMibGl4z3+TjF5tRA==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.1"
+    "@floating-ui/utils" "^0.1.0"
+    aria-hidden "^1.2.3"
+    tabbable "^6.0.1"
+
+"@floating-ui/utils@^0.1.0", "@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz"
@@ -2087,11 +2124,6 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@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==
-
 "@rainbow-me/rainbowkit@^0.4.1":
   version "0.4.1"
   resolved "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-0.4.1.tgz"
@@ -3135,13 +3167,6 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@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"
-
 "@trysound/[email protected]":
   version "0.2.0"
   resolved "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz"
@@ -3939,6 +3964,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-hidden@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz"
@@ -10940,6 +10972,11 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
+tabbable@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tailwindcss@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.3.tgz"
@@ -11088,13 +11125,6 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-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"
-
 [email protected]:
   version "1.0.5"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"