@dynamic-labs/sdk-react-core 0.19.4 → 0.19.6

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AndroidIcon, BraveIcon, ChromeIcon, EdgeIcon, FirefoxIcon, AppleIcon, OperaIcon, SafariIcon } from '@dynamic-labs/iconic';
-import 'react';
 import { Typography } from '../../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../../shared/logger.js';
@@ -17,6 +17,7 @@ import '../../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../../../../utils/functions/classNames/classNames.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -67,6 +68,7 @@ const mapPasskeyProviderToIcon = {
 };
 const PasskeyCard = ({ passkey }) => {
     const { t } = useTranslation();
+    const [showTooltip, setShowTooltip] = useState(false);
     const { value: timeSinceValue, unit: timeSinceUnit } = getTimeSince(passkey.createdAt);
     const PasskeyProviderIcon = () => {
         if (!passkey.userAgent)
@@ -84,11 +86,19 @@ const PasskeyCard = ({ passkey }) => {
             return null;
         return t(`dyn_manage_passkeys.passkey_providers.${provider}`);
     };
-    return (jsxs("div", { className: 'passkey-card', children: [jsxs("div", { className: 'passkey-card__info', children: [jsx("div", { className: 'passkey-card__info__icon', children: jsx(PasskeyProviderIcon, {}) }), jsxs("div", { className: 'passkey-card__info__text', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: shortenEmail(passkey.alias, {
-                                    breakpoint: 12,
-                                    cutEnd: 4,
-                                    cutStart: 4,
-                                }) }), getPasskeyProviderName() && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsx("div", { className: 'passkey-card__date', children: jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
+    const handleShowTooltip = () => {
+        setShowTooltip(true);
+        setTimeout(() => {
+            setShowTooltip(false);
+        }, 2000);
+    };
+    return (jsxs("div", { className: 'passkey-card', children: [jsxs("div", { className: 'passkey-card__info', children: [jsx("div", { className: 'passkey-card__info__icon', "data-testId": 'provider-icon', children: jsx(PasskeyProviderIcon, {}) }), jsxs("div", { className: 'passkey-card__info__text', children: [jsxs(Typography, { "data-testid": 'passkey-alias', variant: 'body_normal', color: 'primary', title: passkey.alias, onClick: handleShowTooltip, children: [shortenEmail(passkey.alias, {
+                                        breakpoint: 12,
+                                        cutEnd: 4,
+                                        cutStart: 4,
+                                    }), jsx("p", { className: classNames('passkey-card__info__tooltip', {
+                                            'passkey-card__info__tooltip--visible': showTooltip,
+                                        }), children: passkey.alias })] }), getPasskeyProviderName() && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsx("div", { className: 'passkey-card__date', children: jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
 };
 
 export { PasskeyCard };

package/src/lib/utils/functions/getEnabledProviders/index.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const getEnabledProviders = (providers) => { var _a; return (_a = providers === null || providers === void 0 ? void 0 : providers.filter(({ enabledAt }) => Boolean(enabledAt))) !== null && _a !== void 0 ? _a : []; };
-
-exports.getEnabledProviders = getEnabledProviders;

package/src/lib/utils/functions/getEnabledProviders/index.js

@@ -1,3 +0,0 @@
-const getEnabledProviders = (providers) => { var _a; return (_a = providers === null || providers === void 0 ? void 0 : providers.filter(({ enabledAt }) => Boolean(enabledAt))) !== null && _a !== void 0 ? _a : []; };
-
-export { getEnabledProviders };