From 3a03ceea37378a1871ce48ec72ad2a5d08f3b9d4 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 31 Aug 2022 15:47:01 +0300 Subject: [PATCH] add tooltip package --- package-lock.json | 84 ++++++++++++------- package.json | 1 + .../LinkedAccountsCard/WalletKey.tsx | 27 +++++- 3 files changed, 81 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index c57e2a7..8f1f132 100644 --- a/package-lock.json +++ b/package-lock.json @@ -77,6 +77,7 @@ "react-loader-spinner": "^6.0.0-0", "react-loading-skeleton": "^3.1.0", "react-modal": "^3.15.1", + "react-popper-tooltip": "^4.4.2", "react-query": "^3.35.0", "react-redux": "^8.0.0", "react-router-dom": "^6.3.0", @@ -2144,9 +2145,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", + "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -9640,6 +9641,21 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/@storybook/components/node_modules/react-popper-tooltip": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz", + "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.5.4", + "react-popper": "^2.2.4" + }, + "peerDependencies": { + "react": "^16.6.0 || ^17.0.0", + "react-dom": "^16.6.0 || ^17.0.0" + } + }, "node_modules/@storybook/core": { "version": "6.4.22", "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.4.22.tgz", @@ -60400,31 +60416,31 @@ } }, "node_modules/react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", "dependencies": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" }, "peerDependencies": { "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17" + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" } }, "node_modules/react-popper-tooltip": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz", - "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==", - "dev": true, + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz", + "integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==", "dependencies": { - "@babel/runtime": "^7.12.5", - "@popperjs/core": "^2.5.4", - "react-popper": "^2.2.4" + "@babel/runtime": "^7.18.3", + "@popperjs/core": "^2.11.5", + "react-popper": "^2.3.0" }, "peerDependencies": { - "react": "^16.6.0 || ^17.0.0", - "react-dom": "^16.6.0 || ^17.0.0" + "react": ">=16.6.0", + "react-dom": ">=16.6.0" } }, "node_modules/react-query": { @@ -69383,9 +69399,9 @@ } }, "@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", + "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -75061,6 +75077,17 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true + }, + "react-popper-tooltip": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz", + "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.5.4", + "react-popper": "^2.2.4" + } } } }, @@ -114006,23 +114033,22 @@ "requires": {} }, "react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", "requires": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" } }, "react-popper-tooltip": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz", - "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==", - "dev": true, + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz", + "integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==", "requires": { - "@babel/runtime": "^7.12.5", - "@popperjs/core": "^2.5.4", - "react-popper": "^2.2.4" + "@babel/runtime": "^7.18.3", + "@popperjs/core": "^2.11.5", + "react-popper": "^2.3.0" } }, "react-query": { diff --git a/package.json b/package.json index 88f84a0..6c46e49 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "react-loader-spinner": "^6.0.0-0", "react-loading-skeleton": "^3.1.0", "react-modal": "^3.15.1", + "react-popper-tooltip": "^4.4.2", "react-query": "^3.35.0", "react-redux": "^8.0.0", "react-router-dom": "^6.3.0", diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx index 7bf748b..180a85f 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx +++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx @@ -8,6 +8,8 @@ import { useReduxEffect } from 'src/utils/hooks/useReduxEffect'; import { WalletKeyType } from './LinkedAccountsCard' import { useAppDispatch } from "src/utils/hooks"; import { openModal } from "src/redux/features/modals.slice"; +import 'react-popper-tooltip/dist/styles.css'; +import { usePopperTooltip } from 'react-popper-tooltip'; interface Props { walletKey: WalletKeyType, @@ -25,6 +27,15 @@ export default function WalletKey({ walletKey, onRename, onDelete }: Props) { const dispatch = useAppDispatch(); + + const { + getArrowProps, + getTooltipProps, + setTooltipRef, + setTriggerRef, + visible, + } = usePopperTooltip(); + const CONFIRM_DELETE_WALLET = useMemo(() => createAction<{ confirmed?: boolean }>(`CONFIRM_DELETE_WALLET_${walletKey.key.slice(0, 10)}`)({}), [walletKey.key]) const saveNameChanges = () => { @@ -86,9 +97,21 @@ export default function WalletKey({ walletKey, onRename, onDelete }: Props) { className='text-red-500 shrink-0 mx-auto' onClick={() => handleDelete()} > - : - (Current) + : <> + (Current) + {visible && ( +
+
+ Tooltip +
+ )} + + } +
)