@dynamic-labs/sdk-react-core 4.0.0-alpha.20 → 4.0.0-alpha.22

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [4.0.0-alpha.22](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.21...v4.0.0-alpha.22) (2024-10-30)
+
+
+### Features
+
+* **QNTM-522:** add wallet details card ([#7239](https://github.com/dynamic-labs/dynamic-auth/issues/7239)) ([0181c87](https://github.com/dynamic-labs/dynamic-auth/commit/0181c8727af575620525b8ea47b196945c347846))
+
+
+### Bug Fixes
+
+* update check for wallet provider event listeners support ([#7303](https://github.com/dynamic-labs/dynamic-auth/issues/7303)) ([c5f3766](https://github.com/dynamic-labs/dynamic-auth/commit/c5f376691c87a0999991e477f9acd07eed4774aa))
+
+## [4.0.0-alpha.21](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.20...v4.0.0-alpha.21) (2024-10-30)
+
 ## [4.0.0-alpha.20](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.19...v4.0.0-alpha.20) (2024-10-30)
 
 ## [4.0.0-alpha.19](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.18...v4.0.0-alpha.19) (2024-10-29)

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.0.0-alpha.20";
+var version = "4.0.0-alpha.22";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.559",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.0.0-alpha.20";
+var version = "4.0.0-alpha.22";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.559",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.22",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.559",
     "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -12,16 +12,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "4.0.0-alpha.20",
-    "@dynamic-labs/iconic": "4.0.0-alpha.20",
-    "@dynamic-labs/logger": "4.0.0-alpha.20",
-    "@dynamic-labs/multi-wallet": "4.0.0-alpha.20",
-    "@dynamic-labs/rpc-providers": "4.0.0-alpha.20",
-    "@dynamic-labs/store": "4.0.0-alpha.20",
-    "@dynamic-labs/types": "4.0.0-alpha.20",
-    "@dynamic-labs/utils": "4.0.0-alpha.20",
-    "@dynamic-labs/wallet-book": "4.0.0-alpha.20",
-    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.20",
+    "@dynamic-labs/assert-package-version": "4.0.0-alpha.22",
+    "@dynamic-labs/iconic": "4.0.0-alpha.22",
+    "@dynamic-labs/logger": "4.0.0-alpha.22",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.22",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.22",
+    "@dynamic-labs/store": "4.0.0-alpha.22",
+    "@dynamic-labs/types": "4.0.0-alpha.22",
+    "@dynamic-labs/utils": "4.0.0-alpha.22",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.22",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.22",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/Button/Button.cjs

@@ -9,7 +9,7 @@ var React = require('react');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var spinner = require('../Spinner/spinner.cjs');
 
-const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', children, feedback, expanded, dataTestId, disabled = false, showInternalLoading = true, loading = false, onClick, type, startSlot, endSlot, }) => {
+const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', buttonRef, children, feedback, expanded, dataTestId, disabled = false, showInternalLoading = true, loading = false, onClick, type, startSlot, endSlot, }) => {
     const [internalButtonLoading, setInternalButtonLoading] = React.useState(false);
     const [isFeedbackVisible, setIsFeedbackVisible] = React.useState(false);
     const buttonVariantClassNameMap = {
@@ -54,7 +54,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     });
     const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startSlot && jsxRuntime.jsx("div", { className: 'button__start-slot', children: startSlot }), (feedback || children) &&
                 (isFeedbackVisible && feedback ? feedback : children), endSlot && jsxRuntime.jsx("div", { className: 'button__end-slot', children: endSlot })] }));
-    return (jsxRuntime.jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) })), buttonContent] }));
+    return (jsxRuntime.jsxs("button", { type: type, ref: buttonRef, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) })), buttonContent] }));
 };
 
 exports.Button = Button;

package/src/lib/components/Button/Button.d.ts

@@ -1,10 +1,11 @@
-import { ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode } from 'react';
+import { ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode, RefObject } from 'react';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'brand-primary';
 type ButtonPadding = 'small' | 'medium' | 'large' | 'none' | 'default' | 'login-screen-height';
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     buttonClassName?: string;
     buttonPadding?: ButtonPadding;
     buttonVariant?: ButtonVariant;
+    buttonRef?: RefObject<HTMLButtonElement>;
     dataTestId?: string;
     disabled?: boolean;
     endSlot?: JSX.Element;

package/src/lib/components/Button/Button.js

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Spinner } from '../Spinner/spinner.js';
 
-const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', children, feedback, expanded, dataTestId, disabled = false, showInternalLoading = true, loading = false, onClick, type, startSlot, endSlot, }) => {
+const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', buttonRef, children, feedback, expanded, dataTestId, disabled = false, showInternalLoading = true, loading = false, onClick, type, startSlot, endSlot, }) => {
     const [internalButtonLoading, setInternalButtonLoading] = useState(false);
     const [isFeedbackVisible, setIsFeedbackVisible] = useState(false);
     const buttonVariantClassNameMap = {
@@ -50,7 +50,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     });
     const buttonContent = (jsxs(Fragment, { children: [startSlot && jsx("div", { className: 'button__start-slot', children: startSlot }), (feedback || children) &&
                 (isFeedbackVisible && feedback ? feedback : children), endSlot && jsx("div", { className: 'button__end-slot', children: endSlot })] }));
-    return (jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsx(Spinner, { className: 'button__spinner' }) })), buttonContent] }));
+    return (jsxs("button", { type: type, ref: buttonRef, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsx(Spinner, { className: 'button__spinner' }) })), buttonContent] }));
 };
 
 export { Button };

package/src/lib/components/CopyButton/CopyButton.cjs

@@ -12,16 +12,16 @@ var Tooltip = require('../Tooltip/Tooltip.cjs');
 
 const CopyButton = ({ children, className = '', textToCopy, onClick, variant = 'text', copykey, buttonPadding = 'small', buttonVariant = 'primary', buttonClassName = '', startSlot, disabled, }) => {
     const [copied, setCopied] = React.useState(false);
+    const buttonRef = React.useRef(null);
     const copyToClipboard = () => {
         navigator.clipboard.writeText(textToCopy);
         setCopied(true);
         onClick === null || onClick === void 0 ? void 0 : onClick();
+        setTimeout(() => {
+            setCopied(false);
+        }, 5000);
     };
-    const CopyButtonTooltip = () => (jsxRuntime.jsx(Tooltip.Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }));
-    if (variant === 'text') {
-        return (jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), copykey: copykey, disabled: disabled, children: jsxRuntime.jsx(CopyButtonTooltip, {}) }));
-    }
-    return (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, buttonPadding: buttonPadding, buttonVariant: buttonVariant, buttonClassName: buttonClassName, onClick: () => copyToClipboard(), copykey: copykey, startSlot: startSlot, disabled: disabled, children: jsxRuntime.jsx(CopyButtonTooltip, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [variant === 'text' ? (jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), copykey: copykey, disabled: disabled, children: children })) : (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonRef: buttonRef, expanded: true, buttonPadding: buttonPadding, buttonVariant: buttonVariant, buttonClassName: buttonClassName, onClick: () => copyToClipboard(), copykey: copykey, startSlot: startSlot, disabled: disabled, children: children })), jsxRuntime.jsx(Tooltip.Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', targetRef: buttonRef })] }));
 };
 
 exports.CopyButton = CopyButton;

package/src/lib/components/CopyButton/CopyButton.js

@@ -1,6 +1,6 @@
 'use client'
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { TextButton } from '../TextButton/TextButton.js';
 import { TypographyButton } from '../TypographyButton/TypographyButton.js';
@@ -8,16 +8,16 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 
 const CopyButton = ({ children, className = '', textToCopy, onClick, variant = 'text', copykey, buttonPadding = 'small', buttonVariant = 'primary', buttonClassName = '', startSlot, disabled, }) => {
     const [copied, setCopied] = useState(false);
+    const buttonRef = useRef(null);
     const copyToClipboard = () => {
         navigator.clipboard.writeText(textToCopy);
         setCopied(true);
         onClick === null || onClick === void 0 ? void 0 : onClick();
+        setTimeout(() => {
+            setCopied(false);
+        }, 5000);
     };
-    const CopyButtonTooltip = () => (jsx(Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }));
-    if (variant === 'text') {
-        return (jsx(TextButton, { className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), copykey: copykey, disabled: disabled, children: jsx(CopyButtonTooltip, {}) }));
-    }
-    return (jsx(TypographyButton, { expanded: true, buttonPadding: buttonPadding, buttonVariant: buttonVariant, buttonClassName: buttonClassName, onClick: () => copyToClipboard(), copykey: copykey, startSlot: startSlot, disabled: disabled, children: jsx(CopyButtonTooltip, {}) }));
+    return (jsxs(Fragment, { children: [variant === 'text' ? (jsx(TextButton, { className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), copykey: copykey, disabled: disabled, children: children })) : (jsx(TypographyButton, { buttonRef: buttonRef, expanded: true, buttonPadding: buttonPadding, buttonVariant: buttonVariant, buttonClassName: buttonClassName, onClick: () => copyToClipboard(), copykey: copykey, startSlot: startSlot, disabled: disabled, children: children })), jsx(Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', targetRef: buttonRef })] }));
 };
 
 export { CopyButton };

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -62,6 +62,7 @@ var MenuList = require('../MenuList/MenuList/MenuList.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
@@ -79,7 +80,6 @@ require('@hcaptcha/react-hcaptcha');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../store/state/sendBalances.cjs');
-require('../OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -58,6 +58,7 @@ import { MenuList } from '../MenuList/MenuList/MenuList.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
@@ -75,7 +76,6 @@ import '@hcaptcha/react-hcaptcha';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../store/state/sendBalances.js';
-import '../OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -86,21 +86,37 @@ require('../../../index.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
-const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) => {
+/** Map from useHover React handlers to JS ones */
+const handlerMapping = {
+    onMouseDown: 'mousedown',
+    onMouseEnter: 'mouseenter',
+    onMouseLeave: 'mouseleave',
+    onMouseUp: 'mouseup',
+};
+/**
+ * Sets up a Tooltip that appears on hover
+ *
+ * Note: Prefer to use targetRef instead of nesting children!
+ * Children of Tooltip will eventually replace content.
+ */
+const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, targetRef, }) => {
     const { createRootElement } = useElementById.useElementById();
     const portalRoot = createRootElement('dynamic-tooltips');
     const [vector, setVector] = React.useState([0, 0]);
-    const childrenRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
+    /** If targetRef is not set, fall back to this ref */
+    const childrenWrapperRef = React.useRef(null);
+    /** Centers the tooltip to top-center of the target */
     const calcPosition = React.useCallback(() => {
-        if (childrenRef.current) {
-            const childrenBounding = childrenRef.current.getBoundingClientRect();
+        const ref = targetRef !== null && targetRef !== void 0 ? targetRef : childrenWrapperRef;
+        if (ref.current) {
+            const childrenBounding = ref.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
                 childrenBounding.top - 6, //add 6px margin over the children
             ]);
         }
-    }, []);
+    }, [targetRef]);
     const [, childrenHoverHandlers] = useHover.useHover({
         falseOnClick: true,
         initialValue: false,
@@ -123,9 +139,25 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) =
             window.removeEventListener('resize', resizeListener);
         };
     }, [calcPosition]);
+    // Set handlers manually
+    React.useEffect(() => {
+        var _a;
+        const element = (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _a !== void 0 ? _a : childrenWrapperRef.current;
+        if (element) {
+            for (const handler in childrenHoverHandlers) {
+                element.addEventListener(handlerMapping[handler], childrenHoverHandlers[handler]);
+            }
+            return () => {
+                for (const handler in childrenHoverHandlers) {
+                    element.removeEventListener(handlerMapping[handler], childrenHoverHandlers[handler]);
+                }
+            };
+        }
+        return undefined;
+    }, [targetRef, childrenHoverHandlers]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: index.tooltipZIndex, children: jsxRuntime.jsxs("div", { "data-testid": 'dynamicTooltip', className: classNames.classNames('dynamic-tooltip', {
                         'dynamic-tooltip--visible': visible,
-                    }, className), style: { left: vector[0], top: vector[1] }, copykey: copykey, children: [content, jsxRuntime.jsx(tooltipArrow.ReactComponent, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), jsxRuntime.jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
+                    }, className), style: { left: vector[0], top: vector[1] }, copykey: copykey, children: [content, jsxRuntime.jsx(tooltipArrow.ReactComponent, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), targetRef === undefined && (jsxRuntime.jsx(Tag, { ref: childrenWrapperRef, children: children }))] }));
 };
 
 exports.Tooltip = Tooltip;

package/src/lib/components/Tooltip/Tooltip.d.ts

@@ -1,8 +1,23 @@
-import { FC, PropsWithChildren, ReactElement, ElementType } from 'react';
+import { FC, PropsWithChildren, ReactElement, ElementType, RefObject } from 'react';
 import { CopyKey } from '../../shared';
 export type TooltipProps = {
+    /** DEPRECATED: Generate an element to use as a wrapper for children */
     as?: ElementType;
+    /** Classnames string */
     className?: string;
+    /**
+     * Content rendered inside the Tooltip
+     *
+     * Note that this will eventually be replaced by children
+     */
     content: string | ReactElement;
+    /** If set, use this element as the ref instead */
+    targetRef?: RefObject<HTMLElement>;
 } & CopyKey;
+/**
+ * Sets up a Tooltip that appears on hover
+ *
+ * Note: Prefer to use targetRef instead of nesting children!
+ * Children of Tooltip will eventually replace content.
+ */
 export declare const Tooltip: FC<PropsWithChildren<TooltipProps>>;

package/src/lib/components/Tooltip/Tooltip.js

@@ -82,21 +82,37 @@ import '../../../index.js';
 import '../../store/state/tokenBalances.js';
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
-const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) => {
+/** Map from useHover React handlers to JS ones */
+const handlerMapping = {
+    onMouseDown: 'mousedown',
+    onMouseEnter: 'mouseenter',
+    onMouseLeave: 'mouseleave',
+    onMouseUp: 'mouseup',
+};
+/**
+ * Sets up a Tooltip that appears on hover
+ *
+ * Note: Prefer to use targetRef instead of nesting children!
+ * Children of Tooltip will eventually replace content.
+ */
+const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, targetRef, }) => {
     const { createRootElement } = useElementById();
     const portalRoot = createRootElement('dynamic-tooltips');
     const [vector, setVector] = useState([0, 0]);
-    const childrenRef = useRef(null);
     const [visible, setVisible] = useState(false);
+    /** If targetRef is not set, fall back to this ref */
+    const childrenWrapperRef = useRef(null);
+    /** Centers the tooltip to top-center of the target */
     const calcPosition = useCallback(() => {
-        if (childrenRef.current) {
-            const childrenBounding = childrenRef.current.getBoundingClientRect();
+        const ref = targetRef !== null && targetRef !== void 0 ? targetRef : childrenWrapperRef;
+        if (ref.current) {
+            const childrenBounding = ref.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
                 childrenBounding.top - 6, //add 6px margin over the children
             ]);
         }
-    }, []);
+    }, [targetRef]);
     const [, childrenHoverHandlers] = useHover({
         falseOnClick: true,
         initialValue: false,
@@ -119,9 +135,25 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) =
             window.removeEventListener('resize', resizeListener);
         };
     }, [calcPosition]);
+    // Set handlers manually
+    useEffect(() => {
+        var _a;
+        const element = (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _a !== void 0 ? _a : childrenWrapperRef.current;
+        if (element) {
+            for (const handler in childrenHoverHandlers) {
+                element.addEventListener(handlerMapping[handler], childrenHoverHandlers[handler]);
+            }
+            return () => {
+                for (const handler in childrenHoverHandlers) {
+                    element.removeEventListener(handlerMapping[handler], childrenHoverHandlers[handler]);
+                }
+            };
+        }
+        return undefined;
+    }, [targetRef, childrenHoverHandlers]);
     return (jsxs(Fragment, { children: [createPortal(jsx(ShadowDOM, { zIndex: tooltipZIndex, children: jsxs("div", { "data-testid": 'dynamicTooltip', className: classNames('dynamic-tooltip', {
                         'dynamic-tooltip--visible': visible,
-                    }, className), style: { left: vector[0], top: vector[1] }, copykey: copykey, children: [content, jsx(SvgTooltipArrow, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
+                    }, className), style: { left: vector[0], top: vector[1] }, copykey: copykey, children: [content, jsx(SvgTooltipArrow, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), targetRef === undefined && (jsx(Tag, { ref: childrenWrapperRef, children: children }))] }));
 };
 
 export { Tooltip };

package/src/lib/components/index.d.ts

@@ -33,6 +33,7 @@ export * from './ModalCard';
 export * from './ModalHeader';
 export * from './ModalHeaderBanner';
 export * from './NeedHelpSection';
+export * from './OverlayCard';
 export * from './OTPVerificationView';
 export * from './PasskeyCreatedSuccessBanner';
 export * from './PhoneNumberField';

package/src/lib/locale/en/translation.cjs

@@ -36,12 +36,42 @@ const translation = {
           testnet_warning: 'A testnet network has been selected. Please only use testnet funds or they will be lost.',
           ordinals_address: 'Ordinals address',
           payment_address: 'Payment address',
-       }
+          balance: 'Balance',
+          options: {
+            copy_ens: 'Copy ENS',
+            view_address: 'View address',
+            settings: 'Wallet settings',
+            export: 'Export private keys',
+          },
+        }
      */
     dyn_active_wallet_info: {
         testnet_warning: 'A testnet network has been selected. Please only use testnet funds or they will be lost.',
         ordinals_address: 'Ordinals address',
         payment_address: 'Payment address',
+        balance: 'Balance',
+        options: {
+            copy_ens: 'Copy ENS',
+            view_address: 'View address',
+            settings: 'Wallet settings',
+            export: 'Export private keys',
+        },
+    },
+    /**
+     * @description copy keys for wallet details card
+     * @default
+     * {
+          header: 'Wallet Details',
+          address: 'Address',
+          copy: 'Copy',
+          copied: 'Copied!',
+       }
+     */
+    dyn_wallet_details_card: {
+        header: 'Wallet Details',
+        address: 'Address',
+        copy: 'Copy',
+        copied: 'Copied!',
     },
     /**
      * @description copy keys for add network view

package/src/lib/locale/en/translation.d.ts

@@ -30,12 +30,42 @@ export declare const translation: {
           testnet_warning: 'A testnet network has been selected. Please only use testnet funds or they will be lost.',
           ordinals_address: 'Ordinals address',
           payment_address: 'Payment address',
-       }
+          balance: 'Balance',
+          options: {
+            copy_ens: 'Copy ENS',
+            view_address: 'View address',
+            settings: 'Wallet settings',
+            export: 'Export private keys',
+          },
+        }
      */
     dyn_active_wallet_info: {
         testnet_warning: string;
         ordinals_address: string;
         payment_address: string;
+        balance: string;
+        options: {
+            copy_ens: string;
+            view_address: string;
+            settings: string;
+            export: string;
+        };
+    };
+    /**
+     * @description copy keys for wallet details card
+     * @default
+     * {
+          header: 'Wallet Details',
+          address: 'Address',
+          copy: 'Copy',
+          copied: 'Copied!',
+       }
+     */
+    dyn_wallet_details_card: {
+        header: string;
+        address: string;
+        copy: string;
+        copied: string;
     };
     /**
      * @description copy keys for add network view

package/src/lib/locale/en/translation.js

@@ -32,12 +32,42 @@ const translation = {
           testnet_warning: 'A testnet network has been selected. Please only use testnet funds or they will be lost.',
           ordinals_address: 'Ordinals address',
           payment_address: 'Payment address',
-       }
+          balance: 'Balance',
+          options: {
+            copy_ens: 'Copy ENS',
+            view_address: 'View address',
+            settings: 'Wallet settings',
+            export: 'Export private keys',
+          },
+        }
      */
     dyn_active_wallet_info: {
         testnet_warning: 'A testnet network has been selected. Please only use testnet funds or they will be lost.',
         ordinals_address: 'Ordinals address',
         payment_address: 'Payment address',
+        balance: 'Balance',
+        options: {
+            copy_ens: 'Copy ENS',
+            view_address: 'View address',
+            settings: 'Wallet settings',
+            export: 'Export private keys',
+        },
+    },
+    /**
+     * @description copy keys for wallet details card
+     * @default
+     * {
+          header: 'Wallet Details',
+          address: 'Address',
+          copy: 'Copy',
+          copied: 'Copied!',
+       }
+     */
+    dyn_wallet_details_card: {
+        header: 'Wallet Details',
+        address: 'Address',
+        copy: 'Copy',
+        copied: 'Copied!',
     },
     /**
      * @description copy keys for add network view

package/src/lib/shared/assets/eye-outline.cjs

@@ -0,0 +1,54 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgEyeOutline = function SvgEyeOutline(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.512 12a9.004 9.004 0 0 0 16.977 0 9.004 9.004 0 0 0-16.977 0Zm-2.008-.3C2.906 7.238 7.074 4 12 4c4.927 0 9.095 3.238 10.497 7.7a1 1 0 0 1 0 .6C21.095 16.762 16.927 20 12 20c-4.927 0-9.095-3.238-10.497-7.7a1 1 0 0 1 0-.6ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z",
+    fill: "#ABACB2"
+  })));
+};
+
+exports.ReactComponent = SvgEyeOutline;

package/src/lib/shared/assets/eye-outline.js

@@ -0,0 +1,30 @@
+'use client'
+import * as React from 'react';
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgEyeOutline = function SvgEyeOutline(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.512 12a9.004 9.004 0 0 0 16.977 0 9.004 9.004 0 0 0-16.977 0Zm-2.008-.3C2.906 7.238 7.074 4 12 4c4.927 0 9.095 3.238 10.497 7.7a1 1 0 0 1 0 .6C21.095 16.762 16.927 20 12 20c-4.927 0-9.095-3.238-10.497-7.7a1 1 0 0 1 0-.6ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z",
+    fill: "#ABACB2"
+  })));
+};
+
+export { SvgEyeOutline as ReactComponent };

package/src/lib/shared/assets/index.d.ts

@@ -36,6 +36,7 @@ export { ReactComponent as ExportPrivateKeyIcon } from './export-private-key.svg
 export { ReactComponent as ExportRecoveryPhraseIcon } from './export-recovery-phrase.svg';
 export { ReactComponent as ExternalLinkIcon } from './externalLink.svg';
 export { ReactComponent as EyeOffIcon } from './eye-off-icon.svg';
+export { ReactComponent as EyeOutlineIcon } from './eye-outline.svg';
 export { ReactComponent as ArrowCircleRight } from './arrow-circle-right.svg';
 export { ReactComponent as FaceIdIcon } from './face-id.svg';
 export { ReactComponent as WarningRedIcon } from './warning-red.svg';