Skip to content

Commit b6a1593

Browse files
salil-naiksalil-naik
authored
Merge pull request #75 from SocketDotTech/fix/replace-tooltip-lib
feat: replaced tippy with floating-ui lib
2 parents a3cb430 + 9c4a2c2 commit b6a1593

File tree

10 files changed

+130
-55
lines changed

10 files changed

+130
-55
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@socket.tech/plugin",
3-
"version": "1.1.4",
3+
"version": "1.2.0",
44
"main": "dist/index.js",
55
"module": "dist/index.es.js",
66
"types": "dist/index.d.ts",
@@ -24,11 +24,11 @@
2424
"chromatic": "npx chromatic --project-token=12c9df8b6cf2"
2525
},
2626
"dependencies": {
27+
"@floating-ui/react": "^0.25.0",
2728
"@react-spring/web": "^9.5.0",
2829
"@reduxjs/toolkit": "^1.8.2",
2930
"@socket.tech/ll-core": "^0.1.10",
3031
"@socket.tech/socket-v2-sdk": "^1.23.1",
31-
"@tippyjs/react": "^4.2.6",
3232
"ethers": "^5.6.9",
3333
"react-feather": "^2.0.10",
3434
"react-redux": "^8.0.2",

‎src/components/OpRewards.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from "react";
22
import { Gift, Info } from "react-feather";
33
import { useDispatch, useSelector } from "react-redux";
44
import { useTransition } from "@react-spring/web";
5-
import Tippy from "@tippyjs/react";
65
import { ethers } from "ethers";
76

87
import { setIsOpRewardModalOpen } from "../state/modals";
@@ -13,6 +12,7 @@ import { useOpRebatesData } from "../hooks/apis/useOpRebatesData";
1312
// components
1413
import { Modal } from "./common/Modal";
1514
import { Button } from "./common/Button";
15+
import { Tooltip } from "./common/Tooltip";
1616

1717
export const OpRewards = () => {
1818
const dispatch = useDispatch();
@@ -100,16 +100,19 @@ export const OpRewardsModal = () => {
100100
<div className="skt-w skt-w-px-3 skt-w-pt-3">
101101
<p className="skt-w skt-w-text-sm skt-w-text-widget-primary skt-w-font-medium skt-w-flex skt-w-items-center">
102102
Rewards Earned{" "}
103-
<Tippy content="OP rewards for bridging to Optimism can be claimed on Socketscan">
103+
<Tooltip
104+
tooltipContent="OP rewards for bridging to Optimism can be claimed on
105+
Socketscan"
106+
>
104107
<Info className="skt-w skt-w-w-4 skt-w-h-4 skt-w-ml-1" />
105-
</Tippy>
108+
</Tooltip>
106109
</p>
107110
<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">
108-
<Tippy content={rewardsEarnedInToken}>
111+
<Tooltip tooltipContent={rewardsEarnedInToken}>
109112
<span className="skt-w skt-w-pr-1">
110-
{truncateDecimalValue(rewardsEarnedInToken, 4)}{" "}
113+
{truncateDecimalValue(rewardsEarnedInToken, 4)}
111114
</span>
112-
</Tippy>
115+
</Tooltip>
113116
{data?.asset?.symbol}{" "}
114117
<img
115118
src={data?.asset?.logoURI}

‎src/components/Refuel.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { enableRefuel } from "../state/quotesSlice";
55
import { CustomizeContext } from "../providers/CustomizeProvider";
66
import useMappedChainData from "../hooks/useMappedChainData";
77
import { HelpCircle } from "react-feather";
8-
import { Popover } from "./common/Popover";
8+
import { Tooltip } from "./common/Tooltip";
99

1010
export const Refuel = ({ selectivelyShowRefuel }) => {
1111
const [isChecked, setIsChecked] = useState(false);
@@ -44,13 +44,9 @@ export const Refuel = ({ selectivelyShowRefuel }) => {
4444
<div className="skt-w-mr-1">
4545
<div className="skt-w skt-w-text-sm skt-w-text-widget-primary skt-w-font-medium skt-w-flex skt-w-items-center">
4646
Enable Refuel
47-
<Popover
48-
content="With Refuel, you can swap native tokens on the source chain for native tokens to transact on the destination chain"
49-
classNames="skt-w--top-14"
50-
cursor="cursor-help"
51-
>
47+
<Tooltip tooltipContent="With Refuel, you can swap native tokens on the source chain for native tokens to transact on the destination chain">
5248
<HelpCircle className="skt-w skt-w-ml-1.5 skt-w-w-4 skt-w-h-4 skt-w-opacity-70" />
53-
</Popover>
49+
</Tooltip>
5450
</div>
5551
<p className="skt-w skt-w-text-xs skt-w-text-widget-secondary skt-w-mt-0.5">
5652
{destChainId === 1 ? (

‎src/components/RouteDetails/ReviewModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useDispatch, useSelector } from "react-redux";
22
import { ReactNode, useContext, useEffect, useState } from "react";
33
import { CustomizeContext } from "../../providers/CustomizeProvider";
44
import { BRIDGE_DISPLAY_NAMES, UserTxType } from "../../consts/";
5-
import Tippy from "@tippyjs/react";
65
import { ChevronUp, Edit, Info } from "react-feather";
76

87
// components
@@ -11,6 +10,7 @@ import { Modal } from "../common/Modal";
1110
import { InnerCard } from "../common/InnerCard";
1211
import { TxStepDetails } from "../TxModal/TxStepDetails";
1312
import { TokenDetailsRow } from "../common/TokenDetailsRow";
13+
import { Tooltip } from "../common/Tooltip";
1414

1515
// actions
1616
import { setIsSettingsModalOpen, setIsTxModalOpen } from "../../state/modals";
@@ -130,9 +130,9 @@ export const ReviewModal = ({
130130
const OpRebateLabel = (
131131
<span className="skt-w skt-w-flex skt-w-items-center">
132132
OP Rewards
133-
<Tippy content="Estimated rewards for bridging to Optimism.">
133+
<Tooltip tooltipContent="Estimated rewards for bridging to Optimism.">
134134
<Info className="skt-w skt-w-ml-1.5 skt-w-w-4 skt-w-h-4" />
135-
</Tippy>
135+
</Tooltip>
136136
</span>
137137
);
138138

‎src/components/Settings/SingleTx.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { setSingleTxOnly } from "../../state/quotesSlice";
77
import { CheckBox } from "../common/CheckBox";
88
import { Popover } from "../common/Popover";
99
import { SubTitle } from "./SubTitle";
10+
import { Tooltip } from "../common/Tooltip";
1011

1112
export const SingleTx = () => {
1213
const dispatch = useDispatch();
@@ -32,13 +33,9 @@ export const SingleTx = () => {
3233
<div className="skt-w skt-w-flex skt-w-items-center skt-w-relative skt-w-mt-6 skt-w-justify-between">
3334
<div className="skt-w skt-w-flex skt-w-items-center skt-w-mb-1.5">
3435
<SubTitle>Single Transaction Mode</SubTitle>
35-
<Popover
36-
content="Only select routes with one user transaction i.e. direct bridge or source chain swap + bridge."
37-
classNames="skt-w-bottom-8"
38-
cursor="cursor-help"
39-
>
36+
<Tooltip tooltipContent="Only select routes with one user transaction i.e. direct bridge or source chain swap + bridge.">
4037
<Info className="skt-w-ml-1.5 skt-w-w-4 skt-w-h-4 skt-w-text-widget-secondary" />
41-
</Popover>
38+
</Tooltip>
4239
</div>
4340
<span className="skt-w-px-1"></span>
4441
<CheckBox

‎src/components/Settings/SwapSlippage.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { RadioCheckbox } from "../common/RadioCheckbox";
1010
import { useDispatch, useSelector } from "react-redux";
1111
import { DisclaimerBox } from "../common/DisclaimerBox";
1212
import { SubTitle } from "./SubTitle";
13-
import { Popover } from "../common/Popover";
13+
import { Tooltip } from "../common/Tooltip";
1414

1515
export const SwapSlippage = () => {
1616
const [buttonInput, setButtonInput] = useState<number | null>(null);
@@ -105,13 +105,9 @@ export const SwapSlippage = () => {
105105
<div className="skt-w-flex skt-w-justify-between skt-w-relative">
106106
<div className="skt-w skt-w-flex skt-w-items-center skt-w-mb-1.5">
107107
<SubTitle>Swap Slippage</SubTitle>
108-
<Popover
109-
content="Your swap transaction will revert if the price changes unfavourably by more than this percentage."
110-
classNames="skt-w-bottom-8"
111-
cursor="cursor-help"
112-
>
108+
<Tooltip tooltipContent="Your swap transaction will revert if the price changes unfavourably by more than this percentage.">
113109
<Info className="skt-w-ml-1.5 skt-w-w-4 skt-w-h-4 skt-w-text-widget-secondary" />
114-
</Popover>
110+
</Tooltip>
115111
</div>
116112
{buttonInput || customInput ? (
117113
<span className="skt-w-text-xs skt-w-text-widget-secondary skt-w-ml-3">

‎src/components/TokenInput/RefuelAmount.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Info } from "react-feather";
22
import { formatCurrencyAmount, truncateDecimalValue } from "../../utils/";
33
import { useSelector } from "react-redux";
4-
import Tippy from "@tippyjs/react";
4+
import { Tooltip } from "../common/Tooltip";
55

66
export const RefuelAmount = ({ src = false }: { src?: boolean }) => {
77
const bestRoute = useSelector((state: any) => state.quotes.bestRoute);
@@ -32,15 +32,15 @@ export const RefuelAmount = ({ src = false }: { src?: boolean }) => {
3232
)}
3333

3434
{/* OP Rebate Amount */}
35-
{!src && opRebateData && opRebateData?.amount != '0' && (
35+
{!src && opRebateData && opRebateData?.amount != "0" && (
3636
<span className="skt-w-text-widget-secondary skt-w-inline-flex skt-w-items-center">
3737
{" "}
3838
+ {truncateDecimalValue(opRebateAmountFormatted, 3)} OP{" "}
39-
<Tippy content="Estimated rewards for bridging to Optimism.">
39+
<Tooltip tooltipContent="Estimated rewards for bridging to Optimism.">
4040
<span className="skt-w-w-3 skt-w-h-3">
4141
<Info className="skt-w-w-3 skt-w-h-3 skt-w-rounded-full skt-w-ml-1" />{" "}
4242
</span>
43-
</Tippy>
43+
</Tooltip>
4444
</span>
4545
)}
4646
</span>

‎src/components/TokenInput/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const TokenInput = (props: TokenInputProps) => {
2626
tokenToDisable,
2727
} = props;
2828
return (
29-
<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]">
29+
<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]">
3030
<div className="skt-w skt-w-flex skt-w-flex-1">
3131
<div className="stk-w skt-w-flex skt-w-flex-col skt-w-relative">
3232
<input

‎src/components/common/Tooltip.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
useFloating,
3+
useHover,
4+
useInteractions,
5+
offset,
6+
flip,
7+
shift,
8+
} from "@floating-ui/react";
9+
import { ReactNode, useState } from "react";
10+
11+
export const Tooltip = ({
12+
children,
13+
tooltipContent,
14+
}: {
15+
children: ReactNode;
16+
tooltipContent: ReactNode;
17+
}) => {
18+
const [isOpen, setIsOpen] = useState(false);
19+
20+
const { refs, floatingStyles, context } = useFloating({
21+
open: isOpen,
22+
onOpenChange: setIsOpen,
23+
middleware: [offset(5), flip(), shift()],
24+
});
25+
26+
const hover = useHover(context);
27+
28+
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
29+
30+
return (
31+
<>
32+
<div
33+
ref={refs.setReference}
34+
{...getReferenceProps()}
35+
className="skt-w skt-w-flex"
36+
>
37+
{children}
38+
</div>
39+
{isOpen && (
40+
<div
41+
ref={refs.setFloating}
42+
style={floatingStyles}
43+
className="skt-w-px-3 skt-w-z-50"
44+
{...getFloatingProps()}
45+
>
46+
<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">
47+
{tooltipContent}
48+
</div>
49+
</div>
50+
)}
51+
</>
52+
);
53+
};

‎yarn.lock‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1875,6 +1875,43 @@
18751875
"@ethersproject/properties" "^5.7.0"
18761876
"@ethersproject/strings" "^5.7.0"
18771877

1878+
"@floating-ui/core@^1.4.1":
1879+
version "1.4.1"
1880+
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
1881+
integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
1882+
dependencies:
1883+
"@floating-ui/utils" "^0.1.1"
1884+
1885+
"@floating-ui/dom@^1.3.0":
1886+
version "1.5.1"
1887+
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
1888+
integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
1889+
dependencies:
1890+
"@floating-ui/core" "^1.4.1"
1891+
"@floating-ui/utils" "^0.1.1"
1892+
1893+
"@floating-ui/react-dom@^2.0.1":
1894+
version "2.0.1"
1895+
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
1896+
integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
1897+
dependencies:
1898+
"@floating-ui/dom" "^1.3.0"
1899+
1900+
"@floating-ui/react@^0.25.0":
1901+
version "0.25.0"
1902+
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.0.tgz#2dcc79b0892b570641484355ca27a0f25793c12b"
1903+
integrity sha512-0ulipo5ZTmCpTlVPjIbLyqReO7S3gwyQSiIm0TjKU5LPN97BmMZ2crJZcNMQ4GZz/V4qurMibGl4z3+TjF5tRA==
1904+
dependencies:
1905+
"@floating-ui/react-dom" "^2.0.1"
1906+
"@floating-ui/utils" "^0.1.0"
1907+
aria-hidden "^1.2.3"
1908+
tabbable "^6.0.1"
1909+
1910+
"@floating-ui/utils@^0.1.0", "@floating-ui/utils@^0.1.1":
1911+
version "0.1.1"
1912+
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
1913+
integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
1914+
18781915
"@gar/promisify@^1.0.1":
18791916
version "1.1.3"
18801917
resolved "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz"
@@ -2087,11 +2124,6 @@
20872124
schema-utils "^3.0.0"
20882125
source-map "^0.7.3"
20892126

2090-
"@popperjs/core@^2.9.0":
2091-
version "2.11.8"
2092-
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
2093-
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
2094-
20952127
"@rainbow-me/rainbowkit@^0.4.1":
20962128
version "0.4.1"
20972129
resolved "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-0.4.1.tgz"
@@ -3135,13 +3167,6 @@
31353167
dependencies:
31363168
"@babel/runtime" "^7.12.5"
31373169

3138-
"@tippyjs/react@^4.2.6":
3139-
version "4.2.6"
3140-
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
3141-
integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
3142-
dependencies:
3143-
tippy.js "^6.3.1"
3144-
31453170
"@trysound/[email protected]":
31463171
version "0.2.0"
31473172
resolved "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz"
@@ -3939,6 +3964,13 @@ argparse@^1.0.7:
39393964
dependencies:
39403965
sprintf-js "~1.0.2"
39413966

3967+
aria-hidden@^1.2.3:
3968+
version "1.2.3"
3969+
resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
3970+
integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
3971+
dependencies:
3972+
tslib "^2.0.0"
3973+
39423974
aria-query@^5.0.0:
39433975
version "5.0.0"
39443976
resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz"
@@ -10940,6 +10972,11 @@ synchronous-promise@^2.0.15:
1094010972
resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz"
1094110973
integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
1094210974

10975+
tabbable@^6.0.1:
10976+
version "6.2.0"
10977+
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
10978+
integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
10979+
1094310980
tailwindcss@^3.1.3:
1094410981
version "3.1.3"
1094510982
resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.3.tgz"
@@ -11088,13 +11125,6 @@ timers-browserify@^2.0.4:
1108811125
dependencies:
1108911126
setimmediate "^1.0.4"
1109011127

11091-
tippy.js@^6.3.1:
11092-
version "6.3.7"
11093-
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
11094-
integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
11095-
dependencies:
11096-
"@popperjs/core" "^2.9.0"
11097-
1109811128
[email protected]:
1109911129
version "1.0.5"
1110011130
resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"

0 commit comments

Comments
 (0)