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

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 
+## [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.21";
 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.21";
 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.21",
   "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.21",
+    "@dynamic-labs/iconic": "4.0.0-alpha.21",
+    "@dynamic-labs/logger": "4.0.0-alpha.21",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.21",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.21",
+    "@dynamic-labs/store": "4.0.0-alpha.21",
+    "@dynamic-labs/types": "4.0.0-alpha.21",
+    "@dynamic-labs/utils": "4.0.0-alpha.21",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.21",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.21",
     "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/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/utils/hooks/useHover/useHover.types.d.ts

@@ -1,8 +1,5 @@
 export type MouseEventHandlers = {
-    onMouseDown: () => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    onMouseUp: () => void;
+    [key: string]: VoidFunction;
 };
 type HoverHookArgs = {
     initialValue?: boolean;