@dynamic-labs/sdk-react-core 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/lib/widgets/DynamicWidget/prompts/QrCodeModalView/QrCodeModalView.cjs

@@ -60,10 +60,10 @@ require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
-var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 
 const QrCodeModalView = ({ walletId }) => {
     var _a, _b;

package/src/lib/widgets/DynamicWidget/prompts/QrCodeModalView/QrCodeModalView.js

@@ -56,10 +56,10 @@ import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { TextButton } from '../../../../components/TextButton/TextButton.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
-import { TextButton } from '../../../../components/TextButton/TextButton.js';
 
 const QrCodeModalView = ({ walletId }) => {
     var _a, _b;

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactI18next = require('react-i18next');
 var iconic = require('@dynamic-labs/iconic');
-require('react');
+var classNames = require('../../../../../utils/functions/classNames/classNames.cjs');
 require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../../../config/ApiEndpoint.cjs');
@@ -71,6 +72,7 @@ const mapPasskeyProviderToIcon = {
 };
 const PasskeyCard = ({ passkey }) => {
     const { t } = reactI18next.useTranslation();
+    const [showTooltip, setShowTooltip] = React.useState(false);
     const { value: timeSinceValue, unit: timeSinceUnit } = getTimeSince.getTimeSince(passkey.createdAt);
     const PasskeyProviderIcon = () => {
         if (!passkey.userAgent)
@@ -88,11 +90,19 @@ const PasskeyCard = ({ passkey }) => {
             return null;
         return t(`dyn_manage_passkeys.passkey_providers.${provider}`);
     };
-    return (jsxRuntime.jsxs("div", { className: 'passkey-card', children: [jsxRuntime.jsxs("div", { className: 'passkey-card__info', children: [jsxRuntime.jsx("div", { className: 'passkey-card__info__icon', children: jsxRuntime.jsx(PasskeyProviderIcon, {}) }), jsxRuntime.jsxs("div", { className: 'passkey-card__info__text', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: shortenEmail.shortenEmail(passkey.alias, {
-                                    breakpoint: 12,
-                                    cutEnd: 4,
-                                    cutStart: 4,
-                                }) }), getPasskeyProviderName() && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsxRuntime.jsx("div", { className: 'passkey-card__date', children: jsxRuntime.jsxs(Typography.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 (jsxRuntime.jsxs("div", { className: 'passkey-card', children: [jsxRuntime.jsxs("div", { className: 'passkey-card__info', children: [jsxRuntime.jsx("div", { className: 'passkey-card__info__icon', "data-testId": 'provider-icon', children: jsxRuntime.jsx(PasskeyProviderIcon, {}) }), jsxRuntime.jsxs("div", { className: 'passkey-card__info__text', children: [jsxRuntime.jsxs(Typography.Typography, { "data-testid": 'passkey-alias', variant: 'body_normal', color: 'primary', title: passkey.alias, onClick: handleShowTooltip, children: [shortenEmail.shortenEmail(passkey.alias, {
+                                        breakpoint: 12,
+                                        cutEnd: 4,
+                                        cutStart: 4,
+                                    }), jsxRuntime.jsx("p", { className: classNames.classNames('passkey-card__info__tooltip', {
+                                            'passkey-card__info__tooltip--visible': showTooltip,
+                                        }), children: passkey.alias })] }), getPasskeyProviderName() && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsxRuntime.jsx("div", { className: 'passkey-card__date', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
 };
 
 exports.PasskeyCard = PasskeyCard;

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

@@ -1,7 +1,8 @@
 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 { classNames } from '../../../../../utils/functions/classNames/classNames.js';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../../../config/ApiEndpoint.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 };